最近有小夥伴私信我關於電視端的設計問題，整理了一些個人最近在TV端應用的一些設計經驗，供大家交流學習。以下就是我在TV設計的過程中整理的一些方法，結合自己有限的經驗後總結的一些針對TV設計的方法規範，以及一些需要注意的問題。

　　一、使用場景

　　在開始接到需求之前，我們首先需要了解使用場景和環境，瞭解這些這些特性設計更符合場景的介面，符合良好的使用者體驗。

　　因此在TV的介面設計上最好讓使用者通過方向鍵和OK能夠進行操作，並提供返回鍵，避免使用者低頭看遙控器尋找按鍵而打斷操作的任務流。TV標配音響系(音量是預設開啟的)。所以在app設計中，可以使用聲音作為幫助提示和操作反饋提示。

　　二、智慧電視的特性

　　智慧電視液晶屏區別於電腦顯示裝置和手機顯示裝置，當你設計你的APP ui介面時，你要知道根本上智慧電視與電腦或移動裝置(手機)是不同的。除開它的尺寸大小因素，電視顯示出的資訊總量比電腦或移動裝置的要少，你應該提供更少的UI，儘可能的自動化處理某些任務，而不是要求使用者去互動。

　　市面上大多電視的尺寸都具有一定欺騙性。儘管現代電視的螢幕對角線通常大於40英寸，成比例地，觀眾坐在電視前比坐在電腦顯示屏前要遠。作為使用者的感受到的是，電視螢幕尺寸“似乎”比電腦顯示器要小。當你在設計UI時，你可以用自己的手機連線ps來模擬這種體驗.

　　三、顯示器和移動裝置的顯示解析度

　　電腦顯示器最大解析度，通常小於或等於顯示卡解析度。顯示卡決定最大解析度，顯示器決定畫素密度。移動裝置的解析度和畫素密度往往是固定的，電腦作業系統能自動處理解析度和畫素密度的問題。

　　Android系統根據裝置螢幕大小和畫素密度來按比例縮放UI。此外，你可以提供可替換的UI資源，為不同裝置準備最好的UI體驗。

　　電視顯示解析度

　　電視(即使是最現代化的那些電腦)有基於掃描線的顯示解析度。Google TV 支援3種掃描線值的高清電視：720p，1080i和1080p，這代表720逐行掃描線，1080隔行掃描線和1080逐行掃描線(Android將後兩者視作等同)。720值意味著電視可以在螢幕的垂直方向上“定址”720條不同的線;1080值則意味著電視以在垂直方向上“定址”1080條線。

　　這些線有多高，每條線之間的“寬”是多少?也就是說電視的實際畫素密度是多少?Android將這些數值抽象顯示為與密度無關的畫素單位(縮寫 dp)。

　　Android 應用程式得益於Android的縮放技術。總之，你應該為1080p的規格來設計UI，允許Android系統將你的UI縮小到720p的規格，因為縮小圖形的效果通常要優於放大的效果。為了得到最好的圖片縮放效果，可以給開發提供.9.png切圖。

　　智慧電視的設計尺寸

　　所以建議以1080P作為視覺設計稿尺寸，切圖可以使用android 9-patch切圖進行低解析度適配 ，在測試的時候選擇用低解析度測試可以更好的發現問題;確保在TV所有顯示模式下經過測試，都不會產生問題。

　　拿上面的圖為例，設計尺寸為1920X1080，因為上面講到的電視螢幕顯示特性，不同廠家甚至還不一樣，那麼為了避免這些問題的出現，在設計介面的時候，如上圖給邊緣留10%或以上的外邊距，所有內容放在這個容器內去設。

　　我習慣給上下邊距留90個畫素，左右邊距留120個畫素，不一定要按我的數值去設計，具體數值可以自己根據實際情況去協調。

　　智慧電視的互動

　　四、焦點

　　不管是為哪個廠商的電視盒子或者 TV OS做，你都需要理解一個叫Focus Engine的設計概念，你要時刻記得在電視UI上應該始終有一個東西是處在Focus的狀態 也就是焦點狀態。

　　舉個例子：如上圖中有很多個磁貼排布，而在移動裝置上，你需要選擇哪個就直接點選哪個磁貼即可。而在電視上，預設狀態就應該是選中了一排照片中的某一個，而你需要點選某一個，就需要先移動焦點到對應的磁貼上，點選OK來完成選擇，這是由遙控器這種獨特的互動方式決定的。

　　焦點在整個TV APP中尤為重要，因此設計這塊互動時，無論是卡片還是按鈕，選中的效果，需要足夠明顯誇張一些，當然，除了放大+投影效果，放大+外發光效果，還有放大加描邊的效果，早期樂視在這一塊做的挺出色的，但現在風格上已經顯得很老舊了。

　　然後放大的倍率，如果沒有太大感覺的話，我在這裡推薦，放大 1.1倍-1.5倍之間，而我經常用的是1.2倍太小不明顯，太大容易遮擋其他資訊，具體可以自己逐個去嘗試不同的效果，再根據自己的介面風格，選擇一個最合適的作為規範。

　　基於遙控器的操作限制，儘可能的讓使用者通過上下左右和OK鍵來進行操作。

　　儘可能的減少文字輸入的操作，因為在TV上在沒有鍵盤輔助輸入的情況下，通過游標在虛擬鍵盤上輸入文字是一個非常蛋疼的事情，必要的情況下，為用、戶提供語音輸入方式。

