共用方式為


定義配置與檢視 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

您可以建置令人滿意的 Windows 執行階段應用程式,讓使用者透過一致且可預期的使用者介面,在各種硬體規格、畫面大小以及檢視狀態下都能有流暢和諧的使用體驗。您一定希望使用者在手機、Tablet PC 或大型 HD 螢幕上檢視您的應用程式、將畫面翻轉為直向,以及調整應用程式大小時,看到的都是很棒的畫面。如果您事先好好規劃使用者選擇的裝置與檢視,應用程式的 UI 就能優雅從容地自動重排,以符合使用者的選擇。

全螢幕橫向、全螢幕直向以及已調整大小的窄寬度檢視

對於使用 JavaScript 的 Windows 執行階段應用程式,指定 UI 就是繞著兩個主要因素:應用程式支援的檢視,及其所需的配置。您可以使用階層式樣式表 (CSS) 來完成這項工作。

CSS 透過標準 CSS 描述和管理您的使用者介面,CCS 會區分內容與呈現,即實際內容及其呈現方式各自獨立。這樣的區分能提供一致、可用以及令人滿意的使用者經驗,亦即應用程式能支援多個裝置、硬體規格、螢幕大小、使用者喜好設定以及檢視狀態。

配置 配置是應用程式適應所支援檢視的機制。您可以透過階層式樣式表層級 3 (CSS3) 配置模組 (例如格線多欄區域,以及可適應使用者檢視內容之方式的彈性方塊),以處理應用程式內容的樣式、結構以及呈現方式。

包含語意式縮放功能的應用程式,可以根據呈現資訊的細微性與數量,指定 UI 在格線配置與線性配置之間切換的語意閾值。

檢視 檢視就是使用者存取和操作應用程式內容的方式。

  • 橫向或直向
  • 全螢幕或已調整大小
  • 可移動瀏覽、可縮放,或可調整大小的 UI 表面
  • 特定 UI 元素,例如搜尋結果窗格或資料夾結構

您應該熟悉 HTML、JavaScript 以及 CSS 定義,才能定義 Windows 執行階段應用程式的配置與檢視。

在這個章節中

主題 說明

快速入門:定義應用程式配置

您可以為任何視窗大小或方向定義應用程式配置。

快速入門:針對不同視窗大小設計應用程式

當您將某個應用程式設計成在任何視窗大小看起來都很美觀且能良好運作時,您必須選擇是否要建立額外的配置以補足預設的全螢幕水平配置。

快速入門:為應用程式建立多個視窗

您可以讓使用者以個別的視窗檢視多個獨立功能,幫助他們提高生產力。

選擇配置

為了讓 Windows 執行階段應用程式的使用者享有彈性及實用的使用者介面,您必須先決定最適合內容與檢視的配置模式 (使用者會透過檢視來取得內容)。這個主題描述 Windows 8 中 Windows 市集應用程式所支援的階層式樣式表層級 3 (CSS3) 配置功能。

配置應用程式頁面

您可以使用此處所述的配置模式,來配置應用程式頁面上的 UI 元素。遵循邊界、頁首、間距寬度以及其他元素的一致模式,就可以維持整個應用程式外觀的整體性,並能協助使用者輕鬆了解如何與系統的互動。

 

相關主題

配置您的 UI

配置應用程式頁面