終于有教程了！智能電視用戶體驗設計分享之遙控器篇

今天有請負責智能電視APP設計一年半的@卜卜胡蘿卜1992 給大家分享一些實用的設計經驗，科普智能電視用戶體驗的基礎知識。接上一篇《電視用戶體驗第一元素：焦點》繼續探討問題，本篇關于遙控器。

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

看一下愛樂視和暴風TV的最新版遙控器：

下面開始說按鍵：

主頁鍵（home）

就是調出主頁Launcher。

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

菜單鍵（Menu）

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

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

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

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

（有點小跑題，繼續回到菜單鍵！）

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

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

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

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

（注：在手機界，安卓的Menu鍵已經漸漸消失。因為沒有辦法告訴用戶一款應用是否能夠使用Menu鍵的功能，而且很多廠商的手機上沒有Menu物理按鍵。但在電視和遙控器上就不存在這個問題，因為自古以來，遙控器上就一直有Menu鍵并且一直沒有要被去掉的趨勢。）

確定（ok）／返回（back）

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

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

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

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

1. 確定鍵： 調出下級菜單＋執行更改＋沒有反應
2. 返回鍵：收起本級菜單
3. 左鍵：收起本級菜單
4. 右鍵：展開下級菜單

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

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

說完Menu鍵，就只剩「上／下／左／右」啦。他們的常規功能就是上下左右移動焦點。非常規功能一個一個的說一下。

上：從界面上邊調出菜單---對應場景：有些視頻播放器的進度條是在屏幕上邊的，這時上鍵可以觸發；類似于手機頂部菜單的下拉功能，按上鍵調出更多設置

展開菜單---------------對應場景：當子級菜單從父級菜單的上面展現出來的時候，這種快捷操作使人的手指與眼睛相對應，操作更流暢。

收起菜單---------------對應場景：當子級菜單在父級菜單的下面，需要收起的時候。

執行內容更改（“獲取焦點即執行”的焦點狀態）

下：從界面下邊調出菜單---對應場景：有些界面的工具欄是在界面下邊調出的，這時下鍵可以觸發；類似于蘋果手機底部菜單的上拉功能，按下鍵調出更多設置

展開菜單，收起菜單，執行更改與［上］鍵類比呼應。

左／右：功能與上／下鍵類比呼應。

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

「2016年設計趨勢」

1. 色彩篇：《2016流行這2種色彩！附優秀網頁設計案例》
2. 設計篇：《再作印證！2016年網頁設計領域11個流行趨勢預測》
3. 電商網站篇：《不學就落伍咯！2016年電商設計的9個熱門趨勢（附案例）》
4. 插畫設計：《畫出個未來！幫你梳理2016年網頁插畫設計趨勢》

作者：@卜卜胡蘿卜1992

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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