配置您的 UI (HTML)

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

了解 Windows 執行階段應用程式的配置，以及它們與傳統型應用程式有何不同。您可以在 Windows 執行階段應用程式中使用各種表面，例如應用程式視窗、飛出視窗、對話方塊，以及應用程式列。在適當的時候選擇適當的表面，就是決定應用程式好用或是不好用的關鍵。

應用程式頁面或畫布

應用程式頁面有時候也稱為畫布，是您 UI 的基礎。這個畫布存放您所有的內容和控制項。您應該盡可能將 UI 元素整合到這個基礎表面。例如，您可以不要使用快顯通知視窗顯示錯誤，而是利用內建動畫順暢地在視窗上顯示、隱藏或移動錯誤訊息。以內嵌方式呈現 UI 可讓使用者完全沉浸在您的應用程式並留在內容中。

您可視需要建立不限數目的應用程式頁面，以支援各種使用者案例。請參閱規劃 Windows 市集應用程式和瀏覽設計，以便深入了解如何配置應用程式頁面來支援使用者案例。

Windows：調整 UI 大小

使用者可以調整應用程式的大小，如此便能使用其他應用程式，或是調整其他應用程式的大小以使用您的應用程式。您可以將應用程式設計為內容以動態方式流動，讓使用者在調整應用程式大小時獲得最佳化的體驗。

	全螢幕 應用程式填滿整個螢幕。
	已調整大小 應用程式大小調整成佔整個螢幕的一部分。 其他 app 可以填滿剩餘的螢幕區域。

 

如需詳細資訊，請參閱配置和縮放的 UX 指導方針。

觸控式鍵盤和手寫面板

觸控式鍵盤 (和 Windows 的手寫面板) 可為文字輸入提供次要命令 UI。當使用者觸控某個可編輯的輸入欄位 (或是在 Windows 桌面的工作列中按一下鍵盤圖示)，就會顯示這個面板。當輸入欄位失去焦點時，面板就會隱藏。

觸控式鍵盤可讓平板電腦與電話—也就是沒有硬體鍵盤或其他周邊鍵盤裝置的螢幕也能夠輸入和編輯文字。Windows 的手寫面板可讓手寫筆的螢幕輸入和編輯文字。

與先前提及的檢視狀態類似的是，您可以設計應用程式，使其在觸控式鍵盤或手寫面板顯示時，讓內容以動態方式流動來最佳化使用者體驗。

如需支援這些文字輸入模式的詳細資訊，請參閱觸控式鍵盤和手寫面板的指導方針。

應用程式列

除了應用程式頁面之外，應用程式列也是應用程式的主要命令介面。使用應用程式列為使用者呈現瀏覽、命令及工具。在 Windows Phone 上，預設會隱藏功能表並在點選省略符號時顯示。在 Windows 上，預設會隱藏整個應用程式列，並在使用者於螢幕的上邊緣或下邊緣往內撥動時顯示。應用程式列會遮住應用程式的內容，使用者可以用顯示應用程式列的相同方式將它關閉，與應用程式互動也可以將它關閉。

如需設計命令的詳細資訊，請參閱命令設計，如需使用者經驗指導方針，請參閱應用程式列的指導方針。

Windows：常用鍵

常用鍵是每個應用程式使用的一組特有固定按鈕：搜尋、分享、裝置、設定以及開始。我們相信，這些按鈕是每位使用者在使用所有應用程式時都會用到的功能。

• 搜尋 使用者可以從系統的任何地方搜尋應用程式內容或網頁內容。
• 共用 使用者可以將您應用程式中的內容與其他人或服務共用。
• 裝置 使用者可以連線裝置以及傳送內容、串流媒體，還有列印。
• 設定 使用者可以按照自己的偏好設定您的應用程式，以及存取使用者說明。
• 開始 使用者可以直接進入 [開始] 畫面。

如需詳細資訊，請參閱下列指導方針：搜尋、分享、應用程式設定及應用程式說明

操作功能表

操作功能表有時候也稱為快顯功能表，其中顯示使用者可以對應用程式文字或 UI 元素執行的動作。每個操作功能表上最多可以使用五個命令，像是剪下、複製或開啟檔案。這項限制可讓操作功能表保持簡潔、容易閱讀，且直接與套用命令的文字或物件相對應。

請勿將操作功能表當作應用程式的主要命令介面；應用程式列才是主要命令介面。如需詳細資訊，請參閱操作功能表的指導方針。

訊息對話方塊

訊息對話方塊是需要明確使用者互動的對話方塊。它們會讓應用程式視窗變暗，使用者必須回應才能繼續。只在您想要停止使用者和要求回應時，才使用訊息對話方塊。

在上述 Windows 範例中，應用程式視窗會變暗，使用者必須點選兩個按鈕中的其中一個，才能讓對話方塊消失。也就是說，使用者不能略過對話方塊中的訊息。

如需詳細資訊，請參閱訊息對話方塊的指導方針。

飛出視窗

飛出視窗會顯示暫時且會消失的 UI，而這些 UI 與使用者目前執行作業相關。例如，您可以使用飛出視窗要求使用者確認動作、顯示應用程式列中按鈕的下拉式功能表，或是顯示項目的更多詳細資料。飛出視窗與訊息對話方塊不同的地方是，只在回應使用者點選或按一下時，才必須顯示飛出視窗，當使用者點選該視窗之外的區域時就讓視窗消失；而只在您需要中斷使用者並要求某種互動時，才必須顯示訊息對話方塊。

