1、什麼是UI設計

UI設計，全稱 User Interfac，翻譯成中文意思叫做使用者介面設計。

2、UI設計的型別

UI設計按使用者和介面來分可分成四種UI設計。分別是移動端UI設計，PC端UI設計，遊

戲UI設計，以及其它UI設計。

第一種：移動端UI設計

第二種：PC端UI設計

第三種：遊戲UI設計

遊戲UI設計，使用者也就是遊戲UI使用者，介面指的是遊戲中的介面，像手遊王者榮耀，端遊英雄聯盟和一些其它遊戲中的介面，登入介面、個人裝備屬性介面也都是屬於遊戲UI設計。Image title

第四種：其它UI設計

像VR介面、AR介面、ATM介面、一些智慧裝置的介面，比如智慧電視、車載系統等等，使用者較少，但又需要，未來有可能很火，有可能保持現狀。Image title

3、學UI設計的四個階段

第一階段就是簡單美術基礎

也就是素描手繪這塊，這個對於後期的UI設計有一個幫助。但並不是最重要的。

第二階段就是軟體了

現在的UI設計師一般要掌握以下幾個軟體，比如PS 、AI、 AE、 AXURE ，Xmind

第三階段就是理論方面了Image title

這個有內容就有點多了，因為是養成思維的必經之路。比如配色，排版，字型設計，三大構成，消費心理學，溝通學，以及思維導圖，原型圖，還有互動邏輯，規範，切圖，瞭解程式，網際網路思維，使用者體驗，還有一些網路營銷都是需要學習的，因為這和產品商業價值有關。

前面的理論軟體都會了，接下來就是臨摹作品，及原創作品了。然後就是不斷的做專案，參與網際網路各種UI大賽及一些兼職網接單兼職，和去網際網路公司做UI設計工作等。之後不斷的逛一些例如花瓣網這樣的比較不錯的設計素材網站。長期堅持下去就能把自己的設計水平慢慢提升。

透過以上4個階段學習下來，你會發現雖然基本的你都會了。但是你不一定就是一個名副其實的UI設計高手。設計這種東西都是要多看多積累的，如果是靠自己一點點去收集資料摸索，是非常慢的。

你好，你的問題是智慧電視UI怎麼設計？智慧電視UI算得上相對比較偏冷門的互動介面設計，對於智慧電視的UI設計，有以下幾點設計原則：

１、焦點原則：首先焦點不能層次不齊，跳動太大會引起視覺上的不適，所以焦點儘量保持在同一個水平線上。焦點的設計不能是扁平的，焦點的設計要誇張，放大一些，讓人一下就抓住焦點，可以用邊框，特殊效果上使用投影或描邊，自發光等。焦點放大我個人建議在１.１倍到１.２部就可以了。

２、色彩原則：背景一定要選用深顏色，切記不要使用白色，白色太刺眼。另外也不要使用漸變色。

３、比例原則：UI的設計要根據電視的畫素比例，找到一個黃金比例，讓人看起來感到舒適，畫面不宜過滿，每屏都力求簡約，一目瞭然。畫面太滿會顯得擁擠，當然介面太小又讓人看起來吃力，看起來太小氣，所以要找到一個適中的比例。

以上就是我對於智慧電視UI的一些個人見解，希望採納。

隨著網際網路的發展,電視產品大多數會搭載智慧作業系統,方便使用者根據個人需求和喜好進行對接互聯

網的各種功能使用,因此智慧電視作業系統良好的互動設計可以大大提高使用效率,提升收視體驗。智慧電

視有著特殊的使用者使用場景和操作方式,因此電視介面大致有以下特點:

(1)使用距離遠。數字電視尺寸雖大都遠大於多數電腦,因其操作和觀看距離較遠,導致單屏展示的資訊量比電腦要少。

(2)相比電腦的滑鼠,鍵盤使用,目前使用者的電投提作懷名是依靠單按鍵的遙控器對電視進行溼構

(3)電視使用者多樣化,通常為家庭的所有成員。

因此,針對電視介面的特殊特性,在進行設計時,應注意以下幾方面:

介面簡潔,導航簡化、資訊明確。文字和其他導航物件的尺寸必須足夠大,保證使用者遠距離的資訊

接收。

控制整合。儘量把其他家庭娛樂裝置常見功能的控制整合到遙控器中。

避免使用大範圍的漸變色,以防止帶狀顯示。

儘可能簡化遙控,併合理解決遙控器的快速操作,例如可以在遙控器中加入小顯示屏,但要避免引起用

戶困惑。

複雜的遙控福設計已經持續了很長一段時間(如圖最近所示),但大多數功能卻極少被用的到,所以通

過設計來簡化遙控就顯得尤其迫切,例如蘋果公司2015年釋出的蘋果電視產品中,配置了一個經過全新

設計的遙控器,在遙控器中,內建了多種感測器,同時也據棄了五項方向的傳統導航布的局,而是設計出一塊

一、使用場景

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

因此在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%或以上的外邊距，所有內容放在這個容器內去設。

四、焦點

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

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

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

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

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

五、導航與狀態

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

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

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

