Android智能電視焦點控制

隨着國際市場上Google TV的發佈和國內電視廠商紛紛推出定製Android TV的腳步,一時間智能電視平臺成爲了衆多高科技企業爭相搶佔的新市場。較早的智能電視平臺探索者有Google TV、Apple TV和Samsung Smart TV,還有傳說中將要上市的iTV。

AD: 2013雲計算架構師峯會精彩課程曝光

焦點控制

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

智能電視UI設計那些事兒

導航焦點態響應面積(圖10)

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

智能電視UI設計那些事兒

焦點在列表中移動(圖11)

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

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

智能電視UI設計那些事兒

焦點移動路徑(圖12)

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

1. 純焦點移動路徑最好平直且區域對齊,上圖所示,如果從A沿綠線移動到B可以較好的被用戶感知和理解;如果沿紅線移動則不符合用戶預期;

2. 高焦點移動要避免大範圍轉移,大範圍轉移的焦點會讓用戶感到焦點丟失;

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

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

顏色和分辨率

智能電視UI設計那些事兒

顏色錯誤使用(圖13)

針對TV顯示器的本身特性,在進行UI的視覺層面的設計中需要注意以下幾點:

1. 純白(#FFFFFF)在電視會產生圖像拖影, 如需使用白色,可以用#F1F1F1(hex) 或者240/240/240(RGB)進行代替

2. 高飽和度顏色會導致顯示失真,並且在高飽和度顏色向低飽和度顏色過渡時會產生邊緣模糊

3. 大範圍漸變會導致帶狀顯示,無法平滑過渡

4. 在界面邊緣最好留出10%空隙,避免發生電視顯示屏獨有的“過掃描(踩邊)”現象

智能電視UI設計那些事兒

分辨率和色彩模式(圖14)

現階段智能電視有兩種分辨率模式1920x1080和1280x720,也就是我們常說的1080p和720p,在進行UI設計時候:

1. 高分辨率設計,可以使用android 9-patch切圖進行低分辨率適配。在測試的時候選擇用低分辨率測試可以更好的發現問題。

2. TV有多種顯示模式,確保所有模式下經過測試,都不會產生問題。

新的交互方式

最後想介紹一些TV平臺上最近出現的交互方式:

智能電視UI設計那些事兒

TV平臺新穎的交互方式(圖15)

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

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


文章轉載:http://mobile.51cto.com/app-show-347762_2.htm

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章