上一篇文章，我們分享了編輯器中的功能區(qū)如何設計。這篇文章，我們繼續(xù)聊一下軟件中工具欄應該如何設計，才能提升產品效率，真正幫助用戶。

工具欄是對命令進行分組，以便進行高效訪問的一種方法。

一、為什么要用工具欄代替菜單欄

工具欄比菜單欄更高效，因為它們是直接 (始終顯示而不是在單擊鼠標時顯示) 、即時 (不需要其他輸入) ，并且包含最常用的命令，而不是綜合列表。

與菜單欄相比，工具欄不必是全面或一目了然的，只需快速、方便和高效。

某些工具欄可自定義，允許用戶添加或刪除工具欄、更改其大小和位置，甚至更改其內容。（例如: Sketch工具欄）

某些類型的工具欄可以取消?？浚瑥亩兂梢粋€面板。(例如: C4D工具欄)

在決定使用工具欄之前，請考慮以下問題：

• 窗口類型：如果是主窗口，可以使用工具欄，但對于輔助窗口來說，工具欄可能過于繁重。在這種情況下，推薦使用命令按鈕、菜單按鈕和鏈接。
• 常用命令數量：如果只有少量常用命令，工具欄是一個不錯的選擇，因為它能夠快速訪問這些命令。
• 命令執(zhí)行方式：大多數命令是否可以立即執(zhí)行，即不需要額外的輸入？如果是，那么工具欄是一個高效的選擇。如果需要額外輸入，菜單欄可能更合適。
• 命令的直接顯示：是否可以直接在工具欄中顯示大多數命令，而無需額外的點擊？如果是，這會增加工具欄的效率，否則菜單欄可能更適合。
• 命令圖標的質量：工具欄按鈕通常使用圖標表示，而菜單欄則使用文本表示。如果命令的圖標質量不高或不清晰，菜單欄可能更好。
• 工具欄作為菜單欄的替代：如果工具欄可以替代菜單欄，并且大多數命令可以通過菜單按鈕和拆分按鈕間接訪問，那么實際上工具欄就是菜單欄。這時應該采用菜單指南中的工具欄菜單模式。

這些點都是為了確保界面設計的合理性和用戶體驗的高效性。

二、設計理念

菜單欄是所有可用頂級命令的綜合目錄，提供了系統(tǒng)的命令結構。

工具欄則旨在快速方便地訪問常用命令，而不是嘗試訓練用戶。它的目的是提高用戶的工作效率。

一旦用戶了解如何在工具欄上找到所需的命令，他們通常會更傾向于使用工具欄而非菜單欄。因此，程序的菜單欄和工具欄不必直接對應，因為它們具有不同的用途和優(yōu)點。

三、工具欄與菜單欄

傳統(tǒng)上，工具欄在以下方面不同于菜單欄：

頻率。工具欄通常展示最常用的命令，而菜單欄包含了程序中所有可用的頂級命令。

即時。點擊工具欄的命令會立即執(zhí)行相應操作，而菜單命令可能需要額外的輸入，例如，打印菜單命令可能會先顯示打印對話框，而工具欄的打印按鈕則直接將文檔打印到默認打印機。

在此示例中，單擊“打印”工具欄按鈕會立即將文檔的單個副本打印到默認打印機。

直接。工具欄命令可以直接點擊調用，而菜單欄需要瀏覽菜單才能找到相應命令。

數字和密度。工具欄的屏幕空間與命令數量成正比，因此需要有效利用空間；而菜單欄的分層結構允許包含任意數量的命令。

大小和演示文稿。工具欄通常使用基于圖標的命令，以在較小的空間中容納更多命令；而菜單欄則更傾向于使用基于文本的命令，雖然工具欄按鈕可以有文本標簽，但會占用更多空間（如下圖）。

一目了然。設計良好的工具欄需要直觀的圖標，使用戶能夠直接找到所需的命令，而不僅僅依賴于文本標簽。

可識別和可區(qū)分。用戶通常會記住工具欄按鈕的屬性，如位置、形狀和顏色，從而能夠快速找到所需的命令。相比之下，用戶更傾向于記住菜單欄命令的位置，但可能需要依賴命令標簽來進行選擇。

