Apple TV 人機(jī)界面指南

Edwina · 發(fā)表于 2015-12-4 13:43

新Apple TV重新定義了起居室的體驗(yàn)，你能將非同凡響而身臨其境的內(nèi)容投放到大屏幕上，這是前所未有的體驗(yàn)。

1 概述
1.1 設(shè)計(jì)原則

無(wú)論你是在開發(fā)游戲、媒體流應(yīng)用，還是家庭實(shí)用應(yīng)用，在構(gòu)想產(chǎn)品的時(shí)候請(qǐng)記住這些設(shè)計(jì)原則。

互聯(lián) Connected

Apple TV通過革命性的Siri遙控器為電視帶來(lái)了觸控體驗(yàn)。用戶可以在房間的任何一個(gè)角落，通過流暢、直觀的手勢(shì)與內(nèi)容進(jìn)行交互。觸控板的操作猶如人們熟悉的trackpad，全新的遙控器支持輕觸、滑動(dòng)和點(diǎn)按。請(qǐng)利用觸控的優(yōu)勢(shì)，運(yùn)用令人愉悅、引人入勝的方式，將用戶和內(nèi)容連接在一起。

明確 Clear

Apple TV給人自然、直觀的感受，令你本能地知道該怎么做。你的應(yīng)用應(yīng)該增強(qiáng)這一體驗(yàn)。用布局網(wǎng)格、動(dòng)作和透明度打造語(yǔ)境。為每個(gè)元素賦予空間感，讓用戶清楚它們?cè)谀愕膽?yīng)用中的位置。Apple TV的導(dǎo)航采用焦點(diǎn)模型。用戶使用遙控器在界面元素間移動(dòng)，例如電影海報(bào)、應(yīng)用或按鈕，通過點(diǎn)按選中某個(gè)元素。導(dǎo)航中的當(dāng)前項(xiàng)是選中態(tài)，如果一個(gè)元素被選中聚焦，即使遠(yuǎn)看也該一目了然。

沉浸 Immersive

精美、綿延無(wú)邊框的藝術(shù)畫面將用戶吞沒在豐富多彩的影音體驗(yàn)中。對(duì)單個(gè)內(nèi)容的聚焦提升了這種體驗(yàn)，遙控器的觸控版會(huì)讓你覺得自己在直接觸摸屏幕，與在iOS設(shè)備上操作無(wú)異。通過吸引人的內(nèi)容、令人振奮的影像、以及精巧流暢的動(dòng)畫力求沉浸感。

1.2 應(yīng)用 APP

tvOS為一系列本地運(yùn)行的應(yīng)用提供了開發(fā)框架，如吸引人的游戲、實(shí)用工具和其他Apple TV本地應(yīng)用。如果你熟悉iOS應(yīng)用設(shè)計(jì)，你就已經(jīng)知道大部分你需要了解的東西了。大部分界面元素和開發(fā)框架在tvOS里也同樣存在。然而，想創(chuàng)造一個(gè)可以遙控、在電視屏幕運(yùn)轉(zhuǎn)良好的出色影音體驗(yàn)確實(shí)需要一些重要而且獨(dú)特的設(shè)計(jì)考量。

仔細(xì)思考用戶交互。把你應(yīng)用的體驗(yàn)設(shè)計(jì)得直觀、簡(jiǎn)潔、流暢。在iOS里，用戶看到的和觸摸的是同一個(gè)設(shè)備。在Apple TV上，用戶看著房間另一頭的屏幕，同時(shí)觸摸的是遙控器。尋找機(jī)會(huì)通過遙控器讓用戶感到和應(yīng)用連接在一起，即使他們坐在一定距離之外。

考慮用戶與屏幕的距離，讓焦點(diǎn)醒目。你的應(yīng)用將會(huì)是在距離電視10英尺外的沙發(fā)上也能被使用的。相應(yīng)地去設(shè)計(jì)界面元素，讓用戶不會(huì)感到困惑。并且明確聚焦的事物以及明確在遙控器上操作帶來(lái)的反饋。

創(chuàng)造共享體驗(yàn)。用戶通常在公共環(huán)境中享受電視?？紤]你的應(yīng)用應(yīng)該怎樣吸引一組用戶，以及每次打開應(yīng)用的都是不同的用戶。

應(yīng)用開發(fā)相關(guān)信息，參閱 tvOS應(yīng)用編程指南。

1.3 首頁(yè)

Apple TV首頁(yè)展現(xiàn)已安裝的應(yīng)用。用戶瀏覽網(wǎng)格排列的一系列應(yīng)用圖標(biāo)，選中一個(gè)并通過點(diǎn)擊來(lái)啟動(dòng)應(yīng)用。

在首頁(yè)上，你的應(yīng)用圖標(biāo)是講述你應(yīng)用的故事以及與用戶建立情感連接的最好機(jī)會(huì)。你的應(yīng)用圖標(biāo)應(yīng)該建立好的第一印象，所以請(qǐng)?jiān)O(shè)計(jì)一個(gè)獨(dú)特、動(dòng)人、便于記憶的圖標(biāo)吧。設(shè)計(jì)指導(dǎo)參閱 4.2 應(yīng)用圖標(biāo)。

1.4 頂部展區(qū) Top Shelf

頂部展區(qū)是首頁(yè)上位于首行應(yīng)用列表之上的內(nèi)容展示區(qū)域，用戶可以決定頂部展區(qū)展示哪些應(yīng)用。當(dāng)聚焦這些應(yīng)用中的一個(gè)時(shí)，頂部展區(qū)展示于此應(yīng)用相關(guān)的特定推薦內(nèi)容。

頂部展區(qū)突出展現(xiàn)應(yīng)用中最新、推薦或者有價(jià)值的內(nèi)容，并且給用戶提供直接跳轉(zhuǎn)的獨(dú)特機(jī)會(huì)。例如，當(dāng)聚焦App Store時(shí)，橫幅突出展現(xiàn)值得關(guān)注的新應(yīng)用。當(dāng)聚焦iTunes TV Shows時(shí)，用戶可以看見一系列推薦節(jié)目。聚焦并且點(diǎn)擊一個(gè)節(jié)目，就會(huì)直接跳轉(zhuǎn)到應(yīng)用內(nèi)相關(guān)的節(jié)目詳情頁(yè)。聚焦到一個(gè)節(jié)目時(shí)，按下遙控器的播放／暫停鍵即刻開始回放該節(jié)目。

推薦內(nèi)容的設(shè)計(jì)指南，參閱 4.3 頂部展區(qū)圖片。

1.5 焦點(diǎn)和視差

在Apple TV上，導(dǎo)航過程中當(dāng)前的界面元素，如某圖標(biāo)、圖片、按鈕或其他的界面元素，可視為處于聚焦態(tài)。當(dāng)一個(gè)元素被聚焦，它會(huì)被緩緩的提到前景。在遙控器觸控板上輕輕畫圓，元素會(huì)相應(yīng)地做出搖擺動(dòng)作。與此同時(shí)，元素上出現(xiàn)照明光澤，制造表面反光的視覺效果。如果用戶一段時(shí)間內(nèi)沒有操作，非聚焦中的內(nèi)容轉(zhuǎn)為暗淡而聚焦中的元素變的更大。這些共同作用的效果，與坐在沙發(fā)上的用戶保持一種聯(lián)系，并且提供了上下文和一種明確的感受，強(qiáng)調(diào)了什么在焦點(diǎn)。

視差效果是一種貫穿整個(gè)系統(tǒng)的精巧視覺效果，它傳達(dá)了聚焦元素的縱深和動(dòng)態(tài)。通過圖片分層、透明度、縮放和動(dòng)效，視差效果打造了活靈活現(xiàn)的、真實(shí)的3D感。為了支持視差效果，提供圖像分層是應(yīng)用圖標(biāo)的要求之一，也是首頁(yè)頂部展區(qū)的動(dòng)態(tài)內(nèi)容可以支持的。我們提倡應(yīng)用中任何可被聚焦的圖片內(nèi)容都使用分層圖片。

更多關(guān)于焦點(diǎn)的信息，見 3.2 焦點(diǎn)和選擇。在 4.5 圖像分層中學(xué)習(xí)如何為視差設(shè)計(jì)圖片。聚焦和視差實(shí)現(xiàn)指南，見 tvOS應(yīng)用編程指南。

2 遙控器與交互

使用革命性的Siri遙控器，與屏幕內(nèi)容創(chuàng)建一種獨(dú)特、親密的聯(lián)系。

2.1 遙控器

遙控器為Apple TV最主要的操作設(shè)備，創(chuàng)造性地利用遙控器的觸控板、加速計(jì)以及陀螺儀，為用戶提供令人感嘆的和直觀的體驗(yàn)。用戶在客廳使用遙控器時(shí)感覺像直接與電視交互一樣。

2.2 手勢(shì)

遙控器的觸控板可以檢測(cè)到多種直觀的單指手勢(shì)。利用手勢(shì)可以與你的內(nèi)容建立一種實(shí)感的聯(lián)系。

滑動(dòng) Swipe

用戶可以在選項(xiàng)間向上、下、左、右移動(dòng)焦點(diǎn)?；瑒?dòng)手勢(shì)的滾動(dòng)通常帶有慣性，即基于滑動(dòng)的力度，滾動(dòng)開始快，隨后慢下來(lái)。通過這種方式，用戶可以毫不費(fèi)勁地在大量?jī)?nèi)容中移動(dòng)。

點(diǎn)擊 Click

點(diǎn)擊能激活控件或選擇一個(gè)選項(xiàng)。點(diǎn)擊是一個(gè)強(qiáng)意圖性的動(dòng)作，也是觸發(fā)行動(dòng)的主要形式?！包c(diǎn)擊并長(zhǎng)按”是用來(lái)觸發(fā)特定情境下的動(dòng)作。舉個(gè)例子，點(diǎn)擊并長(zhǎng)按界面元素可以進(jìn)入編輯狀態(tài)。

輕觸 Tap

輕觸能在一系列的元素中逐個(gè)瀏覽。在基于UIKit的標(biāo)準(zhǔn)界面的應(yīng)用中，輕觸導(dǎo)航的不同區(qū)域能直接導(dǎo)航。舉個(gè)例子，輕觸觸控板的頂部向上導(dǎo)航。一些應(yīng)用會(huì)使用輕觸手勢(shì)來(lái)顯示隱藏的控件。

為了避免在無(wú)意中觸發(fā)動(dòng)作，所以要區(qū)分點(diǎn)擊和輕觸。點(diǎn)擊手勢(shì)是一種強(qiáng)意圖的交互行為，常適用于按下按鈕，確認(rèn)選擇以及在游戲中發(fā)起一個(gè)動(dòng)作。輕觸手勢(shì)適用于導(dǎo)航或者展示一些額外的信息。但需要注意的是用戶在拿起遙控器、移動(dòng)遙控或把遙控器交給他人時(shí)，他們的手指可能會(huì)自然地放在遙控器上。

避免使用標(biāo)準(zhǔn)手勢(shì)執(zhí)行非標(biāo)準(zhǔn)的行為，除非你的應(yīng)用是一個(gè)需要手勢(shì)的互動(dòng)游戲 (active gameplay)。重新定義標(biāo)準(zhǔn)手勢(shì)的含義會(huì)導(dǎo)致用戶困擾和交互復(fù)雜性。

當(dāng)且僅當(dāng)必要時(shí)，你的應(yīng)用能定義新手勢(shì)。人們熟悉標(biāo)準(zhǔn)的手勢(shì)，不喜歡被迫學(xué)習(xí)其他的方法去完成相同的事情。在游戲或者其他沉浸式應(yīng)用里，定制手勢(shì)也是體驗(yàn)中有趣味的部分。但在其他應(yīng)用里，最好還是使用標(biāo)準(zhǔn)手勢(shì)，這樣用戶就不需要額外的努力去發(fā)現(xiàn)或者記住它們。

適當(dāng)時(shí)，不同位置的輕觸手勢(shì)能輔助導(dǎo)航和游戲。遙控器可以區(qū)分的觸控板上下左右的輕觸手勢(shì)。如果要對(duì)不同位置的輕觸做出響應(yīng)，前提是你的應(yīng)用和對(duì)應(yīng)的情境需要該輕觸動(dòng)作，且這一行為是直觀的、可發(fā)現(xiàn)的。

2.3 游戲手柄

在游戲里，游戲手柄可以提升可玩性以及增加沉浸感。游戲手柄也能對(duì)Apple TV的基于焦點(diǎn)的界面進(jìn)行導(dǎo)航，省去切換輸入設(shè)備的需要。

重要：游戲手柄是選購(gòu)項(xiàng)，用戶不一定有購(gòu)買。但每臺(tái)Apple TV一定會(huì)配置遙控器。如果你的應(yīng)用可以支持游戲手柄，那么你必須讓遙控器也能控制游戲控制。

確認(rèn)游戲手柄的連接。你的游戲可能隨時(shí)啟動(dòng)，甚至在沒有游戲手柄連接的情況下。為了確保可靠的用戶體驗(yàn)，應(yīng)用啟動(dòng)時(shí)應(yīng)該檢查手柄是否就位，如手柄是必要的，可以友好地提示用戶連接手柄，還需要告知用戶游戲手柄比遙控器多提供的能力。

不要讓用戶在使用你的應(yīng)用時(shí)切換操作設(shè)備。用遙控器和游戲手柄測(cè)試你的應(yīng)用，以及確保它們能在菜單和必要的導(dǎo)航上能使用?？紤]一下，在使用遙控器時(shí)，你還能使用什么交互。舉個(gè)例子，在賽車游戲里，你可以讓用戶在遙控器橫屏模式上進(jìn)行旋轉(zhuǎn)和操作。參閱 2.4 按鈕了解按鈕預(yù)期行為。

