今天有請負(fù)責(zé)智能電視APP設(shè)計(jì)一年半的@卜卜胡蘿卜1992 給大家分享一些實(shí)用的設(shè)計(jì)經(jīng)驗(yàn)，科普智能電視用戶體驗(yàn)的基礎(chǔ)知識。接上一篇《電視用戶體驗(yàn)第一元素：焦點(diǎn)》繼續(xù)探討問題，本篇關(guān)于遙控器。

那種一大條上面都是按鈕的遙控器在互聯(lián)網(wǎng)電視時(shí)代已經(jīng)沒有地位，現(xiàn)在不管是哪個(gè)品牌的電視，其遙控器上都有必有的8個(gè)按鍵：上／下／左／右／確定／返回／菜單／主頁。一般廠商都會有自己單獨(dú)的快捷鍵，樂視有Le鍵，暴風(fēng)TV有Biu鍵，康佳有呼Bar鍵。音量加減鍵一般的遙控器也會有，頻道加減也比較常見。這篇文章主要講必有8個(gè)按鈕的常用功能，要設(shè)計(jì)好用的電視端App，一定要充分利用遙控器按鈕，同時(shí)，在給按鈕設(shè)計(jì)功能的時(shí)候還要考慮到基于安卓系統(tǒng)的操作習(xí)慣。因?yàn)閲鴥?nèi)電視OS是安卓一家獨(dú)大的，而且很多對智能電視沒有使用經(jīng)驗(yàn)的用戶，他對電視操作的認(rèn)知會處于手機(jī)與傳統(tǒng)電視之間，讓這種用戶最快上手的方法就是，電視的操作也要滿足安卓的習(xí)慣也要滿足傳統(tǒng)電視的習(xí)慣。

看一下愛樂視和暴風(fēng)TV的最新版遙控器：

下面開始說按鍵：

主頁鍵（home）

就是調(diào)出主頁Launcher。

至于這個(gè)Launcher是什么樣，那就各家各有不同啦，看一下樂視的懸浮式主頁，阿里盒子的懸浮式主頁，康佳YIUI 5.0的懸浮式主頁，這些懸浮式主頁本著不遮擋觀看內(nèi)容的設(shè)計(jì)理念，看似很流行。再看看暴風(fēng)TV和小米的Launcher，就是安安靜靜地全屏界面，暴風(fēng)TV的主界面尤其美美噠，還帶動畫呢。要是把各家的Launcher都分析一遍，那又是一篇文章啦，以后可以單開專題。至于懸浮式還是全屏式，各有各的喜好吧，試想有誰會在主頁瀏覽內(nèi)容的時(shí)候還看著后面的播放內(nèi)容呢？一心不可二用啊！不過呼出懸浮式主頁讓人感覺沒有離開界面，有一種穩(wěn)定感，視覺上也更豐富。

菜單鍵（Menu）

相當(dāng)于電腦的鼠標(biāo)右鍵，可以塞你想塞的東西在里面，合理的利用菜單鍵可以讓你的應(yīng)用操作更流暢，但需注意使用場景及調(diào)出內(nèi)容的一致性，不可有邏輯混淆同時(shí)還要有明顯的視覺提示，引導(dǎo)用戶調(diào)用Menu鍵的功能。

下面介紹一些電視OS和電視端主流App對菜單鍵的應(yīng)用：

在小米電視的主界面按Menu，調(diào)出主頁編輯模式，可以對主頁面的App進(jìn)行排序。這里我很好奇，既然調(diào)出來的菜單里只有一個(gè)功能，那為何還要設(shè)置一個(gè)一級菜單，直接按菜單鍵調(diào)出編輯模式不就行了？現(xiàn)在這樣豈不是增加了操作的復(fù)雜度？大家可以看到小米的主頁面為大家提供了應(yīng)用編組功能，這在手機(jī)上是一個(gè)基本功能，但在電視上這個(gè)需求大么？因?yàn)檫@是一個(gè)涉及到電視輸入的操作了，而且要操作很多步實(shí)現(xiàn)編組。

