從今天，我們25學(xué)堂也要跟大家一起來學(xué)習(xí)一下智能電視UI界面設(shè)計(jì)的相關(guān)規(guī)范，不管是否涉及到，作為優(yōu)秀的移動(dòng)APP設(shè)計(jì)師，也要好好的了解這些智能電視設(shè)計(jì)規(guī)范。

當(dāng)你設(shè)計(jì)你的APP ui界面時(shí)，也要牢記Google Android ?TV 的APP顯示效果。

在其根本上智能電視?與電腦或移動(dòng)設(shè)備（手機(jī)）是不同的。除開它的尺寸大小因素，電視顯示出的信息總量比電腦或移動(dòng)設(shè)備的要少。你應(yīng)該提供更少的UI，可能需要自動(dòng)化處理某些任務(wù)，而不是要求用戶去互動(dòng)。

以下是一些智能電視UI設(shè)計(jì)準(zhǔn)則：

1、使用手機(jī)作為UI模型。

現(xiàn)代電視的尺寸具有欺騙性。盡管現(xiàn)代電視的屏幕對(duì)角線通常大于40英寸，成比例地，觀眾坐在電視前比坐在電腦顯示屏前要遠(yuǎn)。觀眾感受到的是，電視屏幕尺寸比電腦顯示器要小。當(dāng)你在設(shè)計(jì)UI時(shí)，你可以使用手機(jī)作為 “模型”來模擬這種體驗(yàn)。

2、在頁面上的元素之間應(yīng)該留出更多的空白空間，避免屏幕上雜亂的外觀。

要做到這一點(diǎn)，需要綜合使用更大的外邊距和內(nèi)邊距。這對(duì)“觸屏”UI也同樣是一個(gè)好建議。

3、電視總是橫屏的。

在電視上，水平方向的可用空間比垂直方向上的可用空間要多。將屏幕上的導(dǎo)航控件水平放置，為內(nèi)容部分節(jié)省下垂直空間。

2、高清顯示分辨率知識(shí)點(diǎn)

電視屏幕在根本上與電腦顯示器與移動(dòng)設(shè)備屏幕不同。顯示器和移動(dòng)設(shè)備屏幕直接使用（大體上）可尋址的像素。相較之下，電視使用的是落后十年的顯示圖像的模擬方式。了解這一不同點(diǎn)，再與Google TV 協(xié)同合作是非常重要的。

1.1 電腦和移動(dòng)設(shè)備的顯示分辨率

電腦顯示器有一個(gè)最大的顯示分辨率，這個(gè)分辨率通常小于或等于顯卡分辨率。顯卡決定最大分辨率，顯示器決定像素密度（每英寸的像素?cái)?shù)量）。移動(dòng)設(shè)備的分辨率和像素密度往往是固定的。

因?yàn)閷?duì)電腦的顯示分辨率很簡單，根據(jù)用戶的偏好設(shè)置，電腦操作系統(tǒng)能自動(dòng)處理分辨率和像素密度的問題。

Android系統(tǒng)使用同一套應(yīng)用程序來運(yùn)行多種移動(dòng)設(shè)備。為了做到這一點(diǎn)，Android系統(tǒng)根據(jù)設(shè)備屏幕大小和像素密度來按比例縮放UI。此外，你可以提供可替換的UI資源，為不同設(shè)備準(zhǔn)備最好的UI體驗(yàn)。

1.2 電視顯示分辨率

電視（即使是最現(xiàn)代化的那些電腦）有基于掃描線的顯示分辨率。Google TV 支持3種掃描線值的高清電視：720p，1080i和1080p，這代表720逐行掃描線，1080隔行掃描線和1080逐行掃描線（Android將后兩者視作等同）。720值意味著電視可以在屏幕的垂直方向上“尋址”720條不同的線；1080值則意味著電視可以在垂直方向上“尋址”1080條線。

水平分辨率由電視的長寬比來決定。目前幾乎所有的電視都使用16：9的長寬比（16個(gè)水平像素對(duì)應(yīng)9個(gè)垂直像素），所以1080的電視機(jī)的分辨率是1920 x 1080。

這些線有多高，每條線之間的“寬”是多少？也就是說電視的實(shí)際像素密度是多少？這取決于不同的制造商，但是Android將這些數(shù)值抽象顯示為與密度無關(guān)的像素單位（縮寫 dp）。