對于菜單欄命令，用戶最終依賴于其標簽。

四、效率

鑒于其特征，工具欄的設計必須主要是為了提高效率。

低效工具欄只是沒有任何意義。

請確保工具欄的設計主要是為了提高效率。將工具欄聚焦在常用、即時、直接且可快速識別的命令上。

五、隱藏菜單欄

通常情況下，工具欄和菜單欄在協(xié)同工作時非常出色：一個好的工具欄可以提高效率，而一個好的菜單欄可以提供全面性。同時擁有菜單欄和工具欄使每個人都可以專注于各自的優(yōu)勢。

然而，對于只有幾個命令的簡單程序來說，同時擁有菜單欄和工具欄就沒有意義，因為菜單欄最終變成了工具欄的冗余、低效版本。

為了消除這種冗余，Windows 中的許多簡單程序，將重點放在僅通過工具欄提供命令，并默認隱藏菜單欄。這些程序包括Windows資源管理器、Windows Internet Explorer、Windows媒體播放器和Windows照片庫。

具體優(yōu)化方法如下：

• 頻率：刪除菜單欄將從根本上改變工具欄的性質，因為所有命令都必須通過工具欄訪問，無論其使用頻率如何。
• 即時：刪除菜單欄會使工具欄成為命令的唯入口，這要求工具欄具有完整功能的版本。例如，如果沒有菜單欄，工具欄上的“打印”命令必須顯示“打印”對話框，而不是立即執(zhí)行打印操作。（但在這種情況下，使用拆分按鈕是一個很好的折衷方案。）

• 直接：為了節(jié)省空間并防止混亂，可能會將不太常用的命令移動到下拉菜單里面，使其不那么直接可見。

六、工具欄使用模式

1. 主工具欄

針對無菜單欄場景所設計的工具欄。主工具欄必須同時平衡效率的需求和全面性，所以它們最適合簡單的程序。

Windows 資源管理器中的主工具欄

2. 補充工具欄

用于與菜單欄配合的工具欄?？梢员M情地專注于效率。

?

Windows Movie Maker 的補充工具欄

3. 工具欄菜單

當作工具欄來用的菜單欄（本質是菜單欄）。主要由菜單按鈕和拆分按鈕組成，可能只有少數幾個直接命令 。

Windows 照片庫中的工具欄菜單

4. 可定制的工具欄

用戶可以自定義的工具欄。允許用戶添加或刪除工具欄，更改其大小和位置，甚至更改其內容。

Microsoft Visual Studio 的可定制工具欄

5. 面板窗口

顯示一組命令的非模態(tài)對話框，面板可以進行移動。

Windows Paint 中的面板窗口

七、工具欄樣式

1. 無標簽圖標

一行或多行不含標簽的小圖標按鈕。如果加標簽的按鈕較多，或是經常使用的應用程序，請使用此樣式。通過這種樣式，復雜應用程序可以有多行工具欄，這也是唯一支持自定義工具欄的樣式。通過這種樣式，可以為經常使用的按鈕加標簽。

寫字板中的無標簽圖標工具欄

2. 無標簽大圖標

單行不含標簽的大圖標按鈕。此樣式應用于通常在小窗口中運行且圖表中易于識別的簡單應用程序中。

Windows Live Messenger 和 Windows 剪切工具的大型無標簽圖標工具欄

3. 標簽圖標

單行含有標簽的小圖標。如果命令很少或應用程序不經常使用，請使用此樣式。這種樣式總是會占用一行。

Windows 資源管理器的帶標簽的圖標工具欄

4. 局部工具欄

當不需要完整工具欄時，可以使用一行中的局部區(qū)域放置小圖標，以此節(jié)省空間。在帶有導航按鈕、搜索框或選項卡的窗口中使用此樣式，以消除窗口頂部不必要的權重。

部分工具欄可以與導航按鈕、搜索框或選項卡結合使用

5. 局部大工具欄

當不需要完整工具欄時，可以使用一行中的局部區(qū)域放置大圖標，以此節(jié)省空間。將此樣式用于具有導航按鈕或搜索框的簡單應用程序，以消除窗口頂部不必要的權重。

