這是為運行在Google TV 上的Android應(yīng)用程序所作的用戶界面開發(fā)準則。雖然運行在手機和Google TV上的安卓應(yīng)用程序幾乎沒有不同，但在用戶界面上，兩者還是有區(qū)別。

電視的觀看環(huán)境通常被描述為“10英尺環(huán)境”，電視屏幕也被描述為“10英尺的用戶界面”。當你為10英尺環(huán)境創(chuàng)建應(yīng)用程序時，請記住以下基礎(chǔ)概念：

派點互動 品牌網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計制作 建站公司 設(shè)計公司 廣州網(wǎng)站建設(shè) 網(wǎng)站制作 高端設(shè)計

從傳統(tǒng)上意義來說，10英尺環(huán)境適合消費內(nèi)容

10英尺環(huán)境是娛樂環(huán)境，不是工作環(huán)境。

10英尺環(huán)境通常是一個社會環(huán)境，不是單用戶環(huán)境。

10英尺用戶界面的觀看體驗是電腦和電視的結(jié)合

電視屏幕兼有電腦和電視的特點。

顯示分辨率類似電腦，但受到電視特點的影響。

在TV屏幕上的色彩是不同的。

電視設(shè)備擁有高品質(zhì)的聲音

電視設(shè)備通常連接到最好的音響系統(tǒng)。

不像電腦，用戶期望電視設(shè)備發(fā)音，并且希望不會被打擾。

10英尺用戶界面需要簡單和可見的導(dǎo)航

建立從左到右、從上到下的導(dǎo)航。

降低對鼠標的要求。

提供可視反饋。

基于內(nèi)容區(qū)域的用戶界面模式，最適合于10英尺用戶界面

區(qū)域本身與設(shè)備類型無關(guān)。

不同的設(shè)備類型有特定的區(qū)域安排。

許多不同的用戶界面可以基于區(qū)域的概念。

1.十英尺的環(huán)境

當你為十英尺環(huán)境創(chuàng)建Android應(yīng)用程序時，你應(yīng)該牢記一些基本理念。這些基本理念將“十英尺環(huán)境”與電腦和移動設(shè)備區(qū)別開來。

最基本的理念是，在傳統(tǒng)意義上，電視設(shè)備是用來展示消費性內(nèi)容的。在很長的一段歷史中，電視都作為一種被動接收廣播信息的系統(tǒng)。Google TV 將電視從廣播系統(tǒng)變?yōu)殡p向交互系統(tǒng)，這對許多觀眾來說是一個巨大的改變。對老年觀眾，特別是認為自己是“電腦盲”的人來說，這一改變就有些棘手了。另一方面，與互聯(lián)網(wǎng)一同成長的年輕觀眾對這一改變就沒有那么大反應(yīng)，甚至渴望著接觸它。

電視在本質(zhì)上是被動接受，這通常被稱為“后仰”體驗。即使是愿意與電視互動的觀眾也不愿意互動得太多。他們想后仰靠在沙發(fā)上并享受著互動過程，而不是像用電腦或手機一樣要高度集中注意力。

另外，Google TV 旨在提升傳統(tǒng)的電視觀看體驗的目標——可以更輕松，可以一起觀看和分享的體驗。從這個更傳統(tǒng)的方法開始，你能夠?qū)⒛愕膽?yīng)用程序與電視屏幕上展示的其他系統(tǒng)區(qū)別開。

2.電視顯示

當你設(shè)計你的應(yīng)用程序時，牢記Google TV 的顯示在根本上是與電腦或移動設(shè)備不同的。除開它的尺寸大小因素，電視顯示出的信息總量比電腦或移動設(shè)備的要少。你應(yīng)該提供更少的UI，可能需要自動化處理某些任務(wù)，而不是要求用戶去互動。

以下是一些UI設(shè)計準則：

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

在頁面上的元素之間應(yīng)該留出更多的空白空間，避免屏幕上雜亂的外觀。要做到這一點，需要綜合使用更大的外邊距和內(nèi)邊距。這對“觸屏”UI也同樣是一個好建議。

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

2.1 高清顯示分辨率

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

2.1.1 電腦和移動設(shè)備的顯示分辨率

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

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

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

2.1.2 電視顯示分辨率

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

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

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

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

注注釋：

可尋址的屏幕尺寸是可見的像素數(shù)目。

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

確定當前顯示器的屏幕尺寸和分辨率，使用“顯示單位”中的dpi與屏幕分辨率。

2.1.3 過掃描

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

