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

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

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

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

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

1. 重要的輔助信息提示

谷歌開發(fā)者平臺

Ant Design

這類信息非常重要，必須要讓用戶知道，一般帶有警示/提示的符號，位于操作內(nèi)容的上方，用顏色區(qū)分并凸現(xiàn)出來，讓用戶能夠一眼就能注意到。這種控件相對于彈出框?qū)τ脩舻母蓴_性較弱，但是又能讓用戶注意到。這種控件還可以帶有操作，例如查看詳情，關(guān)閉提示等。

2. 表單輔助信息

千牛應(yīng)用平臺

Ant Design

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

3. 內(nèi)容較多的輔助信息

百度開發(fā)者平臺

谷歌開發(fā)者平臺

對頁面中某個模塊的輔助說明，一般說明內(nèi)容較多，被置于頁面右側(cè)，但是我發(fā)現(xiàn)目前各個網(wǎng)站中對這類說明信息的位置及控件形式處理的不夠細(xì)致。

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

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

我對谷歌開發(fā)者平臺里的內(nèi)容做了一個小的改進(jìn)：

第一，給輔助信息添加了大標(biāo)題，說明是關(guān)于哪部分內(nèi)容的輔助說明；

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

增加大標(biāo)題

增加hover狀態(tài)

修改前后對比

二、重要程度較低或查看頻率較低的信息內(nèi)容

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

1. 提示

Material Guidelines

Ant Design

這一種控件是最為常見的，鼠標(biāo)懸停時出現(xiàn)輔助說明內(nèi)容，例如對某個概念的解釋，對某個icon的說明，以及最常見的圖表中對某一點(diǎn)的數(shù)據(jù)說明。這種控件一般用于輔助信息內(nèi)容較少的情況，若信息內(nèi)容較多則不適合這種控件。

2. 側(cè)邊欄

阿里零售云

藍(lán)湖

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

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

2.顯示補(bǔ)充內(nèi)容和功能。

在阿里零售云平臺中采用側(cè)邊欄提供補(bǔ)充內(nèi)容的填寫，在藍(lán)湖中采用側(cè)邊欄顯示元素的具體信息。這類控件能包含較多的內(nèi)容，但被隱藏起來，用戶不容易發(fā)現(xiàn)，若是重要的信息則不應(yīng)該使用該控件。

總結(jié)

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

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

參考文獻(xiàn)：

https://material.io/design/

本文由 @Joya 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議