調整成螢幕大小的指導方針 (Windows 市集應用程式)

發行項
07/03/2013

這個主題描述如何為 Windows 市集應用程式設計和建置配置的最佳做法，讓配置能調整成 Windows 8 所支援的各種螢幕大小。

Windows 8 可以在各種大小的螢幕上執行；從 Tablet PC 的小型螢幕、中型的膝上型電腦螢幕，到大型桌上型電腦或觸控式螢幕全功能電腦皆可執行。Windows 市集應用程式可以執行於 Windows 8 支援的任何大小螢幕。一般而言，大型螢幕會有較高的螢幕解析度。因此，這種大型螢幕有更多的可檢視區域讓您的應用程式充分利用。

本文件使用下列詞彙。

Term	Description
螢幕大小	螢幕的實體大小，以英吋表示。通常以對角線度量。
螢幕解析度	螢幕支援的像素量，分別為水平與垂直方向的像素量。例如，1366x768。
外觀比例	螢幕的寬度與高度比。例如，16:9。

螢幕大小

實際上，螢幕大小對 Windows 市集應用程式最大的影響就是螢幕解析度。大型螢幕通常有較高的螢幕解析度，因此有更多寶貴的螢幕空間可供您的應用程式使用。使用者會期待在大型螢幕上看到更多內容與功能。

應用程式開發與設計人員應該考量如何運用這些寶貴的螢幕空間。應用程式在大型螢幕上的呈現方式，是在設計與開發階段，由專為配置定義的參數所定義。

平台、控制項及範本都已設計成能夠配合不同大小的螢幕。許多應用程式的配置只要運用額外的簡單操作或程式碼就可以調整大小，需要特別考量的是最上層配置、內容區域、應用程式導覽以及命令，請確認這些項目在大型螢幕中都顯示於預期位置，並且可以直覺地操作。

下列影像示範若沒有為大型螢幕建置適當的配置，會造成大片的空白區域。

非彈性配置造成的大片空白區域

最低螢幕解析度

您的應用程式應該支援兩種主要的螢幕解析度：

Windows 市集應用程式執行的最低解析度為 1024x768。
如果想支援 Windows 8 的所有功能 (包括貼齊的多工處理能力)，最低解析度必須是 1366x768。如需貼齊檢視的詳細資訊，請參閱貼齊與填滿檢視的指導方針。

Windows 市集應用程式無法以 1024x600 或 1280x720 的解析度執行。

下表列出主要螢幕解析度的建議做法。

做法	說明
針對最低解析度 1024x768 設計。	此做法提供下列好處：確保 UI 所有項目 (例如導覽、控制項以及內容) 都符合螢幕大小而不用裁剪。
針對最佳解析度 1366x768 設計。	此做法提供下列好處：確保 UI 所有項目 (例如導覽、控制項以及內容) 都符合螢幕大小而沒有空白區域。

針對最低解析度 1024x768 設計。

此做法提供下列好處：

確保 UI 所有項目 (例如導覽、控制項以及內容) 都符合螢幕大小而不用裁剪。

針對最佳解析度 1366x768 設計。

此做法提供下列好處：

確保 UI 所有項目 (例如導覽、控制項以及內容) 都符合螢幕大小而沒有空白區域。

針對大型螢幕設計

針對大型螢幕設計應用程式時，請務必考慮如何將應用程式的配置、美學、比例以及控制項套用到大型畫面。此外，任何應用程式都會有任意數量且複雜度不一的配置。每個配置都可以針對大型螢幕個別考量。

下表列出針對大型螢幕的建議做法。

做法	說明
填滿螢幕	本做法提供最佳的使用者經驗，不論螢幕大小，都能盡量專心沉浸於應用程式。應用程式應該儘可能以填滿螢幕的方式顯示，且應針對各種螢幕大小貼心設計。購買大型螢幕的使用者總是期待他們的應用程式在大型螢幕上看起來一樣很棒，可能的話最好以更多內容填滿螢幕。
決定配置是固定或可調整。	若要建置能調整成各種螢幕大小的應用程式，有兩種技巧可供運用。第一種技巧取決於配置的複雜度，以及使用情況。

填滿螢幕

本做法提供最佳的使用者經驗，不論螢幕大小，都能盡量專心沉浸於應用程式。

應用程式應該儘可能以填滿螢幕的方式顯示，且應針對各種螢幕大小貼心設計。購買大型螢幕的使用者總是期待他們的應用程式在大型螢幕上看起來一樣很棒，可能的話最好以更多內容填滿螢幕。

決定配置是固定或可調整。

若要建置能調整成各種螢幕大小的應用程式，有兩種技巧可供運用。第一種技巧取決於配置的複雜度，以及使用情況。

固定配置

固定配置最常用於遊戲或類遊戲應用程式中，這些應用程式主要由點陣圖影像所構成。通常，這類型的配置都有固定數量的內容 (例如遊戲板)，已無法在其中顯示更多內容或是加入更多的值。這些配置不能也不會進行動態變更或調整為不同的螢幕大小，因為它們是以固定像素值所設計。Windows 8 以平台內建的「縮放到最佳大小」方法來接納這些配置。

