使用者體驗模式6 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
不妨礙解釋的工具提示
如何設計有幫助的工具提示:簡短的補充資訊、懸停和鍵盤存取、觸摸替代方案,以及為什麼基本說明不屬於工具提示。
直接總結與定義
核心要點
工具提示是懸停或鍵盤焦點上顯示的簡短訊息,用於提供補充訊息,例如指標的含義。保持簡短,切勿在其中放置重要說明,使它們可以通過鍵盤訪問,在觸控螢幕上提供基於點擊的替代方案,並且不要在其中放置連結或按鈕。
什麼是工具提示
Nielsen Norman Group 將工具提示定義為一條簡短的資訊性訊息,當使用者透過滑鼠懸停或鍵盤懸停(將鍵盤焦點保持在元素上)啟動與元素互動時,就會出現該訊息。由於它們依賴懸停,因此工具提示通常在觸控螢幕上不可用。
補充,絕不是必需的
NN/g 給了一個明顯的錯誤範例:某個網站將密碼要求放在工具提示中。人們完成任務所需的資訊應該顯示在螢幕上。工具提示適合定義、為什麼要求欄位的解釋以及僅圖示按鈕的標籤。
無障礙
使工具提示可供所有人使用:
- 在鍵盤焦點和懸停時打開。
- 讓人們透過 Escape 忽略它而不移動焦點。
- 當指針移動到其上時,使其保持打開狀態。
- 將其連接到觸發器,以便螢幕閱讀器讀出它。
- 不要在裡面放入互動內容;請改用彈出視窗。
觸控裝置上的工具提示
触摸时不存在悬停。使用可見的資訊圖標,點擊即可開啟一個小彈出窗口,或顯示內聯說明。對於複雜的企業指標,標籤旁邊的資訊圖示是每個裝置上熟悉的模式。
動作和時機
顯示前的短暫延遲可以避免當指標經過元素時工具提示閃爍;一旦打開,相鄰的工具提示就會立即出現。扳機的快速淡出或小規模有助於人們看到它的來源。將其保持在 150 毫秒左右。
要記住的關鍵 Principle
- 工具提示是簡短且補充的
- 切勿在工具提示中隱藏重要說明
- 支援鍵盤焦點和Escape
- 在觸控裝置上使用可點擊的資訊圖標
- 工具提示內沒有互動式內容
常見問題解答
來源
- Tooltip Guidelines — Nielsen Norman Group