智能電視UI設計那些事兒

0 評論 11652 瀏覽 32 收藏 16 分鐘

隨著國際市場上Google TV的發(fā)布和國內電視廠商紛紛推出定制Android TV的腳步,一時間智能電視平臺成為了眾多高科技企業(yè)爭相搶占的新市場。較早的智能電視平臺探索者有Google TV、Apple TV和Samsung Smart TV,還有傳說中將要上市的iTV。 國外一些知名服務,如Youtube、Twitter、Netflix等,均在這些平臺上發(fā)布了應用。國內電視廠商多使用Android平臺,我們就來談談在Android TV上設計app的那些事兒。

智能電視的使用特點——距離遠、光線暗、操作心態(tài)較被動

【圖1】電視使用環(huán)境

TV的使用環(huán)境較為特殊。智能電視尺寸大都大于42寸,其使用環(huán)境應該在2.7-3.5米之間。所以雖然TV的顯示屏面積遠大于多數(shù)PC,但因其操作距離遠,導致單屏展示的信息量比PC要少。


【圖2】客廳燈光環(huán)境
如【圖2】所示有很多用戶在使用TV時身體后仰、燈光昏暗、有可能一手吃著零食一手拿著遙控器操作電視。這種”后仰“狀態(tài)決定了 :


TV用戶較為被動,與TV交互更多是作為信息的接受者,無法達到一種沉浸式的狀態(tài)。

因此在TV的界面設計上最好讓用戶通過方向鍵和OK能夠進行操作,并提供返回鍵,避免用戶低頭看遙控器尋找按鍵而打斷操作的任務流。

【圖3】TV平臺上的app應用

通常用戶對TV發(fā)出的聲音并不會感到反感或干擾,因為TV上的頻道和app多為“消費性”內容,且TV標配音響系統(tǒng)(音量是默認開啟的)。所以在app設計中,可以使用聲音作為幫助提示和操作反饋提示。

 

導航設計——遙控器和導航結構

說到TV的UI設計,就不得不從導航開始。如上文所述,TV用戶較為被動,所以需要清晰高效的導航系統(tǒng)來幫助用戶快速定位到想要看的內容。

導航方式與輸入設備息息相關,智能電視最主要的輸入設備還是遙控器,有時還輔以鼠標和鍵盤。下面的圖例是Google TV和Apple TV的輸入設備。


【圖4】Google TV和apple TV的輸入設備

從圖中我們可以看出新的智能電視輸入設備以十字方向鍵和OK鍵為核心,所以TV app的導航要基于上述方向鍵和OK鍵進行設計。


【圖5】Xbox和PS3的導航界面

由于智能電視平臺app較新,這里我們參考較為成熟的電視平臺游戲系統(tǒng)來進行討論,上圖分別是XBOX和PS3的操作界面,這兩款產品能被借鑒因為它們的操作方式和使用環(huán)境和智能電視系統(tǒng)較為一致。它們都用了十字導航的結構。這種結構的優(yōu)點在于主導航和二級導航同時展開,并且與十字方向鍵完美契合,可以通過方向鍵在主導航和二級導航間快速切換。使用這種結構時,二級導航中的item只能進行單一操作,因為方向鍵受到了主導航占用。如果對二級導航中item進行多維操作,則需要確認展開下一級列表.


【圖6】Google TV的導航界面

上圖為Google TV的操作界面,它采用了左右分欄的模式,左邊是導航,右邊是一個二級內容的容器。這種結構的邏輯其實和前面所述的十字導航區(qū)別并不是很大,不同的是容器里面的信息更加扁平、直觀和可視化,容器里面item操作的方向不會受到限制。但相應地,如果想把焦點從容器中移回到左側導航需要更高的操作成本。

【圖7】Samnsung SmartTV的導航界面
上圖為最近發(fā)布的Samsung Smart TV,它采用了區(qū)塊式的導航結構。這種結構中每個區(qū)塊獨立操作,信息組織更加扁平化,有的模塊和widget概念比較相似,既是信息的呈現(xiàn)也可以作為操作的入口。不足之處是,各個模塊中item的方向操作會有一定限制,不然會導致各個模塊切換的操作成本增加。

 


【圖8】Cover flow和list信息組織方式
另外還想介紹的兩種信息展示方式,就是左圖中的Cover Flow和右圖中的List,這兩種方式都采用了單方向導航。Cover Flow這種方式視覺沖擊力較強,單屏信息承載有限,焦點的移動兩種方式將在后文陳述; 右邊這種列表方式視覺沖擊力較弱,單屏信息量較大,但在TV平臺處理List時候和PC上有所區(qū)別:TV app不需要滾動條,而且要控制List的長度,因為盡管遙控器方向鍵可以啟用長按加速,不過始終無法達到像PC端鼠標拖拽滾動滑塊控制瀏覽速度和定位的表現(xiàn)。

【圖9】導航項的三種狀態(tài)
在基于十字方向鍵上設計導航時,導航項一般存在三種狀態(tài),即“selected”,“focused”和“selected and focused“。導航上如果有類別項(category)和動作項(action)那么導航獲得焦點時,焦點移動不會切換右邊容器中內容。當導航上全部為類別項時,焦點可以和選中態(tài)一起移動,右邊容器隨焦點移動切換內容。

總而言之,導航設計原則如下:


