智能電視的UI設計

03-18

之前面試有被問到關於智能電視的UI視覺交互設計的問題。當時自己沒有準備，回答的十分糟糕。於是，我翻看的apple TV和google TV等設計規範，查閱了相關資料，對此做部分整理並且提出了部分自己的理解。

基於遙控器產生區別於移動端的交互設計

我們都知道智能電視出現之前，我們電視上是沒有太多操作界面的，因為當時選擇就簡單粗暴的一個台跳到另一個，當時我們的遙控器是這樣（其實現在也很多）。

其實這樣的設計是過於簡單粗暴的。當我們進行操作的時候，我們更多的是盯著電視的屏幕，遙控器應該做的更加簡單高效，經常低頭看遙控器的按鈕，必然打斷操作的連續性，影響整個交互體驗的流暢度，舒適度。

我們再看看現在部分智能電視他們的遙控器(左apple，右小米)。

按鈕非常的少，並且大。並且還有一個共同特性：十字交互邏輯，也就是基於方向鍵選擇的交互方式（apple用的時候觸摸板，道理一樣）。

說到這，不知道大家感覺到這方向鍵的歷史沒有，我是覺得這貨兒的出現，應該是從我們玩遊戲開始，看看小時候玩的紅白機到現在的xbox，ps。都是這一套交互邏輯。甚至早期的電視機的UI設計，都是參照一些遊戲機的UI來設計的。下圖是索尼的xmb界面和某應用節面。

xmb界面擁有屏幕水平展開的圖標，可通過移動這些圖標而非游標來導航瀏覽。這些圖標用來組織可供用戶選擇的選項，當選擇水平的圖標後會有更多的圖標在上或下方垂直顯示（可通過上下方向鍵選擇）。這界面雖然酷炫，但是電視UI如果這樣設計，完全沒有利用好大屏幕的特性，空間利用過於浪費，第二層級單一方向的線性選擇，內容較多的時候，勢必很費勁。

我們再來看看現在的智能電視的UI（apple，google，小米）。

這幾個主流的設計，整體視覺內容入口更大更美。大多數整體網格布局，充分利用空間。這樣的設計相對操作上更加便捷，清晰。

聚焦模式的特殊性

我們都知道，我們在觸摸屏上的操作的時候，要選擇某個可交互元素的時候，我們直接通過觸摸就完成了。但是電視上卻不是這樣，這裡就有了一個很重要的概念：focus（聚焦）。

我們在電視上其實是有一個焦點一直存在的，這樣我們才能夠定位在操作中所在的位置。這個焦點一定是要醒目，顯而易見。我們在設計的時候大多數通過縮放，陰影，發光，亮度和不同透明度等方式突出焦點。

記住一定是要突出。通過上圖可以看出，apple做的效果是最明顯的.

在電視上每個可交互的元素應該約有五種狀態：1.正常狀態 2.焦點狀態 3.按下狀態 4.標記狀態 5.半選中狀態。

焦點狀態和半選中狀態視覺顯示上雖然相同，可半選中是一個交互狀態，焦點移動到這不執行動作，需要點擊確認才繼續響應。其實這樣的狀態出現，也是伴隨著技術能力的變化。以前由於技術顯示電視刷新頻率較慢。移動焦點不能馬上改變畫面，會出現一定卡頓，所以就產生了這樣一個半選中狀態。不過現在技術的提升，遵循所見即所得的原則，這些問題是不存在的。

不過在某些情況，還是必須用到半選擇狀態。比如選擇劇集等。

導航模式

這裡我簡單的分了兩個模式：標籤導航和分欄導航（左右分欄和上下分欄）

標籤是更多用於的是第一屏的設計，更加強調內容的展示。分欄導航多用次級界面，展示的是更多的詳情。左右分欄也不僅僅局限兩欄，層級複雜可能分出三欄。

說到這裡我就需要提一下標籤導航了。在apple TV裡面專門有一條「Avoid having too many tabs」，也就是應該盡量避免更多的標籤。每個附加標籤增加了您的應用程序的複雜性，使得更難查找信息。然而國內的電視首屏的標籤大多很多。這裡用小米舉例子（非黑）。

當時我只想找我的應用，首頁分類太複雜。頂部大約10來個標籤。當時尋找我安裝的應用，我是找了好一會兒的。

使用場景

我們在設計UI時，一定要基於場景去分析，選擇合適的設計。這裡我就總結一下目前設計電視需要注意的點。

1. 環境

電視設備距離用戶通常的情況大約就是3米左右。這就要求我們設計時候，所用的字體不能太小，最小字型大小不低於20px(目前沒有做過相關設計，數據通過網路獲取，僅做參考)；並且界面保持簡潔，層級要夠清晰。

多數使用電視的時段，分布在晚間。整體色調不能使用過亮和淺的顏色。應使用較暗，對比明顯的顏色。

2. 設備特性

與電腦，移動設備顯示器相比。電視屏幕的對比度和飽和度更高。所以使用色彩需要更加的注意。一般不會去使用純白，明亮的純紅色和橙色，這些顏色更容易失真。

了解不同的電視顯示模式，包括標準、銳利、電影/劇場，遊戲等等。確保你的設計能適應這些全部的電視模式。
避免使用大面積的色彩漸變，因為它們可能會產生色帶波紋。
電視設計不同於移動端設計，我們可以使用相對多一點的聲音和動畫效果。但一定給一個相對舒適的初始值。
使用方嚮導航而不是滑鼠導航。
提供明顯的UI反饋，焦點元素更突出，適當的音效反饋等。

3. 用戶

電視的使用群體就覆蓋較大了，家庭中從小孩到老人。

可能我們在設計時，應多考慮年長者他們是如何去使用的。那麼我們在設計時就需要需遵循一些要點。

色彩的對比度要強一些，元素，字體盡量大。
提示反饋更加突出。
操作邏輯需要更加的簡單。
盡量提供有跡可循，可預知的操作。

結束

其實這塊的理論知識相對移動平台更加的少，可能更易被大家忽略。寫這篇文章除了警示自己的同時，也希望讓大家更多的了解電視這塊的設計。以後自己也會更多的注意對設計相關的思考。

參考文檔[apple TV規範](Human Interface Guidelines)[Android TV規範](https://www.google.com/design/spec-tv/android-tv/introduction.html)[優設文章](終於有教程了！智能電視用戶體驗設計分享之焦點篇)