有很多類似的，在手機(jī)上的操作簡單的基本功能移植到電視上卻變的復(fù)雜無比的，對于這樣的功能，在做需求的時(shí)候要重點(diǎn)斟酌，我在AppleTV盒子上就沒發(fā)現(xiàn)什么編組功能，蘋果只維持了遙控器能做到的簡單的基本操作。那么問題又來了，主頁上不提供對App的分組功能，那App太多了找不到怎么辦？要如何管理應(yīng)用和主界面？……接著問題又來了，把App都展示在主界面上這種做法好么？適合電視么？大家有沒有發(fā)現(xiàn)，應(yīng)用于移動端觸屏操作的安卓系統(tǒng)，應(yīng)用到電視上的時(shí)候，很多基本操作都不再適用了。這真的需要好好考慮，我們的電視到底要創(chuàng)造怎樣的體驗(yàn)，在滿足大眾需求的同時(shí)，對專家用戶要滿足到什么程度，這在整個(gè)產(chǎn)品概念誕生的時(shí)候就要考慮清楚了，而大部分UX設(shè)計(jì)師都沒有機(jī)會去參與產(chǎn)品概念期的決策。始終覺得真正以用戶為中心的產(chǎn)品，在產(chǎn)品的各個(gè)階段都必須有一個(gè)體驗(yàn)界的大佬來把持，而不是其他的”bOSS“，不然所謂的關(guān)懷用戶，也只是徒有其表而已。

（有點(diǎn)小跑題，繼續(xù)回到菜單鍵！）

上圖是暴風(fēng)TV的Launcher，按菜單鍵調(diào)出的是更多操作界面入口。因?yàn)楸╋L(fēng)TV產(chǎn)品概念在誕生的時(shí)候，就本著“為觀影而生”以觀影為主的產(chǎn)品定位，所以整個(gè)電視系統(tǒng)的功能和操作都盡量保持簡潔。但是如果功能太少操作太簡單，又會因?yàn)檫^于傻瓜而流失掉一部分用戶，這里我的想法就是：基本功能必須簡單呈現(xiàn)，默認(rèn)設(shè)置必須滿足大部分用戶，而高級功能／復(fù)雜操作要隱藏的夠深，不會影響“傻瓜式”的操作。

這是當(dāng)貝市場的截圖，菜單鍵里隱藏著所有分類，并且有文字提示調(diào)出菜單功能。對于菜單鍵中包含的功能，如果是比較重要的，會影響到用戶尋找東西的，建議給出頁面文字提示，而類似于小米桌面管理應(yīng)用這樣的功能，不重要又復(fù)雜的操作，建議不要給出文字提示，讓他藏的深一些，讓非專家用戶都找不到，是比較好的做法。

視頻播放類各大App就不舉例說明了，無非是調(diào)出一些劇集啊，清晰度啊之類的調(diào)節(jié)選項(xiàng)。當(dāng)然還是有些App拒絕用菜單鍵，比如QQ音樂TV版，也許是本著所有功能都應(yīng)該被用戶看見的理念吧，但是加一個(gè)快捷鍵調(diào)出音樂列表也無可厚非啊，省了挪半天焦點(diǎn)到“播放列表”按鈕上的功夫啦！這里還要注意，在一個(gè)App中盡量保持菜單鍵功能的一致性，不要在一個(gè)版塊里是調(diào)出播放列表，而在另一個(gè)版塊里又是調(diào)出設(shè)置選項(xiàng)，既然追求邏輯完整漂亮，不給用戶造成認(rèn)知混淆，那就做到完美，設(shè)計(jì)師還是要有點(diǎn)處女座的追求的！

總之對菜單鍵的使用，已經(jīng)成為一種趨勢，合理的使用菜單鍵，會讓你的App更加靈活好用。

（注：在手機(jī)界，安卓的Menu鍵已經(jīng)漸漸消失。因?yàn)闆]有辦法告訴用戶一款應(yīng)用是否能夠使用Menu鍵的功能，而且很多廠商的手機(jī)上沒有Menu物理按鍵。但在電視和遙控器上就不存在這個(gè)問題，因?yàn)樽怨乓詠恚b控器上就一直有Menu鍵并且一直沒有要被去掉的趨勢。）

