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