Apple TV 人機界面指南

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

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

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

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

互聯(lián) Connected

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

明確 Clear

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

沉浸 Immersive

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

1.2 應(yīng)用 APP

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

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

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

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

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

1.3 首頁

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

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

1.4 頂部展區(qū) Top Shelf

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

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

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

1.5 焦點和視差

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

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

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

2 遙控器與交互

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

2.1 遙控器

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

2.2 手勢

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

滑動 Swipe

用戶可以在選項間向上、下、左、右移動焦點?；瑒邮謩莸臐L動通常帶有慣性，即基于滑動的力度，滾動開始快，隨后慢下來。通過這種方式，用戶可以毫不費勁地在大量內(nèi)容中移動。

點擊 Click

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

輕觸 Tap

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

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

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

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

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

2.3 游戲手柄

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

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

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

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

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

2.4 按鈕

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

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

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

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

3 導(dǎo)航和焦點

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

3.1 導(dǎo)航

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

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

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

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

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

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

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

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

使用標(biāo)準(zhǔn)的導(dǎo)航組件。如果你的應(yīng)用用戶界面使用UIKit實現(xiàn)，采用標(biāo)準(zhǔn)的導(dǎo)航控件，如頁面控制器（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)航。左右滑動比上下滑動更自然，在選擇或設(shè)計內(nèi)容布局時，請考慮這一點。

3.2 焦點和選擇

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

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

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

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

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

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

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

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

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

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

4 圖標(biāo)和圖片

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

4.1 圖片尺寸

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

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

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

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

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

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

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

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

分層

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

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

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

圖層樣式

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

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

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

圖標(biāo)尺寸

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

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

實際尺寸：400px by 240px

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

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

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

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

尺寸：1280px by 768px

大尺寸圖標(biāo)應(yīng)照搬小尺寸圖標(biāo)的設(shè)計。盡管大尺寸圖標(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主屏的最上面一行時，頂部展區(qū) (Top Shelf) 是增加可見度的好機會。應(yīng)用被選中聚焦時，你能夠展示迷人的圖片，來鼓勵用戶使用應(yīng)用去發(fā)掘更多。

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

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

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

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

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

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

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

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

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

動態(tài)頂部圖像可以作為一排可聚焦內(nèi)容或者滾動橫幅出現(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)一個內(nèi)容被聚焦選中時，一個標(biāo)簽會出現(xiàn)，同時，在遙控器觸控板上輕輕移動，會讓圖片活過來。如果需要的話，一個分欄內(nèi)容行也可以被配置多個標(biāo)簽。

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

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

海報 (2:3)

實際尺寸：404px by 608px

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

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

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

方圖 (1:1)

實際尺寸：608px by 608px

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

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

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

HDTV (16:9)

實際尺寸：908px by 512px

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

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

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

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

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

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

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

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

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

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

超寬比例

實際尺寸：1940px by 624px

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

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

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

4.4 游戲中心圖片

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

成就圖標(biāo)

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

可見尺寸：200px by 200px

實際尺寸：320px by 320px

控制面板 (Dashboard) 插圖

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

最大尺寸：923px by 150px

排行榜插圖

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

實際插圖尺寸：659px by 371px

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

未聚焦尺寸：548px by 309px

聚焦尺寸：618px by 348px

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

4.5 圖像分層

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

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

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

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

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

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

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

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

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

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

分層圖像的大小

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

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

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

CAR文件

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

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

LCR文件

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

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

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

4.6 啟動圖像

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

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

尺寸：1920px by 1080px

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

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

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

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

5 視覺設(shè)計

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

5.1 動效

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

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

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

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

5.2 品牌傳達(dá)

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

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

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

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

5.3 色彩

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

在真實的電視上預(yù)覽色彩。用戶在計算機上和電視上看到的色彩并不總是一樣的。為了獲得最佳的效果，請使用sRGB的色彩格式，并且需要在真實電視上經(jīng)常測試，可以通過這樣的方式熟悉如何選擇色彩以及將色彩轉(zhuǎn)投到大屏幕上。如果條件允許，請在多臺電視上預(yù)覽你的應(yīng)用，因為不同的電視型號可能導(dǎo)致很明顯的色彩差異。

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

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

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

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

5.4 內(nèi)容

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

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

5.5 布局

電視有很多不同的尺寸。Apple TV上的應(yīng)用和在IOS上一樣不會自動適應(yīng)屏幕的大小。相反的，應(yīng)用在每一個顯示器上都會呈現(xiàn)完全一樣的界面。設(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ū)域。在這個接近邊緣的區(qū)域內(nèi)很難看清楚內(nèi)容。在一些舊的電視中，為了適應(yīng)界面尺寸也會裁掉邊緣的內(nèi)容。

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

如果你使用UIKit或者focus API，元素在獲得焦點的時候尺寸會增大。請注意元素在獲得焦點時候的視覺樣式，確保它們不會無意中遮蓋了重要信息。

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

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

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

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

網(wǎng)格

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

以下的網(wǎng)格布局和界面寬度提供了最佳視覺體驗。請確保元素在非焦點狀態(tài)保持適當(dāng)間距，以防止他們在獲得焦點的時候內(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ù)會根據(jù)內(nèi)容的寬度和間距自動確定。詳細(xì)的內(nèi)容請參見 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)題，請確定非焦點狀態(tài)的上一行底部和當(dāng)前標(biāo)題行的中間有適當(dāng)間距。然后，確定該行非焦點狀態(tài)下標(biāo)題底部和內(nèi)容頂部的有適當(dāng)距離。