如果你的導航方式為橫向的時候，內容也要跟著橫向滾動，以防止出現焦點無法快速回到導航位置，例如：當我焦點在內容上時，如果內容有100行，如果我要將焦點回到頂部導航，就需要往上移動100次，這種設計是非常叫人抓狂的一種體驗。當導航為縱向的時候，相應的，內容也要縱向滾動。

六、選單

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

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

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

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

七、狀態

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

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

八、顏色

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

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

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

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

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

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

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

九、字型

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

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

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

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

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

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

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

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

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

但因為每個公司流程不一樣，各自制定的規範也有所不同，更多的是透過多實戰，多嘗試，去對比和總結，在根據自己的產品定位，去設計出最合適的方案。

最後說一句，TV端設計因為針對使用者群都是偏大齡，大部分情況並沒有像APP那樣顯得高大上，潮流，好看的介面未必是合適的，但是合適的介面，一定是最好的設計。

首先你要智慧電視預設解析度是多少，是4K屏還是普通屏，現在的標配就是按照1920*1080的分辯率畫布大小來進行佈局，其實跟App介面設計的原理是一樣的，然後你在這個尺寸裡頭去做框架佈局就好了。

LG電子最新推出的webOS 3.0作業系統不僅被業內公認為最便捷、最直觀的智慧電視作業系統，近日更是憑藉與家用物聯網（IoT）裝置之間的出色相容性獲得全球領先的測試和認證機構ul的認證。LG推出的2016年新款智慧電視系列產品，安裝了品牌專有的IoTV應用，可透過WebOS 3.0實現智慧家居管理功能。使用者可以透過執行WebOS 3.0系統的LG智慧電視控制多款LG智慧電器以及其它品牌的特定產品。

連線之後，各種電器的狀態將顯示在LG智慧電視的螢幕之上，把電視變成使用者與裝置之間的介面。使用者可以從電視螢幕上控制特定的家用電器，例如透過Wi-Fi或線路聯網的電冰箱、空調和洗衣機。使用者還可以藉助WebOS 3.0調節室內燈光的亮度，或者改變空調的溫度設定。

LG電子家庭娛樂事業部高階副Quattroporte兼電視產品規劃主管Sam Kim表示：“我們始終把客廳電視看做是智慧家居的中樞，而採用WebOS 3.0作業系統的LG智慧電視正是以此為出發點進行設計的。LG將繼續提供最出色的使用者體驗，開發支援物聯網功能的創新家電產品，以此來超越消費者的期望。”

獲得ul認證的產品包括一系列執行webOS 3.0作業系統的olED電視和UHD電視。1月6日-9日舉行的國際消費電子展期間，LG將在公司展位（拉斯維加斯會展中心中央大廳8204號展位）的智慧家居展區展示先進的物聯網技術。



一、使用場景

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

因此在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來完成選擇，這是由遙控器這種獨特的互動方式決定的。

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

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

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

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

五、導航與狀態

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

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

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

如果你的導航方式為橫向的時候，內容也要跟著橫向滾動，以防止出現焦點無法快速回到導航位置，例如：當我焦點在內容上時，如果內容有100行，如果我要將焦點回到頂部導航，就需要往上移動100次，這種設計是非常叫人抓狂的一種體驗。當導航為縱向的時候，相應的，內容也要縱向滾動。

六、選單

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

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

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

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

七、狀態

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

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

八、顏色

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

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

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

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

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

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

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

九、字型

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

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

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

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

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

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

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

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

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

十、個人建議

接觸TV專案大概8個月，根據我這個階段的學習，和實際工作，我總結和歸納的這些基本知識和注意事項，這些大致能幫助剛接觸TV專案的朋友快速瞭解電視大屏的基本介面設計方法和互動知識，避免一些不必要的坑。

但因為每個公司流程不一樣，各自制定的規範也有所不同，更多的是透過多實戰，多嘗試，去對比和總結，在根據自己的產品定位，去設計出最合適的方案。

最後說一句，TV端設計因為針對使用者群都是偏大齡，大部分情況並沒有像APP那樣顯得高大上，潮流，好看的介面未必是合適的，但是合適的介面，一定是最好的設計。

一、使用場景

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

因此在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個畫素，不一定要按我的數值去設計，具體數值可以自己根據實際情況去協調。

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

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

有很多使用者在使用TV時身體後仰、燈光昏暗、有可能一手吃著零食一手拿著遙控器操作電視。這種”後仰“狀態決定了 ： “TV使用者較為被動，與TV互動更多是作為資訊的接受者，無法達到一種沉浸式的狀態”。因此在TV的介面設計上最好讓使用者透過方向鍵和OK能夠進行操作，並提供返回鍵，避免使用者低頭看遙控器尋找按鍵而打斷操作的任務流。

TV平臺上的app應用通常使用者對TV發出的聲音並不會感到反感或干擾，因為TV上的頻道和app多為“消費性”內容，且TV標配音響系統（音量是預設開啟的）。所以在app設計中，可以使用聲音作為幫助提示和操作反饋提示。說到TV的UI設計，就不得不從導航開始。如上文所述，TV使用者較為被動，所以需要清晰高效的導航系統來幫助使用者快速定位到想要看的內容。導航方式與輸入裝置息息相關，智慧電視最主要的輸入裝置還是遙控器，有時還輔以滑鼠和鍵盤。下面的圖例是Google TV和Apple TV的輸入裝置。

