本文將輔助信息分為兩大類：重要或查看頻率較高的信息內容和重要程度或查看頻率較低的信息內容，以這兩方面為主對Web端輔助信息的設計進行了詳細地介紹。

Web端設計中存在很多輔助信息內容，這部分的設計看似很簡單，直接在相應的部分添加輔助信息即可，但深入思考后，其實是有很多值得探究的地方，包括輔助信息的位置，出現的時機及樣式等。

下面我將輔助信息按照重要程度和查看頻率來劃分，將其分為兩大類：第一類是重要或查看頻率較高的信息內容，第二類是重要程度較低或查看頻率較低的信息內容。

一、重要或查看頻率較高的輔助信息

這類信息是希望用戶注意到的，相對來說比較重要的內容，一般會直接顯示出來。

1. 重要的輔助信息提示

谷歌開發者平臺

Ant Design

這類信息非常重要，必須要讓用戶知道，一般帶有警示/提示的符號，位于操作內容的上方，用顏色區分并凸現出來，讓用戶能夠一眼就能注意到。這種控件相對于彈出框對用戶的干擾性較弱，但是又能讓用戶注意到。這種控件還可以帶有操作，例如查看詳情，關閉提示等。

2. 表單輔助信息

千牛應用平臺

Ant Design

常見于表單題目的輔助說明信息，文字內容較少的情況位于題目下方，文字內容較多的時則位于題目右側。用戶在完成表單時，遇到有問題的時候就可以直接查看相關的輔助說明信息，提高表單完成的效率。

3. 內容較多的輔助信息

百度開發者平臺

谷歌開發者平臺

對頁面中某個模塊的輔助說明，一般說明內容較多，被置于頁面右側，但是我發現目前各個網站中對這類說明信息的位置及控件形式處理的不夠細致。

百度開發者平臺中，將輔助信息放置于頁面右側頂部，這個輔助信息會讓人感到疑惑，這部分內容究竟是對哪部分內容的說明？實際上這部分信息是對頁面下方的內容說明，這就存在一個問題：用戶看輔助信息還需要滑動頁面到頂部查看信息，看完之后再滑動頁面到下方填寫內容，若又遇到問題了，又需要滑動到頂部查看，這樣連續地上下滑動頁面查看內容其實是很不好的體驗。

谷歌開發者平臺中的輔助信息也存在類似的問題，雖然輔助信息的位置位于題目右側，但并沒有說清楚是關于對哪個部分的輔助說明，如圖中有兩個文本框，那這個輔助信息是對哪個文本框的內容說明呢？如果頁面中有更多的內容，像這類輔助信息應該如何表示其與頁面中相關內容的聯系呢？

我對谷歌開發者平臺里的內容做了一個小的改進：

第一，給輔助信息添加了大標題，說明是關于哪部分內容的輔助說明；

第二，當對應的文本框處于hover及選中狀態時，相應的輔助說明信息也高亮，若用戶對該文本框的內容有問題時，就能清晰地知道應該是看哪部分輔助說明。

增加大標題

增加hover狀態

修改前后對比

二、重要程度較低或查看頻率較低的信息內容

這類輔助信息重要程度較低或者查看的頻率不高，被隱藏起來，當用戶需要的時候通過點擊或鼠標懸停在上方時顯示輔助信息。

1. 提示

Material Guidelines

Ant Design

這一種控件是最為常見的，鼠標懸停時出現輔助說明內容，例如對某個概念的解釋，對某個icon的說明，以及最常見的圖表中對某一點的數據說明。這種控件一般用于輔助信息內容較少的情況，若信息內容較多則不適合這種控件。

2. 側邊欄

阿里零售云

藍湖

第二種為側邊欄，在觸發某個操作后側邊欄從右側出來，這其實是安卓中的一個控件，點擊側邊欄外的部分或側邊欄中的關閉按鈕可關閉側邊欄，在安卓的控件規范里提到該控件的主要用法用：

1.顯示影響屏幕主要內容的操作列表，例如過濾器；

2.顯示補充內容和功能。

在阿里零售云平臺中采用側邊欄提供補充內容的填寫，在藍湖中采用側邊欄顯示元素的具體信息。這類控件能包含較多的內容，但被隱藏起來，用戶不容易發現，若是重要的信息則不應該使用該控件。

總結

本文總結了Web端輔助信息的設計，按照重要程度和查看頻率將其分為兩大類：第一類是重要或查看頻率較高的信息內容，第二類是重要程度較低或查看頻率較低的信息內容。

在網頁設計中涉及到輔助信息的設計時，需要考慮用戶使用場景，使用頻率，信息的重要程度選擇合適的控件，其次考慮控件的位置和樣式，要讓用戶能快速找到。

參考文獻：

https://material.io/design/

本文由 @Joya 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議