在 Xamarin 中使用 tvOS 圖示和影像

發行項
03/16/2017

建立引人入勝的圖示和影像，是開發AppleTV應用程式沉浸式用戶體驗的重要部分。本指南將涵蓋為 Xamarin.tvOS 應用程式建立及包含必要圖形資產所需的步驟：

啟動影像 - 啟動影像會在您的應用程式第一次啟動時顯示，並在啟動完成後由應用程式的第一個畫面取代。
分層影像 - Apple TV 特有的新分層影像會與視差效果搭配使用，為選取的專案建立 3D 效果。有數種方式可以建立分層映像。
應用程式圖示 - 不僅需要Apple TV主畫面，而且適用於App Store的圖示。它們必須以分層影像的形式提供。
頂架影像 - 如果您的應用程式位於主畫面的頂端列，則需要頂架影像來醒目提示您 app 的功能。您可以選擇性地提供動態上架內容，以醒目提示應用程式中的內容。
遊戲中心影像 - 如果您的應用程式是遊戲並使用 Game Center，則需要數個額外的影像。
設定 Xamarin.tvOS 專案映射 - 涵蓋設定 Xamarin.tvOS 應用程式啟動影像和應用程式圖示所需的步驟。

重要

Apple TV 上的所有影像都處於 1x 解析度（@1x），您應該只使用這個大小的影像。包括較大型、更高解析度的圖形不僅需要時間下載並使用更多的記憶體和記憶體，而且必須在運行時間動態重新調整，而且會對繪圖效能造成負面影響。

啟動映像

啟動影像是第一個在Apple TV上啟動 Xamarin.tvOS 應用程式時所顯示的第一件事，因此，每個tvOS應用程式都必須提供啟動影像。

[啟動影像] 隨即出現，並給人留下您的 app 快速且有回應的印象。 Apple TV 會在不久之後，將啟動影像取代為應用程式的第一個畫面。

[啟動影像] 不是廣告或藝術表達的機會，它們只提供您 app 快速啟動且已準備好使用的印象。

啟動映像大小	備註
1920x1080px	僅限非分層.png檔案

Apple 針對設計應用程式的啟動映射提出下列建議：

幾乎與第一個畫面 完全相同 - 您的啟動畫面應該盡可能接近您 app 的第一個畫面。當第一個畫面出現時，包括不同的圖形或元素可能會導致令人惱火的「閃爍」。
避免使用文字 - 啟動影像是靜態的，因此在顯示之前不會當地語系化。
淡化啟動 - 因為 Apple TV 使用者經常切換應用程式，所以您不應該注意應用程式啟動程式。
沒有廣告或商標 - 您的啟動影像不應該作為 [關於] 畫面使用，或包含任何商標，除非它是您 app 第一個畫面的靜態部分。嚴格禁止廣告。

設定啟動映像

若要設定tvOS專案的啟動影像，請執行下列動作：

在方案總管 中，按兩下Assets.xcassets以開啟它以進行編輯：
在 [ 資產編輯器] 中，按兩下 LaunchImages 資產：
按兩下 1x Apple TV 專案，然後選取 [啟動影像]，或選擇性地從文件系統拖曳新的影像：
儲存您的變更。

分層影像

Apple TV 的新功能是分層圖像與視差效果搭配運作，以產生 3D 效果，有助於讓使用者在沙發上精神上連接到整個房間的螢幕上的內容。

分層影像包含從兩個（2）到五個（5）個別的圖層，結合以形成完整的影像。除了背景圖層之外，每個圖層都會使用其 Z 順序以及透明度來建立深度的錯覺。當使用者與分層影像互動時，會縮放及重疊較高的 Z 排序圖層，以建立此效果。

重要

應用程式圖示需要分層影像，而且對於其他可焦點專案而言是選擇性的影像（例如頂架影像）。不過，Apple 建議針對任何可在您的應用程式中取得焦點的影像使用分層影像。

Apple 會針對設計分層影像提出下列建議：

