Share via


針對不同螢幕解析度最佳化影像 (Windows 市集應用程式)

在發行您的 Windows 市集應用程式之前,您應該確定其標誌和啟動顯示畫面在具有不同螢幕解析度的各種裝置上都能顯示良好。如果您只提供一個版本的圖形,Windows 將會縮放該版本來符合所使用的螢幕大小,而且具有高像素密度的螢幕可能會顯示圖形的鋸齒化版本。您可以針對每個影像提供不同大小的版本,以減少 Windows 縮放圖形的程度。如需如何讓影像具有良好外觀的詳細資訊,請參閱調整成像素密度的指導方針

本主題說明如何提供識別應用程式所需之四個影像的不同版本:主要標誌、小型標誌、市集標誌和啟動顯示畫面。此主題並未涵蓋寬的標誌或徽章標誌,不過您可遵循相同的程序。如需 Windows 市集應用程式所需之標誌和影像的概觀,請參閱選擇應用程式影像

注意事項注意事項

Visual Studio 2012 Update 1 支援本主題所述的功能。

取得影像檔

可能的話,您應該使用美工人員使用的專業軟體來設計圖形,根據原始圖檔建立縮放的影像檔。如果這不是您的選擇,您需要建立自己的影像檔。不論您採取哪一種方法,您都需要以下尺寸的應用程式標誌、小型標誌、市集標誌和啟動顯示畫面 (請注意,市集標誌和啟動顯示畫面只需要三個尺寸,而不是四個)。

標誌縮放比例

影像尺寸

縮放比例 180 (180%)

270 x 270px

縮放比例 140 (140%)

210 x 210px

縮放比例 100 (100%)

150 x 150px

縮放比例 80 (80%)

120 x 120 px

小型標誌縮放比例

影像尺寸

縮放比例 180 (180%)

54 x 54px

縮放比例 140 (140%)

42 x 42px

縮放比例 100 (100%)

30 x 30px

縮放比例 80 (80%)

24 x 24px

市集標誌縮放比例

影像尺寸

縮放比例 180 (180%)

90 x 90px

縮放比例 140 (140%)

70 x 70px

縮放比例 100 (100%)

50 x 50px

啟動顯示畫面縮放比例

影像尺寸

縮放比例 180 (180%)

1116 x 540px

縮放比例 140 (140%)

868 x 420px

縮放比例 100 (100%)

620 x 300px

下列範例示範如何使用縮放影像。

新增影像檔

當您擁有適當大小的影像檔時,您可將其新增到專案中,然後在資訊清單檔中加以識別。請根據檔案所屬的資產類型來命名,例如 Logo.png 或 SmallLogo.png。如果您打算在同一個資料夾中儲存檔案,請在檔案名稱中包含縮放比例限定詞。例如,您可以為兩個檔案提供以下名稱:Assets\Logo.scale-100.png 和 Assets\Logo.scale-140.png。

如果您打算根據縮放比例在資料夾中組織檔案,請在資料夾名稱而不是檔案名稱中包含縮放比例。例如,您可以將 Logo.png 和 SmallLogo.png 儲存在 Assets\Scale-100 子資料夾中。

若要將影像檔新增至您的專案中

  1. 開啟您的 Windows 市集專案。

  2. 將影像檔新增至專案中的 Assets 資料夾。

若要識別資訊清單中的檔案

  1. 在 [方案總管] 中,開啟應用程式資訊清單設計工具 (Package.appxmanifest),然後選擇 [應用程式 UI] 索引標籤。

  2. 在視覺資產清單中,選擇 [所有影像資產],以顯示標誌和啟動顯示畫面的設定。

  3. 如果您想要簡短名稱出現在主要標誌上,請在 [簡短名稱] 文字方塊中指定一個名稱。

  4. 在 [標誌] 文字方塊中,指定主要標誌的邏輯名稱。

    預設值為 Assets\Logo.png。

    注意事項注意事項

    資產的每一個類型都會出現類似的文字方塊。

  5. 在頁面的 [縮放的資產] 區域中,選擇 [縮放比例 80] 方塊旁邊的 [瀏覽] 按鈕、巡覽至 Assets 資料夾、指定包含縮放至 80% 之影像的檔案,然後選擇 [開啟] 按鈕。

    檔案的影像會出現在方塊中,並且複製檔案。複製的檔案會根據 Windows 市集應用程式的資源命名規範來命名:Name.scale-NNN.ext,其中 NNN 是縮放比例。例如,檔案可能命名為 Logo.scale-100.png。

  6. 您可以從 Assets 資料夾選擇適當的檔案,並將其新增至 [縮放比例 100]、[縮放比例 140] 和 [縮放比例 180] 方塊來完成 [標誌] 設定。

    注意事項注意事項

    若要以縮放大小顯示影像的特寫檢視,請在方塊中選擇影像。預覽視窗會開啟並列出將使用每個影像檔的地方。

  7. 請針對小型標誌、市集標誌和啟動顯示畫面重複步驟 4-6。

在 Windows 市集應用程式的模擬器中預覽您的應用程式

您可以使用模擬器來建置應用程式、選擇您要模擬的實體螢幕大小和解析度,並在桌上型電腦中預覽您的應用程式。

重要

在您將應用程式發行至市集之前,請務必在實際裝置上測試您的應用程式。

若要在模擬器中執行您的市集應用程式

  1. 在 [偵錯目標] 清單中,選擇 [模擬器]。

    [偵錯目標] 清單位於工具列上的 [方案組態] 清單旁邊。

    如果組建無法啟動,請再次選擇 [模擬器]。

  2. 當應用程式執行時,請選擇模擬器右邊的 [變更解析度] 按鈕,然後指定您要檢視的螢幕大小和解析度。

    模擬器會調整應用程式的顯示。

    注意事項注意事項

    模擬器會提供其他功能,例如旋轉、觸控裝置模擬、裝置的地理位置和螢幕擷取。如需詳細資訊,請參閱在模擬器中執行 Windows 市集應用程式

  3. 若要關閉模擬器,請選擇 Ctrl+Alt+F4 鍵。

請參閱

概念

使用資訊清單設計工具 (Windows 市集應用程式)