從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

3 評(píng)論 4144 瀏覽 25 收藏 9 分鐘

編輯導(dǎo)語(yǔ):智慧屏是布局智能家居場(chǎng)景的關(guān)鍵中樞,所以,它的存在非常重要。本篇文章中,作者從5個(gè)方面,從0到1的分享了智慧屏交互設(shè)計(jì)的方法。感興趣的小伙伴不妨來(lái)看看,說(shuō)不定能用上哦。

智慧屏的交互設(shè)計(jì)主要圍繞遙控器、語(yǔ)音交互、焦點(diǎn)三大組成部分。

首先智慧屏的操作是需要靠遙控器來(lái)控制的,隨著多端設(shè)備的協(xié)作應(yīng)用和發(fā)展,終端設(shè)備不再是單一的存在。

手機(jī)也能夠去連接智慧屏,充當(dāng)遙控器的作用。操作的場(chǎng)景也變得越來(lái)越豐富。

這篇文章主要將結(jié)合蘇寧智慧屏項(xiàng)目帶大家了解下智慧屏的遙控器控制和語(yǔ)音交互(VUI)。

智慧屏交互知識(shí)大綱:

  1. 硬件遙控器介紹
  2. 軟件遙控器介紹
  3. 智慧屏語(yǔ)音交互:遠(yuǎn)場(chǎng)語(yǔ)音、近場(chǎng)語(yǔ)音
  4. 焦點(diǎn)規(guī)范
  5. 走焦規(guī)則

一、硬件遙控器介紹

遙控器支持的交互操作方式分為點(diǎn)按、長(zhǎng)按兩種,在特別的場(chǎng)景下按鈕還會(huì)有一些隱藏功能。

比如全屏播放視頻內(nèi)容時(shí),方向鍵會(huì)控制調(diào)出很多視頻設(shè)置選項(xiàng)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

二、軟件遙控器介紹

軟件遙控器:手機(jī)端開(kāi)發(fā)的蘇寧智慧屏助手小程序與電視終端設(shè)備連接綁定,達(dá)到控制智慧屏的目的。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

三、智慧屏語(yǔ)音交互

Biu智慧屏語(yǔ)音模式分為近場(chǎng)語(yǔ)音和遠(yuǎn)場(chǎng)語(yǔ)音兩種模式,近場(chǎng)語(yǔ)音連接方式有兩種:

  1. 硬件遙控器通過(guò)藍(lán)牙與智慧屏配對(duì)連接
  2. 軟件遙控器通過(guò)進(jìn)入小程序輸入綁定碼綁定

近場(chǎng)語(yǔ)音操作方式:通過(guò)點(diǎn)按遙控器語(yǔ)音鍵(硬件或軟件遙控器)喚醒,遠(yuǎn)場(chǎng)語(yǔ)音通過(guò)后臺(tái)設(shè)置的指令關(guān)鍵詞進(jìn)行喚醒。

語(yǔ)音交互場(chǎng)景在全局任一界面。

1. 近場(chǎng)語(yǔ)音示例

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

2. 遠(yuǎn)場(chǎng)語(yǔ)音示例

遠(yuǎn)場(chǎng)語(yǔ)音通過(guò)語(yǔ)音說(shuō)出口令關(guān)鍵詞“小Biu小Biu”喚起語(yǔ)音模式,智慧屏?xí)M(jìn)行文字提示“我在”進(jìn)行反饋,之后用戶使用語(yǔ)音輸入任務(wù)指令。

四、焦點(diǎn)規(guī)范

智慧屏是依靠遙控器操作的設(shè)備,它通過(guò)焦點(diǎn)告知用戶目前聚焦的位置。

焦點(diǎn)需要有獨(dú)特的展現(xiàn)方式便于用戶去記憶。

除了簡(jiǎn)單的落焦放大或反色設(shè)計(jì)樣式外,可以通過(guò)更多動(dòng)態(tài)的的表現(xiàn)形式來(lái)突出,焦點(diǎn)樣式具有差異化也可以是智慧屏設(shè)計(jì)脫引而出。

1. 焦點(diǎn)樣式

智慧屏提供識(shí)別性較強(qiáng)的焦點(diǎn)樣式,使用戶能夠在長(zhǎng)時(shí)間不操作智慧屏的場(chǎng)景下依然能夠準(zhǔn)確高效的找到焦點(diǎn)的位置。

2. 焦點(diǎn)的動(dòng)效規(guī)則

焦點(diǎn)的放大規(guī)則遵循避免干擾用戶識(shí)別信息的原則,放大比例一定控制在合理范圍之內(nèi),保證焦點(diǎn)大小不遮擋附近的其他信息內(nèi)容。