關(guān)于游戲手柄支持的相關(guān)信息，可以查看 tvOS應(yīng)用編程指南中的 Working with Game Controllers。了解如何開發(fā)游戲，請(qǐng)查閱 GameplayKit Programming Guide。

2.4 按鈕

遙控器上除了觸控板外，還有些可點(diǎn)擊的按鈕，例如播放/暫停鍵也可以用于你的應(yīng)用或者游戲上。當(dāng)菜單按鈕被按下時(shí)，使用游戲控制框架（Game Controller framework）的應(yīng)用程序也能收到通知并采取適當(dāng)行動(dòng)。在你的應(yīng)用或游戲的情境中，不管用戶使用遙控器還是游戲手柄，按鈕的行為應(yīng)該一致且可預(yù)測(cè)的。

Siri遙控器的按鍵操作預(yù)期

給用戶返回到上一屏以及離開你的應(yīng)用或者游戲的路徑。用戶預(yù)期按下遙控器或者游戲手柄上的菜單按鈕時(shí)，可以回到上一屏或者Apple TV的首頁(yè)。當(dāng)在應(yīng)用或者游戲首頁(yè)時(shí)，按下菜單按鈕應(yīng)該始終回到Apple TV首頁(yè)。在游戲過程中，按下菜單按鈕應(yīng)該可以顯示或者隱藏游戲中的暫停菜單，里面也應(yīng)該包括一個(gè)選項(xiàng)可以導(dǎo)航回到游戲的主菜單。

始終可以使用Siri遙控器上的播放/暫停按鈕。無(wú)用的按鈕感覺像壞了一樣，所以應(yīng)該始終為播放/暫停按鈕提供合理的行為。舉一個(gè)例子，讓用戶使用播放/播放鍵來(lái)開始游戲，跳過一頁(yè)教程說(shuō)明，或者直接開始播放媒體。在游戲過程中，如果不需要輔助操作，播放/暫停應(yīng)執(zhí)行主操作。在一個(gè)應(yīng)用里，如果沒有明顯的可播放內(nèi)容，播放/暫停的操作行為等同于點(diǎn)擊，用來(lái)激活一個(gè)焦點(diǎn)選項(xiàng)（focused item）。

3 導(dǎo)航和焦點(diǎn)

運(yùn)用這些設(shè)計(jì)準(zhǔn)則能幫助你創(chuàng)造運(yùn)行自然的應(yīng)用，如同Apple TV身臨其境體驗(yàn)的一部分。

3.1 導(dǎo)航

用戶往往不會(huì)注意到一個(gè)應(yīng)用的導(dǎo)航，除非它并不符合他們的預(yù)期。你的工作是建立既能支持應(yīng)用的結(jié)構(gòu)和目標(biāo)，又不會(huì)吸引用戶注意力的導(dǎo)航。導(dǎo)航應(yīng)該是自然而熟悉的，它不應(yīng)該主宰用戶界面或讓用戶從內(nèi)容中分心。

在Apple TV上，用戶在堆疊的頁(yè)面間移動(dòng)，瀏覽內(nèi)容。每一屏可能放置前往其他屏的入口，并且通過遙控器返回到前一屏或主菜單。一般情況下，使用標(biāo)準(zhǔn)的用戶界面元素，如標(biāo)簽欄、表單視圖（table views）、內(nèi)容集視圖（collection views）和分屏視圖（split views），可以在不同的頁(yè)面間切換。

設(shè)計(jì)一個(gè)能快速簡(jiǎn)單到達(dá)內(nèi)容的信息結(jié)構(gòu)。用戶想用最少的輕觸、滑動(dòng)，迅速地訪問到內(nèi)容。簡(jiǎn)化你的信息結(jié)構(gòu)，用最少屏數(shù)來(lái)組織它。

利用觸控來(lái)達(dá)成流暢性。提供簡(jiǎn)單的，用最少手勢(shì)便能在焦點(diǎn)元素中阻力最低地移動(dòng)的方法。

考慮焦點(diǎn)。Apple TV的導(dǎo)航并不總能一步到位。由于電視采用基于焦點(diǎn)的選擇模型，用戶需要先通過遙控器，把焦點(diǎn)移動(dòng)到目標(biāo)界面元素后，才能與其交互。如果你的導(dǎo)航方案需要太多的手勢(shì)才能實(shí)現(xiàn)目標(biāo)，用戶可能會(huì)感到沮喪。參閱 3.2 焦點(diǎn)和選擇。

通過菜單按鈕實(shí)現(xiàn)后退導(dǎo)航。讓用戶能通過遙控器上的菜單按鈕返回，以創(chuàng)建簡(jiǎn)單和可預(yù)期的導(dǎo)航體驗(yàn)。在玩游戲時(shí)，點(diǎn)擊菜單按鈕應(yīng)該回到游戲主界面或調(diào)起有返回至菜單主界面選項(xiàng)的游戲菜單。在應(yīng)用或游戲的一級(jí)界面，點(diǎn)擊菜單按鈕會(huì)退出至Apple TV的主屏幕。

避免顯示返回按鈕。用戶知道按菜單鍵能返回，所以不要在你的應(yīng)用中浪費(fèi)空間去顯示一個(gè)額外的重復(fù)此功能的控件了。但當(dāng)界面中只存在購(gòu)買或刪除的按鈕時(shí)，可以考慮提供取消按鈕，便于讓用戶能返回上一界面。

內(nèi)容合集在一屏顯示比優(yōu)于在多屏顯示。即使一屏的元素非常多，遙控器的手勢(shì)也能幫助用戶快速移動(dòng)。如果你有個(gè)焦點(diǎn)元素的集合，可以考慮用一屏顯示，以保持導(dǎo)航的簡(jiǎn)單。

使用標(biāo)準(zhǔn)的導(dǎo)航組件。如果你的應(yīng)用用戶界面使用UIKit實(shí)現(xiàn)，采用標(biāo)準(zhǔn)的導(dǎo)航控件，如頁(yè)面控制器（page controls）、標(biāo)簽欄（tab bars）、分段控件（segmented controls）、表單視圖（table views）、內(nèi)容集視圖（collection views）和分屏視圖（split views），用戶已經(jīng)熟悉這些控件，他們將直觀地知道如何使用你的應(yīng)用。你可以在 6 界面元素了解這些導(dǎo)航組件。

支持內(nèi)容垂直導(dǎo)航。左右滑動(dòng)比上下滑動(dòng)更自然，在選擇或設(shè)計(jì)內(nèi)容布局時(shí)，請(qǐng)考慮這一點(diǎn)。

3.2 焦點(diǎn)和選擇

在iOS設(shè)備上，用戶直接通過在觸控板上輕觸或滑動(dòng)與用戶界面交互。Apple TV沒有觸屏，用戶在房間里，通過遙控器直接與屏幕中的元素交互。這一交互模式是基于焦點(diǎn)模型的。通過按下按鈕或使用遙控器上的手勢(shì)，用戶可以在元素間變換焦點(diǎn)，停留于某一元素，點(diǎn)擊到達(dá)內(nèi)容或激活動(dòng)作。焦點(diǎn)改變時(shí)，微妙的動(dòng)畫和視差效果營(yíng)造的縱深感，能明確標(biāo)識(shí)出此元素現(xiàn)正處于焦點(diǎn)。

使用標(biāo)準(zhǔn)界面元素，獲得相應(yīng)動(dòng)效。如果你的應(yīng)用使用UIKit和focus API實(shí)現(xiàn)用戶界面，你的界面元素的焦點(diǎn)模式會(huì)帶有相應(yīng)的動(dòng)效和視覺效果，這能使你的應(yīng)用感覺更像一個(gè)平臺(tái)原生應(yīng)用，并幫助減少用戶在界面移動(dòng)時(shí)的阻力。當(dāng)用戶在你的應(yīng)用使用Siri遙控器時(shí)，他們會(huì)發(fā)現(xiàn)焦點(diǎn)元素間的轉(zhuǎn)換流暢而直觀。

按用戶預(yù)期方向移動(dòng)焦點(diǎn)。在Apple TV中，幾乎都是間接操作——手勢(shì)在元素間移動(dòng)焦點(diǎn)，系統(tǒng)滾動(dòng)界面使焦點(diǎn)元素保持可見。如果你的應(yīng)用使用間接操作，確認(rèn)焦點(diǎn)與手勢(shì)方向一致。如果用戶在遙控上點(diǎn)按向右或滑動(dòng)向右，焦點(diǎn)應(yīng)該向右移動(dòng)，即內(nèi)容應(yīng)該左移。如果用戶點(diǎn)擊向上或向上滑動(dòng)，焦點(diǎn)也應(yīng)該向上移。而全屏幕元素，如照片，應(yīng)該采用直接操作，手勢(shì)移動(dòng)的實(shí)體而不是焦點(diǎn)。舉例，向右滑應(yīng)該從左向右移動(dòng)相片。

聚焦元素顯性化。用戶在遠(yuǎn)處選擇并操作屏幕上的元素，因此讓他們時(shí)刻知道哪個(gè)元素正處于焦點(diǎn)中至關(guān)重要。通常而言，如果你使用UIKit中的界面元素，系統(tǒng)會(huì)自動(dòng)做到這點(diǎn)。如果你想使用自行開發(fā)的焦點(diǎn)模型，請(qǐng)確保焦點(diǎn)元素突出。舉例而言，一個(gè)圖像為主的合集中，圖像會(huì)有標(biāo)題，你應(yīng)該在焦點(diǎn)元素，而不是非焦點(diǎn)元素下顯示其標(biāo)題。

使用視差效果，讓焦點(diǎn)元素對(duì)用戶交互響應(yīng)更迅速。在遙控器上輕柔地畫圈，相應(yīng)的焦點(diǎn)元素也會(huì)實(shí)時(shí)產(chǎn)生柔和的位移。這樣的反饋能提高對(duì)內(nèi)容連接的認(rèn)知，并強(qiáng)調(diào)了正處于聚焦態(tài)的元素。這種視差效果內(nèi)置于UIKit，使用分層圖像的方式，賦予焦點(diǎn)元素活力感。使用視差能創(chuàng)造更身臨其境的互動(dòng)體驗(yàn)。要了解更多信息，請(qǐng)參閱 1.5 焦點(diǎn)和視差和 4.5 圖像分層。

創(chuàng)建尺寸合適的焦點(diǎn)元素。間距恰當(dāng)?shù)?、較大的元素比較小的元素更易瀏覽和選擇。

界面元素的焦點(diǎn)和非焦點(diǎn)態(tài)都應(yīng)設(shè)計(jì)得美觀。在Apple TV上，處于焦點(diǎn)的元素通常會(huì)稍微放大。當(dāng)你設(shè)計(jì)界面時(shí)，應(yīng)該同時(shí)考慮元素的焦點(diǎn)態(tài)和非焦點(diǎn)態(tài)。為聚焦?fàn)顟B(tài)配置較大尺寸，以確保它們看起來(lái)始終清晰。你可以在 4 圖標(biāo)和圖片中查看圖片尺寸規(guī)范。

焦點(diǎn)的改變應(yīng)是流暢的。一個(gè)元素轉(zhuǎn)為聚焦?fàn)顟B(tài)時(shí)，它會(huì)發(fā)生顏色改變或伴有微妙的動(dòng)畫；當(dāng)焦點(diǎn)再次發(fā)生變化時(shí)，記得讓它自然地恢復(fù)至非焦點(diǎn)態(tài)，而不要讓這個(gè)過渡顯得不和諧。

不要顯示光標(biāo)。用戶預(yù)期通過改變焦點(diǎn)導(dǎo)航，而不是嘗試移動(dòng)屏幕上一個(gè)小小的光標(biāo)。使用焦點(diǎn)模型來(lái)提供行之有效的、一致的體驗(yàn)。

了解更多應(yīng)用中的焦點(diǎn)運(yùn)用，請(qǐng)參閱 tvOS應(yīng)用編程指南。

4 圖標(biāo)和圖片

應(yīng)用圖標(biāo)和圖片對(duì)創(chuàng)造沉浸式的用戶體驗(yàn)至關(guān)重要，這樣的體驗(yàn)吸引著用戶并讓他們充滿興趣。

4.1 圖片尺寸

總是按照界面所需尺寸提供圖片。運(yùn)行時(shí)需要縮小的大尺寸圖像需要花更長(zhǎng)時(shí)間加載，并對(duì)渲染性能有負(fù)向影響。Apple TV上的所有圖片按@1x分辨率提供。

4.2 應(yīng)用圖標(biāo)

每個(gè)應(yīng)用都需要一個(gè)漂亮并令人記憶深刻的圖標(biāo)，在App Store中吸引用戶的注意，在Apple TV首頁(yè)能跳出來(lái)抓人眼球。一瞥之間，圖標(biāo)是第一個(gè)向用戶傳達(dá)應(yīng)用內(nèi)容的機(jī)會(huì)。

提供單一的視覺焦點(diǎn)。為應(yīng)用設(shè)計(jì)單一、中心的視覺焦點(diǎn)，能立刻抓住眼球并能清晰地表現(xiàn)應(yīng)用。用戶不應(yīng)該需要仔細(xì)分析圖標(biāo)才能理解其代表的意思。

保持背景簡(jiǎn)潔。不要用太多背景元素塞滿你的圖標(biāo)。給圖標(biāo)繪制一個(gè)簡(jiǎn)潔的背景，能夠突出上面的圖層，但并不過分壓制它周圍的應(yīng)用圖標(biāo)。記住，你不必填滿整個(gè)圖標(biāo)。

