2019-2-22 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
工具提示（Tooltips）是用戶觸發(fā)的信息，用來提供有關(guān)頁面元素和功能的更多信息。盡管工具提示（Tooltips）對于網(wǎng)頁不是新概念，但它們卻經(jīng)常被錯(cuò)誤的使用。
Tooltips并不新鮮，但它們?nèi)匀槐徽`用。
定義：Tooltip是當(dāng)用戶與圖形用戶界面中的元素交互時(shí)出現(xiàn)的簡短、信息豐富的消息。Tooltips通常會在兩種情況下出現(xiàn)，鼠標(biāo)懸停時(shí)或鍵盤懸停。(以防萬一你不知道鍵盤懸停是什么: 為了使用頁面中激活的元素，用戶通常需要用鼠標(biāo)移上去或使用鍵盤上的tab鍵切換上去。鍵盤懸停指的是保持鍵盤聚焦在同一個(gè)元素上一段時(shí)間。)
工具提示(Tooltips)可以依附于頁面中任何激活的元素（圖標(biāo)、文字鏈接、按鈕，等等）。它們?yōu)榕鋵Φ脑靥峁┟枋龌蚪忉尅Ｒ虼?，tooltips與界面中的元素相關(guān)聯(lián)并具有特定性，并不會用它來解釋大圖或整個(gè)的任務(wù)流。
有一個(gè)很重要的地方是，tooltips是用戶觸發(fā)的。因此，在頁面中主動彈出來告知用戶新的功能或如何使用一個(gè)具體的功能的提示不是tooltips。
由于tooltips是由懸停手勢觸發(fā)出來的，他們只能在設(shè)備上通過鼠標(biāo)或鍵盤觸發(fā)。在觸摸屏上通常不可用。（將來，tooltips可以在眼控設(shè)備上觸發(fā)，當(dāng)用戶將視線聚焦在界面某個(gè)特定元素一段時(shí)間便可觸發(fā)）
盡管tooltips主要是限于桌面電腦和筆記本，但是在觸摸屏上，它們還有一個(gè)類似姊妹元素：popup Tips。Tooltips和Popup Tips都有相同的目標(biāo)：提供有用的、更多的內(nèi)容。下面這個(gè)表格展現(xiàn)了二者主要的相似點(diǎn)和不同點(diǎn)。
|
|
Tooltips |
Popup tips |
|
適用場景 |
桌面端 |
任何 |
|
觸發(fā) |
懸停（鼠標(biāo)或鍵盤） |
觸摸/點(diǎn)擊 |
|
結(jié)束 |
用戶離開交互區(qū) |
用戶關(guān)閉或點(diǎn)擊屏幕其它區(qū)域 |
|
對應(yīng)元素 |
圖標(biāo)、文本鏈接、按鈕、圖片 |
“?” 或 “i” 圖標(biāo) |
|
內(nèi)容類型 |
微內(nèi)容 |
微內(nèi)容 |
本文將重點(diǎn)介紹tooltips及其在桌面網(wǎng)站上的使用。
Tooltip使用指南
1.不要在任務(wù)的關(guān)鍵信息處使用tooltips
用戶不需要找到工具提示即可完成任務(wù)。當(dāng)Tooltips為一些用戶不熟悉的表單字段提供額外的解釋，或者解釋一些看起來不尋常的需求時(shí)，它是最好用的。請記住，tooltips會消失，因此指令或其它可直接操作的信息，比如字段需求，不應(yīng)該出現(xiàn)在tooltip中。（如果是的話，用戶就不得不在他的工作記憶中記住，以便順利使用）
Don't:
Amtrak網(wǎng)站將密碼要求放在Tooltips中（通過鼠標(biāo)懸停訪問）。這類信息對于用戶成功完成“創(chuàng)建賬戶”流程至關(guān)重要，因此應(yīng)始終顯示在屏幕上。
Do:
FedEx使02-用tooltips為運(yùn)輸表單字段提供額外信息。比如，電子郵件字段中有一個(gè)tooltip，說明列出該字段的原因（此tooltip通過鼠標(biāo)懸停訪問）
2.在tooltip內(nèi)提供簡短有用的內(nèi)容
明顯的或有冗余文本的tooltips對用戶無益。如果你無法想到特別有用的內(nèi)容，就不要提供Tooltip。否則，只會給UI增加無用信息，并且浪費(fèi)任何一個(gè)看到該工具提示的用戶。
此外，長內(nèi)容也不再是“提示”，所以請保持簡短。Tooltips是微內(nèi)容的——短文本旨在自給自足。你的文本可以是單行或者多行，只要它是有關(guān)聯(lián)的并且不會遮擋相關(guān)內(nèi)容。
Don't:
在Sprint網(wǎng)站上，帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip。這個(gè)tooltip是重復(fù)且沒必要的。
Do:
阿里巴巴的搜索框里有一個(gè)無標(biāo)簽的相機(jī)圖標(biāo)。當(dāng)用戶鼠標(biāo)懸停到這個(gè)圖標(biāo)上時(shí)，會出現(xiàn)“通過圖片搜索”的tooltip。這個(gè)功能對很多用戶來說都不熟悉，因此這里描述圖標(biāo)用途的tooltip很有幫助
3.支持鼠標(biāo)和鍵盤懸停
Tooltips只在鼠標(biāo)懸停時(shí)出現(xiàn)的話，對于依賴于鍵盤導(dǎo)航的用戶來說不夠易用。確保在你的設(shè)計(jì)中tooltips可以通過鍵盤無障礙訪問。
Don't:
麥當(dāng)勞的網(wǎng)站不支持通過鍵盤觸發(fā)tooltip。當(dāng)用戶選中同一個(gè)頁面（底部)時(shí)，鼠標(biāo)懸停啟動的tooltip（頂部）不可用。
Do:
維基百科支持鍵盤觸發(fā)tooltips。鼠標(biāo)懸停和鍵盤懸停時(shí)會出現(xiàn)相同的tooltips。
4.當(dāng)附近有多個(gè)元素時(shí)使用箭頭指示
箭頭有助于清楚的識別工具提示和哪個(gè)元素相關(guān)聯(lián)。當(dāng)附近有幾個(gè)元素時(shí)，箭頭有助于避免混淆。
Don't:
PowerPoint有幾個(gè)圖標(biāo)彼此靠近。如果沒有工具提示箭頭，則很難知道哪個(gè)工具提示對應(yīng)哪個(gè)工具。
Do:
Whiteboard使用工具提示箭頭來提示所選圖標(biāo)。盡管圖標(biāo)間距很大，但手型指針的提示能讓指示更清晰，視覺噪音最小。
5.在網(wǎng)頁中使用統(tǒng)一的Tooltips
Tooltips很難發(fā)現(xiàn)，因?yàn)樗鼈兺ǔＨ狈σ曈X線索。如果tooltips在你的網(wǎng)站中沒有規(guī)律的出現(xiàn)，用戶將永遠(yuǎn)不會發(fā)現(xiàn)它們。保持一致并為設(shè)計(jì)中的所有元素，而不是只針對某些元素提供工具提示非常重要。如果只有一些元素需要額外的解釋，使用彈出提示而不是工具提示。
Don't:
Business Insider網(wǎng)站為其導(dǎo)航菜單里3個(gè)圖標(biāo)的其中兩個(gè)提供了tooltips。（注：在網(wǎng)站的主頁上，Globe圖標(biāo)確實(shí)有一個(gè)讀取Globe圖標(biāo)的工具提示，但是這個(gè)標(biāo)簽沒有任何幫助，沒有說明它的功能：語言選擇器）一般來說，我們建議不要使用沒有標(biāo)簽的圖標(biāo)和隱藏標(biāo)簽的tooltips，但是當(dāng)工具提示不一致時(shí)，這種問題更嚴(yán)重。
Do:
Todolist始終如一的使用tooltips。主要部分的三個(gè)圖標(biāo)都有tooltips.通過一致性來實(shí)現(xiàn)用戶的潛在期望。
為無標(biāo)簽的圖標(biāo)提供tooltips
大多數(shù)圖標(biāo)都有一定程度的概念模糊，這就是我們?yōu)樗袌D標(biāo)推薦文本標(biāo)簽的原因。如果你堅(jiān)持不為網(wǎng)站中的圖標(biāo)提供文本標(biāo)簽，至少你可以給用戶提供一個(gè)描述性的工具提示。
確保tooltips和背景有一定的對比
用戶通常會查看他們點(diǎn)擊或懸停的位置。然而，由于tooltips的隱蔽性，一定對比度對于確保用戶能看到工具提示中的文字很重要。此外，對于有視力障礙的用戶，在白色頁面中使用淺灰色tooltips會很難閱讀。
定位tooltips，以便他們不會遮擋相關(guān)內(nèi)容
當(dāng)tooltips遮擋了與它們相關(guān)的內(nèi)容時(shí)，會導(dǎo)致用戶重復(fù)操作（即移動鼠標(biāo)關(guān)閉工具提示，再次讀取信息或字段，懸停以顯示工具提示）。測試你的工具提示位置確保不會擋到與用戶目標(biāo)相關(guān)的其它內(nèi)容。
當(dāng)用戶無法理解某項(xiàng)功能時(shí)，tooltips是一種防錯(cuò)方式。如果用戶遵循其它的設(shè)計(jì)指南（比如，文本標(biāo)簽加圖標(biāo)），那么今天的很多tooltips用例都可以忽略。重要的信息應(yīng)始終在頁面上顯示。因此，tooltips對于用戶完成重要的任務(wù)并不是必不可少的。
我們越是追求極簡主義，我們需要的tooltips就越多，我們的用戶就需要越多的學(xué)習(xí)成本。下次，當(dāng)你考慮tooltips的時(shí)候，問一下自己：為了用戶完成某個(gè)任務(wù)，這個(gè)信息是否需要？如果答案是否定的，那么工具提示非常合適。否則，信息應(yīng)直接出現(xiàn)在頁面中。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com