導航設計的目標,是讓用戶快速定位,并且能夠預測出操作結果。

 

焦點控制

導航架構完后,就是焦點移動的問題,下面幾個圖例簡單介紹了一下在TV平臺上焦點移動的問題。

【圖10】導航焦點態(tài)響應面積
遙控器是所有電視標配,而智能電視一般還都支持鼠標和鍵盤操作,所以控件的狀態(tài)和PC上有些類似。使用遙控器操作的時候,控件的狀態(tài)相當于用TAB鍵瀏覽網頁或者操作桌面軟件即控件選中態(tài)切換,而使用鼠標操作的時候和PC端一樣控件要有hover的狀態(tài)。因為TV的操作距離非常遠,而且TV的外接鼠標可能是空鼠等(其操作不像PC上鼠標一樣容易),所以在設計TV控件時針對鼠標hover狀態(tài)要增加其響應面積,方便用戶操作。


【圖11】焦點在列表中移動
上圖左邊示例是一個典型的Cover Flow式的導航,這種情況下頁卡滾動,焦點卻一直固定在中央。在單向列表或者導航時候,這種焦點固定的方式可以很好的避免當列表中項目較多時,導航焦點一直停留在列表底部也就是屏幕邊角(用戶視線長時間停留邊角)而造成的疲勞。

上圖右示例相反,頁卡不動,焦點移動選擇。在這種方式下,當焦點移動到列表最右端繼續(xù)滾動時,最好采用翻頁效果。這種效果一是解決了上述視線停留邊角問題,二是可以和page controller控件結合在一起,讓用戶知道在列表中所處位置。


【圖12】焦點移動路徑
上圖是從Google TV設計指南中截出來的一張圖,提倡使用圖中綠色的路徑,避免使用紅色的對角線方向路徑:

1.??純焦點移動路徑最好平直且區(qū)域對齊,上圖所示,如果從A沿綠線移動到B可以較好的被用戶感知和理解;如果沿紅線移動則不符合用戶預期;
2.??高焦點移動要避免大范圍轉移,大范圍轉移的焦點會讓用戶感到焦點丟失;

最后,就是焦點和控件的關系。PC和移動設備上很多控件都具有很強的點擊感,因此用戶可以較清楚的區(qū)分控件和非控件元素。在TV平臺上因為輸入設備是基于遙控器設計,失去了控件常見的點擊感覺,用戶區(qū)分哪些元素是說明性的和哪些是控件會產生困難。 因此在TV平臺上控件設計盡量可以達到

可視元素可獲得焦點,提示和說明性元素,要在視覺上和空間位置上與控件做出明顯的區(qū)分。

 

顏色和分辨率

【圖13】顏色錯誤使用
針對TV顯示器的本身特性,在進行UI的視覺層面的設計中需要注意以下幾點:

1.???純白(#FFFFFF)在電視會產生圖像拖影,如需使用白色,可以用#F1F1F1(hex) 或者240/240/240(RGB)進行代替;
2.???高飽和度顏色會導致顯示失真,并且在高飽和度顏色向低飽和度顏色過渡時會產生邊緣模糊;
3.???大范圍漸變會導致帶狀顯示,無法平滑過渡;
4.???在界面邊緣最好留出10%空隙,避免發(fā)生電視顯示屏獨有的“過掃描(踩邊)”現(xiàn)象。

【圖14】分辨率和色彩模式
現(xiàn)階段智能電視有兩種分辨率模式1920×1080和1280×720,也就是我們常說的1080p和720p,在進行UI設計時候應該:

1.???高分辨率設計,可以使用android 9-patch切圖進行低分辨率適配,在測試的時候選擇用低分辨率測試可以更好的發(fā)現(xiàn)問題;
2.?? 確保在TV所有顯示模式下經過測試,都不會產生問題。

 

新的交互方式
最后想介紹一些TV平臺上最近出現(xiàn)的交互方式:

【圖15】TV平臺新穎的交互方式
XBOX上已經出現(xiàn)了利用手勢進行控制和語音控制導航。手勢控制在XBOX的Kinect上已經取得了成功,但問題在于需要依賴三維攝像頭這個目前還比較昂貴的設備,而二維攝像頭所用手勢操作,用戶體驗并未達到理想的效果。至于語音控制,現(xiàn)有設備基本上可以完全支持,在《喬布斯傳》中喬布斯聲稱已經破解了智能電視密碼,其核心就是語音控制。

另一個新穎的交互點則是Samsung Smart TV的密碼輸入模塊。眾所周知,文本輸入一直是遙控器的一個夢靨。在PC和移動設備上所有的輸入都是一步,及所選即所得。在TV上的輸入總是“選擇—確認”,打斷了用戶連續(xù)輸入的“任務流“。而上圖電視上的軟鍵盤則建立了和遙控器九宮數(shù)字鍵的映射,按遙控器上的數(shù)字鍵就會把電視上的軟件盤的字母輸入到輸入框中,這種做法在“獨占性”的任務流中可以增加文本輸入效率。

文章部分圖文參考了Google TV 和Samsung Smart TV的設計指引,感興趣的話可以點擊以下鏈接進行擴展閱讀。
Google TV Design Pattern

Samsung Smart TV User Experience Guidelines

  • (本文出自Tencent CDC Blog,轉載時請注明出處)

 

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!