讓背景圖層不透明 - 您的背景圖層（第 1 層）必須不透明，否則當您嘗試在 Apple TV 上使用分層影像時，將會收到錯誤。所有其他圖層都可以包含多個透明度層級，以增強 3D 效果。
隔離前景、中間和背景元素 - 將突出元素（例如遊戲字元）放在前景，將中間用於次要元素或陰影。最後，包含中性背景，為您的上層提供階段。
將文字保留在前景 - 除非您希望文字被較高層級遮蔽，否則一般應該位於最上層。
使用簡單分層 - 視差效果的設計是微妙的，所以讓您的圖層保持最少，以防止不切實際的效果。
包含保管庫區域 - 因為上層可以在視差效果期間裁剪，因此您必須在每個圖層中建置保管庫區域框線。如果您讓內容太接近圖層邊緣，它可能會變成裁剪。上層將經歷比較低層更多的縮放和裁剪。請參閱下方的重設大小影像圖層一節。
預覽通常 - 分層影像應該經常預覽，以確保所需的 3D 效果發生，而且個別層上沒有任何內容被裁剪。您應該在真正的 Apple TV 硬體上預覽分層影像，以確保它們會如預期般轉譯。

盡可能使用內 UIKit 建控件來顯示分層影像，因為它們會在焦點進入焦點時自動取得視差效果。

重設大小影像圖層

請務必記得將保管庫區域框線包含在組成分層影像的每個圖層中。因為個別圖層可以在視差效果期間縮放和裁剪，所以如果圖層的內容太接近圖層的邊緣，則可以裁剪圖層的內容：

建立分層影像

tvOS 使用下列格式的分層影像：

CAR 檔案 - 這是 Apple 所建立的專屬資產目錄格式。您不會直接建立 CAR 檔案，它們會在編譯時期從任何 LSR 檔案建立，並包含在您的應用程式套件組合中。
LSR 影像 - 這是 Apple 所建立的專屬影像格式。使用視差導出工具 Adobe Photoshop 外掛程式或視差預覽工具，以 LSR 格式建立和預覽分層影像。
Assets.xcassets - 從兩個（2）到五個（5）個標準 .png 格式化影像包含在資產目錄中，這些影像將在編譯時期編譯成 CAR 或 LSR 格式化的分層影像。
LCR 檔案 - 這是 Apple 所建立的專屬檔案格式。 LCR 檔案是用來做為從其中一部內容伺服器下載的其他內容。應用程式套件組合中不應該包含 LCR 檔案。 LCR 檔案是使用 layerutil Xcode 隨附的命令行工具，從 LSR 或 Photoshop 檔案產生。

視差預覽程式

Apple 建立了視差預覽工具，以預覽和建立應用程式圖示和選擇性可焦點專案所需的分層影像。預覽程式會顯示構成已完成分層影像的每個層次：

預覽分層影像時，您可以使用滑鼠來旋轉影像並預覽視差效果。 + 使用 [加號] 和 - [減號] 按鈕來新增和移除圖層。

建立新的分層影像時，它可以以 LSR 格式匯出，並包含在您應用程式的套件組合中。

如需建立和預覽分層影像的詳細資訊，請參閱Apple的TvOS 應用程式程序設計指南的<建立視差圖文>一節。

應用程式圖示

您的 Xamarin.tvOS 應用程式不僅需要 Apple TV 主畫面的應用程式圖示，還需要 App Store 的圖示。應用程式圖示是您第一次對潛在使用者留下深刻印象的變更，應該一目了然地傳達應用程式的目的。

每個應用程式都必須同時提供小型和大型版本的應用程式圖示。安裝應用程式時，小圖示將會用於AppleTV主畫面。 App Store 會使用大型版本。大型應用程式圖示應該模仿小型圖示版本的外觀和風格。

小型圖示	解決方法	解決方法
實際大小	400x240px	1280x768px
保管庫區域大小	370x222px
未對焦大小	300x180px
焦點大小	370x222px

重要

您的應用程式圖示必須以分層影像的形式提供。如需詳細資訊，請參閱上面的分層影像一節。

Apple 提供下列建立應用程式圖示的建議：