不同大小螢幕的固定配置

固定配置：縮放到最佳大小

如果您決定應用程式必須採用無法調整到各種螢幕大小的固定配置，可以使用「縮放到最佳大小」的方式，讓固定配置填滿不同大小的螢幕，如以下影像所示。

適用固定配置的「縮放到最佳大小」

下表列出使用「縮放到最佳大小」功能之應用程式的建議做法。

做法	說明
從基本解析度著手。	設計固定配置時，請先從基本解析度著手：1024x768 與 1366x768。這是可以調整到更大螢幕的配置。
將您的固定內容放入 ViewBox 控制項。	ViewBox 控制項會將固定配置縮放到最佳大小。確定 ViewBox 控制項的大小已調整為 100% 的寬度和高度。將 ViewBox 的固定大小屬性定義成配置的固定像素大小 (例如，1366x768)。
請勿將可調整的控制項 (例如 AppBar) 放入 ViewBox。	這些控制項會自動調整為不同的螢幕大小。
定義上下黑邊的樣式與色彩。	固定應用程式配置不會以動態變更的方式來回應長寬比或螢幕大小變更，因此「縮放到最佳大小」這個方法並不會自動將應用程式的內容置中或經過上下黑邊 (水平或垂直) 處理。定義經過上下黑邊處理的樣式與色彩可以提供很棒的使用者經驗，因為該樣式與色彩可補足應用程式或硬體所不足的地方。經過上下黑邊處理的色彩，是由最上層應用程式配置的背景色彩所定義。以下是我們對色彩的建議：選擇較深的色彩 (例如黑色) 可以融入硬體的風格、中性色彩 (例如灰色) 看起來帶有意圖，或是可以搭配應用程式內容的色彩。
提供向量或高解析度資產。	在大型桌上型螢幕中，「縮放到最佳大小」這個方法會將應用程式調整到各種大小，最高可以調整為原設計大小的 200%。向量資產像是可縮放向量圖形 (SVG)、可延伸應用程式標記語言 (XAML)，或都設計不會產生人為誤差或模糊的基本縮放。如果需要點陣資產 (例如點陣圖影像)，請提供原設計大小兩倍的影像，因為這些影像可以縮小而不需要放大。以下影像示範純量影像 (右) 相較於向量影像 (左)，經過放大調整後畫質降低的程度。

彈性配置

彈性配置最常用於消費內容、管理內容以及創建內容的應用程式。這類配置的構成項目，幾乎都以最上層框線定義的等比例元素。例如，新聞閱讀程式應用程式會有一個標頭、頁尾以及位於中間的內容。這類配置會動態變更並調整成不同的螢幕大小，同時導入更多內容，並且依照配置規則來動態填補空間。Windows 8 會以彈性配置技巧來容納這類應用程式，以下將會深入討論這種技術。

不同大小螢幕的彈性配置

彈性配置：管理空間

如果您要讓應用程式支援彈性配置以配合不同的螢幕大小，請採用下列考量來決定應用程式將如何利用所有可用的螢幕空間。

下表列出採用彈性配置之應用程式的建議做法。

做法	說明
決定每個可調整區域利用可用空間的方式。	對於已確定可調整成水平或垂直方向的每個儲存格，決定應用程式配置在大型螢幕上將如何利用這些空間。
決定最上層配置框線。	這個框線應該可以描述應用程式最上層區域為何。這個框線應該包含標頭、導覽以及內容區域的位置。以下影像示範最上層框線。
決定配置的哪些部分是固定或可調整。	針對最上層框線中的每個儲存格，決定在不同螢幕大小時，每個儲存格在垂直與水平維度中調整本身大小的方式。最上層框線描述及調整大小行為，都可以用來定義 GridLayout 的參數。
決定每個可調整區域將採用哪個維度。	對於已確定可調整成水平或垂直方向的每個儲存格，決定應用程式配置在大型螢幕上將如何利用這些空間。
決定應用程式如何利用可調整維度中的空間。	決定應用程式的每個區域如何調整成不同大小之後，下一步就是考量應用程式如何利用空間。應用程式可以使用和結合許多技巧來利用空間；Windows 8 平台與控制項完全支援這些技巧。
請確認所有集合檢視的寬度與高度都調整大小到 100%。	ListView 控制項會自動用更多項目填滿可用空間。
在適當的情況下，文字請用多欄版面配置。	多欄版面配置會自動新增欄以提高可讀性，並流動內容來填補可用空間。
在適當的情況下，影像請用 canvas。	canvas 會自動延展來填補可用空間。
顯示更多空白。	以額外的空白補足，以維持顯示的應用程式內容數量。
顯示更多應用程式。	顯示更多的應用程式內容。視您如何重新排列內容，也可以顯示更多空白—或不顯示。