共用方式為


工具提示和資訊提示

注意

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

工具提示是一個小型彈出視窗,會標記所指向的未標記控件,例如未標記的工具列控件或命令按鈕。

顯示列印按鈕的螢幕快照,並顯示工具提示 [列印][Ctrl+P]。

工具列按鈕的典型工具提示。

由於工具提示已證明如此實用,因此存在稱為資訊提示的相關控件,可提供比工具提示更具描述性的文字。

資訊提示是精簡描述所指向物件的小型彈出視窗,例如工具列控件、圖示、圖形、連結、Windows Explorer 對象、開始功能表項和任務欄按鈕的描述。 資訊提示是一種 漸進式洩漏控件的形式,不需要一律在螢幕上有描述性文字。

具有資訊提示的共用按鈕 螢幕快照

一般資訊提示。

針對本文的目的,工具提示和資訊提示會統稱為提示。

提示可協助使用者了解使用者介面 (UI) 中未直接描述的未知或不熟悉的物件。 當使用者將指標停留在物件上,並在用戶按兩下控件或移動滑鼠,或提示逾時時移除時,系統會自動顯示它們。

開發人員: 沒有資訊提示控件;資訊提示是使用工具提示控件來實作。 差別在於使用方式,而不是實作。

注意

工具列說明 相關的指導方針會在個別文章中呈現。

這是正確的控件嗎?

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

  • 資訊是否根據指標暫留顯示? 如果沒有,請使用另一個控件。 僅顯示提示,因為使用者互動的結果絕不會自行顯示。 相較之下,氣球 可以自行顯示(就像通知一樣),所以它們有一個可識別其來源的尾巴。

  • 控件是否有文字標籤? 如果沒有,請使用工具提示來提供標籤。 請注意,大部分的控件都應該加上標籤,因此沒有工具提示。 具有圖形標籤的工具列控件和命令按鈕應該有工具提示。

  • 物件是否受益於補充描述或進一步資訊? 如果是,請使用資訊提示。 不過,文字必須是補充的,對主要工作來說並非不可或缺的。 如果是必要專案,請將它直接放在UI中,讓使用者不必探索或搜尋它。

  • 補充資訊是否為錯誤、警告或狀態? 如果是,請使用另一個 UI 元素,例如氣球、錯誤訊息,或 狀態列。 通知區域圖示資訊提示是例外狀況,因為它們可用來顯示狀態資訊。

  • 使用者是否需要與提示互動? 如果是,請使用另一個控件,例如氣球。 用戶無法與提示互動,因為移動滑鼠會讓他們消失。

  • 使用者是否需要列印補充資訊? 如果是,請使用另一個控件,例如靜態批注字段。 不過,您也可以使用資訊提示來提供更直接的這項資訊存取權。

    批注氣球螢幕快照

    在此範例中,Microsoft Word 中的靜態批注字段可讓使用者列印批註。

  • 內容是否可讓用戶發現提示令人惱火或分心? 如果是,請考慮使用另一個解決方案,包括完全不執行任何動作。 如果您在這類內容中使用提示,請允許使用者將其關閉。

適當地使用時,提示可改善與用戶的通訊。 請勿使用提示作為良好設計的替代專案。 如果圖形、按鈕或其他物件需要使用者持續檢查提示以瞭解它,則設計不正確。 請改為修正設計。

設計概念

秘訣是簡化使用者介面的強大方式。 他們會在需要時提供使用者所需的資訊,並盡其微努力。 秘訣可協助您更有效地使用螢幕空間,並減少螢幕雜亂。 不過,設計不佳的提示可能會令人惱火、分心、無助、壓倒性或以這種方式。 下列設計概念旨在顯示差異。

可探索性

當使用者將指標停留在物件上一段時間時,提示會自動顯示。 這個時間延遲機制可讓提示非常方便,但也可減少其可探索性。

經過一段時間,使用者瞭解某些標準物件,例如工具列按鈕、圖形按鈕、開始功能表項和通知區域圖示都有提示,因此您可以將其可探索性授與。

使用者需要更長的時間才能在非標準的地方探索提示。 沒有視覺線索,例如作用點或指標變更,表示物件有提示。 更糟的是,有些用戶會移動滑鼠很多,尤其是當他們學會流覽 UI 時。 用戶必須知道物件有一個提示,無論是透過過去的體驗還是實驗。

您可以使用一致的秘訣來改善可探索性,進而促進可預測性。 如果您提供某些物件的秘訣,您應該為使用者可能想要補充資訊的所有類似物件提供提示。 有時候這樣做可能會很具挑戰性,因為您也必須確定提示很有説明,而且並不明顯。