提供單一焦點點 – 將您的圖示設計成直接放在圖示中央的單一焦點點。
使用簡單背景 – 讓您的圖示背景 保持簡單，讓上層脫穎而出。請考慮使用簡單的色彩或微妙的漸層。
限制文字 數量 – 由於應用程式的名稱會在用戶選取圖示時出現在圖示下方，因此您只應該在圖示設計時包含文字。
請勿使用螢幕快照 – 圖示的螢幕快照太複雜，而且不允許使用者一目了然地查看應用程式的目的。
保留圖示方形 – tvOS 會自動套用遮罩，以巧妙地四捨五入圖標的角落。不要包含這個四捨五入自己。
仔細分隔您的圖層 – 文字應該位於最上層、中間的次要專案，以及可讓上層閃耀的中性背景。
小心使用漸層和陰影 – 漸層和陰影可能會與視差效果發生衝突，因此應該謹慎使用。簡單的由上至下，淺色漸層樣式效果最佳。陰影通常最適合做為尖銳的硬邊緣色調。
不同圖層透明度 – 在應用程式圖示的上層使用不同層級的透明度，以增加 3D 效果。背景圖層必須不透明，否則會產生錯誤。

設定應用程式圖示

若要設定 tvOS 專案所需的應用程式圖示，請執行下列動作：

在方案總管 中，按兩下Assets.xcassets以開啟它以進行編輯：
在 [資產編輯器] 中App Icon & Top Shelf Image，展開資產：
接下來，展開 App Icon - Small 資產：
然後展開資產， Back 然後按兩下 Contents 專案：
按兩下 一x Apple TV 專案 ，然後選取影像檔。
針對和 Middle 資產重複上述步驟Front。
然後重複相同的步驟來定義 App Icon - Large 資產。
儲存您的變更。

上架影像

如果使用者已將 Xamarin.tvOS 應用程式放在 Apple TV 主畫面的 [頂端列] 上，當使用者選取您的應用程式時，就會顯示大型的上架影像。此影像應醒目提示應用程式的功能，或提供其內容的直接連結。

頂架映像可以當作單一靜態 .png 或 .lsr 檔案提供（請參閱建立分層影像），也可以在運行時間動態建立為可焦點專案的單一數據列（請參閱下面的動態上架內容）。

上架影像大小	備註
1920x720px	靜態.png或分層 .lsr 檔案

Apple 提供下列建議來建立頂架映射：

使用 Rich Static Imagery – 如果您的 app 未提供動態內容，其最上層架映射將無法集中。使用此影像來反白顯示應用程式或品牌的功能。
連結至應用程式內容 – 動態上架版面配置提供使用者在您應用程式中找到最重要的內容快速連結。使用此區域提供快速連結來啟動您的應用程式，並立即跳至指定的內容。
展示最新內容 – 豐富的 Top Shelf 內容 可將使用者繪製到您的應用程式中，並讓他們想要使用更多內容。使用此專案作為展示最高評分或最新內容的區域。
個人化內容 – 使用者將其最常使用或最愛的應用程式放在主畫面的頂端列。使用頂端架來顯示他們最感興趣的內容。
不允許 廣告 – 禁止廣告顯示在頂架上。您可能會顯示最新的可購買內容，但不應顯示任何定價資訊。

設定最上架影像

若要設定tvOS專案所需的最上架映像，請執行下列動作：

在 方案總管 中，按兩下Assets.xcassets以開啟它以進行編輯：
在 [資產編輯器] 中App Icon & Top Shelf Image，展開資產：
按兩下 Top Shelf Image 資產：
按兩下 一x Apple TV 專案 ，然後選取影像檔。
儲存您的變更。

動態上架內容

頂端貨架可以包含可焦點專案動態數據列或動態捲動橫幅，而不是顯示靜態的上架影像。這兩種動態樣式都可讓您醒目提示應用程式提供的內容，或跳入其最常使用的功能。

區段內容列

此動態頂架內容類型會顯示單一數據列的捲動、可焦點專案選擇性細分成區段。它通常用來反白顯示新的、我的最愛或最近檢視的應用程式內容。

內容會顯示為單一水準卷動的內容清單，其中卷標會出現在目前選取的內容片段底下（目前有焦點）。如果用戶選取指定的內容片段，您的應用程式將會啟動，而且應該直接進入該內容。

需要下列內容大小：