你好！針對你提出的問題，我說一下我的觀點：

對於現在家庭智慧電視而言，技術在不斷的進步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比。但是資訊變得簡約了，都是以 tab 導航為主，下面是幾個卡片資訊瀑布流顯示。語音提示很重要，會隨著焦點的移動發出提示聲響，提示使用者電視焦點的移動狀態。

第一點問題：

就是首先要知道智慧電視特性

1飽和度高對比度強

2顯示資訊量少簡約

3焦點控制語音提示

比如在智慧電視終端市場佔據較大份額的小米電視商城全新改版時，在接到需求後，一定要模擬使用者來體驗一下購物流程還有用電視購物的環境，環境應該是固定的，那就是在家裡。電視和手機購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果介面跳轉太多，會給使用者一種煩躁的感覺，所以儘量同一層級的資訊要在同一介面填寫完畢，避免二次跳轉。

第二點問題：

就是說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點儘量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。智慧電視的解析度和大家平常在 app 看電影的時候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節目。設計尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發會適配比 1920*1080 小的電視螢幕，這樣下來，如果小解析度的電視沒問題了，大的解析度也就沒問題了。

我們知道在設計 app 的時候，都有左右間距的控制，移動端一般常見的控制在 28px 或者 32px，電視端因為是大屏設計，所以預留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設計的時候左右是固定的 120px，上面可以隨設計內容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。

焦點在電視端 UI 設計裡顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器上下左右確認而改變。焦點的設計不能是扁平的，因為那樣不能夠提醒使用者焦點狀態的位置，焦點的設計應該是放大的、誇張的、可以帶邊框，也可以使用投影外發光的方式來設計，確保能夠給使用者足夠的清晰位置。焦點放大我這裡建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過於大了。

第三點問題：

就是互動設計，我在設計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓使用者足夠看到位置所在。電視端的互動也是很簡單的，基本屬於十字互動，即自上而下，從左到右的互動方式。紅色剪頭屬於禁區，所有的電視互動，沒有斜 45 度的互動，這樣是錯誤的。

大家可以看到，在 app 裡，常見的彈窗和浮窗可以壓蓋在可點選功能上，比如美團的紅包，愛奇藝的一鍵關注，即使是這樣，也不會影響功能的正常使用。但是電視端的設計，如果兩個可點選功能壓蓋在一起，焦點是無法獲取的，因為它沒法判斷你想要選的那個功能，所以在電視上，一定要將兩個功能分開來佈局最為合適。

第四點問題：

就是視覺設計，顏色的選擇運用是重中之重，因為這個會直接影響到使用者的視覺體驗。因為使用者環境大多數是晚上的時候回去看電視，分開燈和關燈的情況，開燈的情況其實還好。如果關燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加使用者的視覺負擔，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。電視 UI 設計中，白色謹慎使用。因為白色過多實在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。背景的運用這裡也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好地襯托出介面的主要內容。反之如果用淺色的背景，有的卡片如果需求方要求設計成淺色，那麼這樣淺色的背景+淺色的卡片疊在一起，主要內容就特別難區分了。

我們在設計電視端 UI 的時候，要真實的先去體驗一下特殊的場景，電視端每個 tab 是一個頻道，每個頻道的設計風格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設計風格肯定不同，體驗模擬流程可以讓我們更快地瞭解電視特性。字型的選擇預設思源黑體，因為這個字型是開源字型，可以免費使用，沒有版權之分，以上列入的字型是小米電視商城改版的字號，具體的字型和間距可以根據自己的設計需求變化。關於字型的選擇，當然你也可以選用其它字型，或者一些特殊字型，好看的字型，但是這樣的話，字型包應該會很大，會影響一些載入速度。字型顏色的選擇儘量用白色或者亮色，深色背景上選用白色是最好的，這樣更易於閱讀。字型的粗細大小，這裡標題建議加粗選擇，其餘選擇常規字型就好，避免太粗或者太細的字型。

第五點問題：

就是更好的家居智慧體驗，電視的設計只是其中的一部分，未來我們的電視可能比現在的體驗更加好，比如會出現實景商城，單一的圖片形式已經不能滿足我們對購物的需求，一些影片類，動效類的體驗會更加合適。想讓電視擁有好的體驗並不是一件簡單的事情，想必大家已經從諸多「電視盒子」上體驗到了這一點。我們曾經熟悉的電視已經發生改變，而我們適應的手機、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機等智慧傢俱的體驗，正是我們設計師需要在未來幾年所做的事情，這很重要。

最後，學習UI設計平時要多關注一些關於智慧終端的資訊，未來人工智慧領域快速發展的加持下，對於一些智慧終端，電子產品以及手機應用肯定會得到更進一步的發展，相關的介面設計，互動設計也會與今天我們熟知的規則有所不一樣，多學習多觀察是UI設計人員穩步前進必須要有的學習態度。