如果提供可探索且一致有説明的秘訣被證明是個問題,請考慮替代設計,例如自我說明的控制標籤或就地補充文字。

適當的資訊

適用於秘訣的資訊具有下列特性:

  • 簡明。 提示所使用的彈出視窗非常適合短句子和句子片段,以及格式化的文字。 大型、未格式化的文字區塊很難閱讀和壓倒性。
  • 有益的。 提示文字必須具有資訊性。 它不應該很明顯,或只是重複已經在螢幕上的內容。
  • 補足的。 因為提示文字不一定是可見的,所以應該是使用者不需要讀取的補充資訊。 重要信息應該使用自我解釋的控制卷標或就地補充文字來傳達。
  • 靜態的。 使用者不會預期提示會從某個實例變更為下一個實例,因此他們不太可能注意到動態內容中的變更,例如狀態資訊。 通知區域圖示提示是值得注意的例外狀況:使用者更有可能在那裡探索提示資訊中的變更,因為這些圖示主要是傳達狀態。

適當的逾時

適當的自動顯示和移除秘訣對於用戶維護其UI環境控制權的目標至關重要。 秘訣有三個逾時值:

  • 初。 指標必須保持靜止的時間,提示才能出現。 默認時間為0.5秒。
  • 重新顯示。 當指標從某個目標移至另一個目標時,指標必須保持靜止的時間。 默認時間為0.1秒。
  • 免職。 自動移除小費的時間。 默認時間為5秒。

有太短的初始和重新顯示值會導致令人惱火,干擾性的體驗,因為它們通常會不小心顯示,而太長會導致提示感覺沒有回應或不被發現。 默認移除時間適用於簡短提示文字,如工具提示中所使用。 資訊提示有較長的文字,因此需要較長的顯示時間。

適當的位置

提示應該放置在暫留的物件附近,通常是在指標的尾端或頭部,可能的話。 不過,他們絕不應該以遮蔽感興趣的對象來干擾使用者所執行之動作的方式。 若要避免這個問題,您可能需要將小費從指標移開,但與 對象相鄰。 只要物件與其提示之間的關聯性清楚,就不是問題。 請確定使用者不會只移動指標,以取得您程序的秘訣。

可及性

秘訣對輔助功能有不尋常的影響。 雖然它們通常會透過將指標暫留在物件上方來觸發,但提示會由 螢幕助讀程式處理, 鍵盤存取的控件。 適當地用於簡潔、實用、靜態、補充資訊時,秘訣可以改善整體輔助功能。 事實上,替換文字提示模式是讓圖形可供存取的慣用方式。 不過,不當使用時,它們會藉由使重要或動態資訊更難取得來損害輔助功能。

如果該控件需要沒有鍵盤存取權的提示,請提供一個以上的方法來存取控件。

使用工具提示 列印按鈕的螢幕快照

在此範例中,使用者可以使用工具列按鈕(無法存取鍵盤)或 [列印] 命令鍵盤快捷方式來列印。

如果你只做一件事...

設計可在適當時間在適當位置顯示簡潔、實用、靜態、補充資訊的可探索秘訣。

使用模式

秘訣有數種使用模式:

