20世紀(jì)70年代，特格拉姆首次提出“信息設(shè)計(jì)”，不同于“精美的藝術(shù)表現(xiàn)”圖形設(shè)計(jì)的是，信息設(shè)計(jì)更強(qiáng)調(diào)“進(jìn)行有性能的信息傳遞”。這篇文章，作者總結(jié)了5條信息設(shè)計(jì)的原則，幫助大家更好進(jìn)行信息的傳遞。

信息設(shè)計(jì)是除了圖形以外的文字、數(shù)據(jù)等內(nèi)容設(shè)計(jì)，通過信息設(shè)計(jì)可以提高人們應(yīng)用信息的性能，在眾多信息中能夠迅速找到自己所需要的，并且使得信息能被有效地理解。

所以，想讓用戶點(diǎn)進(jìn)你的內(nèi)容，關(guān)鍵需要讓“信息”獲得有效的展示，而不是強(qiáng)調(diào)如何藝術(shù)性的表達(dá)。

因此，以下總結(jié)了5條信息設(shè)計(jì)的原則，同時結(jié)合了我過去幾年在不同Web App產(chǎn)品中的實(shí)際應(yīng)用。

一、靠近與動態(tài)

“靠近”指的是信息需要靠近行為目標(biāo)，顯示在用戶的中央凹區(qū)域內(nèi)；“動態(tài)”可理解為“變化”的，但不僅是內(nèi)容的變化，還需要有位置樣式的變化。

因?yàn)槿藗兊囊曈X系統(tǒng)分為兩個區(qū)域，一個是中央凹區(qū)域，而剩余的是邊緣視覺區(qū)域（相當(dāng)于視覺盲區(qū)）。

人們可以輕易的感知到中央凹區(qū)域里的事物，而對于落在邊緣視覺區(qū)域的事物，他們的存在都很難被發(fā)現(xiàn)——除非這個事物是動態(tài)的。

在界面中，這將會影響信息的可見性。

在實(shí)際操作過程中，右邊的提示設(shè)計(jì)比左邊的更容易讓用戶看到

比如在我們之前的后臺，有個關(guān)于當(dāng)前“網(wǎng)絡(luò)狀態(tài)”的信息設(shè)計(jì)：在正常情況下，界面頂部會顯示“網(wǎng)絡(luò)良好”的橫幅，當(dāng)用戶沒聯(lián)網(wǎng)的時候，頂部的橫幅內(nèi)容會變?yōu)椤熬W(wǎng)絡(luò)異?！薄?/p>

但當(dāng)時我們被用戶投訴了。

因?yàn)橛脩粼诤笈_中進(jìn)行的都是主流程操作，根本沒注意到頁面頂部的信息變化，進(jìn)而導(dǎo)致了后面操作的失敗。

所以后來我們將這里的提示信息進(jìn)行調(diào)整，只有異常情況才會動態(tài)顯示toast提示，以引起用戶的注意。

讓提示信息顯示在用戶的目標(biāo)行為附近，或通過動態(tài)的展示以引起用戶的注意。

二、適應(yīng)與側(cè)重

“適應(yīng)”指信息設(shè)計(jì)需要考慮產(chǎn)品屬性與應(yīng)用場景，“側(cè)重”是根據(jù)不同場景需求，適當(dāng)調(diào)整信息呈現(xiàn)的側(cè)重點(diǎn)。

不同的產(chǎn)品屬性與應(yīng)用場景，對應(yīng)不用的用戶人群，這些人群的需求也相差迥異。

相比左邊的設(shè)計(jì)僅是把信息“添加”進(jìn)頁面中，右邊的設(shè)計(jì)同時適當(dāng)調(diào)整了信息層級，讓信息效用于當(dāng)下的場景

比如商品列表：

C端商品列表會包含商品圖、商品標(biāo)題與價格，而商品價格通常被重點(diǎn)突出用來吸引消費(fèi)者；但在B端產(chǎn)品中，用戶群體是我們的商家，他們最關(guān)注的其實(shí)是這個商品“我賣了多少份”、“我賺了多少錢”，商品價格反而不是最重要的點(diǎn)。

所以在做B端商品列表時，重新設(shè)計(jì)了信息層級以適應(yīng)當(dāng)前的商家場景，側(cè)重展示用戶最關(guān)注的信息。

根據(jù)不同的場景適當(dāng)調(diào)整設(shè)計(jì)，有側(cè)重性地呈現(xiàn)信息以提高使用效率。

三、前置、直達(dá)

嚴(yán)謹(jǐn)?shù)目蚣芙缍?、完整的信息展示有時候并不是最佳解決方案。

“前置”“直達(dá)”意為將二級頁面（或獨(dú)立功能）信息前置于主頁面中展示，為用戶提供更快捷的直達(dá)入口。

其實(shí)對于大部分用戶來說，用的只是一個產(chǎn)品中的某個核心功能而不是全部功能；如果從使用效率上講，將這個核心功能入口前置展示在主頁面，要比用戶先進(jìn)入二級頁面、再在全部功能中尋找這個核心功能的使用效率更高。

特別是對于后臺這種專業(yè)型工具來說，對產(chǎn)品精準(zhǔn)、便捷的訴求會更加明顯。