僅當(dāng)必要或文字是LOGO一部分的時(shí)候，才使用文字。當(dāng)圖標(biāo)被選中聚焦時(shí)，應(yīng)用名會(huì)出現(xiàn)在圖標(biāo)的下面。不要包含非必須的文字來(lái)重復(fù)名字或者告訴用戶如何使用你的應(yīng)用，比如觀看(Watch)或者玩(Play)之類的。如果你的設(shè)計(jì)包含文字，可以強(qiáng)調(diào)與應(yīng)用實(shí)際功能相關(guān)的部分。

不包括截圖。截圖對(duì)應(yīng)用圖標(biāo)來(lái)說(shuō)太復(fù)雜，而且通常不能幫助傳達(dá)應(yīng)用內(nèi)容。相反，還是花時(shí)間去設(shè)計(jì)個(gè)漂亮、迷人、突出的圖標(biāo)吧。

保持圖標(biāo)四角是直角。系統(tǒng)會(huì)自動(dòng)用蒙板來(lái)生成圓角。

分層

重要：應(yīng)用圖標(biāo)要求使用分層圖片。具體參見 4.5 圖像分層。

應(yīng)用圖標(biāo)必須有2-5個(gè)圖層來(lái)創(chuàng)造聚焦?fàn)顟B(tài)時(shí)的縱深感和生動(dòng)感。

仔細(xì)考慮如何分離圖層。如果你的圖標(biāo)包含一個(gè)LOGO，把它從背景層中分離出來(lái)。如果你的圖標(biāo)包含文本，把文本放在前景層，這樣在視差效果下就不會(huì)被其他圖層所遮蓋。

圖層樣式

仔細(xì)考慮漸變和陰影。背景的漸變和花紋可能會(huì)與視差效果有沖突，因此使用時(shí)要謹(jǐn)慎。關(guān)于漸變，推薦使用上到下、淺到深的漸變，記得它們會(huì)影響整個(gè)圖層。

應(yīng)用圖標(biāo)中，陰影最好看起來(lái)是銳利、硬線條、融入背景層的著色，當(dāng)圖標(biāo)靜止時(shí)不可見。

利用不同程度的透明度來(lái)增強(qiáng)縱深感和活力度。創(chuàng)造性地使用透明度能夠使你的圖標(biāo)脫穎而出。舉個(gè)例子，Photos圖標(biāo)的核心分成多個(gè)半透明圖層，為設(shè)計(jì)帶來(lái)更多活力。

圖標(biāo)尺寸

重要：每個(gè)應(yīng)用必須提供一個(gè)小尺寸和大尺寸圖標(biāo)。應(yīng)用圖標(biāo)必須呈遞兩種尺寸，兩者長(zhǎng)寬比相同。

小尺寸圖標(biāo)——這個(gè)尺寸的圖標(biāo)在Apple TV主屏上使用。

實(shí)際尺寸：400px by 240px

安全區(qū)域尺寸：370px by 222px

非聚焦態(tài)尺寸：300px by 180px

聚焦態(tài)尺寸：370px by 222px

大尺寸圖標(biāo)——這個(gè)尺寸的圖標(biāo)在App Store使用。

尺寸：1280px by 768px

大尺寸圖標(biāo)應(yīng)照搬小尺寸圖標(biāo)的設(shè)計(jì)。盡管大尺寸圖標(biāo)與小圖標(biāo)使用不同，它仍然是你的應(yīng)用圖標(biāo)，應(yīng)該在外觀與小圖標(biāo)相匹配。

應(yīng)用圖標(biāo)安全區(qū)域模板能夠幫你把內(nèi)容放在合適位置，參見參考資料。

4.3 頂部展區(qū) (Top Shelf) 圖片

當(dāng)用戶把你的應(yīng)用放在Apple TV主屏的最上面一行時(shí)，頂部展區(qū) (Top Shelf) 是增加可見度的好機(jī)會(huì)。應(yīng)用被選中聚焦時(shí)，你能夠展示迷人的圖片，來(lái)鼓勵(lì)用戶使用應(yīng)用去發(fā)掘更多。

重要：最低要求，每個(gè)應(yīng)用至少提供單張頂部展區(qū)靜態(tài)圖——當(dāng)應(yīng)用在主屏最上面一行且被選中聚焦時(shí)使用。

讓用戶能直接跳到相關(guān)內(nèi)容。頂部展區(qū)通往用戶最關(guān)心的內(nèi)容，幫助用戶快速到達(dá)。用戶能通過點(diǎn)擊被選中的圖片來(lái)打開應(yīng)用并直達(dá)相關(guān)內(nèi)容，也能使用遙控器上的播放鍵直接啟動(dòng)媒體播放或進(jìn)入游戲。

展示引人注目的動(dòng)態(tài)內(nèi)容。你展示在頂部展區(qū)上的圖片應(yīng)該吸引用戶、讓他們渴望更多。盡管你也可以在頂部展區(qū)放靜態(tài)圖片，還是要考慮放置更有魅力的動(dòng)態(tài)圖片，比如最新的或者評(píng)價(jià)最高的內(nèi)容。

提供視覺豐富的靜態(tài)圖像。當(dāng)沒提供動(dòng)態(tài)圖或動(dòng)態(tài)圖不可用時(shí)，頂部展區(qū)展現(xiàn)靜態(tài)圖。靜態(tài)圖不可被選中聚焦，所以利用這個(gè)機(jī)會(huì)展現(xiàn)品牌吧。

頂部展區(qū)靜態(tài)圖尺寸：1920px by 720px

個(gè)性化內(nèi)容。用戶熟悉他們放在Apple TV主屏最上面一行的應(yīng)用，他們經(jīng)常使用這些應(yīng)用?？紤]把體驗(yàn)個(gè)性化，在頂部展區(qū)展現(xiàn)有針對(duì)性的推薦項(xiàng)，比如讓用戶能夠恢復(fù)視頻播放、繼續(xù)游戲。

不顯示廣告。當(dāng)用戶將你的應(yīng)用放在主屏的頂行時(shí)，你已經(jīng)成功地把自己推銷給他們了。別再對(duì)他們進(jìn)行廣告轟炸，這樣會(huì)把用戶推開，慫恿他們把你的應(yīng)用撤下來(lái)?？梢栽陧敳空箙^(qū)展示可購(gòu)買內(nèi)容，但是要強(qiáng)調(diào)最新、令人激動(dòng)的內(nèi)容，千萬(wàn)不要展現(xiàn)價(jià)格。

你可以為頂部展區(qū)提供單一圖層或多圖層的圖像。具體參見 4.5 圖像分層。

動(dòng)態(tài)內(nèi)容布局 Dynamic Content Layouts

動(dòng)態(tài)頂部圖像可以作為一排可聚焦內(nèi)容或者滾動(dòng)橫幅出現(xiàn)。布局樣式為展現(xiàn)你的內(nèi)容提供了一系列靈活的格式選擇。不管使用什么樣式，展示用戶最為關(guān)心的內(nèi)容，幫助他們快速獲得所求。

分欄內(nèi)容行 Sectioned Content Row

這一布局樣式展現(xiàn)了一行帶標(biāo)簽的內(nèi)容。它通常用于高亮最近瀏覽內(nèi)容、新的內(nèi)容、或者收藏的內(nèi)容。

行內(nèi)內(nèi)容可被聚焦，允許用戶按自己想要的速度滾動(dòng)。當(dāng)一個(gè)內(nèi)容被聚焦選中時(shí)，一個(gè)標(biāo)簽會(huì)出現(xiàn)，同時(shí)，在遙控器觸控板上輕輕移動(dòng)，會(huì)讓圖片活過來(lái)。如果需要的話，一個(gè)分欄內(nèi)容行也可以被配置多個(gè)標(biāo)簽。

提供足夠的內(nèi)容,構(gòu)成完整的一行。最低限度，在分欄內(nèi)容行至少載入能撐滿屏寬的內(nèi)容。此外，為了平臺(tái)一致性或展現(xiàn)額外信息，至少包含一個(gè)標(biāo)簽。

分欄內(nèi)容行支持多種長(zhǎng)寬比的圖片，包括以下尺寸：

海報(bào) (2:3)

實(shí)際尺寸：404px by 608px

安全區(qū)域尺寸：380px by 570px

非聚焦態(tài)尺寸：333px by 500px

聚焦態(tài)尺寸：380px by 570px

方圖 (1:1)

實(shí)際尺寸：608px by 608px

安全區(qū)域尺寸：570px by 570px

非聚焦態(tài)尺寸：500px by 500px

聚焦態(tài)尺寸：570px by 570px

HDTV (16:9)

實(shí)際尺寸：908px by 512px

安全區(qū)域尺寸：852px by 479px

非聚焦態(tài)尺寸：782px by 440px

聚焦態(tài)尺寸：852px by 479px

注意，當(dāng)多種圖片尺寸混合時(shí)，可能會(huì)發(fā)生額外的縮放。如果你的頂部圖區(qū)含有多種圖片尺寸，圖片會(huì)自動(dòng)放大去匹配最高圖片的高度。例如，當(dāng)和海報(bào)、方圖混合在一排中時(shí)， HDTV圖片會(huì)放大到500px高。

滾動(dòng)橫幅區(qū) Scrolling Inset Banner

這一布局樣式展示一系列幾乎整屏寬的大圖。在限定的時(shí)間內(nèi)，Apple TV自動(dòng)從左到右滾動(dòng)橫幅直到其中某個(gè)被選中。滾動(dòng)到最后一張圖片后，序列回到開始。

當(dāng)一個(gè)橫幅被選中時(shí)，在遙控器觸控板上輕輕畫圈會(huì)觸發(fā)系統(tǒng)聚焦效果：橫幅動(dòng)起來(lái)、打光、產(chǎn)生3D效果（如果橫幅由多個(gè)圖層構(gòu)成的話）。在觸控板上滾動(dòng)，按次序進(jìn)入下一個(gè)或者上一個(gè)橫幅。使用這種設(shè)計(jì)展示豐富、引人注目的內(nèi)容，比如受歡迎的新電影。

提供合理數(shù)量的內(nèi)容確保滾動(dòng)舒適。滾動(dòng)橫幅區(qū)中至少要有3張圖片；超過8張的話很難手動(dòng)導(dǎo)航到某張?zhí)囟▓D片。

如果你需要文字，將它加入到你的圖片中。這種布局樣式在內(nèi)容下面不顯示標(biāo)簽，因此任何文本必須是圖像自身的一部分。在分層圖片中，應(yīng)考慮把文字放在最頂層突出出來(lái)。

滾動(dòng)橫幅區(qū)支持以下尺寸的圖片：

超寬比例

實(shí)際尺寸：1940px by 624px

安全區(qū)域尺寸：1740px by 620px

非聚焦態(tài)尺寸：1740px by 560px

聚焦態(tài)尺寸：1740px by 620px

4.4 游戲中心圖片

如果你的應(yīng)用是一款游戲，游戲中心會(huì)給你更多讓用戶沉浸在搶眼圖像中的機(jī)會(huì)。

成就圖標(biāo)

每個(gè)成就都需要一張不透明的圖標(biāo)，來(lái)直觀地表現(xiàn)用戶在游戲中達(dá)成的成就。系統(tǒng)會(huì)自動(dòng)把成就圖標(biāo)裁切成圓形，所以你需要確保核心內(nèi)容在圖片正中。成就圖標(biāo)是用來(lái)展示的，沒法被選中。

可見尺寸：200px by 200px

實(shí)際尺寸：320px by 320px

控制面板 (Dashboard) 插圖

這種可選圖像出現(xiàn)在你游戲控制面板的頂部。透明度可能被用于讓背景從圖像中顯示出來(lái)?？刂泼姘宀鍒D不能被選中。

最大尺寸：923px by 150px

排行榜插圖

你必須為游戲中的排行榜或排行榜集合提供1-3張單層或多層、長(zhǎng)寬比為16：9的圖像。插圖的底層必須是不透明的。在運(yùn)行時(shí)，深色漸變可能會(huì)從下往上覆蓋圖片，你可以在圖片右下角放置文本。這些圖像可被選中，在遙控器觸控板上輕輕畫圈會(huì)觸發(fā)聚焦效果。

實(shí)際插圖尺寸：659px by 371px

安全區(qū)域尺寸：618px by 348px

未聚焦尺寸：548px by 309px

聚焦尺寸：618px by 348px

如需在應(yīng)用中實(shí)現(xiàn)對(duì)游戲中心的支持，參見游戲中心編程指南。

4.5 圖像分層

圖像分層是Apple TV用戶體驗(yàn)中的精髓。結(jié)合視差效果一起，能夠產(chǎn)生真實(shí)、有活力的體驗(yàn)，并且能隨著用戶與屏幕上內(nèi)容的交互喚起實(shí)體聯(lián)系感。

一張分層圖片由2-5個(gè)不同圖層疊加而成。通過分離圖層和使用透明度來(lái)創(chuàng)造景深的感覺。當(dāng)用戶與圖片互動(dòng)時(shí)，靠前的圖層升起并變大，同時(shí)靠后的圖層進(jìn)一步后退，產(chǎn)生3D效果。

重要：應(yīng)用圖標(biāo)要求使用分層圖片。應(yīng)用中其他可被選中的圖像，包括頂部圖區(qū)圖片，并非必需使用分層圖片，但我們強(qiáng)烈建議使用。

使用標(biāo)準(zhǔn)的界面元素來(lái)顯示分層圖像。如果應(yīng)用的用戶界面使用UIKit框架和focus API，當(dāng)分層圖像被選中聚焦時(shí)，會(huì)自動(dòng)被處理成帶有視差效果的。

合理地區(qū)分前景、中景、背景元素。在前景層展現(xiàn)重要突出的元素，比如游戲中的角色、專輯封面或電影海報(bào)中的文字。中景層尤其適合展現(xiàn)次要內(nèi)容和效果，比如陰影。背景層是不透明的幕布，能夠襯出上面的圖層、但又不搶風(fēng)頭。