用法
工具提示
顯示未標記控件或圖像的標籤。
由於這些秘訣可作為標籤,因此其文字會遵循基礎控件的標籤指導方針。
具有工具提示的導出清單按鈕 螢幕快照
在此範例中,工具提示會提供命令標籤。
使用工具提示的關閉按鈕 螢幕快照 使用工具提示 播放按鈕的螢幕快照
在這些範例中,工具提示標籤按鈕。
顯示功能表圖像的螢幕快照與工具提示
在此範例中,工具提示會標示圖像。
資訊提示
提供物件或控件的補充描述或說明。
使用資訊提示來描述或說明物件和控件,例如 工具列 控件、圖示(包括圖示重疊)、連結索引卷標漸進式洩漏控件和自定義控件。
具有資訊提示螢幕快照
具有資訊提示的 按鈕螢幕快照
在這些範例中,資訊提示會提供控件和對象的補充資訊。
替換文字資訊提示
描述輔助功能的圖形。
此模式主要是針對有某種形式的視力障礙的使用者,而且可能使用螢幕助讀程式。
具有資訊提示螢幕快照
在此範例中,資訊提示描述 [開始] 功能表圖形。
縮圖
顯示專案的小型影像。
縮圖可讓您輕鬆辨識視窗或文件的圖形表示。
控制面板類別縮圖螢幕快照
在此範例中,Windows 任務欄會為其專案提供縮圖提示。
相片縮圖及其數據的螢幕快照
在此範例中,Windows 相片庫會為其專案提供縮圖提示。
詳細數據提示
顯示物件的詳細資訊。
資訊提示是顯示物件詳細資訊或提供數據的有效方式。
相片資訊提示的螢幕快照,其中顯示圖形的檔類型 螢幕快照,其中含有資訊提示詳細數據值
在這些範例中,資訊提示會提供對象或數據的詳細資訊。
[開始] 選單資訊提示
描述開始功能表上的專案。
[開始] 選單包含程式名稱和重要的視窗目的地,例如文件、圖片和控制面板。 這些秘訣描述開始功能表項,通常是提供程式或目的地的簡短描述,以及使用者可以使用它執行的主要工作。這些描述也會由 [開始] 功能表搜尋方塊編製索引,進一步協助用戶尋找所需的程式。
歡迎中心資訊提示螢幕快照
在此範例中,資訊提示描述使用者可以在 [開始] 功能表中使用程序執行哪些動作。
控制面板資訊提示
描述控制面板類別或工作。
這些秘訣提供補充資訊,可協助使用者選擇正確的控制面板類別和專案。
具有資訊提示的用戶帳戶類別 螢幕快照
在此範例中,資訊提示描述用戶帳戶控制面板類別。
全名資訊提示
當名稱被截斷或無法完全顯示時,會顯示專案的完整名稱。
這些秘訣可讓您在更精簡的空間中顯示專案,同時減少水準捲動的需求。 當內容長度未知時,這特別重要,因為它是動態的。 不同於其他模式,在清單和樹狀結構中使用時,這些秘訣會直接顯示在來源物件上。
單選按鈕群組標題資訊提示 螢幕快照
在此範例中,資訊提示是用來在暫留時顯示完整項目名稱。
狀態資訊提示
顯示通知區域圖示的狀態資訊。
一般而言,提示應該是靜態的,因為使用者不會預期它們會從一個實例變更為下一個實例。 通知區域圖示是例外狀況,因為這些圖示會傳達狀態,而且狀態文字沒有其他可用的屏幕空間。
[messenger 未登入] 資訊提示的螢幕快照
[已登入信使] 資訊提示的螢幕快照
在這些範例中,資訊提示會提供通知區域圖示的狀態資訊。

指引

超時

  • 使用預設的初始和重新顯示逾時。 例外:
    • 不重複且顯示在相關聯物件一側的縮圖可以立即顯示(不延遲)。 不過,針對備援縮圖使用預設的初始逾時(例如小型圖形物件的大型縮圖提示),或涵蓋其相關聯對象的縮圖。
  • 針對工具提示,請使用預設的五秒小費移除逾時。
  • 如需資訊提示,請關閉提示移除逾時。 開發 人員: 由於您無法在技術上關閉移除逾時,請將它設定為其最大值。
  • 針對輔助功能,如果您需要將逾時值設定為最大值以外的值,請將這些值設為SPI_GETMOUSEHOVERTIME的倍數,並SPI_GETMESSAGEDURATION系統參數,而不是使用固定時間。 這麼做會將逾時調整為使用者的速度。

放置

  • 避免涵蓋用戶即將檢視或與其互動的物件。 一律將小費放在物件的一邊,即使這需要分隔指標和小費。 只要物件與其提示之間的關聯性清楚,某些區隔就不是問題。

    • 例外狀況: 列表和樹狀結構中使用的全名工具提示。

    不正確:

    資訊提示遮蔽搜尋方塊的螢幕快照

    正確:

    搜尋方塊下方資訊提示的螢幕快照

    在正確的範例中,資訊提示會從 [搜尋] 方塊中放置,即使該方塊與插入號之間需要空格也一樣。

    不正確:

    資訊提示遮蔽修訂文字的螢幕快照

    正確:

    在修訂后的文字

    在正確的範例中,基礎文字遠比小費更有用,因此資訊提示的位置遠非如此。

  • 針對專案的集合,請避免涵蓋使用者可能檢視或與其互動的下一個物件。 針對水準排列的專案,請避免將提示放在右側;針對垂直排列的專案,請避免將提示放在下方。

    不正確:

    資訊提示遮蔽最近專案清單的螢幕快照

    正確:

    最近項目清單旁的資訊提示螢幕快照

    在不正確的範例中,提示涵蓋使用者最有可能與下一個互動的物件。

  • 對於可能分散注意力(通常很大)的秘訣,請確定資訊對大多數使用者很有説明。 如果情況並非如此,要麼讓分心提示選擇性,甚至消除它們。 否則,大部分的用戶都必須將指標從目標物件移開,才能擺脫提示。