確定（ok）／返回（back）

關(guān)于這兩個(gè)按鍵的普通功能就不多說，關(guān)于Android系統(tǒng)Back鍵的傳統(tǒng)爭議，也不屬于這篇文章的范疇，關(guān)于電視的確定鍵和返回鍵的特殊應(yīng)用場景，我想通過下面這個(gè)案例來表述。

我們在電腦上用播放器看視頻的時(shí)候，鼠標(biāo)右鍵可以發(fā)現(xiàn)各種調(diào)解選項(xiàng)，這些設(shè)置也是專業(yè)播放設(shè)備必須的調(diào)解選項(xiàng)。雖然復(fù)雜的調(diào)解菜單可以有三級四級那么深，操作也不便捷，但是還是必須要有！那么我們就來優(yōu)化它的操操作體驗(yàn)吧。

上圖是小米電視視頻播放界面，按菜單鍵調(diào)出一級菜單圖1進(jìn)行設(shè)置調(diào)節(jié)，焦點(diǎn)在“播放設(shè)置”按鈕上點(diǎn)［確定］或［右］鍵，調(diào)出二級菜單圖2，此時(shí)按［返回］和［左］鍵，二級菜單都會收起回到圖1，繼續(xù)按［確定］或［左］鍵，則調(diào)出三級菜單如圖3，此時(shí)焦點(diǎn)為半選中狀態(tài)（上一篇文章中有介紹過這種狀態(tài)）焦點(diǎn)在“運(yùn)動模式”上按［確定］，會執(zhí)行更改，更改后再次按［確定］沒有反應(yīng)，按［返回］或［左］鍵，收起三級菜單回到圖2， 在圖2界面可以繼續(xù)進(jìn)入其他三級菜單，或者繼續(xù)按［返回］或［左］鍵回到一級菜單。

我們來理順一下這個(gè)過程中各個(gè)按鍵的功能：

1. 確定鍵： 調(diào)出下級菜單＋執(zhí)行更改＋沒有反應(yīng)
2. 返回鍵：收起本級菜單
3. 左鍵：收起本級菜單
4. 右鍵：展開下級菜單

很多人對于確定鍵“沒有反應(yīng)”這個(gè)功能，在第一次接觸的時(shí)候感到困惑，有些用戶的直接反應(yīng)就是“我調(diào)節(jié)完了，我按確定，你就把所有菜單給我隱藏啊！還在耽誤我看電視要我按那么多次猜消失菜單！”如果我們在設(shè)計(jì)的時(shí)候滿足了這部分用戶的需求，那么馬上就會有另一群用戶跳出來說“老子好不容易調(diào)出來個(gè)菜單，我調(diào)節(jié)完「圖像模式」還要調(diào)節(jié)「杜比音效」呢，你怎么就把菜單都給我收起來了呢！你這［確定鍵］又是展開下級菜單，又是收起所有菜單，到底要干嘛？”遇到這種情況的時(shí)候，就需要我們回歸到調(diào)出菜單這個(gè)操作的根本目標(biāo)了。調(diào)出菜單的目標(biāo)是為了調(diào)節(jié)設(shè)置，這時(shí)候觀影已經(jīng)成了次要目標(biāo)，既然調(diào)節(jié)設(shè)置是主要目的，那菜單逐步消失也是極其合理的，而第一個(gè)用戶的需求就是比較無理取鬧的了。做產(chǎn)品的人，對于需求要有足夠的敏感度，不能什么樣的需求都去滿足。