在實(shí)際運(yùn)用場景下，右邊的設(shè)計(jì)不僅能快速進(jìn)行操作，而且這個開關(guān)與列表、更多設(shè)置選項(xiàng)之間的承接關(guān)系也表達(dá)地更加清晰

比如當(dāng)時我們后臺中有一個邀請功能，主頁是歷史邀請列表，二級頁設(shè)置邀請條件。在這個二級頁中，包含了“是否接受邀請”的開關(guān)、對邀請級別與粉絲量的限制；如果關(guān)閉這個開關(guān)，則此時二級頁面中剩余的功能設(shè)置將失效。

所以我們將這個開關(guān)前置到主頁中，通過將關(guān)鍵功能前置，打破頁面層級間的分隔，幫助用戶直達(dá)關(guān)鍵功能。

四、沒必要的簡化

保持簡潔似乎是設(shè)計(jì)師恒定不變的主題——在許多常規(guī)頁面中，如果一個內(nèi)容包含ABCD不同分類，這些分類信息基本上會被“合并簡化”，折疊成左右滑動的菜單欄樣式。

不過，這種簡化折疊需慎用。

當(dāng)用戶進(jìn)入一個頁面后，會快速瀏覽頁面中的主要內(nèi)容（或占比大的模塊），且瀏覽習(xí)慣以上下滑動為主；所以此時占比較小的左右滑動的菜單欄，特別是位于菜單欄第2項(xiàng)后的內(nèi)容，會被大部分用戶自動忽略。

比如在我們之前的后臺產(chǎn)品設(shè)計(jì)中，其中的活動類型切換采用的左右滑動菜單欄形式，這也間接導(dǎo)致了當(dāng)時位于第2、3項(xiàng)菜單中的活動選中率特別低。

對于一些重要功能的切換，右邊的設(shè)計(jì)比左邊更能引起用戶注意，讓用戶進(jìn)入選擇的狀態(tài)

后來我們將這里進(jìn)行優(yōu)化，把原本頂部滑動菜單欄進(jìn)行下移，變成3個展開的選項(xiàng)；繞開用戶的自動忽略后發(fā)現(xiàn)，原本第2、3項(xiàng)活動的點(diǎn)擊率獲得了回升。

折疊為左右滑動的菜單欄，由于用戶瀏覽習(xí)慣的影響，通常第1項(xiàng)后的內(nèi)容會被用戶自動忽略。

五、默認(rèn)與引導(dǎo)

“默認(rèn)”指界面中一些默認(rèn)選項(xiàng)，這些默認(rèn)的設(shè)計(jì)可幫助我們引導(dǎo)用戶的操作，同時對于用戶而言，他們并不會輕易改變這些默認(rèn)信息。

因?yàn)橛脩魧τ谟锌赡軐?dǎo)致自己失去一些權(quán)利、或其他什么的時候會表現(xiàn)的無比敏感——當(dāng)用戶面對不同選項(xiàng)時，如果此時有個默認(rèn)選項(xiàng)（不選擇）將比選擇一個可能導(dǎo)致自己失去什么的選項(xiàng)更能獲得安慰。

所以被動的選擇默認(rèn)狀態(tài)，會讓用戶感到更安全、更簡單，和更小的風(fēng)險。

基于這種默認(rèn)項(xiàng)心理，也可以引導(dǎo)用戶按我們推薦的路徑操作，盡量減少異常情況的發(fā)生。

比如我們后臺設(shè)計(jì)中有個數(shù)據(jù)分析模塊，用戶可篩選不同時間段查看數(shù)據(jù)情況；但如果用戶頻繁切換時間段，將會增加我們系統(tǒng)的計(jì)算負(fù)荷進(jìn)而導(dǎo)致數(shù)據(jù)異常。

面對不同篩選項(xiàng)時，左邊的設(shè)計(jì)給用戶的第一反應(yīng)是“這里還有2個選項(xiàng)，我切換試試有什么反應(yīng)”；右邊的默認(rèn)項(xiàng)設(shè)計(jì)可有效削弱用戶對“可選擇”的敏感度

所以我們將時間篩選中的某一項(xiàng)作為默認(rèn)項(xiàng)，并將其他時間選項(xiàng)收起，用戶來回切換的頻率減少，相應(yīng)也降低了系統(tǒng)的計(jì)算負(fù)荷。

運(yùn)用默認(rèn)項(xiàng)設(shè)計(jì)，營造用戶在使用過程中的安全感，引導(dǎo)用戶的同時盡量減少異常情況的發(fā)生。

六、寫在最后

以上關(guān)于信息設(shè)計(jì)的原則，幫助我們將產(chǎn)品信息有效傳遞給用戶。

不過除了“信息傳遞”的使命之外，設(shè)計(jì)也在不斷地探索著對用戶行為與決策的推動，嘗試著各種提升用戶轉(zhuǎn)化的可能。

下周，我將更詳細(xì)、深入地為大家分享，過去幾年我在不同Web App產(chǎn)品中如何應(yīng)用認(rèn)知行為學(xué)，助推用戶行為、提升產(chǎn)品轉(zhuǎn)化。