共用方式為


Windows 7 個工具列

注意

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

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

screen shot of two toolbars with elements labeled

一些典型的工具列。

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

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

注意

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

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

若要決定使用時機,請考量下列問題:

  • 視窗是否為主要視窗? 工具列適用于主要視窗,但通常對次要視窗而言相當龐大。 針對次要視窗,請改用 命令按鈕功能表按鈕連結
  • 是否有少量常用的命令? 工具列無法處理與功能表列一樣多的命令,因此它們最適合用來有效率地存取少量常用命令。
  • 大部分的命令是否立即運作? 也就是說,它們大多是不需要額外輸入的命令嗎? 為了有效率,工具列必須有直接且立即的風格。 如果沒有,功能表列更適合需要其他輸入的命令。
  • 可以直接呈現大部分的命令嗎? 也就是說,使用者會使用單鍵與其互動? 雖然某些命令可以使用功能表按鈕來呈現,但以這種方式呈現大部分的命令會破壞工具列的效率,讓功能表列成為較佳的選擇。
  • 命令是否以圖示表示良好? 工具列按鈕通常以圖示表示,而不是文字標籤 (雖然有些工具列按鈕同時使用兩) ,但功能表命令則以文字表示。 如果命令圖示品質不高,而且不是一目了然,功能表列可能是較佳的選擇。

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

設計概念

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

工具列與功能表列

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

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

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

    screen shot of toolbar's printer button selected

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

  • 直接。 按一下即可叫用工具列命令,而功能表列命令則需要流覽功能表。

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

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

    screen shot of toolbar with send/receive label

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

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

    screen shot of toolbar with familiar icons

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

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

    screen shot of snipping tool options dialog box

    針對工具列命令、特殊位置、形狀和色彩,有助於讓圖示辨識和辨別。

    screen shot of menu bar with file command selected

    對於功能表列命令,使用者最終會依賴其標籤。

效率

基於其特性,工具列主要是為了效率而設計。 沒有效率的工具列不合理。

如果您只執行一件事...

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

隱藏功能表列

一般而言,工具列與功能表列一起運作良好:良好的工具列提供效率,而良好的功能表列提供完整性。 同時擁有功能表列和工具列,可讓每個工具列專注于其優點,而不會遭到入侵。

意外地,此模型會使用簡單的程式細分。 對於只有少數命令的程式,同時擁有功能表列和工具列並無意義,因為功能表列最後會是重複且沒有效率的工具列版本。

為了消除此備援,Windows Vista 中的許多簡單程式著重于僅透過工具列提供命令,並預設隱藏功能表列。 這類套裝程式括 Windows Explorer、Windows Internet Explorer、Windows 媒體播放機 和 Windows Photo Gallery。

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

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

  • 即時。 移除功能表列可讓工具列成為命令的唯一可見存取點,需要工具列具有完整的功能版本。 例如,如果沒有功能表列,工具列上的 [列印] 命令必須顯示 [列印] 對話方塊,而不是立即列印。 (雖然在此案例中使用分割按鈕是絕佳的入侵。如需標準列印 分割按鈕,請參閱標準功能表和分割按鈕 。)

    screen shot of toolbar and print command's options

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

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

用來補充功能表列的工具列的設計方式,與與已移除或隱藏功能表列搭配使用的工具列不同。 而且因為您無法假設使用者會顯示隱藏功能表列來執行單一命令,所以隱藏功能表列應該與在進行設計決策時完全移除一樣。 (如果您預設隱藏功能表列,請勿假設使用者會考慮顯示功能表列來尋找命令,或甚至瞭解如何顯示它。)

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

鍵盤協助工具

