智能電視導航設計

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

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

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

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

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

智能電視UI設計那些事兒

Google TV和apple TV的輸入設備(圖4)

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

智能電視UI設計那些事兒

Xbox和PS3的導航界面(圖5)

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

智能電視UI設計那些事兒

Google TV的導航界面(圖6)

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

智能電視UI設計那些事兒

Samnsung SmartTV的導航界面(圖7)

上圖爲最近發佈的Samsung Smart TV,它採用了區塊式的導航結構。這種結構中每個區塊獨立操作,信息組織更加扁平化,有的模塊和widget概念比較相似,既是信息的呈現也可以作爲操作的入口。不足之處是,各個模塊中item的方向操作會有一定限制,不然會導致各個模塊切換的操作成本增加。

智能電視UI設計那些事兒

Cover flow和list信息組織方式(圖8)

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

智能電視UI設計那些事兒

導航項的三種狀態(圖9)

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

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

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


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

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