smart-tv-ux-remote-1

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

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

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

Image title

下面開始說按鍵:

主頁鍵(home)

就是調出主頁Launcher。

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

菜單鍵(Menu)

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

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

Image title

Image title

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

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

(有點小跑題,繼續回到菜單鍵?。?/p>

Image title

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

Image title

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

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

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

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

smart-tv-ux-remote-pic1

確定(ok)/返回(back)

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

Image title

Image title

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

上圖是小米電視視頻播放界面,按菜單鍵調出一級菜單圖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

uisdc-hao

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

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

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