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

TomokoMonte 8年前發布 | 5K 次閱讀用戶界面設計

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

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

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

工作原理

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

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

什么時候使用

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

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

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

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

什么時候避免使用

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

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

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

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

優秀的工具提示設計

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

容易被發現

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

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

提供合適的信息

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

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