所以我們在給［確定］和［返回］設(shè)定具體場景跳轉(zhuǎn)的時(shí)候，要仔細(xì)考慮，保證操作合理的同時(shí)不失流暢性。我之所以把焦點(diǎn)的“焦點(diǎn)（獲取焦點(diǎn)即執(zhí)行）”與“半選中（只獲取焦點(diǎn)不展開內(nèi)容）”和遙控器的“確定”與“返回”摳的這么細(xì)，是因?yàn)檫@確實(shí)是會影響用戶操作的流暢度，也是交互人員與程序開發(fā)人員的認(rèn)知誤差區(qū)。遙控器上每按下一個(gè)按鍵，都要有相應(yīng)的程序反饋，而交互設(shè)計(jì)師在交互稿中，卻往往忘記了標(biāo)注清楚按鍵應(yīng)該對應(yīng)的操作，當(dāng)產(chǎn)品流到測試環(huán)節(jié)的時(shí)候，如果測試人員的意識與程序員的意識是一致的，那就不會有問題被提出，如果對不上就回提出問題，給到交互確認(rèn)，這時(shí)候就有交互人員的意識，程序人員的意識，測試人員的意識三種沒有落實(shí)到確切語言上的“意識上的爭論”，ohh～my god，你們在說什么能說明白點(diǎn)么？想想這種討論場景就覺得崩潰……

說完Menu鍵，就只剩「上／下／左／右」啦。他們的常規(guī)功能就是上下左右移動焦點(diǎn)。非常規(guī)功能一個(gè)一個(gè)的說一下。

上：從界面上邊調(diào)出菜單---對應(yīng)場景：有些視頻播放器的進(jìn)度條是在屏幕上邊的，這時(shí)上鍵可以觸發(fā)；類似于手機(jī)頂部菜單的下拉功能，按上鍵調(diào)出更多設(shè)置

展開菜單---------------對應(yīng)場景：當(dāng)子級菜單從父級菜單的上面展現(xiàn)出來的時(shí)候，這種快捷操作使人的手指與眼睛相對應(yīng)，操作更流暢。

收起菜單---------------對應(yīng)場景：當(dāng)子級菜單在父級菜單的下面，需要收起的時(shí)候。

執(zhí)行內(nèi)容更改（“獲取焦點(diǎn)即執(zhí)行”的焦點(diǎn)狀態(tài)）

下：從界面下邊調(diào)出菜單---對應(yīng)場景：有些界面的工具欄是在界面下邊調(diào)出的，這時(shí)下鍵可以觸發(fā)；類似于蘋果手機(jī)底部菜單的上拉功能，按下鍵調(diào)出更多設(shè)置

展開菜單，收起菜單，執(zhí)行更改與［上］鍵類比呼應(yīng)。

左／右：功能與上／下鍵類比呼應(yīng)。

本篇內(nèi)容只講了遙控器基本按鍵的交互，至于觸摸板滑動條等新操作，每家廠商設(shè)備不一樣，使用方法和場景也不一樣，沒辦法統(tǒng)一講解，但都是可以對應(yīng)到八個(gè)基本按鈕功能上面的。還有需要考慮不用遙控器用鼠標(biāo)操作電視的情況，那時(shí)候［鼠標(biāo)左］＝［確定鍵］，［鼠標(biāo)右］＝［返回鍵］，Menu鍵界面上有提示的時(shí)候支持點(diǎn)擊，沒有提示的時(shí)候，目前還不知道對應(yīng)的具體方法，可能是用［鼠標(biāo)中］來對應(yīng)，但畢竟用鼠標(biāo)操作電視的情況很少很奇葩，以后確認(rèn)了我會更新相關(guān)內(nèi)容。

「2016年設(shè)計(jì)趨勢」

1. 色彩篇：《2016流行這2種色彩！附優(yōu)秀網(wǎng)頁設(shè)計(jì)案例》
2. 設(shè)計(jì)篇：《再作印證！2016年網(wǎng)頁設(shè)計(jì)領(lǐng)域11個(gè)流行趨勢預(yù)測》
3. 電商網(wǎng)站篇：《不學(xué)就落伍咯！2016年電商設(shè)計(jì)的9個(gè)熱門趨勢（附案例）》
4. 插畫設(shè)計(jì)：《畫出個(gè)未來！幫你梳理2016年網(wǎng)頁插畫設(shè)計(jì)趨勢》

作者：@卜卜胡蘿卜1992

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com