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

工具欄是對(duì)命令進(jìn)行分組，以便進(jìn)行高效訪問(wèn)的一種方法。

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

工具欄比菜單欄更高效，因?yàn)樗鼈兪侵苯?(始終顯示而不是在單擊鼠標(biāo)時(shí)顯示) 、即時(shí) (不需要其他輸入) ，并且包含最常用的命令，而不是綜合列表。

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

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

某些類型的工具欄可以取消?？?，從而變成一個(gè)面板。(例如: C4D工具欄)

在決定使用工具欄之前，請(qǐng)考慮以下問(wèn)題：

• 窗口類型：如果是主窗口，可以使用工具欄，但對(duì)于輔助窗口來(lái)說(shuō)，工具欄可能過(guò)于繁重。在這種情況下，推薦使用命令按鈕、菜單按鈕和鏈接。
• 常用命令數(shù)量：如果只有少量常用命令，工具欄是一個(gè)不錯(cuò)的選擇，因?yàn)樗軌蚩焖僭L問(wèn)這些命令。
• 命令執(zhí)行方式：大多數(shù)命令是否可以立即執(zhí)行，即不需要額外的輸入？如果是，那么工具欄是一個(gè)高效的選擇。如果需要額外輸入，菜單欄可能更合適。
• 命令的直接顯示：是否可以直接在工具欄中顯示大多數(shù)命令，而無(wú)需額外的點(diǎn)擊？如果是，這會(huì)增加工具欄的效率，否則菜單欄可能更適合。
• 命令圖標(biāo)的質(zhì)量：工具欄按鈕通常使用圖標(biāo)表示，而菜單欄則使用文本表示。如果命令的圖標(biāo)質(zhì)量不高或不清晰，菜單欄可能更好。
• 工具欄作為菜單欄的替代：如果工具欄可以替代菜單欄，并且大多數(shù)命令可以通過(guò)菜單按鈕和拆分按鈕間接訪問(wèn)，那么實(shí)際上工具欄就是菜單欄。這時(shí)應(yīng)該采用菜單指南中的工具欄菜單模式。

這些點(diǎn)都是為了確保界面設(shè)計(jì)的合理性和用戶體驗(yàn)的高效性。

二、設(shè)計(jì)理念

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

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

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

一旦用戶了解如何在工具欄上找到所需的命令，他們通常會(huì)更傾向于使用工具欄而非菜單欄。因此，程序的菜單欄和工具欄不必直接對(duì)應(yīng)，因?yàn)樗鼈兙哂胁煌挠猛竞蛢?yōu)點(diǎn)。

三、工具欄與菜單欄

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

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

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

在此示例中，單擊“打印”工具欄按鈕會(huì)立即將文檔的單個(gè)副本打印到默認(rèn)打印機(jī)。

直接。工具欄命令可以直接點(diǎn)擊調(diào)用，而菜單欄需要瀏覽菜單才能找到相應(yīng)命令。

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

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

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

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

對(duì)于菜單欄命令，用戶最終依賴于其標(biāo)簽。

四、效率

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

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

請(qǐng)確保工具欄的設(shè)計(jì)主要是為了提高效率。將工具欄聚焦在常用、即時(shí)、直接且可快速識(shí)別的命令上。

五、隱藏菜單欄

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

然而，對(duì)于只有幾個(gè)命令的簡(jiǎn)單程序來(lái)說(shuō)，同時(shí)擁有菜單欄和工具欄就沒有意義，因?yàn)椴藛螜谧罱K變成了工具欄的冗余、低效版本。

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

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

• 頻率：刪除菜單欄將從根本上改變工具欄的性質(zhì)，因?yàn)樗忻疃急仨毻ㄟ^(guò)工具欄訪問(wèn)，無(wú)論其使用頻率如何。
• 即時(shí)：刪除菜單欄會(huì)使工具欄成為命令的唯入口，這要求工具欄具有完整功能的版本。例如，如果沒有菜單欄，工具欄上的“打印”命令必須顯示“打印”對(duì)話框，而不是立即執(zhí)行打印操作。（但在這種情況下，使用拆分按鈕是一個(gè)很好的折衷方案。）

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

六、工具欄使用模式

1. 主工具欄

