命令基本概念

  • 發行項

Windows 應用程式中的「命令元素」是讓使用者執行動作 (例如傳送電子郵件、刪除項目，或提交表單) 的互動式 UI 元素。 「命令介面」是由常見命令元素、裝載這些元素的命令平面、其所支援的互動，以及它們所提供的體驗所組成。

提供最佳的命令體驗

設計命令介面時，最需要考量的重點在於您想讓使用者完成什麼任務。 規劃應用程式的功能時，請考慮完成這些工作所需的步驟，以及您希望創造的使用者體驗。 決定這些體驗的初步樣貌之後，您就可以決定用於實現這些體驗的工具和互動方式。

以下是一些常見的命令體驗：

  • 傳送或提交資訊
  • 選取設定和選項
  • 搜尋和篩選內容
  • 開啟、儲存和刪除檔案
  • 編輯或建立內容

設計命令體驗時，請發揮創意。 選擇您的應用程式支援的輸入裝置，以及回應每種裝置的方式。 支援最廣泛的功能和喜好設定，讓應用程式盡可能可用、可移植且無障礙 (如需詳細資訊，請參閱 Windows 應用程式的命令設計)。

選擇正確的命令元素

在命令介面中使用正確的元素，可以讓人感覺出應用程式是直覺易用的，而非複雜且令人困惑。 Windows 應用程式提供一組完整的命令元素。 以下清單列出了一些常用的 UWP 命令元素。

button image

按鈕

按鈕會觸發立即動作。 範例包括傳送電子郵件、提交表單資料，或確認對話方塊中的動作。

list image

清單

清單會以互動式清單或格線形式呈現項目。 通常用於多個選項或顯示項目。 範例包含下拉式清單、清單方塊、清單檢視與格線檢視。

selection control image

選取控制項

讓使用者從幾個選項中進行選擇，例如可以在完成問卷或進行應用程式設定時顯示。 範例包括核取方塊、選項按鈕和切換開關。

Calendar image

行事曆、日期和時間選擇器

行事曆、日期和時間選擇器可讓使用者檢視與修改日期和時間資訊，例如可以在建立事件或設定鬧鐘時顯示。 範例包含行事曆日期選擇器、行事曆檢視、日期選擇器、時間選擇器。

Predictive text entry image

預測文字輸入

在使用者輸入 (例如輸入資料或執行查詢) 時提供建議。 範例包括 AutoSuggestBox。

如需完整清單，請參閱控制項和 UI 元素。

將命令放在合適的平面上

您可以在應用程式中的數個平面上放置命令元素，包括應用程式畫布或特殊命令容器，例如命令列、命令列飛出視窗、功能表列或對話方塊。

請一律嘗試讓使用者直接操作內容，而不是透過命令來操作內容，例如拖放以重新排列清單項目，而不是使用向上和向下命令按鈕。

不過，在使用特定的輸入裝置或需要顧及特定使用者的能力和喜好時，這可能並不可行。 在這些情況下，請盡量提供所有可能派得上用場的命令，並將這些命令元素置於應用程式中的命令平面上。

以下清單列出了一些常用的命令平面。

app canvas image

應用程式畫布 (內容區域)

如果是使用者完成核心案例時經常需要的命令，請將它放在畫布上。 您可以將命令放在受其影響的物件附近或上方，因此將命令放在畫布上，可以讓命令易於使用且顯而易見。 但是，請慎選放在畫布上的命令。 應用程式畫布上的命令過多，會佔去寶貴的螢幕空間，而且會妨礙使用者。 如果某個命令不常使用，請考慮將它放在其他命令平面。

commandbar image

命令列和功能表列

命令列有助於組織命令，讓它們更容易存取。 命令列可以放在畫面頂端、畫面底部或同時放在畫面頂端和底部 (當應用程式中的功能對命令列而言太複雜時，也可以使用 MenuBar)。

context menu image

功能表和操作功能表

功能表和操作功能表有助於節省空間，因為它們會將命令組織好並隱藏起來，直到使用者需要時再顯示。 使用者通常會藉由按一下按鈕或以滑鼠右鍵按一下控制項，來存取功能表或操作功能表。

CommandBarFlyout (命令列飛出視窗) 是一種內容相關的功能表，可將命令列和操作功能表的優點結合成單一控制項。 這個功能表可以提供常用動作的捷徑，並提供存取只與特定內容相關的次要命令，例如剪貼簿或自訂命令。

UWP 也提供一組傳統功能表和操作功能表；如需詳細資訊，請參閱功能表和操作功能表。

提供命令回饋訊息

命令回饋訊息會將以下資訊傳達給使用者：偵測到互動或命令、解譯和處理命令的方式，以及命令成功與否。 這可協助使用者了解他們做了什麼，以及他們接下來可以做什麼。 回饋訊息最好能自然整合在 UI 中，讓使用者不必中斷操作或採取額外行動 (除非絕對必要)。

注意事項

只有在必要時或無法透過其他位置顯示時，才提供回饋訊息。 請讓應用程式 UI 保持整齊簡潔，除非能夠提供附加價值。

以下是在應用程式中提供回饋訊息的一些方式。

commandbar content area image

命令列

當使用者想要查看回饋訊息時，CommandBar 的內容區域是向使用者傳達狀態的一個直覺化位置。

Flyout image

飛出視窗

飛出視窗是一種輕巧的關聯式快顯視窗，只要點選或按一下飛出視窗外的地方就可以關閉。

Dialog image

對話方塊控制項

對話方塊控制項是提供內容相關應用程式資訊的模組化 UI 重疊項目。 在大部分情況下，對話方塊會封鎖與應用程式視窗的互動，直到明確關閉為止，而且通常會要求使用者執行特定操作。 對話方塊可能會造成干擾，因此只應在特定情況下使用。 如需詳細資訊，請參閱確認或復原動作的時機一節。

提示

請留意應用程式使用確認對話方塊的程度；當使用者犯錯時，確認對話方塊可能助益良多，但使用者有意執行特定操作時，就可能會構成妨礙。

確認或復原動作的時機

不論應用程式 UI 設計得多好，總會有使用者在執行特定操作之後感到後悔的時候。 應用程式應於發生這類情況時提供協助，例如要求確認動作，或提供復原最近動作的方法。

對於無法復原且後果嚴重的操作，建議使用確認對話方塊。 這類操作的範例包括：

  • 覆寫檔案
  • 關閉前未儲存檔案
  • 確認永久刪除檔案或資料
  • 進行購買 (除非使用者選擇不要求確認)
  • 提交表單，例如報名參加某項活動

對於可復原的動作，提供簡單的復原命令通常便已足夠。 這類操作的範例包括：

  • 刪除檔案
  • 刪除電子郵件 (非永久刪除)
  • 修改內容或編輯文字
  • 重新命名檔案

針對特定輸入類型進行最佳化

如要進一步了解如何最佳化特定輸入類型或裝置的使用者體驗，請參閱互動基本資訊。