焦點(diǎn)動(dòng)效:切換動(dòng)效(失焦:元素比例由大變小,落焦:元素比例由大變?。?、焦點(diǎn)呼吸動(dòng)效。

3. 焦點(diǎn)的狀態(tài)

焦點(diǎn)分為正常態(tài)、獲焦態(tài)、激活態(tài)、不可用狀態(tài)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

五、走焦規(guī)則

走焦規(guī)則主要是焦點(diǎn)移動(dòng)(定焦)、就近、記憶等規(guī)則。

1. 橫向移動(dòng)規(guī)則

橫向滾動(dòng)焦點(diǎn)只可以左右移動(dòng),蘇寧智慧屏橫向走焦,焦點(diǎn)只能左右方向進(jìn)行移動(dòng)。

移動(dòng)盡頭時(shí),不可走焦,會(huì)有橫向回彈特效。

(ps:小米智慧屏可斜向走焦,當(dāng)焦點(diǎn)從第一排第一個(gè)向右移動(dòng)至最右邊時(shí),再向右移動(dòng),焦點(diǎn)會(huì)自動(dòng)落在第二排第一個(gè)內(nèi)容上,這個(gè)交互的選擇在特定場(chǎng)景下更加靈活)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

2. 橫向定焦規(guī)則

頻道頁(yè)簽焦點(diǎn)向右走焦,焦點(diǎn)向右移動(dòng)至頻道導(dǎo)航的2/3處時(shí), 焦點(diǎn)固定且后續(xù)內(nèi)容持續(xù)向左滾動(dòng)。

再次向左移動(dòng)至頻道導(dǎo)航的1/3處時(shí),焦點(diǎn)固定且后續(xù)內(nèi)容持續(xù)向右滾動(dòng)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

3. 豎向移動(dòng)規(guī)則

豎向滾動(dòng)焦點(diǎn)只可以上下移動(dòng),蘇寧智慧屏豎向走焦,焦點(diǎn)只能上下方向進(jìn)行移動(dòng)。

移動(dòng)至盡頭時(shí),不可走焦,會(huì)有豎向回彈特效。

4. 豎向定焦規(guī)則

卡片內(nèi)容定焦:焦點(diǎn)移動(dòng)至頁(yè)面中心時(shí),焦點(diǎn)固定,焦點(diǎn)下方內(nèi)容持續(xù)向上滾動(dòng)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

列表內(nèi)容定焦:當(dāng)列表內(nèi)容個(gè)數(shù)<=6時(shí),焦點(diǎn)移動(dòng)至頁(yè)面中心時(shí),焦點(diǎn)固定,焦點(diǎn)下方內(nèi)容持續(xù)向上滾動(dòng)。

當(dāng)列表內(nèi)容個(gè)數(shù)>6時(shí),焦點(diǎn)向下移動(dòng)至列表內(nèi)容區(qū)的2/3處時(shí), 焦點(diǎn)固定且后續(xù)內(nèi)容持續(xù)向上滾動(dòng)。

再次向上移動(dòng)至列表內(nèi)容區(qū)的1/3處時(shí),焦點(diǎn)固定且后續(xù)內(nèi)容持續(xù)向下滾動(dòng)。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

5. 就近和記憶規(guī)則

就近走焦:系統(tǒng)卡片類內(nèi)容走焦遵循就近走焦規(guī)則。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

記憶走焦規(guī)則:頁(yè)簽(列表)和卡片內(nèi)容之間的走焦。

如下圖:焦點(diǎn)從“體育”頁(yè)簽向下移動(dòng),默認(rèn)落焦在第一排第一個(gè)內(nèi)容,向上移動(dòng)或按返回鍵,系統(tǒng)會(huì)記憶之前的焦點(diǎn)移動(dòng)軌跡,會(huì)再次落焦點(diǎn)在“體育”頻道頁(yè)簽上。

從“0-1”了解智慧屏交互設(shè)計(jì)!你準(zhǔn)備好了么?

六、總結(jié)

以上就是我想和大家分享的關(guān)于智慧屏項(xiàng)目交互設(shè)計(jì)的內(nèi)容,只有了解清楚交互體系的基礎(chǔ)組成部分,才能在設(shè)計(jì)應(yīng)用過(guò)程中更加從容。

才能對(duì)于交互設(shè)計(jì)的創(chuàng)新做更深度的探索,希望這篇關(guān)于蘇寧智能屏幕交互設(shè)計(jì)部分的交互體系總結(jié)對(duì)大家有幫助。

注釋:項(xiàng)目版權(quán)歸屬蘇寧智能終端有限公司

 

本文由 @Q什伍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 智慧制造

    回復(fù)
  2. 這篇文章真的分析的挺好的呢,對(duì)于我這個(gè)小白竟然看懂啦,從0-1我應(yīng)該算是準(zhǔn)備好了。

    來(lái)自河南 回復(fù)
  3. 文章對(duì)智慧屏的交互設(shè)計(jì)做了一個(gè)很好的解說(shuō),現(xiàn)在家家?guī)缀醵加兄腔燮?,感覺(jué)看完能夠更好地控制智慧屏了

    來(lái)自廣東 回復(fù)