針對(duì)無(wú)菜單欄場(chǎng)景所設(shè)計(jì)的工具欄。主工具欄必須同時(shí)平衡效率的需求和全面性，所以它們最適合簡(jiǎn)單的程序。

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

2. 補(bǔ)充工具欄

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

?

Windows Movie Maker 的補(bǔ)充工具欄

3. 工具欄菜單

當(dāng)作工具欄來(lái)用的菜單欄（本質(zhì)是菜單欄）。主要由菜單按鈕和拆分按鈕組成，可能只有少數(shù)幾個(gè)直接命令 。

Windows 照片庫(kù)中的工具欄菜單

4. 可定制的工具欄

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

Microsoft Visual Studio 的可定制工具欄

5. 面板窗口

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

Windows Paint 中的面板窗口

七、工具欄樣式

1. 無(wú)標(biāo)簽圖標(biāo)

一行或多行不含標(biāo)簽的小圖標(biāo)按鈕。如果加標(biāo)簽的按鈕較多，或是經(jīng)常使用的應(yīng)用程序，請(qǐng)使用此樣式。通過(guò)這種樣式，復(fù)雜應(yīng)用程序可以有多行工具欄，這也是唯一支持自定義工具欄的樣式。通過(guò)這種樣式，可以為經(jīng)常使用的按鈕加標(biāo)簽。

寫字板中的無(wú)標(biāo)簽圖標(biāo)工具欄

2. 無(wú)標(biāo)簽大圖標(biāo)

單行不含標(biāo)簽的大圖標(biāo)按鈕。此樣式應(yīng)用于通常在小窗口中運(yùn)行且圖表中易于識(shí)別的簡(jiǎn)單應(yīng)用程序中。

Windows Live Messenger 和 Windows 剪切工具的大型無(wú)標(biāo)簽圖標(biāo)工具欄

3. 標(biāo)簽圖標(biāo)

單行含有標(biāo)簽的小圖標(biāo)。如果命令很少或應(yīng)用程序不經(jīng)常使用，請(qǐng)使用此樣式。這種樣式總是會(huì)占用一行。

Windows 資源管理器的帶標(biāo)簽的圖標(biāo)工具欄

4. 局部工具欄

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

部分工具欄可以與導(dǎo)航按鈕、搜索框或選項(xiàng)卡結(jié)合使用

5. 局部大工具欄

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

Windows Defender 的一個(gè)局部大工具欄

八、工具欄控件樣式

1. 命令圖標(biāo)按鈕

單擊命令按鈕可立即啟動(dòng)操作。

Windows 傳真和掃描的圖標(biāo)命令按鈕示例

2. 屬性圖標(biāo)按鈕

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

Microsoft Word 中的屬性按鈕示例

3. 菜單按鈕

用于顯示一組相關(guān)命令的按鈕。單個(gè)向下指向的三角形表示單擊按鈕顯示菜單。

帶有一組相關(guān)命令的菜單按鈕

4. 拆分按鈕

用于合并一組命令變體的命令按鈕，尤其是在大多數(shù)時(shí)間使用其中一個(gè)命令時(shí)。

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

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

一個(gè)下拉的拆分按鈕

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

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

5. 下拉列表

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

6. 標(biāo)簽圖標(biāo)按鈕

標(biāo)有圖標(biāo)和文本標(biāo)簽的命令按鈕或?qū)傩园粹o。這個(gè)樣式長(zhǎng)用于高頻使用但圖標(biāo)不能清晰表意的工具欄按鈕。或當(dāng)工具欄中按鈕較少時(shí)，每個(gè)按鈕都可以有一個(gè)文本標(biāo)簽。

標(biāo)有最常用按鈕的工具欄

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

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

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

九、交互方式

1、當(dāng)鼠標(biāo)懸停在圖標(biāo)上時(shí)，顯示可點(diǎn)擊按鈕的指示，以指示該圖標(biāo)是可點(diǎn)擊的。在工具提示超時(shí)后，顯示相應(yīng)的工具提示或信息。

2、單擊左鍵

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

3、當(dāng)用戶進(jìn)行左鍵雙擊時(shí)，執(zhí)行與左鍵單擊相同的操作

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

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

4、右鍵單擊

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

謝謝大家觀看！

翻譯資料：

桌面應(yīng)用程序的設(shè)計(jì)基礎(chǔ)知識(shí) – Win32 apps | Microsoft Learn