命令模式

您可以將命令和控制項放置在市集應用程式的多種表面上,包括應用程式畫布、快顯視窗、對話方塊,以及應用程式列。在適當的時候選擇適當的表面,是決定應用程式好用或是不好用的關鍵。

在市集應用程式中,命令是使用者可用來執行動作的互動式 UI 元素。命令與瀏覽元素不同,瀏覽元素會將使用者移到不同的頁面,而命令則是讓使用者在目前頁面上執行動作。瀏覽元素讓應用程式可以使用。命令則讓應用程式變得有用。

如需應用程式中不同命令表面的詳細資訊,請參閱配置您的 UI

命令類型

篩選

篩選命令會根據某些條件,移除或隱藏資料集內的內容。例如,使用者可以選擇在 Windows 市集中只檢視分類為「冒險」的遊戲。

 

「冒險」遊戲的 Windows 市集搜尋

 

樞紐

樞紐命令可以重新組織資料集內的內容,並根據樞紐提供不同的資料檢視。例如,使用者可以選擇依相簿、演出者或歌曲來組織歌曲。

 

Xbox 音樂應用程式

 

排序

排序命令會變更資料集中內容顯示的順序。例如,使用者可以在旅遊應用程式中依熱門程度來選擇目的地。

 

Bing 旅遊應用程式

 

檢視

檢視命令會變更內容顯示的樣式或方法。例如,在尋找旅館的應用程式中,使用者可以選擇在地圖上而不是清單中檢視旅館。

 

Expedia 應用程式

 

提示

如果您覺得提示命令對您的使用者有所幫助,可以將這些命令放在畫布上。例如,在 Windows 8.1 的郵件應用程式中,有一個提示額外選項的 "省略符號" 命令。按一下此命令會顯示應用程式的應用程式列,以及顯示應用程式列的傳統 Windows 方法。

 

含應用程式列提示的郵件應用程式

 

您可以設計這類提示以符合應用程式的樣式。這個新聞應用程式使用相同的應用程式列提示,加上一個包含功能表圖示的旗標,可顯示功能表選項的頁面。

 

含功能表和應用程式列提示的 News Bento 應用程式

 

其他

任何能夠讓使用者在目前檢視內採取行動的互動式 UI 元素都是一個命令。以下是一些範例。

 

其他命令的範例

 

自訂命令的範例

命令放置

在畫布上

如果命令 (或命令功能表) 很重要,而且使用者需要經常用來完成核心案例,請將它放在畫布上。以 Windows 8.1 中的郵件應用程式為例,回應、新增和刪除這類的核心命令會在選取了郵件之後顯示在畫布上。

 

畫布上包含命令的郵件應用程式

 

底部應用程式列

有時候您不想讓命令擠滿畫布,影響使用者使用應用程式的內容。這種時候可使用底部應用程式列依需要顯示命令給使用者。底部應用程式列會顯示與使用者內容 (通常為目前的頁面或目前的選取範圍) 相關的命令。

底部應用程式列非常適用於單選和多選命令。您可以使用程式來設計應用程式,當使用者選取物件時就會顯示應用程式列。

 

選取了物件,就會顯示應用程式列

 

命令放置指導方針

應用程式列內命令的位置可有多種變化,但是應考慮下列幾項:

  • 方便預測 為發揮最大的使用效能,在應用程式的所有檢視中使用一致的互動和命令放置。
  • 人體工學 考量如何放置特定的命令 可以提升速度或使用某個命令的 便利程度。
  • 美學 限制命令的數量,避免應用程式列看起來過於複雜。選擇容易了解 或預測的圖示。文字標籤保持簡潔。

我們建議下列命令放置指導方針:

將持續性命令或預設命令放在應用程式列的右側。如果只有少數幾個命令,應用程式列可能只有位於右側的幾個命令。

在這個範例中,瀏覽命令、檢視命令集和篩選/排序集是持續性命令。

持續性命令放在右側

 

使用邊緣。如果命令的數量非常多,將不同的命令集分別放在左側或右側,以平衡應用程式列的外觀,並讓命令更符合人體工學的使用方式。

在這個範例中,我們決定將檢視命令集移到左側,篩選/排序集留在右側。 當啟用地圖檢視時,地圖檢視命令 會出現在檢視命令集的右側。

命令分別在左邊緣與右邊緣

 

顯示/隱藏停用的命令。有些命令在特定情況中並不相關。當這些命令出現時,也不應該中斷 持續性命令的順序。

在這個範例中,當啟用地圖檢視時,地圖檢視命令 會出現在檢視命令集的右側。