工具提示

  • 使用工具提示來提供未標記控件的標籤。 通常具有工具提示的控制件 工具列按鈕、圖形按鈕和 漸進式洩漏控制項。 具有提示的控制項會被視為標示,例如 文字框下拉式方塊。 所有其他控件都應該有明確的標籤。

  • 使用句子片段而不結束標點符號。

  • 使用句子樣子大寫。

    • 例外狀況: 此指導方針是 Windows Vista 的新功能。 針對舊版應用程式,如有必要,您可以使用標題樣式大寫,以避免混合大寫樣式。
  • 如果標籤適用於需要其他資訊的命令,請新增 省略號

  • 與一般標籤一樣,讓工具提示保持簡短 通常是五個字或更少,但偏好特定標籤而不是模糊的標籤。

    可接受

    列印工具提示的 螢幕快照

    更好:

    [列印至預設印表機] 工具提示的螢幕快照

    最佳:

    「列印」工具提示 螢幕快照

    不正確:

    詳細資訊工具提示的螢幕快照

    在這些範例中,最佳範例既簡潔又具體,而不正確的範例則不必要詳細。

  • 如果這樣做很有説明,工具提示可能也會提供已標記工具列按鈕的更多詳細數據。 不要只重複或提供標籤中已有內容的單字重述。

    正確:

    [搜尋所有 outlook] 工具提示的螢幕快照

    在此範例中,工具提示會說明 Search 的功能。

    不正確:

    工具提示重複按鈕標籤的螢幕快照

    在此範例中,工具提示只會重複標籤中已有的內容。

  • 您不必只為了一致性而提供已標記的控件工具提示。

    標籤標和未標記按鈕的螢幕快照

    在此範例中,未標記的工具列按鈕具有工具提示,但加上標籤的工具列按鈕則沒有。

  • 每當適當時,提供鍵盤快捷方式和預設值,讓工具提示更有説明。 將此其他資訊放在括弧中。 這樣做可讓工具提示對已標記的控件有説明,即使它們只是重複標籤。 評估工具提示的簡潔性時,請勿考慮此額外文字。

    「列印」工具提示 螢幕快照

    在此範例中,Word 會在工具列工具提示中顯示預設值和鍵盤快捷方式。

資訊提示

  • 如需非標準位置的資訊提示,請偏向一致性,而非協助改善可探索性。 提供使用者可能想要補充資訊之所有物件的秘訣,即使有一些資訊提示可能很明顯也一樣。 這麼做可避免使用者等候永遠不會出現的資訊提示。

    • 例外狀況: 如果只有少數對象有實用的資訊提示,則完全不要使用資訊提示。 相反地,請改用自我說明的控制卷標或就地補充文字。
  • 使用完整句子搭配結尾標點符號。

  • 使用句子樣子大寫。

  • 使用目前的時態,而非未來。

  • 使用平行文法建構。 平行處理原則要求具有相同函式的單字和片語具有相同的形式。

    • 例外狀況: 針對完整名稱資訊提示模式,資訊提示文字完全符合基礎控件的片語、大寫和標點符號。
  • 避免大型資訊提示。 大型資訊提示難以閱讀,而且難以定位,而不會干擾基礎物件。

  • 格式化資訊提示,使其內容更容易閱讀和掃描。 大量未格式化的文字區塊可能難以閱讀。

    不正確:

    長、非結構化、執行工具提示的螢幕快照

    正確:

    相同工具提示的螢幕快照,每個專案各有一行

    在正確的範例中,格式化的文字更容易閱讀和掃描。

  • 在第一次在資訊提示中使用時,請說明縮寫的名稱,後面接著括號中的縮略字。 範例:「動態主機設定通訊協定(DHCP)。”