不幸地是，過掃描也因為制造商的不同而不同。所以圍繞你的UI的空白邊也多種多樣。如果你為一部有顯示過掃描的電視設(shè)計UI，你也許在不經(jīng)意間將過掃描區(qū)域當作UI和電視邊框之間的空白邊使用了。如果之后你在一部幾乎沒有過掃描的電視上運行你的應(yīng)用程序，UI將幾乎沒有空白邊，這些元素可能很難識別。

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

圖1 屏幕分辨率和尺寸

2.2 色彩

與電腦顯示器相比，電視屏幕有更高的對比度和飽和度?？紤]到這點，在使用純色的時候要考慮一下準則：

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

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

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

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

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

2.3 文本

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

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

每個段落限制90個單詞。

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

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

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

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

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

3.聲音和UI

使用Google TV的電視往往連接著最好的家用揚聲系統(tǒng)。不像在電腦上那樣，在電視上，聲音不被認為是干擾因素，所以設(shè)法在你的UI中使用聲音。牢記以下幾點：

使用適宜起居室環(huán)境的聲音。

默認一個低的初始值。

假設(shè)你的用戶在使用你的應(yīng)用時，他們將會觀看電視或聽音樂。提供一個簡單的方式將你的應(yīng)用靜音。不要完全依賴音頻信號來完成交互，而要適量使用。

Android 有聲音焦點的概念，允許應(yīng)用程序排外地請求音頻的播放。所以，如果你的應(yīng)用程序中的主要功能依賴于聲音（如媒體播放器），你應(yīng)該請求排外的聲音焦點。如果應(yīng)用程序在后臺播放媒體，你應(yīng)該建立一個聲音焦點改變監(jiān)聽器，并且尊重其他應(yīng)用程序?qū)β曇艚裹c的請求。更多的信息可以在這里可以找到。

4.導(dǎo)航設(shè)計

Google TV 設(shè)備通常包含一個鍵盤和用來控制光標的定位設(shè)備。許多用戶在觀看電視時，將會把這些設(shè)備放在手邊。這兩種方式可能會組合在一個單獨的物理設(shè)備里，這個設(shè)備還可能包含鼠標。鍵盤顯然是用來輸入文本的。指示設(shè)備是導(dǎo)航板（D-pad）的一個變體，觀眾可以用來定位光標或者焦距在某個UI元素上。在鍵盤或指示設(shè)備（或兩者兼有）上的附加按鈕也許會提供更多的傳統(tǒng)遙控功能，如控制開關(guān)、回放等等。

如果有鼠標的話，可以通過鼠標在屏幕控制鼠標，點擊鼠標下的UI按鈕。再次提醒，在傳統(tǒng)上，電視是一種廣播系統(tǒng)而不是對話系統(tǒng)。用戶也許不會有使用方向?qū)Ш芥I或者鼠標的經(jīng)驗。即使是有經(jīng)驗的電腦用戶也會發(fā)現(xiàn)在電視上使用鼠標的困難。

以下是幾條在Google TV 的應(yīng)用中的設(shè)計UI 導(dǎo)航的準則：

用方向鍵導(dǎo)航而不是鼠標導(dǎo)航。用戶可能對使用電視遙控器的這種導(dǎo)航方式更加熟悉。

如果你選擇使用鼠標導(dǎo)航，要為鼠標提供超大的選擇界面。將可點擊的按鈕做得大大的，這樣用戶可以更容易地將光標定位在它們上面。

避免復(fù)雜或者靜謐的鼠標導(dǎo)航。不要使用拖放和下拉菜單。這些在電視環(huán)境中很難控制。

為導(dǎo)航提供高度明顯的UI反饋。當光標轉(zhuǎn)移到選項界面上，展開或高亮顯示導(dǎo)航。使用過渡和移動，為繼續(xù)或倒退操作提供視覺提示。例如，如果用戶選擇一項操作后，一個新的頁面從右側(cè)滑入，用戶也許憑直覺明白，按下方向鍵盤的左鍵將會返回到前一頁。

你的目標是提供一個導(dǎo)航機制，用戶可以通過它很快地知道自己將要去到哪里。

再次提醒各位，電視既不是電腦也不是移動設(shè)備。沒有觸屏，它的鼠標（如果有的話）很難控制。為了模擬用戶在使用TV導(dǎo)航時的思維模式，嘗試在不使用鼠標的情況下，在運行Android應(yīng)用的模擬器中使用導(dǎo)航。界面有多直觀？做些什么能讓它們表現(xiàn)得更好？

4.1 方向鍵導(dǎo)航

方向鍵控制器將運動限制在上、下、左、右。使用方向鍵中間的Enter或OK鍵觸發(fā)光標所在的操作。

用戶需要方向?qū)Ш芥I快速簡單的交互。牢記用戶是在一定距離之外導(dǎo)航，也許還可能是在黑暗中！

