新趨勢！為電視做UI設計系列教程之基礎組成部分

@可樂橙_ColaChan?：與電腦、甚至手機相比，為電視設計界面仍然是相對新的領域，也是一個完全不同的平臺。為TV設計需要完全不同的思考，包括屏幕尺寸和距離、技術局限、還有使用場景。今天來一個全面的系列教程，本文作為上篇，介紹了電視UI的基本組成部分。

最近這兩個月流行的設計趨勢：

1. 漸變色：《變化之美！重新回歸主流的漸變色設計趨勢》
2. 摩登復古風：《復古即流行！正在瘋狂流行的摩登復古設計風》
3. 雙色趨勢：《留意新趨勢！個性鮮明風格迥異的雙色網頁設計》
4. 扁平化2.0：《扁平化2.0時代！聊聊今年六個全新的扁平化設計風格》

歡迎來到電視機的新黃金時代。不僅僅因為出現了更多比從前更棒的產品，我們在自己觀看和喜愛的節目上也有了更多選擇。雖然我們可以隨時隨地通過電腦、手機和平板觀看，但電視在多數人家中仍然占據著一個特殊角色。

但我們對電視的控制，不再只局限于遙控和分線盒；我們開始使用智能電視，或者觀看機頂盒的節目，例如Roku和Apple TV，或者使用電視游戲設備，例如Xbox和Playstation。這每一種設備的用戶界面，都比老式的屏幕引導要強大百倍。

顯示器

這就是電視不同于電腦、手機和平板的地方

市場上第一臺電視是由陰極射線管制成（CRT），一種在電視上顯示不連續畫面的粗糙技術。在屏幕邊緣處問題尤其明顯，為了補償，CRT電視只好運用過掃描。有了過掃描，圖像自身稍微放大了，所以邊緣超出屏幕可視區域的外延。

由于廣播電視公司預先裁切掉了部分畫面，他們想要避免任何重要信息過于靠近屏幕邊緣。歷史上，曾經有過標題安全區，文字在此處不會失真，還有畫面安全區，圖片再此區域內可以安全展示。

出于一些復雜且可笑的原因，過度掃描在HDTV上仍然存在?，F如今建議保留至少5%的外邊距，作為通用的安全區，讓所有界面保持在區域內。但是，這個百分比可以調整；Google的安全區更窄，而Apple的安全區則更寬厚。我們發現，建立布局柵格時往往要調節安全區。

以此開頭，我們將畫布設置為標準的HDTV分辨率：1920 x 1080px，上下60px外邊距，左右90px外邊距。后面我們會介紹4K。

導航

導航輸入方式決定了電視的界面。

硬件往往決定了設計模式。在移動端，標簽欄作為一種導航的模式，兼顧了又小又高的屏幕尺寸。在電視上，扁寬的屏幕產生了橫向排列、最大化展示信息量的布局方式。就像移動端的標簽欄，這種模式在多數電視界面上非常普遍。

從左上圖開始順時針依次為：Netflix電視應用、Playstation上的Hulu Plus、Apple TV上的iTunes Store、Apple TV上的AMC

類似地，主流電視界面（除了超級萌、卻也令人抓狂的LG Bean Bird），都由D面板控制，D是方向的英文首字母。無論是遙控或是游戲手柄，D面板把導航限制在四個方向上：上下左右。這使得網格成為電視應用最自然的界面結構。

Apple TV（上）用了陰影和z軸位置表現鼠標指針，而HBO GO（下）使用了藍色的邊框

電視界面另一個至關重要的元素是指針。沒有觸摸和鼠標，用戶必須轉到他們想要選擇的元素上。指針高亮顯示了當前選中的元素，隨著D面板的輸入變化而移動。應用通常使用邊框、投影、z軸或幾種混合來呈現選中狀態。屏幕上的每個元素都可以被指針選中，也要清晰表明指針可以向哪邊移動。

在我們的原型中，我們重建了一套典型的電視界面布局，只有一行內容。我們在第一項上增加了指針狀態。

輸入

除了遙控器之外，人們還會如何控制電視。

△ 從左到右：Logitech Harmony、Samsung Smart TV、Apple TV、Roku、Amazon Fire TV

多數電視和流媒體設備都依賴某種形式的遙控器。有些平臺在實驗語音輸入，而其他一些，例如新的Apple TV則在嘗試觸摸輸入。無論如何，隨著更多流媒體設備將他們的應用延伸到游戲平臺，更多人開始使用游戲手柄操作電視界面。電視游戲設備非常強大，設備多功能，在我們的工作室，我們非常熱衷于通過這種硬件來創造最佳的設計與原型。

用游戲手柄操作有許多優勢。相對D面板，游戲手柄帶有搖桿，提供了標準的四個方向移動，同時也能更加微妙的斜角移動。相比D面板，搖桿更快，更易響應，尤其對于電視游戲玩家。

