支援多種螢幕大小的指導方針

發行項
05/18/2015

Windows 和 Windows Phone 市集應用程式可以在不同螢幕大小和解析度的各種裝置上執行。使用者也可以修改螢幕的方向，或者，如果應用程式在 Windows 上執行，可將它的大小調整到最小寬度或與其他應用程式並列顯示。無論使用者是在手機、Tablet PC、膝上型電腦、桌上型電腦或 PPI 裝置上執行您的應用程式，請確保應用程式的 UI 看起來都很正常而且維持其功能性。設計適應所有大小和方向螢幕的 UI 時，請遵循下列指導方針。

如需調整 Windows 市集應用程式以適應窄格式視窗大小的具體指導，請參閱Guidelines for resizing to narrow layouts。

說明

您的應用程式可能會在各種螢幕大小執行，從小型手機螢幕，到中型膝上型電腦螢幕，甚至可能到全方位或 PPI 裝置螢幕。取決於螢幕大小和解析度，應用程式能利用的可檢視區數量有所不同。

Tablet PC 裝置上的範例應用程式

大型桌上型監視器上的範例應用程式

以下詞彙對於了解縮放到不同螢幕大小相當重要。

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

平台、控制項及範本都已設計成能夠配合不同的螢幕大小、解析度和外觀比例。雖然大多數應用程式的配置會自動調整來顯示變更，但您必須考量最上層配置、內容區域、應用程式瀏覽以及命令，確認這些項目在所有螢幕上都顯示於預期位置，並且可以直覺地操作。

下表顯示在設計應用程式時要考量的最重要的螢幕大小。

全螢幕的螢幕大小 (有效的像素解析度)	裝置描述
1366x768	Tablet PC、可變形平板電腦以及許多膝上型電腦 (16:9 的外觀比例)；膝上型電腦/桌上型電腦基準解析度
1920x1080	大型膝上型電腦與裝置 (16:9 的外觀比例)
2560x1440	非常大型的全方位裝置 (16:9 的外觀比例)
1280x800 和 800x1280	直向優先的小型裝置 (16:10 的外觀比例)
1024x768 和 768x1024	橫向優先的小型裝置 (4:3 的外觀比例)
1371x857 和 857x1371	小型裝置 (16:10 的外觀比例)
384x640	4.5 吋手機 (15:9 的外觀比例)
400x711	4.7 吋手機 (16:9 的外觀比例)
450x800	5.5 吋手機 (16:9 的外觀比例)
491x873	6 吋手機 (16:9 的外觀比例)

設計在 Windows 而不是 Windows Phone 上執行的應用程式時，請考慮使用者有兩個應用程式共用螢幕時可用的螢幕大小，或將您應用程式的大小調整到最小寬度。

分割畫面大小 (有效的像素解析度)	說明
672x768	在 1366x768 裝置上對半分割的畫面
500x768	應用程式的預設大小下限；在 1024x768 裝置上對半分割的畫面
320x768	應用程式的大小下限，可支援 320 像素的最小寬度

如需縮放的建議，請參閱Guidelines for scaling to pixel density。

重要的全螢幕和分割畫面視窗大小

可行與禁止事項

盡可能使用彈性的控制項支援自動重排的內容。彈性的控制項包括 XAML Grid control、CSS 格線、CSS 多欄版面配置和 ScrollViewer control。例如，格線控制項會根據顯示裝置的螢幕解析度，彈性調整 UI 的特定區段來填滿可用的空間，並依照可用的螢幕空間，將內容指派到不同的儲存格。
設計您應用程式的配置和控制項，以調整適應最小大小的螢幕並在其中運作：
- Windows 市集應用程式的預設最小寬度：500px。
- Windows 市集應用程式的非預設最小寬度：320px。
- Windows Phone 市集應用程式的最小大小 (不可調整)：384px (直向)，640px (橫向)。
UI 和控制項必須在所有螢幕大小上都可使用，包括最小大小 (列示如上)。要考慮的重要控制項包括：
設計應用程式能夠有效地使用大螢幕上的空間，並且擁有可自動重排的配置。不要留置大量的空白空間。
測試您的應用程式適用於最重要的裝置大小。除了在實際裝置上測試您的應用程式之外，您還可以使用適用於 Windows 市集應用程式的 Microsoft Visual Studio 模擬器，以不同的實體螢幕大小、解析度和方向模擬執行應用程式。
指定所有input fields的大小下限。大小下限可確保輸入欄位不會在使用者調整視窗大小之後消失。
測試應用程式的輸入欄位不會被螢幕小鍵盤蓋住。
使用絕對定位時務必審慎；如果使用不正確，它會阻止您的 UI 回應視窗大小和方向的變更。與其針對配置進行硬式編碼，請改用執行階段計算的位置來配置 UI。
針對不同的像素密度進行設計。若要深入了解，請參閱調整成像素密度的指導方針。