通常，把文字放在前景層。把文字放在最上層以便清晰展現(xiàn)，除非你需要文字是模糊的。

背景層是不透明的。使用不同級(jí)別的透明度并讓靠下層的內(nèi)容透出來(lái)沒問題，但背景層必須是不透明的，否則你會(huì)得到錯(cuò)誤提示。不透明的背景會(huì)確保你的設(shè)計(jì)在視差效果下、投陰影時(shí)、在系統(tǒng)背景上使用時(shí)都看起來(lái)很好。

保持簡(jiǎn)單精致的分層。視差被設(shè)計(jì)成幾乎注意不到的效果，過度的3D效果看上去不真實(shí)、不和諧。保持圖像景深的簡(jiǎn)潔，讓你的設(shè)計(jì)充滿生命力和驚喜。

在核心內(nèi)容周圍預(yù)留安全區(qū)域。選中時(shí)和視差效果中，靠近邊緣的圖層內(nèi)容會(huì)被裁切或在圖像縮放移動(dòng)時(shí)難以看清。為了確保核心內(nèi)容總是可見的，不要把它擺放的太靠近邊緣。安全區(qū)域的大小隨圖片尺寸、圖層前后順序和移動(dòng)動(dòng)作變化。前景層會(huì)比背景層裁切得更厲害。

總是預(yù)覽你的分層圖像。設(shè)計(jì)在Apple TV上看起來(lái)很棒的分層圖像，你需要在設(shè)計(jì)過程中通過Xcode預(yù)覽。重點(diǎn)關(guān)注縮放和裁切，如果需要的話調(diào)整圖像直到重要的內(nèi)容總在可視范圍內(nèi)。分層圖像成稿后，你還需要在Apple TV上預(yù)覽用戶實(shí)際會(huì)見到的效果。

分層圖像的大小

在確定分層圖像合適的尺寸時(shí)，同時(shí)需要考慮選中態(tài)和非選中態(tài)。在視差效果中，背景圖層可能會(huì)被少量裁切，所以把核心內(nèi)容設(shè)計(jì)在安全區(qū)域以內(nèi)，并在區(qū)域內(nèi)適當(dāng)留白，以確保你的設(shè)計(jì)在各種情況下都看起來(lái)很好。

推薦使用以下公式來(lái)計(jì)算分層圖像的大小，這一算法根據(jù)圖像非選中態(tài)的尺寸來(lái)計(jì)算。

Apple TV使用CAR和LCR文件加載分層圖像。創(chuàng)建分層圖像

CAR文件

CAR是蘋果定義的一種專有的資源目錄運(yùn)行時(shí)文件格式。你并不直接創(chuàng)建CAR文件，Xcode會(huì)在編譯項(xiàng)目的LSR文件和圖像棧時(shí)自動(dòng)為你建立。

LSR圖像。LSR是蘋果定義的一種專有的分層文件格式。除了在應(yīng)用當(dāng)中使用，LSR文件還可以被導(dǎo)入iTunes Connect用作媒體圖像，比如電影電視劇海報(bào)。Parallax Previewer工具和Parallax Exporter Photoshop插件能讓你預(yù)覽并以LSR格式導(dǎo)出分層圖像。在參考資料可以下載這些工具。
圖像棧。任何標(biāo)準(zhǔn)PNG文件都可以導(dǎo)入并作為圖像棧中的獨(dú)立圖層。與所有分層圖像一樣，圖像棧不超過5層。Xcode還可以把圖像棧導(dǎo)出成LSR文件。

LCR文件

LCR是蘋果定義的一種專有的運(yùn)行時(shí)分層文件格式，并在內(nèi)容服務(wù)器上使用。如果你的應(yīng)用運(yùn)行時(shí)需要從服務(wù)器獲取分層圖片，就必須要用LCR格式提供這些圖片。LCR圖像不應(yīng)該嵌入在應(yīng)用本地。

你并不直接創(chuàng)建LCR文件，而是使用Xcode中的layerutil命令行工具，通過LSR文件或Photoshop文件建立。

如果需要在Xcode應(yīng)用項(xiàng)目中運(yùn)用分層圖像的指南，請(qǐng)查看 tvOS應(yīng)用編程指南。

4.6 啟動(dòng)圖像

啟動(dòng)圖像在應(yīng)用啟動(dòng)時(shí)展現(xiàn)，即時(shí)出現(xiàn)并很快被應(yīng)用的首屏替代，讓用戶感覺應(yīng)用響應(yīng)速度很快。啟動(dòng)圖像并不是藝術(shù)表達(dá)的窗口，它唯一的意圖是增強(qiáng)這樣的用戶認(rèn)知：你的應(yīng)用啟動(dòng)很快，立即就可以使用。啟動(dòng)圖像是靜態(tài)圖、不分層。

重要：每個(gè)應(yīng)用必須提供啟動(dòng)圖。

尺寸：1920px by 1080px

把啟動(dòng)圖設(shè)計(jì)成與應(yīng)用首屏幾乎一樣。如果啟動(dòng)圖中含有不同的元素，當(dāng)啟動(dòng)完成時(shí)，用戶能夠感知到從啟動(dòng)圖切換到應(yīng)用首屏的閃動(dòng)。

在啟動(dòng)圖中避免避免使用文字。因?yàn)閱?dòng)圖是靜態(tài)圖，所以任何文字展現(xiàn)不會(huì)經(jīng)過本地適配。

淡化啟動(dòng)效果。用戶可能會(huì)頻繁切換應(yīng)用，所以設(shè)計(jì)引導(dǎo)圖時(shí)請(qǐng)不要意圖引起用戶對(duì)啟動(dòng)過程的關(guān)注。

別做廣告。啟動(dòng)圖并不是做品牌宣傳的機(jī)會(huì)。不要設(shè)計(jì)得像閃屏或“關(guān)于”窗口，也不要使用LOGO或其他品牌元素，除非它們本來(lái)就是應(yīng)用首屏的一部分。

5 視覺設(shè)計(jì)

Apple TV充滿了一些設(shè)計(jì)獨(dú)到并且兼顧體驗(yàn)的應(yīng)用。以下這些原則可以幫助你設(shè)計(jì)出可以向用戶傳達(dá)品牌理念的應(yīng)用。

5.1 動(dòng)效

Apple TV通過UIKit的方式，內(nèi)置了很多適用于獲得焦點(diǎn)、選擇、和轉(zhuǎn)場(chǎng)的動(dòng)畫，你可以在自己的應(yīng)用中利用他們。這些微妙的動(dòng)畫為用戶和屏幕內(nèi)容建立了視覺感受上的聯(lián)系。內(nèi)置的動(dòng)畫效果與有品位的自定義動(dòng)畫的結(jié)合使用，可以增強(qiáng)內(nèi)容的沉浸式體驗(yàn)。

避免使用無(wú)意義的動(dòng)畫。屏幕上的動(dòng)畫應(yīng)該只是用于響應(yīng)用戶的操作。非用戶行為觸發(fā)的動(dòng)畫會(huì)造成體驗(yàn)的中斷和注意力的分散，不要僅僅是為了使用動(dòng)畫而使用動(dòng)畫。

避免過分夸張的動(dòng)畫。多余的跳動(dòng)或彈簧效果也許讓動(dòng)畫在電腦頻幕上看起來(lái)非常棒，但是呈現(xiàn)在更大的屏幕上的時(shí)候，會(huì)是非常讓人惱火的?？紤]下用優(yōu)雅溫和的動(dòng)畫來(lái)替代吧。請(qǐng)務(wù)必經(jīng)常測(cè)試你的設(shè)計(jì)，以確保在電視上看起來(lái)也棒棒噠。

追求真實(shí)可信的動(dòng)畫。Apple TV的設(shè)計(jì)理念是輕量化，關(guān)鍵的界面組件都在體現(xiàn)輕薄的質(zhì)感。這些輕量化的組件動(dòng)起來(lái)不應(yīng)該表現(xiàn)的像有質(zhì)量似的，比如可以反彈到某個(gè)地方或者是從某個(gè)地方冒出來(lái)。雖然用戶樂于接受藝術(shù)化的處理，但不合理的或是違背物理定律的運(yùn)動(dòng)效果，會(huì)讓人感到迷惑。

5.2 品牌傳達(dá)

成功的品牌傳達(dá)不僅是將品牌元素添加到應(yīng)用中這么簡(jiǎn)單。成功的應(yīng)用需要通過明智的選擇字體、色彩、配圖，來(lái)傳達(dá)品牌獨(dú)一無(wú)二的理念。在應(yīng)用中應(yīng)當(dāng)適度的向用戶提供品牌內(nèi)容，但不要過量。

優(yōu)雅并潛移默化的傳達(dá)品牌。用戶使用應(yīng)用是有目標(biāo)的，為了得到訊息或是處理事務(wù)，而不是為了看廣告。在應(yīng)用的設(shè)計(jì)中向用戶柔和的提示品牌信息，才能達(dá)到最好的使用體驗(yàn)。比如，在應(yīng)用的界面中使用和應(yīng)用圖標(biāo)一樣的的色彩，就是呈現(xiàn)品牌內(nèi)容的一種好方法。

內(nèi)容為先，而不是品牌。一條一直存在的頂部欄，除了用來(lái)展示品牌什么也做不了，而且還會(huì)限制內(nèi)容的空間。內(nèi)容為先（的設(shè)計(jì)方式）則是用一種弱化干擾的方式來(lái)呈現(xiàn)品牌。此外還可以考慮去自定義色彩、字體、或者巧妙定義背景。

抵住在應(yīng)用中到處展現(xiàn)品牌標(biāo)志的誘惑。除非品牌標(biāo)志的呈現(xiàn)對(duì)使用情景很必要，否則請(qǐng)避免在應(yīng)用中頻繁出現(xiàn)。

5.3 色彩

Apple TV的平臺(tái)采用輕量簡(jiǎn)約的設(shè)計(jì)風(fēng)格。色彩應(yīng)當(dāng)用于讓用戶更沉浸式的體驗(yàn)，引導(dǎo)用戶關(guān)注內(nèi)容，而不是界面本身。當(dāng)面臨決定選用哪種色彩和在哪里使用色彩時(shí)，請(qǐng)考慮它是否可以起到增強(qiáng)內(nèi)容的作用。色彩同樣有助于傳達(dá)品牌，通常，可以使用應(yīng)用標(biāo)志的填充色。

在真實(shí)的電視上預(yù)覽色彩。用戶在計(jì)算機(jī)上和電視上看到的色彩并不總是一樣的。為了獲得最佳的效果，請(qǐng)使用sRGB的色彩格式，并且需要在真實(shí)電視上經(jīng)常測(cè)試，可以通過這樣的方式熟悉如何選擇色彩以及將色彩轉(zhuǎn)投到大屏幕上。如果條件允許，請(qǐng)?jiān)诙嗯_(tái)電視上預(yù)覽你的應(yīng)用，因?yàn)椴煌碾娨曅吞?hào)可能導(dǎo)致很明顯的色彩差異。

柔和的色彩更優(yōu)。如果你的應(yīng)用使用自定義色彩模式，請(qǐng)避免使用高飽和度色彩。這些色彩在電視的大屏幕上看上去會(huì)非常炫目和喧賓奪主，如果用戶調(diào)整了他們的顯示設(shè)置，則更甚。

請(qǐng)考慮色盲以及文化差異對(duì)色彩認(rèn)知的影響。用戶看待色彩的方式是不同的。比如有些色盲的人很難區(qū)分紅色和綠色。所以請(qǐng)避免僅使用紅綠色彩差異來(lái)區(qū)分狀態(tài)或數(shù)值。一些圖片編輯工具軟件有提供可以驗(yàn)證色盲人群是否可以識(shí)別（當(dāng)前的色彩）的功能。

不僅僅通過色彩來(lái)告知焦點(diǎn)狀態(tài)。在Apple TV上，當(dāng)元素獲得焦點(diǎn)時(shí)，微妙的縮放以及響應(yīng)式的動(dòng)畫是表示可交互的主要手段。

在不同的顯示級(jí)別上預(yù)覽色彩。電視的色彩效果取決于不同的生產(chǎn)商，亮度以及顯示設(shè)置。如果某些設(shè)置會(huì)導(dǎo)致應(yīng)用中的內(nèi)容會(huì)混在一起或者變得看不清楚，請(qǐng)考慮重新選擇色彩。

5.4 內(nèi)容

Apple TV提供了一種可以在客廳中和各個(gè)年齡段的家人共享的家庭影院式體驗(yàn)。整個(gè)平臺(tái)的頁(yè)面和內(nèi)容非常的豐富、美觀、簡(jiǎn)單、可參與，相比科技感它更強(qiáng)調(diào)那種人和人聯(lián)系起來(lái)的感覺。

尊重家長(zhǎng)的控制。請(qǐng)記住一些家庭會(huì)使用家長(zhǎng)模式來(lái)控制色情和限制級(jí)的內(nèi)容。你的應(yīng)用應(yīng)當(dāng)在適當(dāng)?shù)臅r(shí)候遵循這些限制。對(duì)于實(shí)施指南，請(qǐng)參閱IOS應(yīng)用指南的限制條款相關(guān)內(nèi)容。

5.5 布局

電視有很多不同的尺寸。Apple TV上的應(yīng)用和在IOS上一樣不會(huì)自動(dòng)適應(yīng)屏幕的大小。相反的，應(yīng)用在每一個(gè)顯示器上都會(huì)呈現(xiàn)完全一樣的界面。設(shè)計(jì)的時(shí)候要格外注意，這樣應(yīng)用才能夠在各種尺寸的屏幕上都呈現(xiàn)非常贊的布局。

優(yōu)化大屏顯示效果。

將你的應(yīng)用的界面分辨率設(shè)置為1920 x 1080 (1080p)像素，這意味著16:9的界面寬高比。所有得比例都應(yīng)該是@1x 分辨率的。