Windows Defender 的一個局部大工具欄

八、工具欄控件樣式

1. 命令圖標按鈕

單擊命令按鈕可立即啟動操作。

Windows 傳真和掃描的圖標命令按鈕示例

2. 屬性圖標按鈕

屬性按鈕的狀態(tài)反映了當前選定對象的狀態(tài) （如果有）。單擊按鈕將更改應用于選定對象。

Microsoft Word 中的屬性按鈕示例

3. 菜單按鈕

用于顯示一組相關命令的按鈕。單個向下指向的三角形表示單擊按鈕顯示菜單。

帶有一組相關命令的菜單按鈕

4. 拆分按鈕

用于合并一組命令變體的命令按鈕，尤其是在大多數時間使用其中一個命令時。

處于正常狀態(tài)的拆分按鈕

像菜單按鈕一樣，單個向下指向的三角形表示單擊按鈕的最右邊部分顯示菜單。

一個下拉的拆分按鈕

在本例中，拆分按鈕用于合并所有與打印相關的命令?！傲⒓创蛴　?命令大部分時間都在使用，因此用戶通常不需要查看其他命令。

與菜單按鈕不同，單擊按鈕的左側部分直接在標簽上執(zhí)行操作。在下一個命令可能與最后一個命令相同的情況下，拆分按鈕是有效的。在這種情況下，標簽將更改為最后一個命令，如使用顏色選擇器：

5. 下拉列表

用于查看或更改屬性的下拉列表 （可編輯或只讀）。在此示例中，下拉列表用于查看和設置字體屬性。工具欄中的下拉列表反映了當前選定對象的狀態(tài) （如果有）。更改列表會更改選定對象的狀態(tài)。

6. 標簽圖標按鈕

標有圖標和文本標簽的命令按鈕或屬性按鈕。這個樣式長用于高頻使用但圖標不能清晰表意的工具欄按鈕?；虍敼ぞ邫谥邪粹o較少時，每個按鈕都可以有一個文本標簽。

標有最常用按鈕的工具欄

7. 模態(tài)圖標按鈕

單擊模態(tài)按鈕進入所選模式。（譯者注：模態(tài)按鈕，即點擊之后會一直處于這個功能狀態(tài)下，例如一直輸入文本框，直到退出或切換至其他命令）

Windows 畫圖中的模態(tài)按鈕示例

九、交互方式

1、當鼠標懸停在圖標上時，顯示可點擊按鈕的指示，以指示該圖標是可點擊的。在工具提示超時后，顯示相應的工具提示或信息。

2、單擊左鍵

• 對于命令按鈕，保持與控件的正常交互。
• 對于模態(tài)按鈕，確保控件反映當前選擇的模式。如果模式會影響鼠標交互的行為，則可能需要更改指針樣式。在下方的示例圖中，指針樣式的變化用于顯示鼠標交互的模式。
• 對于屬性按鈕和下拉列表，顯示控件以反映當前選定對象的狀態(tài)（如果有）。在用戶進行交互時，更新控件的狀態(tài)并將更改應用于選定對象。如果沒有選定任何內容，則保持控件狀態(tài)不變。

3、當用戶進行左鍵雙擊時，執(zhí)行與左鍵單擊相同的操作

例外：在極少數情況下，使用工具欄命令可以更有效。在這種情況下，通過雙擊進行模式切換。

例如，在下圖所示的情況下，雙擊“格式刷”命令可以進入一種模式，在該模式下，所有后續(xù)的單擊操作都將應用該格式。用戶可以通過左鍵單擊來退出該模式。

4、右鍵單擊

• 對于可自定義的工具欄，當用戶右鍵單擊時，顯示用于自定義工具欄的上下文菜單。要注意，菜單的顯示應當在鼠標向下右鍵單擊時觸發(fā)，而不是鼠標向上。
• 對于其他工具欄，保持不進行任何操作。

謝謝大家觀看！

翻譯資料：

桌面應用程序的設計基礎知識 – Win32 apps | Microsoft Learn