請使用一致的間距。不一致的間距會讓網(wǎng)格看起來不像網(wǎng)格。

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

布局模板

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

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

在使用之前了解模板的使用意圖。如果你的定制化使得基本模板無法識別，請考慮換個模板或者使用完全自定義的界面。

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

提醒模板 Alert Template

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

另請參閱 6 界面元素中的 6.9 提醒。

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

下載附件保存到相冊

2015-12-4 13:08 上傳

目錄模板 Catalog Template

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

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

下載附件保存到相冊

2015-12-4 13:08 上傳

專輯模板 Compilation Template

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

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

下載附件保存到相冊

2015-12-4 13:08 上傳

描述性提示模板 Descriptive Alert Template

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

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

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

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

另請參閱 6 界面元素中的 6.9 提醒。

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

下載附件保存到相冊

2015-12-4 13:08 上傳

表單模板 Form Template

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

另請參見 6 界面元素中的 6.3 文本和搜索。

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

下載附件保存到相冊

2015-12-4 13:09 上傳

列表模板 List Template

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

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

下載附件保存到相冊

2015-12-4 13:09 上傳

加載模板 Loading Template

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

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

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

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

下載附件保存到相冊

2015-12-4 13:09 上傳

主菜單模板 Main Menu Template

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

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

下載附件保存到相冊

2015-12-4 13:10 上傳

菜單欄模板 Menu Bar Template

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

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

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

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

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

下載附件保存到相冊

2015-12-4 13:10 上傳

展覽式模板 Parade Template

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

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

下載附件保存到相冊

2015-12-4 13:10 上傳

產(chǎn)品模板 Product Template

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

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

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

下載附件保存到相冊

2015-12-4 13:11 上傳

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

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

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

下載附件保存到相冊

2015-12-4 13:11 上傳

評分模板 Rating Template

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

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

下載附件保存到相冊

2015-12-4 13:11 上傳

搜索模板 Search Template

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

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

下載附件保存到相冊

2015-12-4 13:12 上傳

堆棧模板 Stack Template

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

5.6 質(zhì)感紋理

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

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

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

下載附件保存到相冊

2015-12-4 13:12 上傳

超輕薄

UIBlurEffectStyleExtraLight

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

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

下載附件保存到相冊

2015-12-4 13:12 上傳

輕薄

UIBlurEffectStyleLight

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

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