保持主要內(nèi)容遠(yuǎn)離屏幕的邊緣。

留意距離界面頂部和底部60像素，以及距離側(cè)邊90像素的區(qū)域。在這個(gè)接近邊緣的區(qū)域內(nèi)很難看清楚內(nèi)容。在一些舊的電視中，為了適應(yīng)界面尺寸也會(huì)裁掉邊緣的內(nèi)容。

有焦點(diǎn)狀態(tài)的元素之間注意保留適當(dāng)?shù)拈g距。

如果你使用UIKit或者focus API，元素在獲得焦點(diǎn)的時(shí)候尺寸會(huì)增大。請(qǐng)注意元素在獲得焦點(diǎn)時(shí)候的視覺樣式，確保它們不會(huì)無(wú)意中遮蓋了重要信息。

通過顯示一部分當(dāng)前屏外的內(nèi)容來(lái)暗示隱藏了更多的內(nèi)容。

呈現(xiàn)大量?jī)?nèi)容時(shí)，會(huì)遇到單獨(dú)一屏不能承載全部?jī)?nèi)容的情況，可以通過展示一部分當(dāng)前屏以外的內(nèi)容來(lái)暗示還有更多的內(nèi)容

構(gòu)建媒體為主的應(yīng)用時(shí)，使用布局模板。

如果你的應(yīng)用布局需要少量的定制并且內(nèi)容呈現(xiàn)要精美。請(qǐng)考慮使用預(yù)設(shè)的布局模板。詳見布局模板。

網(wǎng)格

在Apple TV上，網(wǎng)格有助于更好地呈現(xiàn)內(nèi)容。這些內(nèi)容不僅在遠(yuǎn)距離很容易瀏覽，還可以使用遙控器快捷地導(dǎo)航，呈現(xiàn)效果非常理想。

以下的網(wǎng)格布局和界面寬度提供了最佳視覺體驗(yàn)。請(qǐng)確保元素在非焦點(diǎn)狀態(tài)保持適當(dāng)間距，以防止他們?cè)讷@得焦點(diǎn)的時(shí)候內(nèi)容重疊。

3欄網(wǎng)格

內(nèi)容寬度：548像素

水平間距：48像素

垂直間距：100像素

5欄網(wǎng)格

內(nèi)容寬度：308像素

水平間距：50像素

垂直間距：100像素

6欄網(wǎng)格

內(nèi)容寬度：250像素

水平間距：48像素

垂直間距：100像素

9欄網(wǎng)格

內(nèi)容寬度：148像素

水平間距：51像素

垂直間距：100像素

如果你使用UIKit提供的內(nèi)容流的集合樣式，網(wǎng)格欄數(shù)會(huì)根據(jù)內(nèi)容的寬度和間距自動(dòng)確定。詳細(xì)的內(nèi)容請(qǐng)參見 UICollectionViewFlowLayout Class Reference。

考慮屏幕的安全區(qū)域。牢記將內(nèi)容左右縮進(jìn)90像素，上下縮進(jìn)60像素?？梢酝ㄟ^在縮進(jìn)造成的區(qū)域中，用溢出的方式展示未在當(dāng)前屏出現(xiàn)的內(nèi)容。

為標(biāo)題行留出額外的垂直間距。如果一行內(nèi)容有標(biāo)題，請(qǐng)確定非焦點(diǎn)狀態(tài)的上一行底部和當(dāng)前標(biāo)題行的中間有適當(dāng)間距。然后，確定該行非焦點(diǎn)狀態(tài)下標(biāo)題底部和內(nèi)容頂部的有適當(dāng)距離。

請(qǐng)使用一致的間距。不一致的間距會(huì)讓網(wǎng)格看起來(lái)不像網(wǎng)格。

余光的內(nèi)容保持左右對(duì)稱。為了可見內(nèi)容更直觀的獲得焦點(diǎn)，請(qǐng)保持屏幕安全區(qū)域外的溢出內(nèi)容在各個(gè)邊緣都保持相同的寬度。

布局模板

Apple TV提供了樣式美觀、布局一致、并且凸顯內(nèi)容的模板。這些模板是基于JavaScript和Apple TV的編程語(yǔ)言(TVML)開發(fā)的。當(dāng)應(yīng)用啟用時(shí)，它們會(huì)動(dòng)態(tài)加載內(nèi)容。這些模板可以靈活創(chuàng)建豐富的內(nèi)容，并且這些內(nèi)容可以很好地在電視屏幕上呈現(xiàn)，非常適合流媒體。

有品位的自定義模板。布局模板的可定制程度很高，你可以控制背景、文字、色彩、尺寸、布局甚至更多。在設(shè)計(jì)應(yīng)用的時(shí)候，請(qǐng)無(wú)論何時(shí)都遵從于內(nèi)容，避免出現(xiàn)分散注意的、跳躍的或突兀的定制內(nèi)容。

在使用之前了解模板的使用意圖。如果你的定制化使得基本模板無(wú)法識(shí)別，請(qǐng)考慮換個(gè)模板或者使用完全自定義的界面。

更多應(yīng)用中模板整合方面的內(nèi)容詳見 Apple TV Markup Language Reference。

提醒模板 Alert Template

提醒模板用于在屏幕上呈現(xiàn)相關(guān)信息并詢問是否執(zhí)行操作，比如確定購(gòu)買或刪除等負(fù)向操作。

另請(qǐng)參閱 6 界面元素中的 6.9 提醒。