△ Xbox One控制器（左）和Playstation 4控制器（右）

有些各個平臺通用的慣例，例如選擇和返回按鈕，在不同控制器里位置相同。每個平臺也有自己的慣例。在Xbox中，trigger提供了“上一頁”和“下一頁”功能，bumper則用來切換不同內容視圖。各平臺還有許多“高級用戶”按鈕，經驗豐富的玩家都很熟悉。

但是，為客廳設計時，場景很重要。雖然許多玩視頻游戲的核心用戶非常熟悉這些控制器，但客廳設備終究是分享設備。我們希望其他不太熟悉游戲手柄的用戶，也用它們進行娛樂。為了核心功能，最好還是堅持標準的按鈕慣例。

在下篇中，我們會通過Gamepad API，深入研究如何將游戲手柄控制器加入到界面中。

文字

從10英尺開外瀏覽界面。

想象你坐在沙發上，看著一場電視節目。很容易看清畫面的運動，但是開始播放演員表時會發生什么？或者彈出一個菜單呢？

電視應用通常都被稱為10英尺的體驗，這個術語表示你與電視間的通常距離。有了這個距離，我們對待界面的方式，要與網頁和移動端稍有不同。界面要更加稀疏，設計元素要加大，才能從房間的另一頭閱讀。

在10英尺的體驗中，文字的處理尤其棘手。毫無疑問，要放大。字號與字重都要增加。我們發現18px是可閱讀的最小字號，只適合不重要的標簽，例如頁面頂部標簽。在我們的設計中，我們把標題設為92px，而正文設置成24px。

優秀的電視文字設計，關鍵在于不斷檢驗。纖細的小字體在顯示器上看起來似乎干凈清晰，但是一旦到了電視上，可能就被淹沒或者無法理解。我們在電視屏幕上建立了一套測試模型，在流程早期就定義了字號。

顏色

了解電視屏幕的局限。

HDTV的色彩范圍比你的電腦顯示器更局限。這意味著設計時，你就要使用更廣的色彩范圍，才能在電視上正常顯示。在亮度、顯示和其他設置方面，不同制造商和模型的電視千差萬別。顏色應該盡早且經常在電視上測試。

開始設計前有些規范可以遵循：避免純白，明亮的光線對眼睛有害。還要留意漸變和深度模糊，有限的顏色范圍會導致色條出現。為了完成原型的設計，我們把背景色設置為#EEE，隱藏了安全區和參考線。

4K的未來

準備進入新時代。

不像手機，多數消費者不會定期升級電視。越來越多4K電視正在出現，但我們的設計，仍在為一個基本局限于1080p的市場服務。

最終這些都會改變，就像移動端設計中的不同屏幕尺寸，設計師很快也要把電視設計做成2倍。除了更棒的畫質，更高的像素密度意味著文字和界面更加清晰易辨識。

可能4K時代的界面設計，最有前途的會是色彩范圍與深度的提升。如今的HDTV使用的是名為Rec. 709的色彩配置，色彩范圍相當有限。有一種新的色彩配置，Rec. 2020，就是為4K電視而生，提供了更大的色彩范圍。

但是，色彩深度比范圍更加重要。如今多數HDTV提供8位色彩。這就意味著每個RGB色彩通道只有256種顏色，總共可能的色彩只有1.678千萬種。新的4K電視有10位甚至更高的色彩，每個通道能提供至少1024種色彩，總共可以產生10億種色彩。有更大的色彩深度，漸變和模糊區域的條紋就不見了，設計師們得以有更多機會運用色彩和處理照片素材。

原型

一切設計最重要的部分。現在我們有了基本的設計，準備開始制作原型了。下周，我們會通過Gamepad API和一些基本的HTML/CSS/JS操縱手柄控制器，演示基本的導航原型。

同時，這里有些資源，幫你開始設計自己的界面：

1. 下載案例（PSD）
2. tvOS人機界面指南
3. 為Android TV而設計
4. Amazon Fire TV設計與用戶體驗指南

「譯者注：本文的下篇核心內容為實際制作，介紹了電視手柄控制的具體開發過程與代碼細節，關于用戶體驗的內容不多。所以有興趣的朋友可以自己嘗試，https://medium.com，下一期我們將關注其他題材?！?/p>

「關于電視UI設計目前經驗不多，以下三篇可供學習」

1. 遙控器篇：《終于有教程了！智能電視用戶體驗設計分享之遙控器篇》
2. 界面焦點篇：《終于有教程了！智能電視用戶體驗設計分享之焦點篇》
3. 用戶設計初探：《進軍客廳！智能電視信息瀏覽用戶體驗設計初探》

原文地址：medium
譯文地址：colachan

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com