從鍵盤上,存取工具列與存取功能表列相當不同。 當使用者按下 ALT 鍵並失去輸入焦點時,功能表列會收到輸入焦點。 功能表列具有輸入焦點之後,它會獨立于視窗的其餘部分流覽,並處理所有方向鍵、首頁、結束和 Tab 鍵。 相反地,當使用者透過視窗的整個內容按下 Tab 鍵時,工具列會收到輸入焦點。 因為工具列是按 Tab 順序的最後一個,除非使用者知道使用 Shift+Tab 來向後移動) ,否則可能需要一些大量心力在忙碌頁面上啟動 (。

協助工具在這裡呈現一個難題:雖然工具列更容易供滑鼠使用者使用,但鍵盤使用者較不方便存取。 如果功能表列和工具列都已移除或隱藏,則這不是問題。

基於協助工具考慮,則偏好保留功能表列,而不是完全移除它,而不是完全取代工具列。 如果您必須選擇移除功能表列,而只是隱藏功能表列,建議您隱藏它。

使用模式

工具列有數種使用模式:

使用狀況 範例
主要工具列
設計成在沒有功能表列的情況下運作的工具列,可隱藏或移除。
主要工具列必須平衡效率與全面性的需求,因此最適合用於簡單的程式。
screen shot of windows explorer toolbar
Windows總管的主要工具列。
補充工具列
設計成使用功能表列的工具列。
補充工具列可以專注于效率,而不會遭到入侵。
screen shot of a menu bar over a toolbar
Windows Movie Maker的補充工具列。
工具列功能表
實作為工具列的功能表列。
工具列功能表是由 功能表按鈕 和分割按鈕中的命令所組成,如果有的話,只有幾個直接命令。
screen shot of menu bar with icons and commands
Windows圖庫中的工具列功能表。
可自訂工具列
使用者可以自訂的工具列。
可自訂的工具列可讓使用者新增或移除工具列、變更其大小和位置,甚至變更其內容。
screen shot of a toolbar with dozens of icons
Microsoft Visual Studio的可自訂工具列。
調色盤視窗
顯示命令陣列的無強制回應對話方塊。
調色盤視窗是未停駐的工具列。
screen shot of a colors dialog box
screen shot of a fonts dialog box
Windows 小畫家中的調色盤視窗。

工具列具有下列樣式:

樣式 範例
未標記的圖示
一或多個小型未標記圖示按鈕的資料列。
如果標籤太多按鈕或經常使用程式,請使用此樣式。 使用此樣式時,具有複雜功能的程式可以有多個資料列,因此這是唯一需要自訂的樣式。 使用此樣式時,如果經常使用某些命令按鈕,可以加上標籤。
screen shot of toolbar with small, unlabeled icons
WordPad 中未標記的圖示工具列。
大型未標記圖示
大型未標記圖示按鈕的單一資料列。
將此樣式用於具有容易辨識圖示且通常會在小型視窗中執行的簡單公用程式。
screen shot of toolbar with large, unlabeled icons
screen shot of toolbar with large icons
來自Windows Live Messenger和Windows剪貼工具的大型未標記圖示工具列。
加上標籤的圖示
一列小標籤圖示。
如果有少數命令或程式不常使用,請使用此樣式。 此樣式一律有單一資料列。
screen shot of toolbar with labeled icons
Windows總管中加上標籤的圖示工具列。
部分工具列
不需要完整工具列時,用來節省空間的小型圖示部分資料列。
針對具有瀏覽按鈕、搜尋方塊或索引標籤的視窗使用此樣式,以消除視窗頂端不必要的權數。
screen shot of menu bar, toolbar and favorites bar
部分工具列可以與瀏覽按鈕、搜尋方塊或索引標籤結合。
大型部分工具列
不需要完整工具列時,用來節省空間的大型圖示部分資料列。
將此樣式用於具有瀏覽按鈕或搜尋方塊的簡單公用程式,以消除視窗頂端不必要的權數。
screen shot of a large partial toolbar
Windows Defender的大型部分工具列。

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

使用狀況 範例
命令圖示按鈕
按一下命令按鈕會起始立即動作。
screen shot of a labeled-icons toolbar
Windows傳真和掃描的圖示命令按鈕範例。
模式圖示按鈕
按一下模式按鈕會進入選取的模式。
screen shot of a vertical toolbar
來自Windows 小畫家的模式按鈕範例。
屬性圖示按鈕
屬性按鈕的狀態會反映目前選取物件的狀態,如果有的話。 按一下按鈕會將變更套用至選取的物件。
screen shot of formatting icons and selected text
Microsoft Word的屬性按鈕範例。
加上標籤的圖示按鈕
標示為圖示和文字標籤的命令按鈕或屬性按鈕。
這些按鈕用於圖示不夠清楚的常用工具列按鈕。 它們也會用於工具列中,而工具列中只有如此少的按鈕,每個按鈕都可以有文字標籤。
Screenshot that shows the toolbar with icons labeled for the most frequently used buttons.
工具列,其最常使用的按鈕會加上標籤。
功能表按鈕
用來呈現一小組相關命令的命令按鈕。
單一向下三角形表示按一下按鈕會顯示功能表。
screen shot of toolbar and drop-down command list
具有一組小型相關命令的功能表按鈕。
分割按鈕
用來合併命令變化的命令按鈕,特別是在大部分情況下使用其中一個命令時。
screen shot of split print button
處於正常狀態的分割按鈕。
就像功能表按鈕一樣,單一向下指向三角形表示按一下按鈕最右邊的部分會顯示功能表。
screen shot of split print button commands
下拉式分割按鈕。
在此範例中,會使用分割按鈕來合併所有列印相關的命令。 立即列印命令最常使用,因此使用者通常不需要查看其他命令。
不同于功能表按鈕,按一下按鈕的左側部分會直接在標籤上執行動作。 分割按鈕在下一個命令可能與最後一個命令相同的情況下有效。 在此情況下,標籤會變更為最後一個命令,如同色彩選擇器:
screen shot of bucket icon pouring paint
在此範例中,標籤會變更為最後一個命令。
下拉式清單
下拉式清單 (用來檢視或變更屬性的可編輯或唯讀) 。
screen shot of drop-down list of fonts
在此範例中,下拉式清單是用來檢視和設定字型屬性。
工具列中的下拉式清單會反映目前選取物件的狀態,如果有的話。 變更清單會變更選取的物件狀態。

指導方針

簡報

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

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

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

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

    screen shot of toolbar's common icons not labeled

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

  • 針對未標記的圖示工具列模式,請使用預設組態,且工具列的資料列不超過兩個數據列。 如果超過兩個數據列可能很有用,請讓工具列成為可自訂的。 從兩個以上的資料列開始,使用者可能會過度佔用程式工作區的空間。

    不正確:

    screen shot of menu bar and three rows of toolbars

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

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

  • 如果按一下個別工具列按鈕會直接產生錯誤,請停用個別工具列按鈕。 這樣做是必要的,才能維持直接的風格。

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

    screen shot of the debug toolbar

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

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

    screen shot of toolbar, help icon right aligned

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

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

  • 請勿動態變更工具列按鈕標籤。 這樣做會混淆且非預期。 不過,您可以變更圖示以反映目前的狀態。

    screen shot of bucket icon pouring paint

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

控制項和命令

  • 偏好最常使用的命令。

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

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

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

    可以接受:

    screen shot of toolbar with no icons labeled

    更好:

    screen shot of toolbar with some icons labeled

    Windows傳真和掃描工具列有一些命令,因此較佳的版本標籤最重要。

  • 請勿將命令放在工具列功能表中,這些命令也會直接放在工具列上。

    不正確:

    screen shot of print command on toolbar and menu

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

組織和順序

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

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

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

    Screenshot that shows a toolbar with well organized icons using group dividers.

    screen shot of toolbar with well organized icons

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

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

    可以接受:

    screen shot of adjacent print and delete buttons

    更好:

    screen shot of separated print and delete buttons

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

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

    不正確:

    screen shot of favorites bar and hidden commands

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

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

隱藏功能表列

一般而言,工具列可與功能表列搭配使用,因為讓兩者都能專注于其優點,而不會遭到入侵。

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

互動

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

    screen shot of an infotip describing a button

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

  • 按一下滑鼠左鍵:

    • 針對命令按鈕,請如常與控制項互動。

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

      screen shot of pointer shaped like a paint bucket

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

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

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

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

      screen shot of infotip showing button's functions

      在此範例中,按兩下 [格式繪製器] 命令會進入模式,其中所有後續的點選都會套用格式。 使用者可以按一下滑鼠左鍵來離開模式。

  • 在滑鼠右鍵上:

    • 針對可自訂的工具列,顯示自訂工具列的操作功能表。 在滑鼠向下按一下滑鼠右鍵時顯示功能表,而非滑鼠向上。
    • 針對其他工具列,不執行任何動作。

圖示

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

    screen shot of font-size drop-down list

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

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

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

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

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

  • 請確定工具列圖示符合標準樣式圖示指導方針。

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

標準功能表和分割按鈕

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

主要工具列

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

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

編輯 (功能表按鈕) UndoCtrl+Z
重做+Y
<separator>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separator>
選取 allCtrl+A
<separator>
DeleteDel (快捷方式通常未提供)
重新命名...
<separator>
找到。。。Ctrl+F
尋找 nextF3 (命令通常未提供)
取代。。。Ctrl+H
轉到 (G) 。。。Ctrl+G

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

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

Zoom
Zoom inCtrl++
放大Ctrl+-

選取 (設定的文字大小具有專案符號)

最大



最小

全螢幕F11
RefreshF5

工具 (功能表按鈕) ...

選項 說明 (分割按鈕,請使用 [說明] 圖示) <program name> helpF1

關於 <program name>

補充工具列

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

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

不正確:

screen shot of same options for different commands

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

調色盤視窗

  • 調色盤視窗使用較短的標題列,將螢幕空間降到最低。 將 [關閉] 按鈕放在標題列上。

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

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

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

    screen shot of toolbox with context menu

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

  • 可能且實用時,請讓調色盤視窗調整大小。 指出視窗可調整大小,在視窗框架上方使用調整大小指標。

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

自訂

  • 提供包含兩個或多個資料列的工具列自訂。 只有未標記的圖示樣式需要自訂。 具有少數命令的簡單工具列不需要自訂。

  • 提供良好的預設設定。 使用者不一定必須自訂其常見案例的工具列。 不要相依于使用者自訂出不正確的初始設定。 假設大部分的使用者都不會自訂其工具列。

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

    • 顯示可用工具列的核取方塊清單
    • 鎖定/解除鎖定工具列
    • 通知區域的 [自訂...]
  • 預設鎖定可自訂工具列,以防止意外變更。

  • 針對 [自訂] 命令,顯示選項對話方塊 ,讓您能夠選擇顯示的工具列,以及每個工具列上的命令。

    screen shot of customize dialog box and options

    在此範例中,Visual Studio提供選項對話方塊來自訂其工具列。

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

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

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

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

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

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

  • 根據每個使用者儲存所有工具列自訂專案。

使用省略號

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

screen shot of print tooltip text with ellipsis

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

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

screen shot of toolbar, command, and tooltip

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

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

注意

針對工具列顯示的功能表,請套用 功能表省略號指導方針。

screen shot of toolbars with spacing information

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

標籤

一般

  • 使用句型大寫。
    • 例外: 對於繼承應用程式,您可以視需要使用標題樣式大寫來避免混合大寫樣式。

未標記的圖示按鈕

  • 使用工具提示來標記命令。 針對工具提示文字,請使用標籤為按鈕的標籤,但如果有的話,請包含快速鍵。

    screen shot of toolbar, printer icon, and tooltip

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

加上標籤的圖示按鈕

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

  • 將標籤放在圖示右邊。

  • 使用資訊提示來描述命令。 因為按鈕已加上標籤,所以使用工具提示而不是資訊提示會是多餘的。

    screen shot of labeled button with infotip

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

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

    screen shot of toolbar with font options

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

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

    screen shot of list label search address books

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

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

文件

參考工具列時:

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

範例:

  • 在工具列的 [ 頁面 ] 功能表上,依電子郵件按一下 [ 傳送] 頁面
  • 在工具列的 [ 字型] 方塊中,輸入 「Segoe UI」。
  • 在 [ 格式化] 工具列上,指向 [ 顯示],然後按一下 [ 批註]。