43.png (397.68 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:08 上傳

目錄模板 Catalog Template

目錄模板用于呈現(xiàn)內(nèi)容相關(guān)的組內(nèi)容，比如電影或電視節(jié)目的流派的分組。瀏覽左邊的分組列表，聚焦于其中一項(xiàng)的時(shí)候右側(cè)可以看到對(duì)應(yīng)的內(nèi)容。

44.png (323.16 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:08 上傳

專輯模板 Compilation Template

專輯模板用于呈現(xiàn)元素包含的內(nèi)容，比如專輯中的歌曲或者播放列表的軌跡。它最常用于顯示音頻相關(guān)的內(nèi)容。

45.png (284.41 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:08 上傳

描述性提示模板 Descriptive Alert Template

描述性提示模板用于顯示大段的長(zhǎng)內(nèi)容，可能要求用戶同意某一項(xiàng)操作，比如同意條款或者許可協(xié)議。

保持簡(jiǎn)短，避免滾動(dòng)。遠(yuǎn)距離在屏幕上閱讀大量文字一點(diǎn)都不好玩，對(duì)眼睛簡(jiǎn)直是折磨。所以請(qǐng)認(rèn)真斟酌應(yīng)用需要呈現(xiàn)的文字內(nèi)容。

顯示，而不是講述。如果可能，避免描述提示內(nèi)容，可以考慮用更容易理解的方式來(lái)展現(xiàn)相同的信息，比如用圖片。

按鍵要仔細(xì)擺放。當(dāng)文字內(nèi)容可滾動(dòng)展示時(shí)候，請(qǐng)橫向并排擺放按鍵。這樣一來(lái)，可以通過上下滾動(dòng)來(lái)閱讀文字，通過左右滾動(dòng)來(lái)切換按鈕的焦點(diǎn)狀態(tài)。

另請(qǐng)參閱 6 界面元素中的 6.9 提醒。

46.png (161.75 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:08 上傳

表單模板 Form Template

表單模板用于顯示一個(gè)或者多個(gè)輸入框比如名字和郵件地址，包括鍵盤。

另請(qǐng)參見 6 界面元素中的 6.3 文本和搜索。

47.png (561.62 KB, 下載次數(shù): 0)

下載附件保存到相冊(cè)

2015-12-4 13:09 上傳

列表模板 List Template

列表模板用于以列表的形式在屏幕右方呈現(xiàn)電影或電視的節(jié)目列表。當(dāng)聚焦與一項(xiàng)內(nèi)容時(shí)，左邊會(huì)呈現(xiàn)其對(duì)應(yīng)的內(nèi)容，比如它的圖片或者描述。

48.png (137.18 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:09 上傳

加載模板 Loading Template

當(dāng)內(nèi)容在服務(wù)器中檢索的時(shí)候，會(huì)出現(xiàn)加載模板，它會(huì)時(shí)時(shí)顯示一個(gè)進(jìn)度顯示器和一些文字描述。它讓用戶知道有一些行為正在進(jìn)行，應(yīng)用看上去并沒有終止。

保持加載文案的簡(jiǎn)練和準(zhǔn)確。如果加載很快，用戶也許來(lái)不及在文案消失前讀完很長(zhǎng)的內(nèi)容，這會(huì)讓他們以為遺漏了一些信息。

另請(qǐng)參閱 6 界面元素的 6.7 進(jìn)度指示器。

49.png (767.57 KB, 下載次數(shù): 2)

下載附件保存到相冊(cè)

2015-12-4 13:09 上傳

主菜單模板 Main Menu Template

主菜單模板會(huì)展示一個(gè)帶底部菜單的全屏圖像。它通常出現(xiàn)在電影的首頁(yè)，有一個(gè)可以播放電影和訪問特定章節(jié)或其它功能的菜單。

50.png (629.87 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:10 上傳

菜單欄模板 Menu Bar Template

菜單欄模板是為了一級(jí)頁(yè)面而設(shè)計(jì)，作為內(nèi)容的入門頁(yè)。它包含一個(gè)貫穿頂部的菜單。當(dāng)一個(gè)元素獲得焦點(diǎn)時(shí)，它相關(guān)的內(nèi)容會(huì)在下方呈現(xiàn)。

保持菜單欄的整潔。每增加一個(gè)元素都會(huì)導(dǎo)致更多的選擇，并且還增加了應(yīng)用的復(fù)雜度。

將菜單元素保持在屏幕上。當(dāng)菜單欄獲得焦點(diǎn)的時(shí)候，它所有的元素都應(yīng)當(dāng)可見。一般情況下，短標(biāo)簽應(yīng)當(dāng)限制在7個(gè)以內(nèi)，這樣能避免由于內(nèi)容擁擠導(dǎo)致的元素超出當(dāng)前屏。

另請(qǐng)參見 6 界面元素的 6.1 標(biāo)簽欄。

51.png (664.41 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:10 上傳

展覽式模板 Parade Template

展覽式模板通過將當(dāng)前焦點(diǎn)狀態(tài)下的組內(nèi)容，通過旋轉(zhuǎn)的方式進(jìn)行預(yù)覽。組內(nèi)容列表會(huì)呈現(xiàn)在右邊。聚焦與其中的一項(xiàng)內(nèi)容，左側(cè)用旋轉(zhuǎn)的方式呈現(xiàn)其內(nèi)容。

52.png (422.09 KB, 下載次數(shù): 2)

下載附件保存到相冊(cè)

2015-12-4 13:10 上傳

產(chǎn)品模板 Product Template

產(chǎn)品模板用于電影、電視或其他產(chǎn)品的展示。它通常包括產(chǎn)品圖片、背景和描述信息。在產(chǎn)品內(nèi)容下方會(huì)提供產(chǎn)品的相關(guān)信息，用戶可以通過向下滾動(dòng)來(lái)獲取更多信息，比如演員列表，打分和評(píng)論。

自定義背景時(shí)，請(qǐng)仔細(xì)考慮圖片和文字信息的顏色。默認(rèn)情況下，背景會(huì)呈現(xiàn)出一個(gè)產(chǎn)品圖片的投影，來(lái)制造互補(bǔ)的視覺效果。如果你決定使用自定義背景，請(qǐng)確保他不會(huì)與其它內(nèi)容造成沖突。

53.png (750.86 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:11 上傳

產(chǎn)品集合模板 Product Bundle Template

產(chǎn)品集合模板用于呈現(xiàn)系列電視節(jié)目，電影和其他產(chǎn)品。通常情況下它包括圖片，背景和描述信息。內(nèi)容下方提供了包內(nèi)的全部產(chǎn)品，比如一季的電視劇。用戶可以通過向下滾動(dòng)的方式獲取更多的信息，比如演員列表，打分和評(píng)論。

54.png (146.71 KB, 下載次數(shù): 0)

下載附件保存到相冊(cè)

2015-12-4 13:11 上傳

評(píng)分模板 Rating Template

評(píng)分模板用于讓用戶對(duì)特定元素進(jìn)行評(píng)價(jià)，比如電影或一首歌。

55.png (445.37 KB, 下載次數(shù): 1)

下載附件保存到相冊(cè)

2015-12-4 13:11 上傳

搜索模板 Search Template

搜索模板用于讓用戶搜索應(yīng)用中的內(nèi)容和查看搜索結(jié)果。它包括搜索框，鍵盤和結(jié)果列表。

56.png (528.74 KB, 下載次數(shù): 0)

下載附件保存到相冊(cè)

2015-12-4 13:12 上傳

堆棧模板 Stack Template

堆棧模板用于成組的展示產(chǎn)品，比如不同流派的電影。每組產(chǎn)品都直接在前一組的下方展示。

5.6 質(zhì)感紋理

在整個(gè)系統(tǒng)中，柔軟細(xì)膩，半透明質(zhì)感的窗口的呈現(xiàn)，是為了傳達(dá)一種深度和層次感。這些設(shè)計(jì)同樣也給人沉浸感，但并不引人注意，也不會(huì)造成內(nèi)容的分心。這些質(zhì)感紋理有多種色彩，適用在多種場(chǎng)景中，看上去非常棒。

考慮使用系統(tǒng)的質(zhì)感。系統(tǒng)質(zhì)感能帶給你原生應(yīng)用的感覺，當(dāng)用戶從其它應(yīng)用切換到你的應(yīng)用的時(shí)候，過渡會(huì)非常平滑。下面的質(zhì)感樣式可供選擇：

57.png (446.6 KB, 下載次數(shù): 0)

下載附件保存到相冊(cè)

2015-12-4 13:12 上傳

超輕薄

UIBlurEffectStyleExtraLight

大部分全屏模式中會(huì)使用這種紋理，效果非常棒。如果你的應(yīng)用采用透明窗口的背景，系統(tǒng)會(huì)默認(rèn)自動(dòng)呈現(xiàn)此樣式。

58.png (586.22 KB, 下載次數(shù): 2)

下載附件保存到相冊(cè)

2015-12-4 13:12 上傳

輕薄

UIBlurEffectStyleLight

這種紋理適用于覆蓋層，它會(huì)模糊屏幕上的部分內(nèi)容。

使用更輕薄，半透明的質(zhì)感來(lái)提升內(nèi)容，讓它有新鮮感。深色的質(zhì)感會(huì)導(dǎo)致沉重的感覺，這樣的質(zhì)感使內(nèi)容顯得陳舊，與背景混為一體且看不到投影，從而降低了頁(yè)面縱深感和活力。當(dāng)你看不到投影的時(shí)候，很難區(qū)分哪個(gè)元素處于獲得焦點(diǎn)的狀態(tài)。

5.7 字體排版

San Francisco是Apple TV的系統(tǒng)字體。這個(gè)字體有兩個(gè)變體：San Francisco Text 和 San Francisco Display，在大屏幕上易讀性都很高。

在標(biāo)簽或其他界面元素中使用系統(tǒng)字體時(shí)，Apple TV會(huì)根據(jù)選擇的磅值自動(dòng)應(yīng)用最合適的文本樣式。它也會(huì)按需自動(dòng)更改字體并遵循輔助設(shè)置。

盡可能減少應(yīng)用中的文字?jǐn)?shù)量。展示給用戶，而不是通過文字來(lái)說(shuō)明。閱讀房間對(duì)面屏幕上的大量文字十分費(fèi)勁也并不好玩。認(rèn)真考慮你的應(yīng)用實(shí)際需要展示的文本數(shù)量，嘗試用更容易理解的方式來(lái)呈現(xiàn)信息，比如使用圖片或動(dòng)畫。

在設(shè)計(jì)時(shí)選擇合適的系統(tǒng)字體。最重要的是，文字在遠(yuǎn)處必須清晰易讀。當(dāng)設(shè)計(jì)應(yīng)用時(shí)，39點(diǎn)或更小的字適合用San Francisco Text，40點(diǎn)或更大的字用San Francisco Display更好些。

盡量使用內(nèi)置的文本樣式。內(nèi)置的文本樣式允許你用不同的視覺效果來(lái)表達(dá)內(nèi)容，同時(shí)保留最優(yōu)易讀性。這些樣式使用系統(tǒng)字體并且允許你利用重要的排版功能，比如動(dòng)態(tài)排版（為不同字號(hào)自動(dòng)調(diào)整字距和行距）。主要內(nèi)容使用正文樣式，標(biāo)簽和次要內(nèi)容可以使用注腳樣式和說(shuō)明樣式。

使用自定義字體時(shí)，在遠(yuǎn)處需要清晰易讀。Apple TV支持自定義字體，但在遠(yuǎn)處可能難以閱讀，尤其當(dāng)字體筆畫過細(xì)時(shí)。所以，除非你有必須使用自定義字體的理由，比如為了品牌推廣或創(chuàng)造沉浸式的游戲體驗(yàn)，否則還是堅(jiān)持用系統(tǒng)字體吧。

使用自定義字體時(shí)，支持輔助特性。系統(tǒng)字體自動(dòng)會(huì)對(duì)輔助特性作出反應(yīng)，比如字體加粗。使用自定義字體的應(yīng)用，應(yīng)該檢查是否啟用了輔助特性并在特性發(fā)生變化時(shí)接收通知，實(shí)現(xiàn)與系統(tǒng)字體相同的行為。

請(qǐng)?jiān)?參考資料下載San Francisco字體。

5.8 視頻

Apple TV的視頻播放器讓用戶能在應(yīng)用內(nèi)欣賞視頻，而且它專為觸屏設(shè)計(jì)。與Siri遙控器的無(wú)縫集成讓用戶能夠流暢、直覺地使用手勢(shì)來(lái)瀏覽多媒體。

用戶可以使用遙控器做這些事：

快速翻看視頻：拇指在觸控板上滑動(dòng)。
視頻的快進(jìn)和快退：點(diǎn)擊觸控板的左側(cè)或右側(cè)。
視頻節(jié)點(diǎn)上快進(jìn)和快退：點(diǎn)擊喚起視頻播放進(jìn)度條，然后點(diǎn)擊觸控板的左側(cè)或右側(cè)。
連續(xù)快進(jìn)或后退：點(diǎn)擊并按住觸控板的左側(cè)或右側(cè)。
展現(xiàn)額外信息：向下滑動(dòng)，能夠展現(xiàn)字幕、小節(jié)、音軌、揚(yáng)聲器輸出選項(xiàng)。

使用系統(tǒng)視頻播放器。內(nèi)置的視頻播放器能夠提供很棒的視頻播放體驗(yàn)。它的控件極簡(jiǎn)而低調(diào)，讓媒體本身成為注意力的中心。除非你的應(yīng)用確實(shí)需要一個(gè)自定義播放器，否則請(qǐng)使用系統(tǒng)視頻播放器，會(huì)創(chuàng)造跨平臺(tái)統(tǒng)一的多媒體瀏覽體驗(yàn)。

在視頻上展現(xiàn)LOGO或非交互的浮層時(shí)，內(nèi)容為先。一個(gè)小小的不引人注目的LOGO或倒計(jì)時(shí)可能適合放在視頻上，避免使用與觀看體驗(yàn)無(wú)關(guān)的又大又讓人分心的浮層。用戶期望在觀看內(nèi)容時(shí)不受打擾，他們會(huì)欣賞干凈整潔的觀看體驗(yàn)。

優(yōu)雅地在視頻頂部顯示互動(dòng)元素。一些視頻中會(huì)展現(xiàn)可交互浮層，比如小測(cè)試、調(diào)研、進(jìn)度簽到等。為了體驗(yàn)更佳，暫停播放中的視屏，需要精確到僅有0.5秒的延遲，然后展現(xiàn)可交互浮層。提供清晰的關(guān)閉浮層的方式，一旦用戶完成交互就恢復(fù)視頻播放。

提供額外的增值信息。通過提供圖片，標(biāo)題，描述和其它有用的信息，來(lái)實(shí)現(xiàn)視頻附加信息的定制化。一般來(lái)說(shuō)，這些內(nèi)容的高度應(yīng)當(dāng)限制在8行以內(nèi)，以免影響到視頻播放。

6 界面元素

界面元素是構(gòu)成應(yīng)用的基石。用界面元素來(lái)展示信息、促進(jìn)與應(yīng)用內(nèi)容的互動(dòng)。

6.1 標(biāo)簽欄 Tab Bars

對(duì)于Apple TV的多數(shù)應(yīng)用而言，導(dǎo)航主要以屏幕頂部的標(biāo)簽欄形式呈現(xiàn)。內(nèi)容區(qū)域位于標(biāo)簽欄之下，顯示當(dāng)前選中標(biāo)簽的內(nèi)容。標(biāo)簽欄讓用戶知道當(dāng)前處于應(yīng)用哪個(gè)位置；同時(shí)提供一種便捷路徑，讓用戶在不同頁(yè)面和內(nèi)容之間移動(dòng)，或者觸發(fā)操作行為，如搜索。

當(dāng)遙控聚焦標(biāo)簽欄時(shí)，標(biāo)簽欄出現(xiàn)在屏幕頂部，高度是140px。標(biāo)簽欄默認(rèn)半透明，可以看到標(biāo)簽欄覆蓋區(qū)域下的內(nèi)容。一般而言，標(biāo)簽欄總是位于屏幕頂部，移開聚焦的標(biāo)簽欄時(shí)，標(biāo)簽欄消失，屏幕展現(xiàn)完整內(nèi)容。

使用標(biāo)簽欄，有邏輯的來(lái)組織應(yīng)用內(nèi)容。標(biāo)簽欄可以很好地扁平化信息層級(jí)，快速訪問同級(jí)信息模塊。一些特殊信息不夠明確時(shí)，采用角標(biāo)補(bǔ)充說(shuō)明。與當(dāng)前視圖或模式相關(guān)聯(lián)的新信息或重要信息，需要解釋說(shuō)明時(shí)，通常在某個(gè)選項(xiàng)上使用以下角標(biāo) – 一個(gè)包含白色數(shù)字或解釋說(shuō)明文字的紅色橢圓角標(biāo)。

對(duì)角標(biāo)進(jìn)行管理。一個(gè)頁(yè)面不要試圖展示大量的新信息或重要信息，這樣會(huì)讓用戶無(wú)所適從。

對(duì)選項(xiàng)數(shù)量進(jìn)行管理。每增加一個(gè)選項(xiàng)，既增加應(yīng)用本身的復(fù)雜性、又增大用戶選擇認(rèn)知困難。

當(dāng)聚焦標(biāo)簽欄時(shí)，所有的選項(xiàng)都應(yīng)該要在屏幕內(nèi)。選項(xiàng)應(yīng)該使用短標(biāo)題，從而避免擁擠或者導(dǎo)致有選項(xiàng)超出屏幕顯示范圍。

保證所有選項(xiàng)都可訪問。如果一個(gè)選項(xiàng)可見、可用，而其他選項(xiàng)不可見、不可用，那么應(yīng)用界面狀況將不可控。

保證所有選項(xiàng)位于屏幕上，且隨時(shí)可用。當(dāng)選項(xiàng)下沒有內(nèi)容展現(xiàn)時(shí)，給出相關(guān)說(shuō)明。例如，iTunes的音樂選項(xiàng)下，當(dāng)沒有歌曲列表時(shí)，給出了如何下載音樂的引導(dǎo)說(shuō)明。

標(biāo)簽欄適配應(yīng)用風(fēng)格。采用顏色提取，或調(diào)整透明度，來(lái)適配應(yīng)用的配色方案和風(fēng)格。

更多的實(shí)施細(xì)則，請(qǐng)查看 UITabBarController Class Reference 和 View Controller Programming Guide for iOS。

標(biāo)簽欄選項(xiàng) Tab Bar Items

選項(xiàng)標(biāo)題通常使用文字。一般而言，相比于易被曲解的圖標(biāo)，簡(jiǎn)明的書面文字更干凈、更直接。

采用短的、有意義的名詞或動(dòng)詞作為選項(xiàng)標(biāo)題。標(biāo)題清晰定義了當(dāng)前選項(xiàng)內(nèi)容類型。一般而言，標(biāo)題應(yīng)該是名詞（如音樂、電影和流派），但某些情況下，動(dòng)詞可能更加合適（如播放和搜索）。

6.2 表單和內(nèi)容集 Tables and Collections

Apple TV包含了一些關(guān)于組織和呈現(xiàn)內(nèi)容集合的標(biāo)準(zhǔn)，幫助用戶理解以及導(dǎo)航。

表單 Tables

單列表單以滾動(dòng)形式來(lái)呈現(xiàn)數(shù)據(jù)，可以將它們劃分成多個(gè)區(qū)域或組別。不同量級(jí)的信息，使用表單的形式來(lái)更清晰有效地展現(xiàn)。

一般來(lái)說(shuō)，單列表單是一個(gè)很好的承載文字信息的載體，而且經(jīng)常以導(dǎo)航形式出現(xiàn)在頁(yè)面一邊，同時(shí)頁(yè)面另一邊呈現(xiàn)相關(guān)聯(lián)的內(nèi)容。更多可查看分屏視圖。

考慮單列表單寬度。窄的列表導(dǎo)致列表標(biāo)題截?cái)嗪椭丿B，讓用戶很難閱讀和快速瀏覽。同樣地，寬的列表也很難閱讀和瀏覽，且占據(jù)了內(nèi)容區(qū)域空間。

頁(yè)面內(nèi)容采用優(yōu)先加載模式。不要等待全部?jī)?nèi)容讀取完成后一起加載，而應(yīng)先加載一部分。優(yōu)先先加載文字部分，待圖片數(shù)據(jù)讀取完畢后，再加載圖片內(nèi)容。這種技術(shù)讓用戶盡可能快的獲取有用信息，同時(shí)提升應(yīng)用的用戶感知反應(yīng)。某些情況下，頁(yè)面沒有刷新時(shí)，顯示舊數(shù)據(jù)可能是有意義的。

內(nèi)容加載狀態(tài)。如果一個(gè)列表內(nèi)容加載時(shí)間較長(zhǎng)，需要一個(gè)加載進(jìn)度條或動(dòng)態(tài)的指示圖標(biāo)來(lái)告知用戶應(yīng)用仍在加載中。

更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewController Class Reference。

單列表單 Table Celss

你可以采用標(biāo)準(zhǔn)的單列表單樣式，定義表單中內(nèi)容如何出現(xiàn)。

默認(rèn)樣式。單列表單的左側(cè)為“可選圖像+左對(duì)齊標(biāo)題”。對(duì)于不需要補(bǔ)充信息的內(nèi)容來(lái)講，這是一個(gè)很好的選擇。更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewCellStyleDefault。

小標(biāo)題模式。內(nèi)容左對(duì)齊，大標(biāo)題在上，小標(biāo)題在下。采用小標(biāo)題模式可以很好分行。更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewCellStyleSubtitle。

補(bǔ)充說(shuō)明1. 單列表單中，標(biāo)題左對(duì)齊，小標(biāo)題右對(duì)齊，且小標(biāo)題采用更小的字號(hào)。更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewCellStyleValue1。

補(bǔ)充說(shuō)明2. 單列表單中，標(biāo)題右對(duì)齊，小標(biāo)題左對(duì)齊，且小標(biāo)題采用更小的字號(hào)。更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewCellStyleValue2。

標(biāo)準(zhǔn)的單列表單樣式也允許存在圖形元素，如復(fù)選標(biāo)簽或標(biāo)記。當(dāng)然，增加這些圖形元素，會(huì)減少列表標(biāo)題和小標(biāo)題的顯示空間。

保持標(biāo)題文字簡(jiǎn)潔性，避免被截?cái)?。被截?cái)嗟脑~句很難被理解。標(biāo)準(zhǔn)單列表單樣式中，標(biāo)題文字是被自動(dòng)截?cái)嗟?。而由于文字截?cái)喈a(chǎn)生問題的多少，取決于采用哪種單列表單樣式和定義截?cái)嗪螘r(shí)發(fā)生（給出最大文字字符數(shù)，超出截?cái)啵?/div>

