本文內容
注意
此設計指南是為 7 創建的,并且尚未更新的較新版本。 大部分指南原則上仍然適用,但演示和示例并不反映我們 當前的設計指南。
工具欄是對命令進行分組以便高效訪問的方法。
一些典型的工具欄。
除了或代替菜單欄外,還可以使用工具欄。 工具欄比菜單欄更有效,因為它們是直接 (始終顯示,而不是在鼠標單擊) 上顯示,直接 (而不是需要額外的輸入) ,并包含最常用的命令 (而不是全面的列表) 。 與菜單欄相比,工具欄不必只是快速、方便和高效的全面或自我解釋。
某些工具欄是可自定義的,允許用戶添加或刪除工具欄、更改其大小和位置,甚至更改其內容。 某些類型的工具欄可以取消停靠,從而導致調色板窗口。 有關工具欄品種的詳細信息,請參閱本文中的 。
注意
與 菜單、 命令按鈕和 圖標 相關的指南顯示在單獨的文章中。
這是正確的用戶界面嗎?
在決定之前,請考慮以下問題:
如果程序具有沒有菜單欄的工具欄,并且大多數命令可通過菜單按鈕和 拆分按鈕間接訪問,則此工具欄本質上是菜單欄。 請改為在“菜單”準則中應用 工具欄菜單 模式。
設計概念
良好的菜單欄是所有可用的頂級命令的綜合目錄,而良好的工具欄提供快速、便捷的常用命令訪問權限。 工具欄不會嘗試訓練用戶,只需提高工作效率。 用戶了解如何訪問工具欄上的命令后,他們很少從菜單欄中繼續訪問該命令。 出于這些原因,程序菜單欄及其工具欄不需要直接對應。
工具欄與菜單欄
傳統上,工具欄不同于菜單欄,方式如下:
效率
鑒于其特征,工具欄必須主要用于提高效率。 低效工具欄只是沒有意義。
如果你只做一件事...
確保工具欄主要用于提高效率。 對常用、即時、直接、快速識別的命令的焦點工具欄。
隱藏菜單欄
通常,工具欄與菜單欄協同工作:良好的工具欄提供效率和良好的菜單欄提供全面性。 使用菜單欄和工具欄,每個菜單欄和工具欄都能夠專注于其優勢,而不會造成損害。
令人驚訝的是,此模型使用簡單的程序分解。 對于只有幾個命令的程序,同時具有菜單欄和工具欄并不有意義,因為菜單欄最終是工具欄的冗余低效版本。
為了消除這種冗余, Vista 中的許多簡單程序側重于僅通過工具欄提供命令,并默認隱藏菜單欄。 此類程序包括 、 、 媒體播放器和照片庫。
這沒有什么小變化。 刪除菜單欄從根本上改變了工具欄的性質,因為此類工具欄需要全面,并通過以下方式進行更改:
用于補充菜單欄的工具欄設計方式不同于用于已刪除菜單欄或隱藏菜單欄的工具欄。 由于你無法假設用戶將顯示隱藏菜單欄來執行單個命令,因此隱藏菜單欄應與在做出設計決策時完全刪除菜單欄相同。 (如果默認隱藏菜單欄,請不要假設用戶會考慮顯示菜單欄來查找命令word工具欄圖標功能表,甚至弄清楚如何顯示它。)
設計工具欄以在沒有菜單欄的情況下工作通常涉及一些妥協。 但為了提高效率,不要妥協太多。 如果隱藏菜單欄會導致工具欄效率低下,請不要隱藏菜單欄!
鍵盤輔助功能
從鍵盤上,訪問工具欄與訪問菜單欄大相徑庭。 當用戶按 Alt 鍵時,菜單欄將接收輸入焦點,并且它們會失去輸入焦點和 Esc 鍵。 菜單欄具有輸入焦點后,它將獨立于窗口的其余部分進行導航,處理所有箭頭鍵、開始鍵、結束鍵和 Tab 鍵。 相比之下,當用戶通過窗口的全部內容按 Tab 鍵時,工具欄會收到輸入焦點。 由于工具欄是按 Tab 順序排列的,因此,除非用戶知道使用 Shift+Tab 向后移動 () ,否則它們可能需要花費一些精力在繁忙的頁面上激活。
輔助功能在此處呈現兩難境地:雖然工具欄更易于鼠標用戶使用,但鍵盤用戶更容易訪問它們。 如果菜單欄和工具欄都存在,則這不是問題,但如果菜單欄被刪除或隱藏,則這不是問題。
出于輔助功能原因,因此更傾向于保留菜單欄,而不是完全刪除它,而不是完全支持工具欄。 如果必須選擇刪除菜單欄,只需隱藏菜單欄,則更喜歡隱藏菜單欄。
使用模式
工具欄有多個使用模式:
使用情況示例
主工具欄
一個工具欄,旨在在沒有菜單欄的情況下工作,無論是隱藏還是已刪除。
主工具欄必須平衡效率與全面性的需求,因此它們最適合于簡單的程序。
資源管理器中的主工具欄。
補充工具欄
一個工具欄,用于處理菜單欄。
補充工具欄可以專注于效率,而不會泄露。
電影制作人中的補充工具欄。
工具欄菜單
作為工具欄實現的菜單欄。
工具欄菜單主要由 菜單按鈕 和拆分按鈕中的命令組成,只有幾個直接命令(如果有)。
照片庫中的工具欄菜單。
可自定義工具欄
可由用戶自定義的工具欄。
可自定義工具欄允許用戶添加或刪除工具欄、更改其大小和位置,甚至更改其內容。
中的可自定義工具欄。
調色板窗口
顯示命令數組的無模式對話框。
調色板窗口是未停靠的工具欄。
畫圖中的調色板窗口。
工具欄具有以下樣式:
樣式示例
未標記的圖標
一行或多行小型未標記圖標按鈕。
如果有多個按鈕無法標記或經常使用程序,請使用此樣式。 使用此樣式,具有復雜功能的程序可以有多個行,因此,這是唯一需要自定義的樣式。 使用此樣式,如果經常使用某些命令按鈕,則可以標記這些按鈕。
中的未標記圖標工具欄。
大未標記圖標
一行大型未標記圖標按鈕。
將此樣式用于易于識別的圖標且通常運行在小型窗口中的簡單實用工具。
來自 Live 和剪貼工具的大型未標記圖標工具欄。
標記的圖標
一行小標記的圖標。
如果很少有命令或程序不經常使用,請使用此樣式。 此樣式始終有一行。
資源管理器中標記的圖標工具欄。
部分工具欄
當不需要完整工具欄時,用于節省空間的小圖標的部分行。
將此樣式用于具有導航按鈕、搜索框或選項卡的窗口,以消除窗口頂部不必要的權重。
部分工具欄可以與導航按鈕、搜索框或選項卡結合使用。
大型部分工具欄
當不需要完整工具欄時,用于節省空間的大型圖標的部分行。
將此樣式用于具有導航按鈕或搜索框的簡單實用工具,以消除窗口頂部不必要的權重。
來自 的大型部分工具欄。
最后,工具欄控件有多個使用模式:
使用情況示例
命令圖標按鈕
單擊命令按鈕會啟動即時操作。
傳真和掃描中的圖標命令按鈕示例。
模式圖標按鈕
單擊模式按鈕將進入所選模式。
畫圖中的模式按鈕示例。
屬性圖標按鈕
屬性按鈕的狀態反映當前所選對象的狀態(如果有)。 單擊該按鈕會將更改應用于所選對象。
Word中的屬性按鈕示例。
帶標簽的圖標按鈕
帶有圖標和文本標簽的命令按鈕或屬性按鈕。
這些按鈕用于經常使用的工具欄按鈕,其圖標不夠自我解釋。 它們還用于工具欄中,這些按鈕具有如此少的按鈕,每個按鈕都可以具有文本標簽。
帶有標簽最常用按鈕的工具欄。
菜單按鈕
一個用于顯示一組相關命令的命令按鈕。
單個向下指向三角形表示單擊按鈕會顯示菜單。
包含一組相關命令的菜單按鈕。
拆分按鈕
用于合并命令變體的命令按鈕,尤其是在大部分時間使用其中一個命令時。
處于正常狀態的拆分按鈕。
與菜單按鈕一樣,單個向下指向三角形表示單擊按鈕的最右側顯示菜單。
一個下拉的拆分按鈕。
在此示例中,拆分按鈕用于合并所有與打印相關的命令。 即時打印命令大部分時間都使用,因此用戶通常不需要查看其他命令。
與菜單按鈕不同,單擊按鈕的左側部分直接對標簽執行操作。 拆分按鈕在下一個命令可能與最后一個命令相同的情況下有效。 在這種情況下,標簽將更改為最后一個命令,如顏色選取器所示:
在此示例中,標簽將更改為最后一個命令。
下拉列表
下拉列表 (用于查看或更改屬性的可編輯或只讀) 。
在此示例中,下拉列表用于查看和設置字體屬性。
工具欄中的下拉列表反映當前所選對象的狀態(如果有)。 更改列表會更改所選對象的狀態。
指南呈現
工具欄通過省略已知圖標的標簽、使用部分工具欄以及使用溢出雪佛龍來節省空間,從而減少常用命令。
對于未標記的圖標工具欄模式,請使用不超過兩行工具欄的默認配置。 如果兩行以上可能很有用,請使工具欄可自定義。 從兩行以上開始,用戶可能會不堪重負,并從程序工作區占用太多空間。
不正確:
包含兩行以上的工具欄的默認配置會導致視覺混亂過多。
禁用不適用于當前上下文的單個工具欄按鈕, 而不是刪除它們。 這樣做可使工具欄內容穩定且更易于查找。
如果單擊單個工具欄按鈕將直接導致錯誤,請禁用單個工具欄按鈕。 這樣做是必要的,以保持直接的感覺。
對于未標記的圖標工具欄模式,如果它們不適用于當前上下文,請刪除整個工具欄。 僅在適用模式下顯示它們。
在此示例中,僅當程序正在運行時,才會顯示調試工具欄。
顯示工具欄按鈕左對齊。 “幫助”圖標(如果存在)右對齊。
除“幫助”外,所有工具欄按鈕都保持左對齊。
異常: 7 樣式工具欄左對齊程序特定命令,但右對齊標準、已知命令(如選項、視圖和幫助)。
請勿動態更改工具欄按鈕標簽。 這樣做是令人困惑和意外的。 但是,可以更改圖標以反映當前狀態。
在此示例中,圖標已更改以指示默認命令。
控件和命令對于補充工具欄,請提供最常用的命令。 菜單欄命令是工具欄命令的超集,因此無需提供所有內容。 專注于快速、方便的命令訪問并跳過其余部分。
首選直接控件。 按以下首選項順序使用工具欄按鈕:
首選即時命令。 對于可以立即或具有其他輸入的命令word工具欄圖標功能表,可靈活地:
為常用命令提供標簽, 尤其是圖標不是眾所周知的圖標時。
可以接受:
更好:
傳真和掃描工具欄有幾個命令,因此更好的版本標簽最重要的命令。
不要將命令放在工具欄菜單中,這些命令也直接位于工具欄上。
不正確:
在此示例中,“打印”直接位于工具欄上,因此不需要位于菜單中。
組織和訂單隱藏菜單欄
通常,工具欄與菜單欄協同工作,因為兩者都允許他們專注于其優勢,而不會造成損害。
交互
在左側雙擊時,執行與左鍵單擊相同的操作。
右鍵單擊:
圖標
有關詳細信息和示例,請參閱 圖標。
標準菜單和拆分按鈕
如果在工具欄中使用菜單按鈕和拆分按鈕,請嘗試盡可能使用以下標準菜單結構及其相關命令。 與菜單欄不同,工具欄命令不采用訪問鍵。
主工具欄
這些命令鏡像在標準菜單欄中找到的命令,因此它們應僅用于主工具欄。 此列表顯示按鈕標簽 (,并使用其順序和分隔符、快捷鍵和省略號鍵入) 。 請注意,用于顯示和隱藏菜單欄的命令位于“視圖”菜單中。
文件 +N
打開。。。Ctrl+O
關閉
+S
另存為...
發送到
打印。。。Ctrl+P
打印預覽
頁面設置
+F4 (快捷方式通常未提供)
編輯 (菜單按鈕) +Z
+Y
+X
+C
+V
選擇 +A
(快捷方式通常未提供)
重命名...
找到。。。Ctrl+F
查找 (命令通常未提供)
取代。。。Ctrl+H
轉到 (G) 。。。Ctrl+G
打印 (拆分按鈕) 打印。。。Ctrl+P
打印預覽
頁面設置
查看 (菜單按鈕) 菜單欄 (檢查是否可見)
詳細信息窗格 (檢查是否可見)
預覽窗格 (檢查是否可見)
狀態欄 (檢查是否可見)
Zoom
放大縮小字體功能 放大縮小字體功能
放大縮小字體功能 放大縮小字體功能
所選設置 (文本大小具有項目符號)
最大
較大
中型
較小
最小
全屏F11
工具 (菜單按鈕) ...
選項 幫助 (拆分按鈕,使用 help 圖標)
關于
補充工具欄
這些命令補充標準菜單欄。 此列表顯示按鈕標簽 (,并使用其順序和分隔符、快捷鍵和省略號鍵入) 。 請注意,用于顯示和隱藏菜單欄的命令位于“工具”菜單中。
補充工具欄類別名稱不同于標準菜單類別名稱,因為它們需要更包含。 例如,使用“組織”類別而不是“編輯”,因為它包含與編輯無關的命令。 若要保持菜單欄和工具欄之間的一致性,請使用標準菜單類別名稱(如果這樣做不會誤導)。
不正確:
在此示例中,工具欄應使用“編輯”而不是“組織”進行一致性,因為它具有標準的“編輯”菜單命令。
調色板窗口自定義
默認情況下鎖定可自定義工具欄,以防止意外更改。
對于“自定義”命令,顯示一個選項對話框, 用于選擇顯示哪些工具欄以及每個工具欄上的命令。
在此示例中, 提供了用于自定義其工具欄的選項對話框。
提供“重置”命令以返回到“自定義選項”對話框中的原始工具欄配置。
通過以下方式提供使用拖放功能自定義工具欄:
顯示“自定義選項”對話框時:
這樣,用戶就可以更直接高效地進行更改。
按用戶保存所有工具欄自定義項。
使用省略號
雖然工具欄命令用于即時操作,但有時需要更多信息來執行該操作。 使用省略號指示命令需要更多信息,然后才能生效。 將省略號放在工具提示和標簽的末尾(如果有)。
在此示例中,打印...命令顯示“打印”對話框以收集詳細信息。
但是,如果命令無法立即生效,則不需要省略號。 因此,例如,即使共享設置需要其他信息,共享設置也沒有任何省略號,因為命令無法立即生效。
“共享設置”命令沒有省略號,因為它無法立即生效。
由于工具欄不斷顯示,空間處于高級階段, 因此不經常使用省略號。
注意
對于工具欄顯示的菜單,請應用 菜單省略號準則。
建議的大小調整和間距
標準工具欄的建議大小和間距。
標簽常規未標記的圖標按鈕帶標簽的圖標按鈕下拉列表菜單按鈕和拆分按鈕菜單項使用特定謂詞。 避免使用泛型、無幫助的謂詞,例如更改和管理。對應用于單個對象的命令使用單一名詞, 否則使用復數名詞。對于互補命令對,請選擇明顯的互補名稱。 示例:添加、刪除;顯示、隱藏;插入、刪除。根據用戶目標和任務而不是技術選擇菜單項名稱。使用以下菜單項名稱進行說明:顯示子菜單的菜單項在其標簽上永遠不會有省略號。 子菜單箭頭指示需要另一個選擇。文檔
引用工具欄時:
示例: