智能電視UI設計那些事兒

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

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

　　【圖1】電視使用環境

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

　　【圖2】客廳燈光環境

　　如【圖2】所示有很多用戶在使用TV時身體後仰、燈光昏暗、有可能一手吃著零食一手拿著遙控器操作電視。這種”後仰“狀態決定了 ：

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

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

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

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

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

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

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

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

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

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

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

　　【圖6】Google TV的導航界面

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

　　【圖7】Samnsung SmartTV的導航界面

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

　　【圖8】Cover flow和list信息組織方式

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

　　【圖9】導航項的三種狀態

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

　　總而言之，導航設計原則如下：

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

　　焦點控制

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

　　【圖10】導航焦點態響應面積

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

　　【圖11】焦點在列表中移動

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

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

　　【圖12】焦點移動路徑

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

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

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

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

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

　　顏色和分辨率