[開始] 選單資訊提示

  • 使用 \[開始\] 功能表資訊提示來 精簡描述專案,並列出使用者可以使用該專案執行的主要工作。

  • 很有説明。 專注於使用者可以執行的動作。 不要只重複項目名稱,甚至完全在描述中使用。

  • 具體來說。 避免泛型動詞和攔截所有詞組,例如和其他工作。 如果資訊很重要,請特別列出它;否則,假設使用者瞭解資訊提示中並未列出所有專案。

  • 簡潔。 使用25個字或更少。 較長的資訊提示不建議閱讀。

  • 從目前時態命令動詞 開始,例如建立、編輯、顯示和傳送。 偏好特定動詞,而不是一般動詞,例如管理和開啟,這確實適用於大部分的 [開始] 功能表項。 直接到達該點。

    不正確:

    工具提示的螢幕快照:開啟音樂資料夾

    更好:

    工具提示的螢幕快照 :儲存和播放音樂

    在不正確的範例中,資訊提示會以泛型動詞開頭。 更好的範例會以特定動詞指向該點,但會繼續使用提示結尾的不必要的「和其他」片語。

  • 不要使用聽起來像是營銷的語言。

    不正確:

    [單一起點] 資訊提示的螢幕快照

    在此範例中,資訊提示聽起來像是行銷。

  • 因為這些資訊提示會針對 [開始] 功能表搜尋方塊編製索引,使用使用者最有可能搜尋的字詞來描述程式的重要工作。請考慮使用關鍵詞和常見的同義字。

    不正確:

    工具提示的 螢幕快照:建立 dvds

    正確:

    工具提示的螢幕快照 :建立(燃燒)cds、dvds

    在正確的範例中,資訊提示有常見的同義字。

  • 使用句子樣子大寫。

  • 開發人員: [開始] 功能表資訊提示文字來自專案的 [批注] 字段。

快速啟動工具提示

  • 使用具有格式的工具提示: 啟動(完整程式名稱)
  • 請勿使用結束標點符號。
  • 請勿使用其他文字來描述程式或其用途。 因為使用者選擇顯示在 [快速啟動] 列中的程式,所以他們已經知道自己的用途。

控制面板資訊提示

  • 使用控制面板資訊提示來 簡潔地描述控制面板工作和設定的硬體和軟體。

  • 控制面板名稱和圖示必須有資訊提示。 個別工作沒有工具提示。

  • 很有説明。 專注於使用者可以執行的動作。 不要只重複 [控制面板] 項目名稱,甚至全部在描述中使用。

  • 具體來說。 避免泛型動詞和全部攔截詞組,例如 和其他硬體。 如果資訊很重要,請特別列出它;否則,假設使用者瞭解資訊提示中並未列出所有專案。

    不正確:

    工具提示 螢幕快照:設定滑鼠

    正確:

    滑鼠設定詳細工具提示的螢幕快照

    在正確的範例中,會特別列出已設定的硬體類型。

  • 簡潔。 使用25個字或更少。 較長的資訊提示不建議閱讀。

  • 以目前時態的命令式動詞開頭。

    正確:

    設定因特網顯示和連線設定。

    調整視覺、聽力和行動性的設定。

  • 直接到達該點。 請勿使用適用於任何控制面板的語言,例如「用來檢視及設定您外觀和功能的設定...」或 「提供選項給您...」

  • 請勿使用聽起來像是營銷的語言。

    不正確:

    您所有磁碟設定需求的一站式起點。

  • 因為這些資訊提示會針對 [控制面板] 搜尋方塊編製索引,使用使用者最有可能搜尋的詞彙來描述專案。 考慮針對熱門工作和物件使用一般同義字。

    使用遊戲控制器工作 工具提示的螢幕快照

    在此範例中,會使用使用者最有可能搜尋的詞彙來描述專案。

  • 如果 [控制面板] 專案可能會與其他專案混淆,請說明資訊提示中的不同。

    不正確:

    資訊提示的螢幕快照 缺少特定詳細數據

    在此範例中,這兩個控制面板項目都會設定音效,但資訊提示不會釐清差異。

    正確:

    具有特定詳細數據的資訊提示螢幕快照

    在此範例中,由於提示,這兩個專案之間的差異更為明顯。

圖示

與舊版 Windows 不同,Windows Vista 允許提示有圖示。

  • 針對工具提示,請勿使用圖示。

  • 如需資訊提示,請只在圖示有助於辨識或理解時使用圖示,或提供內容。 大部分的資訊提示不應該有圖示。

    具有耳機圖示的音量資訊提示螢幕快照

    在此範例中,資訊提示具有圖示,可協助將圖示與其意義產生關聯。

  • 圖示必須使用 Aero 樣式,且外觀不顯眼。

如需一般圖示指導方針和範例,請參閱 圖示

文件

參考秘訣時:

  • 在程序設計和其他技術檔中,請參閱提示類型(工具提示或資訊提示)。 到處都是,只是把它稱為小費。
  • 下列變化不正確:工具提示、工具提示和工具提示。
  • 若要描述用戶互動,請使用暫留。