大小	海報（2：3）	廣場（1：1）	HDTV （16：9）
實際大小	404x608px	608x608px	908x512px
保管庫區域大小	380x570px	570x570px	852x479px
未對焦大小	333x500px	500x500px	782x440px
焦點大小	380x570px	570x570px	852x479px

Apple 提供下列針對「區段內容列」的建議：

完成資料列 – 您應該提供足夠的內容來跨越螢幕的完整寬度。
調整混合影像 – 區段式內容列的設計目的是要混合影像大小（從上述清單）。不過，如果您混合影像大小，請注意，將會套用額外的縮放來正規化內容顯示。

捲動內嵌橫幅

或者，您的 Xamarin.tvOS 應用程式可以在頂架中呈現其內容，以自動捲動和迴圈收集幾乎填滿螢幕的橫幅。這種風格通常用來展示豐富的新內容，如新的電視節目。

除了自動捲動之外，使用者還可以使用 Siri 遠端控制橫幅，並以任一方向捲動。當橫幅處於焦點時，在Siri遠端上製作一個小型的圓形手勢，將會啟用該橫幅的視差效果。

橫幅影像（超寬）

大小	解決方法
實際大小	1940x624px
保管庫區域大小	1740x620px
未對焦大小	1740x560px
焦點大小	1740x620px

捲動內嵌橫幅可以當做靜態 .png 或分層 .lsr 檔案提供。

Apple 為卷動內嵌橫幅提供下列建議：

內容數量 - 您應該至少提供三（3）個橫幅，讓捲動感覺自然。您應該包含不超過 8 個（8）橫幅，或讓使用者難以流覽。
內容文字 - 如果您的橫幅需要中的文字應該包含在橫幅影像中。如果您使用分層影像，則文字應該位於最上層。

如需將 Top Shelf 擴充功能新增至應用程式以提供動態 Top Shelf 內容的詳細資訊，請參閱 Apple 的 TVServices Framework 參考。

遊戲中心影像

如果您的 Xamarin.tvOS 應用程式是遊戲，而且您已包含 Game Center 支援，則需要更多影像資產：

成就圖示 - 每個會自動裁剪成圓形的成就都需要不透明的影像。成就是不可專注的專案。
儀錶板圖文 - 可以選擇性影像，其會出現在遊戲中心內應用程式儀錶板頂端。這些影像不可為焦點。
排行榜圖稿 - 您必須為應用程式支援的每個排行榜提供一個（1）到三個（3） 16：9 外觀比例影像。這些可能是靜態 .png 或分層 .lsr 檔案。排行榜藝術品是專注的。

大小	成就圖示	儀錶板圖文	排行榜圖文
可見大小	200x200px	923x150px	n/a
實際大小	320x320px	n/a	659x371px
保管庫區域大小	n/a	n/a	618x348px
未對焦大小	n/a	n/a	548x309px
焦點大小	n/a	n/a	618x348px

如需使用 Game Center 的詳細資訊，請參閱 Apple 的遊戲中心程序設計指南。

使用影像

由於tvOS 9是iOS 9的子集，因此用來在 Xamarin.iOS 應用程式中包含和顯示影像的相同技術也適用於 Xamarin.tvOS 應用程式。如需詳細資訊，請參閱顯示影像檔。

設定 Xamarin.tvOS 專案影像

如上所述，所有tvOS應用程式都需要啟動影像和應用程式圖示。本節涵蓋在資產目錄中設定 Xamarin.tvOS 應用程式項目之後，選取 Xamarin.tvOS 應用程式專案的啟動影像和應用程式圖示。

執行下列操作：

在 方案總管 中，按兩下 Info.plist 以開啟它以進行編輯：
在 Info.Plist 編輯器中，選取應用程式圖示的 [設定應用程式圖示] 區段上方設定的資產目錄：
接下來，選取 [啟動映射] 的 [資產目錄] （在 [設定啟動映射] 區段中設定的上方設定。
儲存您的變更。

摘要

本文涵蓋 Xamarin.tvOS 應用程式中所使用的所有影像類型和大小。首先，它涵蓋啟動影像、分層影像、應用程式圖示、最上架影像和遊戲中心影像。然後涵蓋在 Xamarin.tvOS 應用程式中使用影像。

共用方式為

在 Xamarin 中使用 tvOS 圖示和影像