當你為方向鍵導(dǎo)航進行設(shè)計時，遵循以下準則：

確保方向箭頭按鈕可以導(dǎo)航至屏幕上所有可見的控件。

如果你使用某個方向鍵來滾動一個列表，確保用戶能選擇在列表中的某個元素，而且某個元素被選擇后，這個列表仍然能夠滾動。

如果有多個項目在應(yīng)用程序中被選擇，確保用戶能清楚得知道自己現(xiàn)在選擇的是哪一項。

確保在你的應(yīng)用程序的任何可以使用方向鍵盤的UI項目中，提供了全部的“選中”、“聚焦”和“選中并聚集”的狀態(tài)

了解更多關(guān)于方向鍵導(dǎo)航的信息，請閱讀“Google TV Android開發(fā)準則”中的“UI 控件準則”一章。

4.2 鼠標導(dǎo)航

在電視屏幕上，鼠標移動的是一個小而遠的光標箭頭。因為鼠標控制器本身是觸板或軌跡球而不是傳統(tǒng)有滑球的鼠標，所以鼠標控制是比較困難的。幫助你的用戶使用鼠標：

放大每一個光標可以訪問的UI控件（比如鏈接或按鈕），并在控件周圍留出足夠的空白。

增加一個“hover”狀態(tài)，當光標經(jīng)過控件的時候，這個控件外觀會發(fā)生變化。

使用箭頭指示讓用戶知道在屏幕外有可訪問的內(nèi)容。使用箭頭作為控件，點擊后轉(zhuǎn)到頁面外。

4.3 導(dǎo)航幫助

對大多數(shù)的用戶來說，十英尺環(huán)境里的導(dǎo)航是新鮮的。使用幫助按鈕或操作欄按鈕觸發(fā)對話框，給他們提供文本幫助。內(nèi)容覆蓋以下這些：

方向?qū)Ш芥I：它們可以切換頁面嗎？他們能打開上下文或?qū)Ш讲藛螁幔?/p>

返回按鈕：它能返回前一頁嗎？可以撤銷上一個動作嗎？它可以關(guān)閉一個彈出窗口嗎？

媒體按鍵：按下播放/暫停鍵會如何？按下快進/快退呢？

其它按鍵：是取消或關(guān)閉彈出窗口的按鍵嗎？例如，ESC鍵能關(guān)閉一個彈出窗口嗎？

你也許希望在用戶第一次使用你的應(yīng)用時，自動顯示幫助對話框。

4.4 垂直滾動

垂直頁面滾動對于桌面瀏覽器來說是基本的，這種方式在電視中可能就不是那么好用了。滾動可能生澀緩慢，重要的信息可能被隱藏在屏幕之外。因為用戶不理解這種滾動是可以持續(xù)的。

相反的，使用水平布局，并且提供頁面間的視覺過渡。如果要使用垂直滾動，將其范圍限制在頁面中的細節(jié)區(qū)域。保持左側(cè)導(dǎo)航欄固定。除此之外，保持上下文易于理解，這將會更好得易于用戶理解。

4.5 類別導(dǎo)航

將類別（你將會放進菜單或標簽中的項目）放在屏幕的左側(cè)。在電視上，水平方向的空間比較充裕，但垂直方向上則是有限的。在屏幕上盡量一直保持類別選擇，為此你也許不得不去減少類別的數(shù)目。如果你要將手機應(yīng)用移到電視上，考慮重新設(shè)計或者至少測試復(fù)雜嵌套的、有許多子目錄的導(dǎo)航。

4.6 選擇

在電視屏幕上，不容易將光標定位在選項上，為了幫助用戶做選擇，遵循以下準則：

當光標停留在控件上時（即hover狀態(tài)），高亮顯示選擇的控件。

確保可選的控件足夠大，并為文本標簽留出足夠的額外空白邊。

不要使用傳統(tǒng)的小控件，例如在窗口角落使用“關(guān)閉”按鈕。這樣既可能很難發(fā)現(xiàn)，又可能很不容易選擇，甚至兩者兼有。

避免使用鼠標關(guān)閉彈出窗口，舉個例子，用戶點擊窗口之外的地方，PC應(yīng)用程序就會關(guān)閉。這種方式在十英尺環(huán)境中是不明顯的。相反的，為關(guān)閉對話框提供一個清楚明確的控件，并確保方向鍵盤能訪問到它。

不需要用戶選擇首要控件來激活它，而是要讓首要或默認的控件處在激活狀態(tài)（聚焦其上），并且高亮顯示。

如果窗口或?qū)υ捒虻囊徊糠中枰獫L動，那么自動聚焦其上，或者允許它在沒有聚焦的時候可以滾動。讓用戶在滾動元素之前先點擊它是強人所難的做法。