測(cè)試選中態(tài)。選中表單內(nèi)某行內(nèi)容時(shí)，該行內(nèi)容放大高亮。同時(shí)選中態(tài)樣式包含圓角，這直接影響到該行中圖形樣式?；诖?，如需使用圖形元素，可直接采用表單圓角樣式，而不增加額外的圓角。

考慮是否增加表單編輯功能。在Apple TV 上進(jìn)行刪除和重新排序操作，是一個(gè)緩慢而乏味的過程。因此需要考慮是否值得提供此類功能。

為用戶定制個(gè)性化表單。用標(biāo)準(zhǔn)單列表單樣式，滿足絕大多數(shù)用戶和使用場(chǎng)景，但是你的內(nèi)容可能需要滿足更多操作。這種情況下，相比于調(diào)整標(biāo)準(zhǔn)樣式，為用戶特別需求定制表單是一個(gè)更好的選擇。了解如何創(chuàng)建個(gè)性化表單，參考 Table View Programming Guide for iOS 中的 Customizing Cells。

更多的實(shí)施細(xì)則，請(qǐng)查看 UITableViewCell Class Reference。

內(nèi)容集 Collections

內(nèi)容集有序的管理一組內(nèi)容，并在一個(gè)可自定義、高度可視化的頁(yè)面中呈現(xiàn)。內(nèi)容集不強(qiáng)制要求呈現(xiàn)線性格式，因此特別適合顯示大小不同的內(nèi)容。一般而言，內(nèi)容集適合呈現(xiàn)圖片相關(guān)內(nèi)容。

當(dāng)標(biāo)準(zhǔn)樣式或網(wǎng)格布局足夠滿足需求時(shí)，避免進(jìn)行全新設(shè)計(jì)。一個(gè)內(nèi)容集應(yīng)該提升用戶體驗(yàn)，而非變成視覺焦點(diǎn)。

更容易的聚焦選項(xiàng)。在用戶找到感興趣的內(nèi)容前，如果很難找到想找的內(nèi)容選項(xiàng)，他將感到沮喪和喪失興趣。給圖片周圍足夠留白，以保持內(nèi)容清晰聚焦，同時(shí)避免內(nèi)容重疊。

考慮使用表單組織文字，代替文字堆疊。在電視屏幕上，滾動(dòng)列表中的文字信息，通常更簡(jiǎn)單和更易理解。

如果應(yīng)用內(nèi)容豐富，需要一個(gè)標(biāo)準(zhǔn)的網(wǎng)格布局呈現(xiàn)內(nèi)容集，請(qǐng)考慮使用模板。詳見 Templates 和 Apple TV Markup Language Reference。更多實(shí)施細(xì)則，請(qǐng)查看 UICollectionViewController Class Reference。

分屏視圖 Split Views

分屏視圖決定相鄰2個(gè)內(nèi)容面板的呈現(xiàn)樣式。每個(gè)內(nèi)容面板都可包含多種元素，如列表、內(nèi)容集、圖像和自定義視圖。分屏視圖中，一級(jí)面板顯示固定的、可聚焦的內(nèi)容；二級(jí)面板顯示與之相關(guān)聯(lián)的信息。分屏視圖經(jīng)常伴隨著可篩選內(nèi)容使用，一級(jí)面板中顯示可篩選類別列表，二級(jí)面板中展示選中類別的具體內(nèi)容。

根據(jù)內(nèi)容選擇效果最好的分屏視圖。默認(rèn)情況下，分屏視圖以1:3的比例分隔屏幕空間，一級(jí)面板占據(jù)屏幕的1/3，二級(jí)面板占據(jù)2/3。當(dāng)然屏幕也可按照1:1的比例分隔。基于內(nèi)容本身，選擇適當(dāng)?shù)姆指舯壤?，以確保面板看上去均衡。

高亮一級(jí)面板中選中項(xiàng)。二級(jí)面板中內(nèi)容是可變的，總是對(duì)應(yīng)一級(jí)面板中選中項(xiàng)。這有助于用戶理解面板之間關(guān)系。

每個(gè)分屏視圖顯示單獨(dú)標(biāo)題。對(duì)于屏幕中多個(gè)標(biāo)題，用戶很難找出當(dāng)前內(nèi)容。相反，顯示單獨(dú)標(biāo)題，提供了一個(gè)視圖對(duì)應(yīng)關(guān)系框架。

當(dāng)二級(jí)視圖顯示了一個(gè)內(nèi)容集合，考慮使用一個(gè)聚焦的標(biāo)題。當(dāng)二級(jí)視圖包含了重要內(nèi)容，考慮在一級(jí)視圖上顯示標(biāo)題，這樣就有更多的空間用來(lái)顯示內(nèi)容。

更多實(shí)施細(xì)則，請(qǐng)查看 UISplitViewController Class Reference。

6.3 文本和搜索 Text and Search

如果必要，你的應(yīng)用可以申請(qǐng)基于文本信息來(lái)執(zhí)行搜索、登錄服務(wù)等等。需要留意的是，除非物理鍵盤連接，在Apple TV上的文本輸入任務(wù)的體驗(yàn)可能較為乏味。

文本框 Text Field

輸入?yún)^(qū)域是一個(gè)固定高度、帶有圓角的單行文本框，在用戶點(diǎn)擊輸入?yún)^(qū)域的時(shí)候可以自動(dòng)調(diào)起一個(gè)鍵盤屏幕。通過使用輸入框獲取少量信息，例如電子郵件地址。

在應(yīng)用中最小化文字輸入。鍵入長(zhǎng)段文本內(nèi)容或是填寫大量文字在Apple TV上是極為耗時(shí)的。減少輸入并且考慮有效的收集展示信息，比如說(shuō)帶有按鈕的形式。

文本框中的提示信息增強(qiáng)用戶理解。當(dāng)輸入框內(nèi)沒有鍵入其他文字內(nèi)容的時(shí)候，一個(gè)文本框可以展示占位文本 – 例如郵件地址或是密碼。當(dāng)占位提示文本內(nèi)容足夠清晰時(shí)，不要使用單獨(dú)的標(biāo)簽來(lái)描述文本字段。

在條件允許的情況下，使用安全輸入框。當(dāng)你的應(yīng)用需要獲取一些敏感信息的時(shí)候，例如密碼輸入，盡量使用安全輸入。

更多實(shí)施細(xì)節(jié)，請(qǐng)參見 UITextField Class Reference。

鍵盤 Keyboards

任何時(shí)候點(diǎn)擊文本框都會(huì)自動(dòng)彈起一個(gè)輸入面板。屏幕風(fēng)格由當(dāng)時(shí)使用的輸入設(shè)備決定。

線性面板。當(dāng)用戶使用Siri遙控器的觸摸板時(shí)，線性的鍵盤會(huì)展現(xiàn)在屏幕上。這種風(fēng)格優(yōu)化了觸控體驗(yàn)，使用戶更快速更流暢的輸入文字。

網(wǎng)格面板。當(dāng)用戶使用Siri遙控器以外的設(shè)備時(shí)，網(wǎng)格狀的鍵盤會(huì)展現(xiàn)在屏幕上。內(nèi)容布局會(huì)基于鍵盤類型自適應(yīng)。

雖然你不能控制鍵盤屏幕風(fēng)格，但是你可以指定鍵盤類型。

根據(jù)選擇的內(nèi)容，制定相應(yīng)的輸入面板類型。為特定類型的內(nèi)容，Apple TV提供幾種不同類型的鍵盤設(shè)計(jì)，使輸入更加便利。相對(duì)應(yīng)的鍵盤讓輸入過程更輕松，比如輸入名字，郵箱地址或是數(shù)字。有關(guān)可用鍵盤類型的列表，請(qǐng)參閱UITextInputTraits Protocol Reference的UIKeyboardType。要了解你的應(yīng)用內(nèi)的鍵盤管理，請(qǐng)參考 Text Programming Guide for iOS的 Managing the Keyboard。

在適當(dāng)?shù)臅r(shí)候選擇使用附屬視圖。鍵盤屏幕包含一個(gè)可選的附屬視圖。使用此區(qū)域提供有關(guān)您所收集的數(shù)據(jù)上下文和其他信息。例如，您可以添加您的應(yīng)用程序標(biāo)識(shí)和標(biāo)簽到附屬視圖，告知用戶“請(qǐng)輸入您的電子郵件地址登錄到您的MyApp的帳戶”。更多實(shí)施細(xì)節(jié)，請(qǐng)參閱Text Programming Guide for iOS的Custom Views for Data Input。

搜索 Search

搜索屏幕是一個(gè)專用鍵盤屏幕，用來(lái)執(zhí)行搜索輸入操作。在此屏幕上，搜索結(jié)果將以可定制視圖形式，顯示在鍵盤下呈現(xiàn)。

允許用戶使用近期搜索記錄。用戶經(jīng)常在Apple TV上搜索重復(fù)內(nèi)容。在用戶開始輸入前，通過在鍵盤下方羅列出流行或近期搜索結(jié)果，減少重復(fù)輸入。

簡(jiǎn)化搜索結(jié)果。不提供需要大量滾動(dòng)查看的冗長(zhǎng)搜索結(jié)果列表。使信息易于獲取，例如，將搜索結(jié)果分為多列，或呈現(xiàn)最匹配的搜索結(jié)果信息集合。

考慮讓用戶手動(dòng)過濾搜索結(jié)果。如果可以，在搜索結(jié)果區(qū)域設(shè)置一個(gè)篩選區(qū)，以幫助人們方便快捷的過濾搜索結(jié)果。

更多實(shí)施細(xì)節(jié)，請(qǐng)參見 UISearchController Class Reference。

6.4 按鈕 Buttons

應(yīng)用特定的啟動(dòng)按鈕可以包含一個(gè)標(biāo)題和圖標(biāo)。

一般情況下，使用標(biāo)題名稱或圖標(biāo)來(lái)傳達(dá)按鈕的語(yǔ)義。由于按鈕空間有限，為了避免擁擠和視覺復(fù)雜性，盡量不合并文本和圖標(biāo)。

明確標(biāo)簽和破壞性操作。如果點(diǎn)擊一個(gè)按鈕操作，導(dǎo)致不可逆轉(zhuǎn)的結(jié)果，如刪除內(nèi)容，請(qǐng)確保這個(gè)按鈕的指示性是非常明確的。使用明確描述的標(biāo)簽，如“刪除”或相應(yīng)的圖標(biāo)。在執(zhí)行破壞性操作之前顯示一個(gè)警告要求確認(rèn)，也是很好的做法。

不要使用后退按鈕。用戶習(xí)慣于通過點(diǎn)擊遙控器上的菜單按鍵帶他們返回上一級(jí)界面或回到主菜單。除非你的應(yīng)用有正當(dāng)?shù)睦碛扇ナ褂妙~外的后退按鈕，盡量不要在你的頁(yè)面上加入返回按鈕。

對(duì)于實(shí)施細(xì)節(jié)，參見 UIButton Class Reference。

按鈕圖標(biāo) Button Icons

使用簡(jiǎn)單、可識(shí)別圖形作為按鈕圖標(biāo)。在電視屏幕上，太多細(xì)節(jié)的圖標(biāo)很難解釋。保持圖標(biāo)簡(jiǎn)潔更好的傳達(dá)信息。有可能的話，使用通用圖標(biāo)幫助理解，例如放大鏡圖標(biāo)代表執(zhí)行搜索。

按鈕文字 Button Text

如果合適的話，在圖標(biāo)下方顯示描述性文本。一個(gè)圖標(biāo)通常足夠表達(dá)含義。但如果附加的文字描述提供了有用的信息內(nèi)容，則把它放在按鈕下方。

使用動(dòng)詞或動(dòng)詞短語(yǔ)來(lái)描述一個(gè)按鈕的操作。以操作行為為特定標(biāo)題，表示交互性，并且明確了單擊該按鈕時(shí)會(huì)發(fā)生什么。

使用大寫式標(biāo)題。除了文章以外，大寫按鈕上的每一個(gè)字，并列連詞，和四個(gè)字母以下的介詞。

確保按鈕文本簡(jiǎn)短，重點(diǎn)突出。過長(zhǎng)的文字可能被截?cái)?，從而使其難以閱讀。

6.5 導(dǎo)航欄 Navigation Bars

你可以在視窗的頂部增加一個(gè)導(dǎo)航欄，用來(lái)展示標(biāo)題、導(dǎo)航按鈕、以及其他交互元素。應(yīng)用設(shè)置使用一個(gè)導(dǎo)航欄，導(dǎo)航欄的標(biāo)題用來(lái)提供內(nèi)容信息，讓用戶隨時(shí)知道處于應(yīng)用的哪個(gè)位置。

請(qǐng)注意透明度。導(dǎo)航欄默認(rèn)就是透明的，所以所有在導(dǎo)航欄下面滾動(dòng)的內(nèi)容都是清晰可見的。確保導(dǎo)航欄里的交互元素不要與底下內(nèi)容元素有所沖突。當(dāng)內(nèi)容滾動(dòng)時(shí)，考慮把導(dǎo)航欄下的內(nèi)容元素淡化，從視覺上將它們與導(dǎo)航欄上的元素區(qū)分開。

6.6 頁(yè)面控制器 Page Controls

有些應(yīng)用會(huì)把內(nèi)容分散到多個(gè)頁(yè)面上呈現(xiàn)，一個(gè)頁(yè)面控制器可以清楚地告訴用戶總共的頁(yè)面數(shù)量，以及現(xiàn)在處于哪個(gè)頁(yè)面。它的呈現(xiàn)方式就是有一連串小的空心的指示原點(diǎn)，可以從左邊滑動(dòng)到右邊，同時(shí)呈現(xiàn)出頁(yè)面數(shù)量及順序。一個(gè)實(shí)心原點(diǎn)指示的是當(dāng)前頁(yè)面。視覺上來(lái)說(shuō)，這些小點(diǎn)的間隔是相同的，如果點(diǎn)數(shù)太多的話，屏幕上會(huì)省略掉一部分。

頁(yè)面控制器它本身是一個(gè)非交互的元素，只是作為信息呈現(xiàn)的功能使用。它并不真正的具有導(dǎo)航的作用－比如說(shuō)，你不能點(diǎn)擊一個(gè)小點(diǎn)去到一個(gè)特定的頁(yè)面。相對(duì)應(yīng)的，真正的頁(yè)面之間的導(dǎo)航會(huì)使用其他的交互機(jī)制，比如說(shuō)手勢(shì)控制以及分離按鈕的按壓／點(diǎn)擊。

請(qǐng)?jiān)谕暾钠聊豁?yè)面上使用頁(yè)面控制器。當(dāng)全屏頁(yè)面的內(nèi)容很多且是同級(jí)情況下，使用頁(yè)面控制器。在頁(yè)面間切換時(shí)，盡量避免使用額外的交互方式，保持用戶注意力集中。

不要展示太多的頁(yè)面。超過10個(gè)小點(diǎn)，用戶很難讓一眼就數(shù)過來(lái)；然后超過大約20頁(yè)的話，用戶查看起來(lái)就會(huì)非常耗時(shí)。如果你的應(yīng)用需要展示超過20個(gè)同級(jí)頁(yè)面時(shí)，請(qǐng)考慮使用不同的設(shè)計(jì)方式，比如網(wǎng)格，因?yàn)榫W(wǎng)格不需要按照既定順序來(lái)導(dǎo)航。

更多的實(shí)施細(xì)則，請(qǐng)查看 UIPageControl Class Reference。

6.7 進(jìn)度指示器 Progress Indicators

不要讓用戶坐在那死盯著一個(gè)靜止的屏幕，等待應(yīng)用加載內(nèi)容或者呈現(xiàn)冗長(zhǎng)的數(shù)據(jù)處理操作過程。利用動(dòng)態(tài)的指示圖標(biāo)還有進(jìn)度指示條來(lái)讓用戶知道應(yīng)用正在加載中，同時(shí)告訴他們還要等多久。

動(dòng)態(tài)的指示圖標(biāo) Activity Indicators

一個(gè)動(dòng)態(tài)的旋轉(zhuǎn)指示圖標(biāo)用來(lái)表示比較難測(cè)量時(shí)間的任務(wù)的加載，比如說(shuō)正在加載或者同步復(fù)雜的數(shù)據(jù)。當(dāng)任務(wù)完成時(shí)，這個(gè)圖標(biāo)就會(huì)消失。

相比于動(dòng)態(tài)指示圖標(biāo)，多使用進(jìn)度指示條。如果任務(wù)是可以被計(jì)算測(cè)量時(shí)間的，請(qǐng)不要使用指示圖標(biāo)（就是那個(gè)旋轉(zhuǎn)的小圈圈），請(qǐng)使用進(jìn)度指示條，這樣用戶就能更好的評(píng)估正在發(fā)生什么，還需要等待多少時(shí)間。

保證指示圖標(biāo)是動(dòng)態(tài)顯示的。用戶會(huì)自然而然地將靜止的活動(dòng)圖標(biāo)（也就是本應(yīng)該活動(dòng)的東西）當(dāng)作是死機(jī)的跡象，所以讓那個(gè)小圈圈一直轉(zhuǎn)著可以讓他們知道應(yīng)用正在運(yùn)作。

在用戶等待加載的時(shí)候，可以給他們提供一些有用的信息。這些有用的信息可以是在動(dòng)態(tài)指示圖標(biāo)上增加的文字信息。不要增加意思模糊的術(shù)語(yǔ)，比如說(shuō)正在加載或者正在授權(quán)這樣的字眼，因?yàn)樗鼈儾⒉粫?huì)更好地幫助用戶理解。

進(jìn)度指示條 Progress Bars

進(jìn)度指示條是用來(lái)顯示可測(cè)量任務(wù)的加載進(jìn)度的，表現(xiàn)為一條從左到右填充的軌跡。

精準(zhǔn)告知用戶任務(wù)的加載進(jìn)度。不要為了讓應(yīng)用看起來(lái)很忙，而顯示不精準(zhǔn)的進(jìn)度信息。如果任務(wù)是可被測(cè)量時(shí)間的，使用進(jìn)度指示條，否則使用動(dòng)態(tài)指示圖標(biāo)。

進(jìn)度指示條適用于可測(cè)量時(shí)間的任務(wù)。進(jìn)度指示條有益于顯示任務(wù)狀態(tài)，尤其是它能告知用戶完成當(dāng)前任務(wù)，還需多長(zhǎng)時(shí)間。

6.8 分段控件 Segmented Controls

分段控件是指一串線性排布的控件，每個(gè)控件都作為一個(gè)按鈕來(lái)呈現(xiàn)不同的視圖。分段控件包含兩個(gè)或兩個(gè)以上、統(tǒng)一比例的控件，單個(gè)控件包含了標(biāo)題或圖標(biāo)。利用一個(gè)分段控件來(lái)提供功能聯(lián)系非常緊密，但是又互不兼容的一些功能，比如說(shuō)播放列表和唱片集。

不要把其他很容易被用戶注意到的元素放在分段控件旁邊。只要聚焦到這些控件上，就會(huì)被選中，所以要十分注意它與其他交互元素位置擺放，尤其是當(dāng)這個(gè)分段控件與頁(yè)面的其他交互元素是相關(guān)聯(lián)的。如果其他容易被注意到的元素和分段控件太近，用戶在切換不同控件時(shí)，可能會(huì)容易引起誤操作。

考慮在屏幕上，將內(nèi)容以控件形式分割成多個(gè)模塊，幫助用戶進(jìn)行信息過濾。在分離模塊環(huán)境下，用戶操作導(dǎo)航定位和內(nèi)容篩選時(shí)，會(huì)來(lái)得更加輕松。一個(gè)控件操作的難易程度，取決于該控件的放置位置。

控制好控件數(shù)量。超過7個(gè)控件就會(huì)使用戶很難一眼分辨出來(lái)，而且在定位時(shí)也會(huì)變得非常費(fèi)時(shí)。另外，盡量保證各個(gè)控件的大小與它所包含的內(nèi)容匹配。因?yàn)樗械牡目丶窍嗤膶挾?，如果一些控件里有?nèi)容，一些控件里沒什么內(nèi)容，這樣看起來(lái)就不是很舒服。

避免把文本和圖標(biāo)混在一起。單獨(dú)的控件可以包含文字標(biāo)題或者圖標(biāo)，但是不要同時(shí)涵蓋。最好避免在一些控件里使用文字標(biāo)題，然后在其他控件里使用圖標(biāo)。否則，你的應(yīng)用界面內(nèi)容看起來(lái)就會(huì)非常多且瑣碎。

在定制化分段控件中，適當(dāng)?shù)嘏挪純?nèi)容。如果你定制化了分段控件的樣式，請(qǐng)確保內(nèi)容——尤其當(dāng)它們居中的時(shí)候——仍然美觀。

控件圖標(biāo) Segment Icons

利用簡(jiǎn)單、可識(shí)別的圖形來(lái)來(lái)作為控件圖標(biāo)。在電視屏幕上，太多細(xì)節(jié)的圖標(biāo)很難解釋。保持圖標(biāo)簡(jiǎn)潔更好的傳達(dá)信息。有可能的話，使用通用圖標(biāo)幫助理解。

控件文本 Segment Text

使用短的，具有含義的名詞作為控件標(biāo)題。一個(gè)控件的標(biāo)題清楚地傳達(dá)出當(dāng)控件被選中后，它所呈現(xiàn)的內(nèi)容類型。一般來(lái)說(shuō)，標(biāo)題應(yīng)該使用名詞。

使用大寫式標(biāo)題。除了文章以外，大寫按鈕上的每一個(gè)字，并列連詞，和四個(gè)字母以下的介詞。

確保文本簡(jiǎn)短，重點(diǎn)突出。過長(zhǎng)的文字可能被截?cái)?，從而使其難以閱讀。

6.9 提醒 Alerts

與應(yīng)用或設(shè)備所處的狀態(tài)相關(guān)的重要信息，且需要用戶反饋時(shí)，彈出全屏提醒彈窗。提醒彈窗包含一個(gè)標(biāo)題、一個(gè)或多個(gè)按鈕、以及可以附加文字說(shuō)明。除了上述的內(nèi)容元素，提醒彈窗的樣式應(yīng)該是靜止的，且與系統(tǒng)統(tǒng)一。

盡量減少提醒彈窗的使用。提醒彈窗會(huì)阻斷用戶體驗(yàn)，除非在非常重要緊急的情況下使用，比如執(zhí)行毀滅性操作（刪除等）、購(gòu)買、或者出現(xiàn)問題需要告知用戶時(shí)。提醒彈窗的不時(shí)出現(xiàn)會(huì)幫助用戶對(duì)于當(dāng)前動(dòng)作提高注意力，設(shè)計(jì)者要確保每一個(gè)提醒都提供非常重要的信息以及有用的選擇。

提醒標(biāo)題和信息 Alert Title and Messages

提醒標(biāo)題使用多詞。單個(gè)詞的標(biāo)題，比如說(shuō)“看”或者“租”，很少能夠提供有用的信息。

使用一個(gè)描述性的提醒標(biāo)題，就可以代替文字段描述。用戶在屏幕上所讀取到的文字內(nèi)容越少越好?？紤]使用問問題的方式或者使用兩個(gè)短句子來(lái)作為你的提醒標(biāo)題，以此來(lái)避免增加附加文字段信息。

如果你必須要提供附加文字段提醒信息，保持精簡(jiǎn)，使用完整的句子。理想話來(lái)講，要確保信息足夠短，只需要在1行或者2行內(nèi)展示，避免滾動(dòng)查看，使用大寫和合適的標(biāo)點(diǎn)符號(hào)。

提醒按鈕 Alert Buttons

一般來(lái)說(shuō)，使用含有兩個(gè)按鈕的提醒彈窗。提醒彈窗包含2個(gè)簡(jiǎn)單的選項(xiàng)。如果只有單個(gè)按鈕，使得用戶沒有選擇的余地；大于等于3個(gè)按鈕就會(huì)增加操作的復(fù)雜性。提醒彈窗的按鈕應(yīng)該簡(jiǎn)潔明了，且標(biāo)題具有邏輯性。按鈕標(biāo)題最好由1到2個(gè)描述結(jié)果的單詞組成，以下是一些是在設(shè)計(jì)提醒彈窗按鈕時(shí)的一些準(zhǔn)則：

所有的按鈕標(biāo)題，應(yīng)該大寫且結(jié)尾沒有標(biāo)點(diǎn)符號(hào)
盡可能使用與提醒彈窗標(biāo)題與附加文字信息相關(guān)的動(dòng)詞或者動(dòng)詞短語(yǔ)，比如說(shuō)“查看全部”、“回復(fù)”、“忽略”
簡(jiǎn)單的接受操作使用ok。避免使用yes或no
按鈕標(biāo)題避免使用你、你的、我、我的這類人稱代詞，因?yàn)檫@些字眼看起來(lái)模棱兩可，且有時(shí)候用戶會(huì)認(rèn)為帶有侮辱性

提醒彈窗的取消標(biāo)簽要易操作。取消提醒彈窗的按鈕標(biāo)簽，應(yīng)該足夠明顯，比如使用取消或撤銷的字眼。

如果提醒彈窗的某個(gè)按鈕操作具有破壞性，其按鈕樣式應(yīng)該具有高辨識(shí)度。一個(gè)不可逆操作的提醒按鈕，比如刪除，在樣式設(shè)計(jì)上強(qiáng)化，使其與系統(tǒng)相一致。更多的實(shí)行細(xì)則，請(qǐng)查看 UIAlertActionStyleDestructive。

允許使用遙控器來(lái)取消提醒彈窗。按下遙控器上的菜單按鈕可以產(chǎn)生與單擊取消按鈕一樣的效果，也就是說(shuō)，你按下遙控器上的菜單按鈕也可以退出提醒。如果你的提醒彈窗沒有一個(gè)取消按鈕，可以考慮給你的菜單按鈕添加退出提醒彈窗的代碼。

人見百態(tài) · 發(fā)表于 2015-12-4 13:53

我的個(gè)天這是開發(fā)文檔吧

shenrujie123 · 發(fā)表于 2016-3-9 16:10

感謝分享，ZNDS有你更精彩:)

shenrujie123 · 發(fā)表于 2016-4-13 11:15

很給力，ZNDS有你更精彩！

shenrujie123 · 發(fā)表于 2016-4-13 11:15

› 智能電視盒 / 安卓TV機(jī)頂盒區(qū) › 蘋果Apple TV

Apple TV 人機(jī)界面指南

Apple TV 人機(jī)界面指南