Share via


調整成像素密度的指導方針

系統會自動縮放在 Windows、Windows Phone 或兩者上執行的 Windows 執行階段應用程式,確保無論畫面像素密度為何都能有一致的可讀性與功能性。請遵循這些指導方針,以在針對具有不同像素密度的裝置進行縮放時,讓應用程式的 UI 品質保持不變。

  這些指導方針不適用於使用 Silverlight 的 Windows Phone 應用程式。如需 Silverlight 特定指導方針,請參閱Multi-resolution apps for Windows Phone 8

標準與 HD 平板電腦上的像素密度差異

說明

若不縮放,螢幕上實際的物件大小會隨著裝置的像素密度增加而變小。當 UI 元素太小而無法觸控或文字太小而無法閱讀時,Windows 就會根據下列的縮放倍數來自動縮放您的應用程式:

Windows 市集應用程式:

  • 1.0 (不會套用任何縮放,維持 100%)
  • 1.4 (140% 縮放)
  • 1.8 (180% 縮放)

Windows Phone 市集應用程式:

  • 1.0 (不縮放,維持 100%)
  • 1.4 (140% 縮放)
  • 2.4 (240% 縮放)

Windows 會根據實體螢幕大小、螢幕解析度、螢幕 DPI 以及規格,決定要使用的縮放倍數。如果螢幕規格符合特定的閾值,Windows 則會使用次高的縮放倍數。您可以使用 ResolutionScale (Windows) 或 RawPixelsPerViewPixel (Windows Phone) 決定縮放比例。

系統將自動縮放您的應用程式,但為了確保不論在何種裝置像素密度,UI 看起來都既清楚又能運作,請使用下列指導方針做好縮放應用程式的準備。

可行與禁止事項

  • 使用可縮放向量圖形。Windows 會自動縮放這些格式,不會有明顯的人為誤差。 如果是 JavaScript 應用程式,請使用 SVG。您可以在使用 C#、C++ 或 Visual Basic 的應用程式中,使用 XAML 定義的圖形。

  • 使用針對應用程式套件中的點陣圖影像載入的資源,為各個縮放比例分別提供影像。在影像檔案名稱中包含縮放比例 (例如,Assets\Square7070Logo.scale-100.png)。請注意,Windows 會自動為目前的縮放比例載入正確的影像。 根據 DPI 縮放的範例顯示如何使用為影像載入的資源。

    如需與應用程式認證相關的影像需求,請參閱選擇應用程式影像。如需命名慣例的詳細資訊,請參閱快速入門:使用檔案或影像資源 (使用 JavaScript 和 HTML 的 Windows 市集應用程式)快速入門:使用檔案或影像資源 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式)

  • 為不同的縮放倍數建立您的資產時:

    • 不要設計 100% 比例的點陣圖影像並手動加以放大。即使您使用高品質的影像程式,都可能產生模糊的結果。
    • 請記住,縮小大型的高解析度影像,不一定能夠產生簡潔、清晰的結果。不過,如果沒有原始向量,手動縮小解析度較高的檔案,勝過放大解析度低的檔案。
  • 如果您的應用程式在執行階段使用程式碼載入影像 (例如,如果您使用 DirectX,而非 XAML 或 HTML 建立 UI),請使用 ResolutionScale (Windows) 或 RawPixelsPerViewPixel (Windows Phone) 來判斷縮放比例,並根據該縮放百分比手動載入影像。

  • 在檔案系統影像使用 Thumbnail API。縮圖 API 藉由快取較小的影像版本當成縮圖,使效能達到最佳狀態。如需詳細資訊,請參閱有效存取檔案系統

  • 載入較大的影像時,請指定影像的寬度與高度,而不是使用自動調整大小功能,以防止配置變更。

  • 使用印刷格線單位與子單位。對於主要格線單位請使用印刷格線定義的 20 像素大小,對於次要格線單位則使用 5 像素,以確保您的配置不會因為像素進位的關係而發生像素位移。可以被 5 像素整除的任何大小單位都不會發生像素進位問題。

  • 對於遠端網頁影像,請使用解析度媒體查詢。 如果您的應用程式使用 JavaScript,而且您有遠端網頁影像,請在執行階段使用 CSS @media 解析度媒體功能background-image 屬性取代影像。

  • 不要使用非 5 像素倍數的影像大小。非 5 像素倍數的單位在調整到 140%、180% 與 240% 時會發生像素位移的情形。

適用於設計者

選擇應用程式影像 (Windows 市集)

磚影像大小

觸控設計互動

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

Guidelines for thumbnails

適用於開發人員 (HTML)

快速入門:使用檔案或影像資源

解析度媒體功能

DisplayInformation

ResolutionScale

RawPixelsPerViewPixel

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

適用於開發人員 (XAML)

快速入門:使用檔案或影像資源

DisplayInformation

ResolutionScale

RawPixelsPerViewPixel

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

範例

根據 DPI 縮放的範例