共用方式為


Windows 7 工具列

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們目前的設計指導方針

工具列是將命令分組以有效率存取的方式。

兩個工具列的螢幕快照,其中項目標示為

一些典型的工具列。

除了或取代功能表欄之外,請使用工具列。 工具列比功能表列更有效率,因為它們是直接的(一律顯示而不是在滑鼠按兩下時顯示)、立即(不需要額外的輸入),而且包含最常使用的命令(而不是完整的清單)。 相較於功能表欄,工具列不必是完整或自我解釋的快速、方便且有效率。

某些工具列是可自定義的,可讓使用者新增或移除工具列、變更其大小和位置,甚至變更其內容。 某些類型的工具列可以取消停駐,進而產生調色盤視窗。 如需工具列品種的詳細資訊,請參閱本文中的 使用模式

注意

功能表命令按鈕圖示 相關的指導方針會分別出現在不同的文章中。

這是正確的使用者介面嗎?

若要決定,請考慮下列問題:

  • 視窗是主要視窗嗎? 工具列適用於主要視窗,但對於次要窗口來說通常很壓倒性。 針對次要視窗,請改用 命令按鈕功能表按鈕,並改為 連結
  • 是否有少量常用的命令? 工具列無法像功能表欄一樣處理許多命令,因此它們最適合用來有效率地存取少量常用命令。
  • 大部分的命令都是立即的嗎? 也就是說,它們主要是不需要額外輸入的命令嗎? 若要有效率,工具列必須有直接且立即的感覺。 如果沒有,功能表欄更適合需要額外輸入的命令。
  • 大部分的命令都可以直接呈現嗎? 也就是說,使用者只需按兩下即可與其互動? 雖然某些命令可以使用功能表按鈕來呈現,但以這種方式呈現大部分的命令會破壞工具列的效率,讓功能表欄成為較佳的選擇。
  • 命令是否以圖示表示良好? 工具列按鈕通常以圖示來表示,而不是文字標籤(雖然有些工具列按鈕同時使用兩者),而功能表命令則以文字表示。 如果命令圖標品質不高,而且無法解釋,功能表欄可能是較佳的選擇。

如果您的程式有沒有功能表欄的工具列,而且大部分命令都可以透過功能表按鈕間接存取,而且 分割按鈕,此工具列基本上就是功能表欄。 請改為在功能表指導方針中套用 工具列功能表 模式。

設計概念

良好的功能表列是所有可用最上層命令的完整目錄,而良好的工具列可讓您快速、方便地存取常用命令。 工具列不會嘗試訓練使用者,只是讓他們提高生產力。 一旦用戶瞭解如何存取工具列上的命令,他們很少會繼續從功能表欄存取命令。 基於這些原因,程式的功能表列及其工具列不需要直接對應。

工具列與功能表列

傳統上,工具列與功能表欄不同,方式如下:

  • 頻率。 工具列只會顯示最常使用的命令,而功能表欄會目錄程式內所有可用的最上層命令。

  • 直接。 按兩下工具列命令會立即生效,而功能表命令可能需要額外的輸入。 例如,功能表列中的 [列印] 命令會先顯示 [列印] 對話框,而 [列印] 工具列按鈕會立即將檔的單一複本列印到預設印表機。

    已選取工具列印表機按鈕的螢幕快照

    在此範例中,按兩下 [列印] 工具列按鈕會立即將檔的單一複本列印到預設印表機。

  • 直接。 工具列命令是使用單鍵叫用,而功能表列命令需要瀏覽功能表。

  • 數位和密度。 工具列所需的螢幕空間與其命令數目成正比,而且一律會使用該空間,即使命令不是也一樣。 因此,工具列必須有效率地使用空間。 相反地,功能表列命令通常會隱藏在檢視中,而且其階層式結構允許任意數目的命令。

  • 大小和簡報。 若要在小空間中封裝許多命令,工具列通常會使用圖示型命令(使用工具提示型卷標),而功能表欄則使用以文字為基礎的命令(搭配選擇性圖示)。 雖然工具列按鈕可以有標準文字標籤,但這些按鈕會使用更多空間。

    具有傳送/接收標籤的工具列 螢幕快照

    加上標籤的工具列按鈕至少需要三倍的空間,比未標記的空間多三倍。

  • 明顯。 設計良好的工具列需要圖示,這些圖示大多是自我解釋的,因為使用者只要使用工具提示就無法有效率地找到命令。 不過,如果一些較不常使用的命令無法解釋,工具列仍可正常運作。

    具有熟悉圖示的工具欄螢幕快照

    在此範例中,最常使用的圖示是自我解釋的。

  • 可辨識且可辨識。 對於常用命令,用戶記得工具列按鈕屬性,例如位置、圖形和色彩。 使用設計完善的工具列,即使使用者不記得確切的圖示符號,使用者也能快速找到命令。 相較之下,用戶記得常用功能表欄命令位置,但依賴命令卷標來進行選取。

    擷取工具選項對話框的螢幕快照

    對於工具列命令、獨特的位置、圖形和色彩,有助於讓圖示辨識和區分。

    功能表欄的 螢幕快照,其中已選取檔案命令

    對於功能表列命令,用戶最終取決於其標籤。

