UI｜讓你的UI更具可用性的工具提示是怎么回事

工具提示是UI設計中的相當實用的一個組成部分，它幫助用戶快速了解未知的和不熟悉的UI控件與對象。從某種意義上來說，工具提示是一種相當實用的UI簡化方式：它在用戶需要時提供信息，盡可能減少用戶的工作量，還能夠讓開發者更為高效地利用屏幕空間，降低UI的復雜度。

工具提示常常是一個小的彈出窗口，它指向用戶未知的控件或者對象，其中涵蓋的內容則是對這個控件的功能或者作用的說明。

不過，如果工具提示設計不當，會讓人分心，低可用性的工具提示會讓人感覺厭煩。

工作原理

工具提示大多運用在網頁當中，當用戶將光標懸停在特定的UI控件上的時候，會自動顯示工具提示，而當用戶點擊UI控件或者移走鼠標光標或者超時的時候，工具提示會消失。

當然，還值得注意的是鍵盤交互也是不容忽視的。使用Tab鍵切換按鈕的時候，也會顯示工具提示。

什么時候使用

·控制沒有文本標簽的按鈕/圖標。如果以個按鈕、標簽或者圖標沒有相應的文本標簽或者描述性內容，但是又需要一些簡短的解釋，那么工具提示可以很好地幫這些控件進行信息補足。

·需要進一步說明或者補充說明的地方。工具提示可以作為一種漸進式信息展示機制，避免了在屏幕上持續展示大量文本內容的狀況。如果是必須的內容，應當固化在UI中，讓用戶始終看到；而非必須的重要內容，又希望用戶能夠便捷地看到，工具提示就是一種很好的展現方式了。

·需要單獨的解釋的、少有人使用的功能或者特性。這類功能和特性因為本身比較特殊或者少有人使用，使得用戶在真正用到的時候，大多需要借助工具提示來了解和熟悉。

這是一個名為StackExchange的應用，如果沒有詳細的說明告知用戶這些是按鈕，估計會有用戶會以為它們是可以上下滾動的。

什么時候避免使用

也許最值得遵循的準則是，永遠不用使用工具提示去替代那些好的設計。如果一個按鈕或者控件需要永不不斷查看提示來了解它，那么它就算不上是好設計。調整一下，或者干脆重新設計吧。

在下面的情況下，也最好不要使用工具提示：

·當用戶需要同提示內容進行交互的時候。由于工具提示會隨著光標移走而無法使用，所以用戶是無法與其中內容=進行交互的。

·當用戶在移動端APP或者移動端網站上瀏覽的時候。同樣的邏輯，由于移動端設備是基于觸摸的，也許有的時候觸摸可以激活工具提示，但是這是違背用戶可預測的直覺交互的。

優秀的工具提示設計

好的工具提示通常會遵循下列的設計規則：

容易被發現

工具提示最大的問題在于，它自帶隱藏屬性，缺乏視覺線索，通常用戶的鼠標光標滑過相應控件的時候，指針狀態發生改變，這可能是為數不多的視覺線索。但是即便如此，用戶依然需要根據以往的經驗或者通過不斷試驗，去發現工具提示的存在。

所以，你可以通過一致的工具提示的設計，來提升用戶在同一網站上發現工具提示的機率，換句話來說，就是提升工具提示的可預測性。如果你為一個對象提供了工具提示，那么其他的同類的、相似的控件最好也添加工具提示以及用戶可能會需要的補充信息。有時候，這樣的做法是有一定挑戰性的，因為你必須保證提供的信息是有幫助的，并且不會過于明顯，影響設計。

提供合適的信息

好的工具提示會包含簡明而有用的信息：

·工具提示的彈出框最好是足夠簡短明了的短語和短句，以及格式化的文本。

不要使用大段難以閱讀的句子。

使用格式化和易于快速掃視閱讀的文本。

·工具提示的文本必須提供有效的信息。它不能簡單的重復已有的內容，而是要給出實用的、有用的的信息，否則就毫無意義了。

包含靜態的信息

用戶并不希望工具提示的內容發生改變，并且他們并不太能主動的、快速的發現其中內容發生了更改。一般而言，包含靜態的信息是最好的。

當然，例外情況也是存在的。通知區域的動態圖標。這些動態圖標本身是標識狀態改變的，隨著圖標狀態的改變，對應的工具提示也應該作出相應的調整。

應當處于合理的展示位

工具提示通常需要懸浮在UI控件附近，通常是在光標的頭部或者尾部（一般而言）。值得注意的是，它一定不能擋住輸入框、圖標等用戶關注的、感興趣的關鍵位置。

不要遮蓋住用戶需要參與交互的控件。

始終置于關鍵部位的周圍，不要覆蓋，哪怕這樣會原理光標的尖端。

結語

工具提示典型的輔助性的UI設計元素，但是它本身相當實用，在合適的時候出現，能夠讓整個UI的可用性得到極大的提升。

【Nick Babich 的用戶體驗設計經驗之談】

1. 輸入框設計：《講真，你真的懂得文本輸入框設計的那些潛規則么？》
2. 表單設計：《摳細節！設計高效好用表單的10個技巧》
3. 極簡APP UI：《超贊！幫你打造極簡風APP UI 的實用設計技巧》
4. 前端開發：《有法可依！幫你衡量一個動效是否合格的六個核心因素》
5. 面包屑：《并不簡單！網頁中為你指路的面包屑到底應當怎么使用？》
6. 移動端頁面：《跟著建議走！這樣的移動端網站設計才對頭》

原文地址：Medium
原文作者：Nick Babich
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com