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

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

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

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

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

1. 重要的輔助信息提示

谷歌開(kāi)發(fā)者平臺(tái)

Ant Design

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

2. 表單輔助信息

千牛應(yīng)用平臺(tái)

Ant Design

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

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

百度開(kāi)發(fā)者平臺(tái)

谷歌開(kāi)發(fā)者平臺(tái)

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

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

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

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

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

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

增加大標(biāo)題

增加hover狀態(tài)

修改前后對(duì)比

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

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

1. 提示

Material Guidelines

Ant Design

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

2. 側(cè)邊欄

阿里零售云

藍(lán)湖

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

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

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

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

總結(jié)

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

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

參考文獻(xiàn)：

https://material.io/design/

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

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