編者按：又是一篇徹底理清 UI/UX 設計中一個重要控件的文章，核心圍繞著「工具提示」來進行。Saadia Minhas 的這篇文章寫的相當詳細，6 大設計規(guī)則，5 大常見錯誤，把所有的要點都包含進來了，值得學習。以下是正文。

當用戶將鼠標懸?；螯c擊屏幕上的 UI 元素時，出現(xiàn)的描述性文案，就是工具提示（Tooltip）。工具提示通常會簡要解釋這個 UI 元素，讓用戶更輕松地理解，并且與界面交互。

工具提示可提供即時幫助，而不會打斷用戶的工作流程。用戶以這種方式快速獲得幫助幫助，從而減少 UI 給用戶的陌生感和迷惑性。

為了增強用戶體驗設計出有效的工具提示，需要遵循一系列設計規(guī)則。

關鍵要點

• 工具提示是一個需要仔細設計考慮的常見 UI 元素。
• 工具提示應顯示清晰簡潔地傳遞信息，幫助用戶了解 UI 交互。避免使用專業(yè)術語。
• 在整個 APP 中使用一致的工具提示設計。
• 使用適當?shù)臅r間和位置來顯示你的工具提示。
• 設計工具提示時請注意可訪問性。
• 僅在必要時使用工具提示。
• 不要使用工具提示來顯示關鍵信息。
• 設計工具提示時請充分考慮到移動端用戶。

想要更好設計工具提示，你需要遵循下面的 6 個最佳實踐。

1. 清晰簡潔

• 提供能夠幫助用戶理解 UI 元素功能和含義的工具提示文案。

• 不要使用專業(yè)術語和復雜的語言。否則，工具提示輔助用戶理解的目的，將無法實現(xiàn)。

• 信息要簡短，切中要點。冗長的工具提示文本是難以閱讀的，需要花費時間去理解，從而導致體驗不佳。
• 如果要在工具提示中顯示大量信息，請使用其他 UI 控件（如彈出窗口）。此外，你還可以在工具提示中顯示「了解更多，查看詳細信息」類型的文案，以查看與當前 UI 元素相關的詳細信息。

• 不要在工具提示中，使用繁復冗余的 UI 標簽文案，它的存在沒有向用戶提供任何附加信息。有時，保持 UI 的一致性是不可避免的。

• 這里要考慮的一個重要問題是保持一致性。有時你必須為屏幕上的所有 UI 元素提供工具提示，以提供類似的體驗。如果用戶在大多數(shù)鏈接、按鈕或圖標上看到工具提示，他們會期望在所有元素上都有這些提示。
• 與其刪除多余的工具提示，不如為所有這些元素制作有用的工具提示（如果鏈接或者按鈕本身是不言自明的，則可以不制作任何工具提示）。
• 工具提示的主要目的是傳達清晰有效的信息，信息越簡潔、越有影響力，用戶體驗就越好。不要只關注工具提示中可以容納的字符數(shù)，而要考慮需要向用戶傳達哪些基本信息。

2. 排版和時間

將工具提示放置在相關 UI 元素附近，以便用戶可以輕松地與它們相關。

• 由于工具提示可能會與 UI 元素重疊，所以請將它們放置在不會影響用戶交互流程的位置。
• 如果工具提示遮擋了用戶想要查看的內容，用戶會移動鼠標關閉工具提示，然后查看所需的信息。確保工具提示不會遮擋用戶完成任務時，必須看清的元素。
• 工具提示的位置取決于你正在使用的窗口。位置應根據(jù)屏幕大小自行調整。例如，當窗口以全屏視圖打開時，顯示在 UI 元素下方的工具提示會自動調整到頂部。

• 如果你正在處理表單，用戶可從上到下來瀏覽選項，則將工具提示放在 UI 元素的頂部是一個更好的主意。由于用戶已經(jīng)使用過上面的 UI 選項，因此工具提示可以暫時隱藏，不會影響使用。

• 將工具提示調整到不會被窗口任何一側截斷的位置。
• 工具提示的可見時長應取決于目標受眾閱讀和理解其信息的能力。當用戶將光標從 UI 元素上移開時自動關閉工具提示，比讓它在定義的時間后消失更為方便用戶。

3. 工具提示觸發(fā)機制

工具提示以兩種方式出現(xiàn)。

（1）當用戶將鼠標懸停在 UI 元素上時，其詳細信息將顯示在工具提示中。一旦光標離開 UI 元素，工具提示就會消失。

用戶必須將鼠標懸停在 UI 元素上才能查看是否出現(xiàn)工具提示。

(2) 當用戶點擊帶有 UI 元素的信息或幫助圖標時，其詳細信息將顯示在工具提示中。當用戶再次點擊圖標或點擊工具提示區(qū)域外時，工具提示會消失。

如果帶有信息或幫助圖標的選項太多，此方法可能會造成 UI 混亂。

4. 可見性和可訪問性

確保工具提示的可見性，且可讀性良好。

• 工具提示必須對所有用戶（包括殘障人士）都清晰可見且易于閱讀。這需要使用高對比度的顏色和清晰易讀的字體。此外，還要確保工具提示在合理的時間內保持可見。
• 選擇在背景 UI 上可見的工具提示和字體顏色。使用與背景對比鮮明的色彩。
• 讓所有用戶（包括殘障人士）都能輕松使用工具提示。有視力障礙的用戶無法閱讀帶有白色背景的淺灰色工具提示。