一個命令停用的命令

 

插入選擇命令。根據使用者選擇的結果所顯示的命令 會越過原本位於左側的命令,出現在 最左側。這樣能讓使用者更容易注意到選擇命令,也更方便使用。

在這個範例中,檢視命令集移至右側,將空間 讓給選擇命令集。

選擇命令在最左側

 

常用命令的放置位置

有些命令相當常用,而且在許多應用程式中都會出現。為建立一致性和養成使用習慣,我們建議遵循這些指導方針,決定在應用程式列中放置常用命令的位置。

將選擇命令放置在最左側,無論是出現在選項上的關聯式命令或是會影響選擇的命令。

在這個範例中,使用者選取之前,「全選」 命令會顯示在左側。使用者選取之後,其他選擇命令會出現在左側。

使用者選取後,內容關聯式選擇命令會取代 [全選] 命令

 

將新增項目命令放置在列的右邊緣。新增項目命令可以新增、建立、編寫或是建立新實體的任何命令。新增項目命令應該便於使用拇指存取。

在這個範例中,「新增檢閱」 命令可讓使用者建立新的餐廳檢閱。 與「新增檢閱」相關的其他命令會放在此命令的 左側。

+ 字符應只用來代表「新增」命令,不應該出現在應用程式列中的其他位置。

[新增項目] 命令在應用程式列右邊緣

 

將刪除命令放置在新增項目命令的左邊。如果您的應用程式與管理個別實體相關,該實體可能位於您的特定應用程式外部 (例如位於郵件或相機應用程式),請使用刪除/新增。 刪除/新增一律以這樣的順序顯示。

[刪除] 和 [新增] 應用程式列命令

 

將移除命令放置在新增命令的左邊。如果您的應用程式與管理清單 (例如待辦事項清單、天氣應用程式中的城市清單,或是已加為書籤的餐廳清單) 相關,請使用移除/新增。移除/新增一律以這樣的順序顯示。

[移除] 和 [新增] 應用程式列命令

 

將清除命令放置在新增項目命令的左邊。如果您是在所有可能的項目上採取破壞性 的動作,請使用清除。使用明確指定命令執行對象的命令標籤,例如「清除選擇」。

[清除] 和 [新增] 應用程式列命令

 

如需在底部應用程式列放置命令的範例,請參閱 Windows 市集應用程式庫

將命令群組為功能表

有時候將多個命令群組為命令功能表是更有效率的做法。 功能表能讓您使用更少的空間顯示更多的選項。功能表可以包含互動式控制項。

在這個範例中,排序命令會顯示一個簡單功能表,便於使用者選擇排序選項。篩選命令會在功能表中顯示一組控制項,讓使用者依照更複雜的條件篩選項目。

群組為功能表的應用程式列命令

 

操作功能表

操作功能表通常包含剪貼簿動作,例如剪下、複製和貼上。操作功能表也可以包含套用到不能被選取的內容 (例如網頁上的影像) 的命令。 系統會針對文字和超連結,提供應用程式預設的操作功能表。針對文字,預設操作功能表會顯示剪貼簿命令。針對超連結,預設功能表會顯示複製和開啟連結的命令。

使用者在觸控裝置上按住內容不放,或是使用滑鼠右鍵按一下內容,就可以叫用操作功能表。

 

來自 Bing 連結的操作功能表

 

  

利用常用鍵

設計 Windows 市集應用程式時,常用鍵中提供您四個非常實用的命令:搜尋、分享、裝置和設定。使用者從螢幕右邊緣撥動或將滑鼠游標指向螢幕的右上角或右下角,就可以叫用常用鍵。

 

從右邊緣撥動以使用常用鍵

 

搜尋:可讓使用者從系統的任何位置 (包含其他應用程式) 快速搜尋應用程式的內容。常用鍵
共用:讓使用者不但可與其他人或應用程式共用您的應用程式內容,也可以接收共用的內容。
開始:開始常用鍵會將使用者帶到 [開始] 畫面。應用程式不會與這個常用鍵互動。此行為會自動執行且一律相同。
裝置:讓您的使用者在家用網路中享受從您的應用程式串流到其他裝置的音訊、視訊或影像。
設定:將所有設定合併在一個位置,讓使用者透過熟悉的常用機制來設定您的應用程式。

 

避免在應用程式畫布或應用程式列中使用重複的應用程式協定功能。

應用程式列的指導方針

操作功能表的指導方針

剪貼簿命令的指導方針

常用鍵和協定