　　在佈局上儘量讓佈局如圖下右，不要有層疊的互動控制元件出現，會增加選擇困難。這部分互動方式在下文我會再拿出、來講。

　　五、導航與狀態

　　在TV端中，導航遵循簡單，易用，且為了遙控機方向鍵上，下，左，右，加OK鍵的操作，常見的導航方式為橫向導航欄，縱向導航欄。

　　應用程式中常用的狀態，包括縱向導航器，橫向列表導航，選擇以及焦點，導航一般為一套分類，焦點和選中為一個分類，這些狀態中，儘可能的做到足夠的突出明顯甚至是誇張，且這些狀態要在應用中保持統一。

　　對於TV遙控器導航按鍵，上、下、左、右的互動方式而言，網格是最顯而易見的反映頁面元素，以及互動空間的方式，而介面元素傾斜排練或不在垂直中心，會讓使用者產生疑惑不知該如何去移動焦點到對應的內容，這種互動，我們統稱為十字互動。

　　如果你的導航方式為橫向的時候，UI設計中智慧電視設計指南https://www.aaa-cg.com.cn/ui/2782.html內容也要跟著橫向滾動，以防止出現焦點無法快速回到導航位置，例如：當我焦點在內容上時，如果內容有100行，如果我要將焦點回到頂部導航，就需要往上移動100次，這種設計是非常叫人抓狂的一種體驗。當導航為縱向的時候，相應的，內容也要縱向滾動。

　　六、選單

　　十字互動和磁貼是TV端應用主流的互動方式，但實際應用中，十字互動在安卓平臺開發難度相對較大，且最多隻能展示兩級選單，當遇到三級選單需求，在設計和開發時就會顯得很吃力。

　　磁貼風格，開發難度相對小，但下級菜單隻能反覆套用磁貼進行展示，當進入二級選單時候，一級選單名已經被替換，且一級選單不夠醒目，容易使使用者丟失當前位置，新手操作起來就顯得混亂了。

　　考慮這些因素，我們在設計選單的時候，就要優先考慮一級選單足夠醒目，讓使用者即使有三級或者四級選單，也能讓使用者隨時知道介面的當前位置，而磁貼因為能展示豐富的內容，也符合扁平化趨勢，如果可以借鑑一下設計方式。

　　TV端一般頁面層級不會很深，應該說越少越好，儘量扁平，使用者在體驗時不容易迷失當前位置，在遙控器操作上也會方便很多。我的經驗裡常規應用很少超過4個層級，更多資訊也是通過彈層，或者設計在側邊小工具欄裡，不會再開頁面，這樣設計層級就清晰很多。

　　七、狀態

　　因為TV是通過移動焦點來進行選擇和操作，因此，在狀態上比常規會多一個半選中狀態，也就是焦點移動到空間上但未按下OK鍵的狀態。常用用列表頁，左邊的縱向導航欄。

　　其實總結起來，TV端在常規的狀態中，多了一個半選中狀態，這個互動其實在早時候，按鍵手機時代，經常用到。我的經驗建議是，儘可能的通過程式自動處理，去簡化個互動，減少使用者的操作步驟。

　　八、顏色

　　在上文中提到的，電視螢幕有更高的對比度和飽和度。考慮到這點，在使用純色的時候要考慮一下準則：

　　謹慎地使用純白色(#FFFFFF)。純白色在電視螢幕上會引起振動或影象重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。

　　避免使用明亮的白色系，紅色系和橙色系，因為這些顏色在電視上顯示會特別嚴重的真。

　　瞭解不同的電視顯示模式，包括標準、銳利、電影/劇場，遊戲等等。確保你的應用能適應這些全部的電視模式。

　　避免使用大面積的色彩漸變，因為它們可能會導致色帶。

　　如果可能，在低質量的顯示器上測試你的應用程式。這些裝置可能有較差的伽馬值和顏色設定。

　　背景儘可能使用暗色背景。

　　九、字型

　　在使用字型時，避免纖細字型或者有過寬、過窄筆畫的字型。使用簡單無襯線字型並選用抗鋸齒功能來增加易讀性。

　　目前，TVOS幾乎大多是安卓系統，字型使用思源黑體，在你需求需要時，你可以考慮嵌入以獲得授權的字型包。但你需要記住一點，嵌入字型包必定會拖慢系統的執行速度，應用的效能會下降，做好應用的記憶體管理是很有必要，當然這是開發的事情，你只需要瞭解。

　　以下是一些提高文字易讀性的一些方法建議：

　　儘可能的減少大量文字的出現。

　　將長句改為幾個短句，讓使用者可以快速瀏覽。

　　雖然尺寸是，算是3X圖，但字型的大小不是移動端規範的3X，而是為觀看距離設計的，相對會大很多。

　　在電視上，在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。

　　使用Android的標準字型尺寸。例如，標準的小字型字號為14sp，在1080p的螢幕上，這相當於28點的字號。

　　為螢幕文字設定比印刷文字更大的行間距。

　　十、個人建議

　　最後說一句，TV端設計因為針對使用者群都是偏大齡，大部分情況並沒有像APP那樣顯得高大上，潮流，好看的介面未必是合適的，但是合適的介面，一定是最好的設計。因此，您現在已經瞭解了與UI設計師的工作相關的主要技能。如果您想了解更多資訊，請給我點個關注，我之後還會發包含有關在該領域工作的更多相關文章。