• 工具提示是一個會顯示一段時間的小型 UI 元素。選擇更易于閱讀和理解的字體大小。調整字符間距，使文案更易讀。如果使用多行，請使用合理且易讀的行間距。

• 在可訪問性上，還應該考慮包括提供鍵盤導航和屏幕閱讀器支持，確保所有用戶，無論其能力如何，都可以從工具提示信息中受益。

5. 一致性

在整個界面上保持一致的工具提示風格和行為，有助于用戶預測和理解 UI 中的功能。

• 你的產品當中使用的工具提示應該有一致的視覺設計。用戶應該能夠識別并熟悉工具提示的設計和樣式。確定風格樣式指南有助于創(chuàng)建一致的工具提示。

• 懸停時出現(xiàn)工具提示所需的時間，應該是一致的。
• 顯示工具提示的觸發(fā)器應該相同。例如，如果工具提示是通過將鼠標懸停在界面某個部分的元素上來觸發(fā)的，則整個 APP 也應該采用相同的方式。

一致的設計確保更直觀的用戶體驗并減少學習成本。

6.測試和迭代

用戶測試對于驗證工具提示的有效性，至關重要。

• 進行可用性測試，來收集有關用戶如何與工具提示交互，以及所提供的信息是否有用的反饋。
• 根據(jù)用戶反饋進行迭代，因為這將有助于提高工具提示的清晰度和功能性。

A/B 測試等工具可用于確定哪些版本的工具提示在用戶參與度和滿意度方面表現(xiàn)最好。

應避免的常見錯誤

以下是與工具提示設計相關的常見錯誤，可以通過這些最佳實踐來避免這些錯誤。

1. 過度使用工具提示

毫無疑問，工具提示對用戶很有幫助，可以指導用戶與 APP 和網(wǎng)站之間的互動。同時，過度使用工具提示，可能會讓用戶感到不知所措。

• 不要提供不必要的工具提示，因為這會降低其有效性。如果屏幕上的每個元素都有工具提示，用戶可能會不知所措或完全忽略它們。
• 工具提示會遮蓋其下方的區(qū)域。用戶界面上的許多工具提示可能會令人厭煩，因為它們會打斷流程，而不是幫助用戶。
• 工具提示應謹慎使用，只有當它們通過提供必要信息、或闡明復雜功能，并且以此來增加價值時才使用。

2. 時機和地點選擇不當

工具提示的出現(xiàn)時間和位置不當，可能會讓用戶感到煩躁和迷惑。

• 出現(xiàn)得太快或停留時間太長的工具提示，可能會分散注意力。如果當用戶將鼠標懸停在 UI 元素上時，工具提示以隨機間隔顯示，可能會令人摸不著頭腦。使用合理的、一致的時間，在用戶將鼠標懸停在元素上時立即顯示工具提示，是合理的設計。
• 同樣，如果工具提示遠離相關 UI 元素，則會造成混亂。有時，工具提示文案會被截斷，無法正常顯示，這會導致糟糕的用戶體驗。工具提示需要智能地調整其位置。
• 最佳做法是將工具提示放置在相關元素附近，并確保它們以自然和非侵入的方式出現(xiàn)和消失。

例如，一旦用戶的鼠標不再聚焦于 UI 元素，懸停觸發(fā)的工具提示就會消失。

3.設計不一致

保持整個 APP 的工具提示設計統(tǒng)一。不一致的工具提示設計會讓用戶感到困惑，并帶來支離破碎的用戶體驗。

• 由于工具提示是一個小型 UI 控件，因此可以忽略一致的樣式指南和主題。
• 確保在整個產品中定義一致的工具提示布局。這包括形狀、大小、顏色、字體、放置選項和觸發(fā)方式。
  一致的設計可以幫助用戶了解可以在何時何地以何種方式，來觸發(fā)工具提示，同時也有助于打造更具凝聚力和專業(yè)的界面。

4. 忽視移動端用戶

工具提示通常僅針對桌面用戶而設計，同樣的機制在移動設備上則不起作用，但是移動端用戶同樣是需要用到的。

• 移動設備的工具提示行為需要考慮觸摸交互。設計點擊觸發(fā)的工具提示，使其能夠在觸摸設備上輕松消失。
• 使用「幫助」圖標可能會在小屏幕上造成混亂。點擊圖標可以顯示工具提示，而文案下方的虛線可以指示出文案信息對應的工具提示。使用虛線的原因是為了將其與鏈接區(qū)分開來。
• 再次點擊工具提示即可將其關閉。
• 如果你想在用戶打開屏幕時顯示一條信息，則可以使用工具提示。例如，在 TikTok、Instagram 等上顯示通知的統(tǒng)計信息。

5.顯示關鍵信息

如果總是需要某些信息來完成任務，它應該與頁面上的相關 UI 元素一起保持可見。

• 例如，密碼輸入規(guī)范應始終可見，以便用戶能夠滿足這些要求。在許多地方，當用戶將鼠標懸停在 UI 元素（如圖標）上時，密碼要求會顯示在工具提示中。

最好讓關鍵信息保持可見，以便用戶無需懸?；騿螕羧魏蝺热菁纯闪私馑?。

作者：陳子木