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

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

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

為了增強(qiáng)用戶體驗(yàn)設(shè)計(jì)出有效的工具提示，需要遵循一系列設(shè)計(jì)規(guī)則。

關(guān)鍵要點(diǎn)

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

想要更好設(shè)計(jì)工具提示，你需要遵循下面的 6 個(gè)最佳實(shí)踐。

1. 清晰簡潔

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

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

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

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

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

2. 排版和時(shí)間

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

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

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

• 將工具提示調(diào)整到不會(huì)被窗口任何一側(cè)截?cái)嗟奈恢谩?/li>
• 工具提示的可見時(shí)長應(yīng)取決于目標(biāo)受眾閱讀和理解其信息的能力。當(dāng)用戶將光標(biāo)從 UI 元素上移開時(shí)自動(dòng)關(guān)閉工具提示，比讓它在定義的時(shí)間后消失更為方便用戶。

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

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

（1）當(dāng)用戶將鼠標(biāo)懸停在 UI 元素上時(shí)，其詳細(xì)信息將顯示在工具提示中。一旦光標(biāo)離開 UI 元素，工具提示就會(huì)消失。

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

(2) 當(dāng)用戶點(diǎn)擊帶有 UI 元素的信息或幫助圖標(biāo)時(shí)，其詳細(xì)信息將顯示在工具提示中。當(dāng)用戶再次點(diǎn)擊圖標(biāo)或點(diǎn)擊工具提示區(qū)域外時(shí)，工具提示會(huì)消失。

如果帶有信息或幫助圖標(biāo)的選項(xiàng)太多，此方法可能會(huì)造成 UI 混亂。

4. 可見性和可訪問性

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

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

• 工具提示是一個(gè)會(huì)顯示一段時(shí)間的小型 UI 元素。選擇更易于閱讀和理解的字體大小。調(diào)整字符間距，使文案更易讀。如果使用多行，請(qǐng)使用合理且易讀的行間距。

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

5. 一致性

在整個(gè)界面上保持一致的工具提示風(fēng)格和行為，有助于用戶預(yù)測和理解 UI 中的功能。

• 你的產(chǎn)品當(dāng)中使用的工具提示應(yīng)該有一致的視覺設(shè)計(jì)。用戶應(yīng)該能夠識(shí)別并熟悉工具提示的設(shè)計(jì)和樣式。確定風(fēng)格樣式指南有助于創(chuàng)建一致的工具提示。

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

一致的設(shè)計(jì)確保更直觀的用戶體驗(yàn)并減少學(xué)習(xí)成本。

6.測試和迭代

用戶測試對(duì)于驗(yàn)證工具提示的有效性，至關(guān)重要。

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

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

應(yīng)避免的常見錯(cuò)誤

以下是與工具提示設(shè)計(jì)相關(guān)的常見錯(cuò)誤，可以通過這些最佳實(shí)踐來避免這些錯(cuò)誤。

1. 過度使用工具提示

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

• 不要提供不必要的工具提示，因?yàn)檫@會(huì)降低其有效性。如果屏幕上的每個(gè)元素都有工具提示，用戶可能會(huì)不知所措或完全忽略它們。
• 工具提示會(huì)遮蓋其下方的區(qū)域。用戶界面上的許多工具提示可能會(huì)令人厭煩，因?yàn)樗鼈儠?huì)打斷流程，而不是幫助用戶。
• 工具提示應(yīng)謹(jǐn)慎使用，只有當(dāng)它們通過提供必要信息、或闡明復(fù)雜功能，并且以此來增加價(jià)值時(shí)才使用。

2. 時(shí)機(jī)和地點(diǎn)選擇不當(dāng)

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

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

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

3.設(shè)計(jì)不一致

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

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

4. 忽視移動(dòng)端用戶

工具提示通常僅針對(duì)桌面用戶而設(shè)計(jì)，同樣的機(jī)制在移動(dòng)設(shè)備上則不起作用，但是移動(dòng)端用戶同樣是需要用到的。

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

5.顯示關(guān)鍵信息

如果總是需要某些信息來完成任務(wù)，它應(yīng)該與頁面上的相關(guān) UI 元素一起保持可見。

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

最好讓關(guān)鍵信息保持可見，以便用戶無需懸?；騿螕羧魏蝺?nèi)容即可了解它。

作者：陳子木