Google TV Android 應(yīng)用程序得益于Android的縮放技術(shù)?？傊銘?yīng)該為1080p的規(guī)格來設(shè)計(jì)UI，允許Android系統(tǒng)將你的UI縮小到720p的規(guī)格，因?yàn)榭s小圖形的效果通常要優(yōu)于放大的效果。為了得到最好的圖片縮放效果，如果可能的話，給他們提供9-patch格式的圖片。Android為Google TV 提供的縮放設(shè)置如下表所示。

注釋：

1、可尋址的屏幕尺寸是可見的像素?cái)?shù)目。

2、密度定義是Android 根據(jù)dp來定義的。在 “設(shè)計(jì)與開發(fā)”一章中的“可選資源”一節(jié)中有相關(guān)描述。要了解更多關(guān)于可選資源的信息。可以閱讀“Android開發(fā)準(zhǔn)則”中的“支持多種屏幕”一章。

3、確定當(dāng)前顯示器的屏幕尺寸和分辨率，使用“顯示單位”中的dpi與屏幕分辨率。

1.3 過掃描

另一個(gè)難題是過掃描。由于歷史原因，電視制造商必須在正常屏幕尺寸的外側(cè)預(yù)留出空白邊，能夠被電路尋址，但是不被用來顯示電視信號(hào)。這些空白區(qū)域就是過掃描區(qū)域（或者就簡稱為“過掃描”）。Android應(yīng)用程序不能在過掃描區(qū)域顯示。

不幸地是，過掃描也因?yàn)橹圃焐痰牟煌煌Ｋ試@你的UI的空白邊也多種多樣。如果你為一部有顯示過掃描的電視設(shè)計(jì)UI，你也許在不經(jīng)意間將過掃描區(qū)域當(dāng)作UI和電視邊框之間的空白邊使用了。如果之后你在一部幾乎沒有過掃描的電視上運(yùn)行你的應(yīng)用程序，UI將幾乎沒有空白邊，這些元素可能很難識(shí)別。

為了處理這個(gè)問題，為你的UI提供額外的10%的空白邊，并使用一個(gè)非絕對(duì)定位的布局。如圖1所示。

圖1 屏幕分辨率和尺寸

2 、TV色彩設(shè)計(jì)規(guī)范

與電腦顯示器相比，電視屏幕有更高的對(duì)比度和飽和度?？紤]到這點(diǎn)，在使用純色的時(shí)候要考慮一下準(zhǔn)則：

1、謹(jǐn)慎地使用純白色（#FFFFFF）。純白色在電視屏幕上會(huì)引起振動(dòng)或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。

2、避免使用明亮的白色系，紅色系和橙色系，因?yàn)檫@些顏色在電視上顯示會(huì)特別嚴(yán)重的失真。

3、了解不同的電視顯示模式，包括標(biāo)準(zhǔn)、銳利、電影/劇場，游戲等等。確保你的應(yīng)用能適應(yīng)這些全部的電視模式。

4、避免使用大面積的色彩漸變，因?yàn)樗鼈兛赡軙?huì)導(dǎo)致色帶。

5、如果可能，在低質(zhì)量的顯示器上測試你的應(yīng)用程序。這些設(shè)備可能有較差的伽馬值和顏色設(shè)置。

2.3 文本和字體設(shè)計(jì)規(guī)范

對(duì)電視來說，避免纖細(xì)字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體并選用抗鋸齒功能來增加易讀性。目前，Google TV只支持Droid Serif 字體族，但是你可以使用嵌入字體來創(chuàng)建一個(gè)更個(gè)性化的外觀。然而，牢記嵌入字體會(huì)拖慢系統(tǒng)運(yùn)行。

以下是一些提高文本易讀性的方法：

1、每個(gè)段落限制90個(gè)單詞。

2、將長句改為幾個(gè)短句，讓用戶可以快速瀏覽。

3、在每行保持5-7個(gè)單詞，不要少于3個(gè)單詞，也不要多于12個(gè)單詞。

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

5、使用Android的標(biāo)準(zhǔn)字體尺寸。例如，標(biāo)準(zhǔn)的小字體字號(hào)為14sp，在1080p的屏幕上，這相當(dāng)于28點(diǎn)的字號(hào)。

6、為屏幕文本設(shè)置比印刷文本更大的行間距。

下一章節(jié)，25學(xué)堂會(huì)繼續(xù)跟大家聊聊智能電視的UI設(shè)計(jì)規(guī)范。

以及官網(wǎng)的設(shè)計(jì)文檔資料閱讀：Design for TV ?developer.android.com

以上這些內(nèi)容來源于：曉生的《Google智能電視設(shè)計(jì)規(guī)范》