僅限 Windows 市集應用程式

確定您的應用程式在預設最小寬度的 500 像素下還能運作。如需特定建議，請參閱Guidelines for narrow layouts。
如果您的應用程式適合較小的視窗，而您想鼓勵使用者將您的應用程式保留在畫面上，可以支援非預設寬度下限的 320 像素。
確認使用者在調整應用程式大小時，可以繼續進行目前的工作。例如，維持應用程式目前的頁面、捲軸的狀態、選取範圍以及焦點。
在所有螢幕大小支援常用鍵。確認已適當縮放飛出視窗和窗格。

在 Windows 8 中，使用者只能將應用程式大小調整成三種檢視狀態：全螢幕、貼齊和填滿。在 Windows 8.1 中，使用者可將應用程式大小調整為任何寬度 (從全螢幕調整到最低寬度)。

其他用法指導方針

自動支援方向變更

使用者可以旋轉他們的手機、Tablet PC 與監視器。只要您的應用程式不是使用固定式配置，Windows 會自動處理直向和橫向。您只需要考慮應用程式的寬度如何影響其配置。

請參閱下面的固定式配置小節，了解何時適合使用彈性配置的詳細資訊。

橫向與直向配置

調整大小的應用程式行為 (僅限 Windows 市集應用程式)

如果使用者在畫面上有多個應用程式，請注意這些獨特的 UI 互動：

如果使用者叫用常用鍵，該常用鍵會套用到使用者所使用的最後一個應用程式，無論應用程式的大小或螢幕上應用程式的位置為何。
螢幕上的每個應用程式之間都有一個控制代碼。使用者可透過滑動控制代碼來調整應用程式視窗的大小。控制代碼也會顯示取得焦點的應用程式。
如果使用者抓住應用程式之間的控制代碼，並嘗試將應用程式大小調整為低於應用程式寬度下限的寬度，則應用程式會離開螢幕。
如果使用者在螢幕上有多個應用程式時旋轉某個裝置或監視器，則應用程式不會切換方向。

固定式配置

大部分應用程式可使用動態配置，它會適應螢幕大小和解析度變更，並自動重排內容。但在某些情況下，您的應用程式可能需要固定式配置。不以內容為焦點或取決於圖形完整性的應用程式 (如遊戲應用程式) 需要使用固定 (絕對) 配置。Windows 以平台內建的「縮放到最佳大小」方法來適應這些應用程式。

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

在固定式配置遊戲使用「縮放到最佳大小」

若要實作「縮放到最佳大小」方式，請執行下列動作：

針對基準解析度設計您的配置，例如 1366x768 像素 (電腦/平板電腦) 或 384x640 像素 (手機)。這是可以調整為更大螢幕的配置。
將您的固定內容放入 ViewBox 控制項 (ViewBox in JavaScript and HTML 或 Viewbox in C#/VB/C++ and XAML) 中。ViewBox 控制項會配合螢幕大小縮放固定式配置。
確定 ViewBox 控制項的大小已調整為 100% 的寬度和高度。
將 ViewBox 的固定大小屬性定義成配置的固定像素大小 (例如，1366x768 或 384x640)。
選擇上下黑邊色彩。固定控制項不會以動態變更的方式來回應外觀比例或螢幕大小變更，因此「縮放到最佳大小」這項技術會自動將應用程式的內容置中或進行上下黑邊 (水平或垂直) 處理。頂層應用程式配置的色彩可決定上下黑邊列的色彩。以下是我們對色彩的建議：選擇較深的色彩 (例如黑色) 可以融入硬體的風格、中性色彩 (例如灰色) 看起來帶有意圖，或是可以搭配應用程式內容的色彩。
提供向量或高解析度資產。在大型桌上型螢幕中，「縮放到最佳大小」這個方法會將應用程式調整到各種大小，最高可以調整為原設計大小的 180% (適用於 Windows) 或 280% (適用於 Windows Phone)。向量資產像是可縮放向量圖形 (SVG)、Extensible Application Markup Language (XAML)，或設計不會在縮放時產生人為誤差或模糊的基本縮放。如果需要點陣資產 (例如點陣圖影像)，請提供 MRT 資產。

以下影像示範純量影像 (右) 相較於向量影像 (左)，經過放大調整後畫質降低的程度。
不要將可調整的控制項放入 ViewBox 控制項。