在上述 Windows 範例中，應用程式會保持使用中狀態，而使用者可以點選按鈕或點選飛出視窗外的任何地方讓它消失。也就是說，使用者可以略過飛出視窗中的訊息。如需詳細資訊，請參閱飛出視窗的指導方針。

快顯通知 (或橫幅)

快顯通知 (在 Windows Phone 也稱為橫幅) 是當您的應用程式在背景執行時顯示給使用者的通知。快顯通知非常適用於即時通知使用者想要知道的更新資訊，而使用者即使錯過這些資訊也沒關係。使用者可以點選快顯通知切換到您的應用程式，以便了解更多資訊。

請注意，使用者可能會覺得快顯通知很煩且造成干擾，因此，當您想要為使用者顯示快顯通知時請謹慎考慮。如需詳細資訊，請參閱快顯通知的指導方針。

磚

磚會出現在 [開始] 畫面上 (在 Windows 中，它們會取代出現在桌面畫面上和舊的 [開始] 功能表中的應用程式捷徑)。使用者點選應用程式的磚，即可啟動您的應用程式。如需詳細資訊，請參閱磚的指導方針。

 

錯誤

應用程式內的錯誤可以透過三個主要表面與使用者溝通。適當的錯誤表面是由應用程式開發人員根據錯誤的內容與結果所選擇。

若要顯示：	使用這個表面：
應用程式中某個元素特定的非嚴重錯誤。您的應用程式無法修正問題，但是使用者可以。 使用者互動：使用者可以繼續與應用程式、系統元件以及其他應用程式互動，而不用關閉錯誤。 範例：使用者在文字輸入方塊中輸入無效字串，然後重新輸入。	在畫布上內嵌文字 僅文字 由應用程式關閉 在錯誤的來源附近顯示內嵌文字
出現在整個應用程式中的非嚴重錯誤。您的應用程式無法修正問題，但是使用者可以。 使用者互動：使用者可以繼續與應用程式、系統元件以及其他應用程式互動，而不用關閉錯誤。 範例：目前無法同步處理郵件。	頁面頂端的文字 僅文字 由應用程式關閉 顯示在頁面頂端
出現在整個應用程式的重要但非嚴重錯誤，而您的應用程式可以建議解決方案。 使用者互動：使用者可以回應您的提示或繼續與應用程式、系統元件以及其他應用程式互動，而不用關閉錯誤。	錯誤和警告列 文字、兩個按鈕 由使用者關閉 顯示在頁面頂端附近
出現在整個應用程式中的嚴重錯誤，會讓使用者無法使用應用程式。 使用者互動：使用者無法繼續與應用程式互動，除非他們關閉錯誤。使用者仍然可以與系統元件互動以及使用其他應用程式。	訊息對話方塊 文字、1 到 3 個按鈕、標題 (選用) 由使用者關閉 顯示在整個應用程式的中央

 

請不要使用飛出視窗、快顯通知或自訂 UI 表面顯示錯誤。

錯誤：內嵌文字

一般而言，內嵌錯誤是表面的第一選擇。內嵌文字錯誤會在使用者目前的執行動作或目前的應用程式頁面本身顯示訊息。內嵌錯誤不需要使用者明確執行關閉訊息的動作。當錯誤不再存在時，訊息會自動消失。

可行事項	將訊息對齊相關的控制項或元素。
	在訊息的周圍預留足夠的空間來增加它的焦點強度。

 

下列 Windows 範例顯示與特定文字輸入方塊相關聯的內嵌錯誤訊息。

 

禁止事項	在訊息中包含動作或命令。

 

在下列 Windows 範例中，錯誤列或警告列會是較好的選擇。

錯誤：錯誤或警告列

使用錯誤列或警告列，通知使用者重要的錯誤和警告，並鼓勵他們採取動作。錯誤訊息可通知使用者有問題發生，說明發生的原因，並提供解決方案讓使用者修正問題。警告訊息會警示使用者有個情況可能在以後會產生問題。

可行事項	將此列放在螢幕的頂端，吸引使用者的注意並採取動作。
	從應用程式的調色盤選擇一個色彩為列塗上顏色。
	為所有錯誤列和警告列使用相同的色彩和配置。

 

禁止事項	根據認知到的嚴重性，用不同的色彩或字符 (如盾牌或驚嘆號) 來顯示列。
	使用 'X' 字符來關閉列；或者改用標籤為 [關閉] 的按鈕。
	為僅用來傳達資訊的訊息使用錯誤列和警告列。

 

以下 Windows 範例中的訊息僅提供資訊，而不需要執行任何動作。在這種情況下，應該已經在螢幕頂端使用內嵌訊息。

錯誤：訊息對話方塊

只在需要強制回應訊息，阻止使用者與應用程式互動時，才使用訊息對話方塊。

可行事項	如果使用者必須先採取行動才能繼續使用應用程式，請使用訊息對話方塊。

 

下列 Windows 範例是錯誤訊息對話方塊的適當用法，因為使用者必須有使用中帳戶才能使用應用程式。

禁止事項	如果使用者可以忽略訊息，請使用對話方塊。

 

在下列範例中，這個錯誤不需要您封鎖使用者以便先讓使用者解決錯誤。因此錯誤列或警告列會是較好的選擇。

相關主題

應用程式列的指導方針

應用程式設定的指導方針

搜尋的指導方針

分享內容的指導方針

飛出視窗的指導方針

訊息對話方塊的指導方針

操作功能表的指導方針

啟動顯示畫面的指導方針

應用程式說明的指導方針