4.7 上下文、選擇和焦點

應(yīng)用程序的通行狀態(tài)包括上下文、選擇和焦點。上下文通常是一套分類，而選擇是用戶已經(jīng)選中的分類。焦點是在光標下的控件或元素。這些控件或元素都應(yīng)該有與眾不同的高亮狀態(tài)，而且高亮的機制在整個應(yīng)用程序中應(yīng)該保持一致。

舉個例子，如果是一個都是影片的屏幕上，應(yīng)用程序提供一行顯示不同類別的上下文標簽。例如“全部電影”、“最新發(fā)行”、“流行”、“編輯推薦”等等。如果用戶選擇了其中的一個標簽，“選中”狀態(tài)應(yīng)該在視覺上與正在變動的“聚焦”狀態(tài)不同，以此來指出當前屏幕導(dǎo)航所在的位置。如圖2所示：

圖2 選擇與焦點

對Google TV應(yīng)用程序來說，方向鍵聚焦狀態(tài)等同與鼠標hover狀態(tài)。這是用戶理解應(yīng)用程序狀態(tài)的主要方式，它可以幫助用戶預(yù)測出如何移動焦點或進行選擇。

4.8 焦點與焦點預(yù)期

就像踩著石頭跨過小溪一樣，用戶考慮如何在那些可以接受聚焦的UI元素間移動，并避開那些不能聚焦的。用與眾不同的視覺特征來幫助用戶，像在可以聚焦的元素上加上輪廓。區(qū)別可聚焦和不可聚焦元素，可以幫助用戶了解你的UI。將元素用網(wǎng)格形式排列是幫助用戶的另一個方式（如圖3）。

圖3 UI導(dǎo)航的網(wǎng)格模式

對于方向鍵盤的上、下、左、右控制方式來說，網(wǎng)格是最顯而易見的映射。如果不使用網(wǎng)格，元素可能會傾斜，在不同基線上，或在不同的垂直中心線上。這會強迫用戶從上到下、從左到右重復(fù)切換，或者會讓用戶感到困惑，不知道如何去移動焦點。

某些元素，像可滾動列表，可能會與網(wǎng)格排列相矛盾（見圖4），在這種情況下，你應(yīng)該盡可能將默認狀態(tài)下的焦點放在離網(wǎng)格近的地方。

圖4 可滾動排列與網(wǎng)格布局

4.9 視覺指示

為界面中可選擇、可導(dǎo)航的項目添加指示或高亮狀態(tài)，是一個好做法。這種做可以啟示用戶。期望用戶探索界面，自己摸索什么是可選擇，什么是不可選擇的做法是不可取的。假設(shè)UI是直覺上就可以知道的想法也同樣不可接受。應(yīng)該仔細標注、解析UI來獲得用戶的認可與忠誠。

4.10 過渡

應(yīng)用程序中使用過渡能啟發(fā)用戶，但也可能會把他們搞糊涂。確保過渡能夠傳達某種含義，而不僅僅是提供視覺愉悅。以下是一些準則：

避免重載整個頁面，因為這會引起最強烈的延遲感受。

對于只影響一個片段的任何操作，過渡應(yīng)該處于這個片段內(nèi)。

確保進度信息是有意義和明確的，動畫圖像應(yīng)該能指示出完成了多少進度，還有多少工作未完成。

不要為網(wǎng)格中的每一個元素顯示loading動畫。在網(wǎng)格中的12個項目都在加載動畫，雜亂的界面會讓用戶難以瀏覽。

5.用戶界面設(shè)計

當你設(shè)計用戶界面，牢記以下準則：

保持設(shè)計的一致性。

保持元素行為的一致性。

保持所有重要的操作和選項可見，包括搜索、設(shè)置、返回等等。在十英尺環(huán)境中，不可見的元素容易被記住，即便它們是在屏幕以外或者在遙控器上。

5.1 跨設(shè)備的UI

你有一個移動設(shè)備上的應(yīng)用程序，并且你想將它轉(zhuǎn)移到10英尺環(huán)境中。如何將1英尺的UI 轉(zhuǎn)換為10英尺的UI？記住，最重要的是，更大未必是更好的。平板比智能手機好，電腦比平板好，但是電視要比電腦好嗎？

圖5 屏幕尺寸比較

你可能認為42”屏幕是最強大的，但是情況并非如此。智能手機通常比電視有更強的處理能力。電視中的高清視頻和音頻是預(yù)先渲染的，所以電視所需要的只是與廣播源中的高寬帶連接。換句話說，大多數(shù)電視的信息處理工作是由廣播源完成的，而不是電視本身。