效率

鑒於其特性,工具列的設計主要是為了提高效率。 效率不佳的工具列只是沒有意義。

如果你只做一件事...

請確定您的工具列主要是為了提高效率而設計。 將焦點工具列放在常用、立即、直接和快速辨識的命令上。

隱藏功能表列

一般而言,工具列與功能表欄一起運作良好:良好的工具列可提供效率和良好的功能表欄,提供完整的功能。 同時擁有功能表列和工具列,可讓每個功能表欄和工具列專注於其優勢,而不需要妥協。

令人驚訝的是,此模型會以簡單的程序細分。 對於只有少數命令的程式,同時具有功能表欄和工具列並無意義,因為功能表欄最終會是重複且效率不佳的工具欄版本。

為了消除這種備援,Windows Vista 中的許多簡單程式著重於只透過工具列提供命令,並預設隱藏功能表欄。 這類程式包括 Windows Explorer、Windows Internet Explorer、Windows Media Player 和 Windows Photo Gallery。

這並不小的變更。 移除功能表列基本上會變更工具列的性質,因為這類工具列必須完整且以下列方式變更:

  • 頻率。 拿掉選單列表示不論其使用頻率為何,都必須從工具列存取無法直接從視窗或其作功能表取得的所有命令。

  • 直接。 拿掉選單列可讓工具列成為命令的唯一可見存取點,需要工具列具有完整的功能版本。 例如,如果沒有功能表欄,工具列上的 [列印] 命令必須顯示 [列印] 對話方塊,而不是立即列印。 (雖然在此案例中使用分割按鈕是很好的妥協。如需標準列印分割按鈕,請參閱 標準功能表和分割按鈕

    工具列和列印命令選項的螢幕快照

    在此範例中,Windows 相片圖庫中的 [列印] 工具列按鈕具有顯示 [列印] 對話方塊的 [列印] 命令。

  • 直接。 為了節省空間並防止雜亂,較不常使用的命令可能會移至功能表按鈕,使其較不直接。

用來補充功能表列的工具列設計方式與設計來搭配移除或隱藏功能表欄使用的工具列不同。 由於您無法假設用戶會顯示隱藏功能表欄來執行單一命令,所以隱藏功能表欄應該與在制定設計決策時完全移除功能表欄相同。 (如果您預設隱藏功能表欄,請勿假設用戶會考慮顯示功能表欄來尋找命令,甚至找出如何顯示它。

設計工具列以在沒有功能表欄的情況下運作,通常牽涉到一些妥協。 但為了提高效率,不要妥協太多。 如果隱藏功能表欄會導致沒有效率的工具列,請不要隱藏功能表欄!

鍵盤輔助功能

從鍵盤上,存取工具列與存取功能表欄大不相同。 當使用者按下 Alt 鍵時,功能表欄會收到輸入焦點,而且他們會以 Esc 鍵失去輸入焦點。 一旦功能表列具有輸入焦點,它就會獨立於窗口的其餘部分進行巡覽,並處理所有箭頭鍵、首頁、結束和 Tab 鍵。 相反地,當使用者透過視窗的整個內容按下 Tab 鍵時,工具列會收到輸入焦點。 因為工具列是 Tab 順序中的最後一個,所以在忙碌的頁面上可能會花費大量精力來啟用(除非使用者知道使用 Shift+Tab 往後移動)。

輔助功能在這裡呈現兩難境地:雖然工具列對滑鼠用戶來說比較容易,但鍵盤使用者更容易存取。 如果同時有功能表欄和工具列,則這不是問題,但如果移除或隱藏功能表欄,則不會有問題。

基於輔助功能考慮,因此偏好保留功能表欄,而不是完全移除它,而不是完全支援工具列。 如果您必須選擇移除功能表欄並直接隱藏功能表欄,則偏好隱藏它。

使用模式

工具列有數種使用模式:

用法
主要工具列
設計成在沒有功能表欄的情況下運作的工具列,隱藏或移除。
主要工具列必須平衡效率與完整性的需求,因此最適合用於簡單的程式。
windows 檔案總管工具列 螢幕快照
Windows 檔案總管的主要工具列。
補充工具列
設計來使用功能表列的工具列。
補充工具列可以專注於效率而不妥協。
工具列上功能表列的 螢幕快照
Windows Movie Maker 的補充工具列。
工具列功能表
實作為工具列的功能表列。
工具列功能表是由 功能表按鈕 和分割按鈕中的命令所組成,如果有的話,只有幾個直接命令。
具有圖示和命令的功能表列 螢幕快照
Windows 相片圖庫中的工具列功能表。
可自定義工具列
用戶可自定義的工具列。
可自定義的工具列可讓使用者新增或移除工具列、變更其大小和位置,甚至變更其內容。
具有數十個圖示的工具列螢幕快照
Microsoft Visual Studio 中可自定義的工具列。
調色盤視窗
呈現命令陣列的無模式對話框。
調色盤視窗是未停駐工具列。
色彩對話框的螢幕快照
字型對話框的螢幕快照
Windows Paint 中的調色盤視窗。

工具列有下列樣式:

風格
未標記的圖示
一或多個小型未標記圖示按鈕的數據列。
如果有太多按鈕無法加上標籤,或經常使用程式,請使用此樣式。 使用此樣式時,具有複雜功能的程式可以有多個數據列,因此,這是唯一需要自定義的樣式。 使用此樣式時,如果經常使用某些命令按鈕,則可以加上標籤。
具有小型、未標記圖示的工具列螢幕快照
WordPad 中未標記的圖示工具列。
大型未標記圖示
大型未標記圖示按鈕的單一數據列。
將此樣式用於簡單公用程式,這些公用程式具有容易辨識的圖示,而且通常會在小型視窗中執行。
具有大型、未標記圖示的工具列螢幕快照
具有大型圖示的工具列 螢幕快照
Windows Live Messenger 和 Windows Snipping Tool 的大型未標記圖示工具列。
標籤圖示
一列小型標記圖示。
如果命令很少或程式不常使用,請使用此樣式。 此樣式一律有單一數據列。
已加上標籤圖示的工具列 螢幕快照
Windows 檔案總管中加上標籤的圖示工具列。
部分工具列
不需要完整工具列時,用來節省空間的小型圖示部分數據列。
針對具有瀏覽按鈕、搜尋方塊或索引標籤的視窗使用此樣式,以消除視窗頂端不必要的權數。
功能表欄、工具列和我的最愛列 螢幕快照
部分工具列可以結合瀏覽按鈕、搜尋方塊或索引標籤。
大型部分工具列
不需要完整工具列時,用來節省空間的大型圖示部分數據列。
將此樣式用於具有瀏覽按鈕或搜尋方塊的簡單公用程式,以消除視窗頂端不必要的權數。
大型部分工具列的 螢幕快照
Windows Defender 的大型部分工具列。

最後,工具列控制件有數種使用模式:

用法
命令圖示按鈕
按兩下命令按鈕會起始立即動作。
標籤圖示工具列的 螢幕快照
Windows 傳真和掃描中圖示命令按鈕的範例。
模式圖示按鈕
按兩下模式按鈕會進入選取的模式。
垂直工具列的 螢幕快照
Windows Paint 中的模式按鈕範例。
屬性圖示按鈕
屬性按鈕的狀態會反映目前選取之物件的狀態,如果有的話。 按兩下按鈕會將變更套用至選取的物件。
格式化圖示和選取文字的螢幕快照
Microsoft Word 的屬性按鈕範例。
標籤圖示按鈕
以圖示和文字標籤示的命令按鈕或屬性按鈕。
這些按鈕會用於圖示不足以解釋其圖示的常用工具列按鈕。 它們也會用於工具列中,其具有如此少的按鈕,讓每個按鈕可以有文字標籤。
顯示工具列的螢幕快照,其中具有標示為最常使用按鈕的圖示。
已標示其最常使用按鈕的工具列。
功能表按鈕
用來呈現一組相關命令的命令按鈕。
單一向下指向三角形表示按下按鈕會顯示功能表。
工具列和下拉式命令清單的螢幕快照
具有一組相關命令的功能表按鈕。
分割按鈕
用來合併命令變化的命令按鈕,尤其是在大部分時間使用其中一個命令時。
分割列印按鈕的螢幕快照
處於正常狀態的分割按鈕。
如同功能表按鈕,單一向下指向三角形表示按下按鈕最右邊的部分會顯示功能表。
螢幕快照
已卸除的分割按鈕。
在此範例中,會使用分割按鈕來合併所有列印相關的命令。 立即列印命令大部分時間都會使用,因此使用者通常不需要查看其他命令。
不同於功能表按鈕,按下按鈕的左側部分會直接在標籤上執行動作。 分割按鈕在下一個命令可能與最後一個命令相同的情況下有效。 在此情況下,標籤會變更為最後一個命令,如同使用色彩選擇器:
貯體圖示倒螢幕快照
在此範例中,標籤會變更為最後一個命令。
下拉式清單
用來檢視或變更屬性的下拉式清單(可編輯或唯讀)。
字型下拉式清單的螢幕快照
在此範例中,下拉式清單可用來檢視和設定字型屬性。
工具列中的下拉式清單會反映目前選取之物件的狀態,如果有的話。 變更清單會變更選取的物件狀態。

指引

介紹

  • 根據命令數目及其使用方式,選擇適當的工具列樣式。 如需如何選擇的指引,請參閱上一個工具欄樣式表格。 避免使用從程式工作區佔用太多空間的工具列設定。

  • 將工具列放在內容區域上方, 功能表欄和網址列下方,如果有的話。

  • 如果空間處於進階階段,請透過下列方式節省空間:

    • 省略已知圖示的標籤,以及較不常使用的命令。
    • 只使用部分工具列,而不是整個視窗寬度。
    • 使用功能按鈕或分割按鈕合併相關的命令。
    • 使用 溢位雪佛龍 來顯示較不常使用的命令。
    • 只有當命令套用至目前內容時,才會顯示命令。

    工具列通用圖示未加上標籤的螢幕快照

    Windows Internet Explorer 工具列省略已知圖示的標籤、使用部分工具列,以及針對較不常使用的命令使用溢位形箭號來節省空間。

  • 針對未標記的圖示工具列模式,請使用預設設定,且不超過兩列的工具列。 如果兩個以上的數據列可能很有用,請讓工具列成為可自定義的。 從兩個以上的數據列開始,使用者可能會不堪重負,並從程式工作區佔用太多空間。

    不正確:

    功能表列和三列工具列的螢幕快照

    具有兩個以上工具列數據列的預設組態會導致太多視覺雜亂。

  • 停用不適用於目前內容的個別工具列按鈕, 而不是移除它們。 這麼做可讓工具列內容穩定且更容易找到。

  • 如果按下個別工具列按鈕會直接造成錯誤,請停用個別工具列按鈕。 這樣做是必要的,才能保持直接的感覺。

  • 針對未標記的圖示工具列模式,如果工具列不適用於目前的內容,請移除整個工具列。 只在適用的模式中顯示它們。

    偵錯工具列的 螢幕快照

    在此範例中,只有在執行程式時,才會顯示 [偵錯] 工具列。

  • 顯示靠左對齊的工具列按鈕。 如果存在,說明圖示會靠右對齊。

    工具列的螢幕快照,說明圖示靠右對齊

    除了 [說明] 之外,所有工具列按鈕都會靠左對齊。

    例外狀況: Windows 7 樣式工具列靠左對齊程式特定命令,但靠右對齊標準、已知命令,例如 [選項]、[檢視] 和 [說明]。

  • 請勿動態變更工具列按鈕標籤。 這樣做令人困惑和非預期。 不過,您可以變更圖示以反映目前的狀態。

    貯體圖示倒螢幕快照

    在此範例中,圖示會變更為表示預設命令。

控制件和命令

  • 偏好最常使用的命令。

    • 針對主要工具列,提供完整的命令。 主要工具列不一定和功能表欄一樣全面,但必須提供其他位置無法輕易探索的所有命令。 主要工具列不需要有下列命令:
      • 直接在UI本身上的命令。
      • 通常透過作功能表存取的命令。
      • 標準、已知的命令,例如剪下、複製和貼上。
    • 針對補充工具列,請提供最常使用的命令。 功能表列命令是工具列命令的超集,因此您不需要提供所有專案。 專注於快速、方便的命令存取,並略過其餘部分。
  • 偏好直接控件。 以下列喜好設定順序使用工具列按鈕:

    • 圖示按鈕。 直接並佔用最少的空間。
    • 已標記的圖示按鈕。 直接,但需要更多空間。
    • 分割按鈕。 直接處理最常見的命令,但會處理命令變化。
    • 功能表按鈕。 間接,但呈現許多命令。
  • 偏好立即命令。 對於可立即執行的命令,或具有額外的輸入以彈性:

    • 針對主要工具列,請使用彈性版本的命令(例如 Print...)。
    • 針對補充工具列,請使用工具列中的立即版本(例如列印),並在功能表欄中使用彈性版本(例如 Print...)。
  • 提供常用命令的標籤, 特別是當圖示不是已知的圖示時。

    可接受

    工具列的 螢幕快照,沒有標示為

    更好:

    工具列的螢幕快照,其中一些圖示為

    Windows 傳真和掃描工具列有幾個命令,因此較佳的版本會標示最重要的版本。

  • 請勿將命令直接放在工具列功能表上。

    不正確:

    工具列和功能表螢幕快照

    在此範例中,Print 直接位於工具列上,因此不需要在功能表中。

組織和訂單

  • 將工具列內的命令組織成相關的群組。

  • 先放置最常使用的群組。 在群組中,將命令置於其邏輯順序中。 整體而言,命令應該有邏輯流程,讓它們更容易找到,同時仍會先顯示最常使用的命令。 這樣做最有效率,尤其是在有溢位時。

  • 只有在跨群組的命令弱結合時,才使用群組分隔符。 這麼做可讓群組變得明顯,而且命令更容易找到。

    顯示工具列的螢幕快照,其中顯示使用群組分隔器有組織良好圖示的工具列。

    具有組織良好圖示的工具欄螢幕快照

    Windows Mail 中分組工具列的範例。

  • 避免將破壞性命令放在常用命令旁邊。 使用順序或群組來取得區隔。 此外,請考慮不要將破壞性命令放在工具列中,而是只放在功能表欄或作功能表中。

    可接受

    相鄰列印和刪除按鈕的螢幕快照

    更好:

    分隔列印和刪除按鈕的螢幕快照

    在較佳的範例中,Delete 命令實際上與 Print 分開。

  • 使用溢位形箭號來指出並非所有命令都可以顯示。 但是,只有在沒有足夠的空間顯示所有命令時,才使用溢位。

    不正確:

    我的最愛列和隱藏命令的螢幕快照

    溢位形箭號表示並非所有命令都會顯示,但更多命令可能具有較佳的配置。

  • 請確定在小型視窗大小中,可以直接從工具列存取最常使用的命令(也就是不在溢位中)。 如有必要,請重新排序命令、將較不常使用的命令移至功能表按鈕或分割按鈕,或甚至從工具列完全移除它們。 如果這仍然是問題,請重新考慮您所選擇的工具列樣式。

隱藏功能表列

一般而言,工具列與功能表欄搭配運作非常出色,因為兩者都能讓每個工具欄專注於其優勢,而不會妥協。

  • 如果您的工具列設計讓功能表欄備援,則預設會隱藏功能表欄。
  • 隱藏功能表列,而不是完全移除功能表欄,因為鍵盤使用者更容易存取功能表欄。
  • 若要還原功能表欄,請在 [檢視] 或 [次要工具列] 功能表類別中提供功能表欄複選標記選項。 如需詳細資訊,請參閱 標準選單和分割按鈕
  • 當使用者按下 Alt 鍵時顯示功能表列,並在第一個功能表類別上設定輸入焦點。

互動

  • 暫留時,顯示按鈕 能供性,表示圖示可點選。 在工具提示逾時之後,顯示工具提示或資訊提示。

    描述按鈕

    此範例顯示各種顯示狀態。

  • 在左側單鍵上:

    • 對於命令按鈕,請如常與控件互動。

    • 針對模式按鈕,顯示控件以反映目前選取的模式。 如果模式會影響滑鼠互動的行為,也請變更指標。

      類似油漆桶的指標螢幕快照

      在此範例中,指標會變更為顯示滑鼠互動模式。

    • 針對屬性按鈕和下拉式清單,顯示控件以反映目前選取之物件的狀態,如果有的話。 在互動時,更新控件的狀態,並將變更套用至選取的物件。 如果未選取任何專案,則不執行任何動作。

  • 在左側按兩下上,執行與左側單鍵相同的動作。

    • 例外狀況: 在某些情況下,工具列命令可以更有效率地使用。 在這種情況下,請使用按兩下來切換模式。

      顯示按鈕功能

      在此範例中,按兩下 [格式畫家] 命令會進入模式,讓所有後續的點選都套用格式。 用戶可以按滑鼠左鍵離開模式。

  • 按下滑鼠右鍵:

    • 針對可自定義的工具列,顯示自訂工具列的作功能表。 在滑鼠向下點擊滑鼠右鍵時顯示功能表,而不是滑鼠向上。
    • 對於其他工具列,不執行任何動作。

圖示

  • 提供所有工具列控件的圖示,但下拉式清單除外。

    字型大小下拉式清單的螢幕快照

    下拉式清單不需要圖示,但所有其他工具列控件都不需要圖示。

    例外: Windows 7 樣式工具列只針對圖示已知的命令使用圖示;否則會使用不含圖示的文字標籤。 這樣做可改善標籤的清晰度,但需要更多空間。

  • 請確定工具列圖示在工具列背景色彩上清晰可見。 一律評估內容和高對比度模式中的工具列圖示。

  • 選擇清楚傳達其用途的圖示設計,特別是針對最常使用的命令。 設計良好的工具列需要可解釋的圖示,因為使用者無法使用其工具提示有效率地找到命令。 不過,如果一些較不常使用的命令的圖示無法自行說明,工具列仍可正常運作。

  • 選擇可辨識且可辨識的圖示,特別是針對最常使用的命令。 請確定圖示具有獨特的形狀和色彩。 這麼做可協助使用者快速尋找命令,即使他們不記得圖示符號也一樣。

  • 確定工具列圖示符合航空樣式圖示指導方針。

如需詳細資訊和範例,請參閱 圖示

標準功能表和分割按鈕

如果您使用工具列中的功能表按鈕和分割按鈕,請嘗試盡可能使用下列標準功能表結構和其相關命令。 不同於功能表列,工具列命令不會取得訪問鍵。

主要工具列

這些命令會鏡像標準功能表欄中找到的命令,因此應該只用於主要工具列。 此清單會顯示按鈕標籤(和類型),其中包含其順序和分隔符、快捷鍵和省略號。 請注意,用來顯示和隱藏功能表欄的命令位於 [檢視] 功能表中。

檔案 NewCtrl+N
打開。。。Ctrl+O
關閉
<分隔符>
SaveCtrl+S
另存新檔...
<分隔符>
傳送至
<分隔符>
列印。。。Ctrl+P
列印預覽
頁面設定
<分隔符>
ExitAlt+F4(通常未提供快捷方式)

Edit(功能表按鈕) UndoCtrl+Z
RedoCtrl+Y
<分隔符>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<分隔符>
選取 allCtrl+A
<分隔符>
DeleteDel(通常未指定快捷方式)
重新命名。。。
<分隔符>
找到。。。Ctrl+F
尋找 nextF3(命令通常未指定)
取代。。。Ctrl+H
轉到。。。Ctrl+G

列印(分割按鈕) 列印...Ctrl+P
列印預覽
頁面設定

檢視(功能選單按鈕) 選單列(檢查是否可見)
詳細資料窗格(檢查是否可見)
預覽窗格(檢查是否可見)
狀態列(檢查是否可見)

縮放
放大縮小字體功能 放大縮小字體功能
放大縮小字體功能 放大縮小字體功能

文字大小(選取的設定具有項目符號)

最大
較大
中等
較小
最小

全螢幕F11
RefreshF5

[工具][選單] 按鈕...

[說明] [說明] 按鈕,使用 [說明] 圖示 <program name> helpF1

關於 <program name>

補充工具列

這些命令會補充標準功能表欄。 此清單會顯示按鈕標籤(和類型),其中包含其順序和分隔符、快捷鍵和省略號。 請注意,用來顯示和隱藏功能表欄的命令位於 [工具] 功能表中。

補充工具列類別名稱與標準功能表類別名稱不同,因為它們需要更包含。 例如,會使用 [組織] 類別,而不是 [編輯],因為它包含與編輯無關的命令。 若要維持功能表列與工具列之間的一致性,如果這樣做不會誤導,請使用標準功能表類別名稱。

不正確:

針對不同命令相同選項的螢幕快照

在此範例中,工具列應該使用 [編輯] 而不是 [組織] 來保持一致性,因為它具有標準的 [編輯] 功能表命令。

調色盤視窗

  • 調色盤視窗使用較短的標題列來最小化其屏幕空間。 將 [關閉] 按鈕放在標題列上。

  • 將標題列文字設定為顯示調色盤視窗的命令。

  • 使用句子樣子式大寫而不結束標點符號。

  • 提供視窗管理命令的作功能表。 當使用者以滑鼠右鍵按下標題列時,顯示此作功能表。

    具有作功能表的工具箱 螢幕快照

    在此範例中,使用者可以以滑鼠右鍵按下標題列以顯示作功能表。

  • 如果可能且有用,請讓調色盤視窗重設大小。 表示視窗可重設大小,在視窗框架上方使用重設大小指標。

  • 重新顯示調色盤視窗時,請使用上次存取的相同狀態來顯示它。 關閉時,儲存視窗大小和位置。 重新顯示時,請還原儲存的視窗大小和位置。 此外,請考慮讓這些屬性持續跨每個使用者的程序實例。

定製

  • 提供由兩個或多個數據列組成的工具列自定義。 只有未標記的圖示樣式需要自定義。 具有少數命令的簡單工具列不需要自定義。

  • 提供良好的預設設定。 使用者不應該自定義其常見案例的工具列。 不要依賴使用者自定義其出路不正確的初始設定。 假設大部分的使用者都不會自定義其工具列。

  • 使用下列命令提供作功能表:

    • 顯示可用工具列的複選框清單
    • 鎖定/解除鎖定工具列
    • 自定義。。。
  • 鎖定預設的可自定義工具列,以防止意外變更。

  • 針對 [自定義] 命令,顯示選項對話框,讓您能夠選擇顯示哪些工具列,以及每個工具列上的命令。

    自訂對話框和選項的 螢幕快照

    在此範例中,Visual Studio 提供選項對話框來自定義其工具列。

  • 提供 [重設] 命令,以返回 [自定義選項] 對話框中的原始工具列組態。

  • 以下列方式提供使用拖放功能自定義工具列的功能:

    • 設定工具列順序和位置。
    • 設定工具列長度,顯示任何太小而無法以溢位形箭號顯示其內容的工具列。
    • 如果支援,請取消停駐工具列成為調色盤視窗,反之亦然。

    顯示 [自訂選項] 對話框時:

    • 設定工具列內容。
    • 設定工具列內容的順序。

    這麼做可讓使用者更直接且有效率地進行變更。

  • 儲存每個使用者的工具列自定義專案,

使用省略號

雖然工具列命令用於立即動作,但有時需要更多資訊來執行動作。 使用省略號來指出命令需要更多資訊,才能生效。 如果有一個省略號,請將省略號放在工具提示和標籤的結尾。

使用省略號 列印工具提示文字的螢幕快照

在這裡範例中,列印...命令會顯示 [列印] 對話框,以收集詳細資訊。

不過,如果命令無法立即生效,則不需要省略號。 因此,例如,即使共用設定需要其他資訊,共用設定也不會有省略號,因為命令無法立即生效。

工具列、命令和工具提示 螢幕快照

[共享設定] 命令沒有省略號,因為它無法立即生效。

因為工具列會持續顯示,而且空間處於進階,因此 省略號應該不常使用

注意

針對工具列顯示的功能表,請套用 選單省略號

具有間距資訊之工具列的螢幕快照

標準工具列的建議大小和間距。

標籤

常規

  • 使用句子樣式大寫。
    • 例外狀況: 針對舊版應用程式,如有必要,您可以使用標題樣式大寫,以避免混用大寫樣式。

未標記的圖示按鈕

  • 使用工具提示來標記命令。 針對工具提示文字,使用標籤為按鈕加上標籤時會是什麼標籤,但如果有標籤,請使用快速鍵。

    工具列、印表機圖示和工具提示的螢幕快照

    圖示按鈕工具提示的範例。

已標記的圖示按鈕

  • 使用簡潔的標籤。 可能的話,請使用單一單字,最多四個字。

  • 將標籤放在圖示右側。

  • 使用資訊提示來描述命令。 由於按鈕已加上標籤,因此使用工具提示而非資訊提示會是多餘的。

    具有資訊提示的已標記按鈕螢幕快照

    已標記圖示按鈕資訊提示的範例。

  • 如果清單一律有值,請使用目前的值作為標籤。

    具有字型選項的工具列 螢幕快照

    在此範例中,目前選取的字型名稱會作為標籤。

  • 如果可編輯的下拉式清單沒有值,請使用 提示

    清單標籤搜尋通訊錄 螢幕快照

    在此範例中,會針對下拉式清單的標籤使用提示。

  • 偏好動詞型功能表按鈕名稱。 不過,如果是 Create、Show、View 或 Manage,請省略動詞。 例如,[工具][頁面] 功能表按鈕沒有動詞。
  • 使用可清楚且準確地描述功能表內容的單一特定單一單字。 雖然名稱不一定如此一般,因此他們描述功能表中的所有內容,但應該可以預測,讓使用者不會對他們在功能表中找到的內容感到驚訝。
  • 雖然並非必要,但如果資訊提示說明有所説明,請提供資訊提示描述。
  • 使用以動詞、名詞或名詞片組開頭的功能表項名稱。
  • 偏好以動詞為基礎的功能表名稱。 不過,如果是 Create、Show、View 或 Manage,請省略動詞。 例如,下列命令不使用動詞命令:
    • 大約
    • 高深
    • 全螢幕
    • 新增功能
    • 選項
    • 性能
  • 使用特定動詞。 避免泛型、無幫助的動詞,例如變更和管理。
  • 針對套用至單一物件的命令使用單一名詞, 否則使用複數名詞。
  • 針對互補命令的配對,請選擇清楚的互補名稱。 範例:新增、移除;顯示、隱藏;插入、刪除。
  • 根據用戶目標和工作選擇功能表項名稱,而不是根據技術。
  • 使用下列選單項目名稱進行指定用途:
    • 選項: 顯示程式選項。
    • 自定義: 顯示與機械UI組態特別相關的程式選項。
    • 個人化: 顯示常用 個人化 設定的摘要。
    • 喜好設定: 不使用。 請改用 [選項]。
    • 屬性: 顯示物件的屬性視窗。
    • 設定: 不要做為功能表標籤。 請改用 [選項]。
  • 顯示子功能表的功能表項在其標籤上永遠不會有省略號。 子功能表箭號表示需要另一個選取專案。

文件

參考工具列時:

  • 如果只有一個工具列,請將它稱為工具列。
  • 如果有多個工具列,請依名稱參考它們,後面接著一個字工具列。 請參閱預設開啟的主要工具列,並包含基本工作的按鈕,例如開啟和列印檔案作為標準工具列。
  • 工具列是單一、非資本化的單字。 (相比之下,功能表欄是兩個字。
  • 依其工具提示標籤參照工具列按鈕。 使用確切的標籤文字,包括其大寫,但不包含任何省略號。
  • 依標籤和單字功能表參照工具列功能表按鈕。 使用確切的標籤文字,包括其大寫。
  • 一般而言,請參閱工具列控件做為工具列按鈕。
  • 若要描述使用者互動,請使用按下工具列按鈕和唯讀下拉式清單,然後針對可編輯的下拉式清單輸入 。 請勿使用 choose、select 或 pick。
  • 除了程式設計檔中,請勿使用級聯、下拉式、下拉式清單或快顯來描述功能表按鈕。
  • 將無法使用的專案稱為無法使用、非暗灰色、已停用或灰色。 在程式設計檔中使用停用。
  • 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。

例子:

  • 在工具列的 [頁面] 選單上,按兩下 [以電子郵件傳送頁面
  • 在工具列上的 [字型] 方塊中,輸入 “Segoe UI”。
  • 在 [格式化] 工具列上,指向 [顯示 ],然後按兩下 [批注]