5.7 字體排版

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

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

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

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

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

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

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

請在參考資料下載San Francisco字體。

5.8 視頻

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

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

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

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

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

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

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

6 界面元素

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

6.1 標(biāo)簽欄 Tab Bars

對于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)用哪個位置；同時提供一種便捷路徑，讓用戶在不同頁面和內(nèi)容之間移動，或者觸發(fā)操作行為，如搜索。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表單 Tables

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

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

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

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

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

更多的實施細(xì)則，請查看 UITableViewController Class Reference。

單列表單 Table Celss

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

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

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

補充說明1. 單列表單中，標(biāo)題左對齊，小標(biāo)題右對齊，且小標(biāo)題采用更小的字號。更多的實施細(xì)則，請查看 UITableViewCellStyleValue1。

補充說明2. 單列表單中，標(biāo)題右對齊，小標(biāo)題左對齊，且小標(biāo)題采用更小的字號。更多的實施細(xì)則，請查看 UITableViewCellStyleValue2。

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

保持標(biāo)題文字簡潔性，避免被截斷。被截斷的詞句很難被理解。標(biāo)準(zhǔn)單列表單樣式中，標(biāo)題文字是被自動截斷的。而由于文字截斷產(chǎn)生問題的多少，取決于采用哪種單列表單樣式和定義截斷何時發(fā)生（給出最大文字字符數(shù)，超出截斷）。

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

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

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

更多的實施細(xì)則，請查看 UITableViewCell Class Reference。

內(nèi)容集 Collections

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

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

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

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

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

分屏視圖 Split Views

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

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

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

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

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

更多實施細(xì)則，請查看 UISplitViewController Class Reference。

6.3 文本和搜索 Text and Search

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

文本框 Text Field

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

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

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

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

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

鍵盤 Keyboards

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

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

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

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

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

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

搜索 Search

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

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

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

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

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

6.4 按鈕 Buttons

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

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

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

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

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

按鈕圖標(biāo) Button Icons

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

按鈕文字 Button Text

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

使用動詞或動詞短語來描述一個按鈕的操作。以操作行為為特定標(biāo)題，表示交互性，并且明確了單擊該按鈕時會發(fā)生什么。

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

確保按鈕文本簡短，重點突出。過長的文字可能被截斷，從而使其難以閱讀。

6.5 導(dǎo)航欄 Navigation Bars

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

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

6.6 頁面控制器 Page Controls

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

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

請在完整的屏幕頁面上使用頁面控制器。當(dāng)全屏頁面的內(nèi)容很多且是同級情況下，使用頁面控制器。在頁面間切換時，盡量避免使用額外的交互方式，保持用戶注意力集中。

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

更多的實施細(xì)則，請查看 UIPageControl Class Reference。

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

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

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

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

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

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

在用戶等待加載的時候，可以給他們提供一些有用的信息。這些有用的信息可以是在動態(tài)指示圖標(biāo)上增加的文字信息。不要增加意思模糊的術(shù)語，比如說正在加載或者正在授權(quán)這樣的字眼，因為它們并不會更好地幫助用戶理解。

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

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

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

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

6.8 分段控件 Segmented Controls

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

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

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

控制好控件數(shù)量。超過7個控件就會使用戶很難一眼分辨出來，而且在定位時也會變得非常費時。另外，盡量保證各個控件的大小與它所包含的內(nèi)容匹配。因為所有的的控件是相同的寬度，如果一些控件里有內(nèi)容，一些控件里沒什么內(nèi)容，這樣看起來就不是很舒服。

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

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

控件圖標(biāo) Segment Icons

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

控件文本 Segment Text

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

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

確保文本簡短，重點突出。過長的文字可能被截斷，從而使其難以閱讀。

6.9 提醒 Alerts

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

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

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

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

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

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

提醒按鈕 Alert Buttons

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

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

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

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

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

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

我的個天這是開發(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機頂盒區(qū) › 蘋果Apple TV

Apple TV 人機界面指南

Apple TV 人機界面指南