UI設計之“信息過載”實戰案例

Sponsor

前言：產品經理通常會給到設計很多文案信息，作為UI設計師，如何去優化它呢？本文將分享關于UI設計的“信息過載”案例，我們來一起學習吧！

不知道大家做設計的時候是不是經常會遇到一種情況就是，當我們想從簡設計優化信息層級的時候，產品們恨不得把所有的文案說明都加到設計稿里，類似一種老媽子怕娃吃不飽穿不暖的操心，就擔心用戶會看不懂，因為看不懂功能而失去他們最重要的點擊率和kpi。

其實這種主觀擔憂有時雖無數據支撐，但是作為一個深入了解用戶的設計師還是可以理解的，因為有些用戶群體確實額那個啥，對智能設備和新興事物不是很了解，所以有些我們主觀覺得他們能懂的設計，他們還真就是不那么懂。

但是很顯然如果我們對產品這種“老媽子式擔憂”不加以轉化控制的話，整個ui出來就會因為信息過載而顯得非常臃腫。

所以我們除了用A、B 測試的方式獲取實際用戶數據來衡量是否可以對設計降噪以外，也可以嘗試“絞盡腦汁”去想一個方案達到兩者平衡。而至于為什么我推薦大家還是努力“絞盡腦汁”，因為實際項目開發中根本沒有那么多資源來讓你搞A/B。

這里我們來看第一個案例：

這是一個社交類群聊頁面改版前的列表樣式。

先撇開其他的信息分布問題和視覺優化，我們單純的關注下右邊的按鈕。

產品使用這個按鈕的初衷是為了讓用戶通過這個按鈕點擊去參與群聊。所以產品角度理解就是這個按鈕越明顯越好，越直白越好。

所以這個按鈕對于產品來說是非常OK的，但是對于有職業操守的我們來說，可能就不是那么OK了。

1.是因為它的引導性并不一定就最強，因為無法一眼識別（文字比圖形的識別速度永遠是慢的）。舉個有點味道的例子昂：大家回憶下是不是90%的公廁都會貼個超大的性別圖標，而不是只寫3個大字“男廁所”or“女廁所”？

2.這種樣式帶來的信息量相對較大，鋪開來看列表全局的時候就容易出現信息過載帶來的信息干擾。

那么作為niubility的設計師，在改版的時候我們的首選肯定是要對信息進行降噪，也就是說視覺表達簡化、符號化。

那么我們就獲得了以下的幾個方案：

but轉念一想就猜到了，產品接下來要說的話，“能不能把這個圖標改回加入聊天四個字，不然用戶可能看不懂”。所以又有了下面的設計方案：

右側短文案可以自定義，輔助理解。

這樣一來的話可以通過符號化的視覺提升引導效率，也可以用短輔助信息來輔助用戶理解，同時轉線為面，減少視覺模塊的分散與割裂感。

最后來看上加上左側信息優化的整體效果對比圖。

然后，我們再看一個案例。

一個社交類產品改版前的首頁列表樣式，先撇開別的，我們重點關注下“已認證”和“在線”標簽的視覺樣式。

這里的標簽存在2個問題：

1.占用了名字行比較大的空間，如果之后再拓展標簽形式，就放不下任何別的標簽了。

2.信息過載，要用戶閱讀的文字信息過多，影響識別效率

所以如果按照最簡化的邏輯，我們完全可以把在線和已認證完全符號化達到一舉兩得的效果，很多app也確實都是這么做的。

但回歸到特定的用戶群，普通的信息簡化表達無法滿足的情況下我們還可以通過哪些方式提升這些標簽的說明和存在感呢？

1.可以通過簡化文案、甚至更換文案都提升表意同時減少占用空間

2.變換布局與位置來重組信息結構，提升存在感與理解

3.增加新手引導浮層來進行強制說明

接下來來看下整體列表優化后的效果：

而這里“已認證”其實想表達的就是這個用戶是真實的人，認證過照片和本人的匹配度的那種，所以我們可以通過變化文案和位置來更好的進行視覺說明，另外也空出了名字旁的位置留給未來更多的權益標簽比如會員和貴族等。

在線的綠點可以通過調整整體大小和位置提升存在感的同時不占用重要的一級信息位置，如果還有表意不明確的顧慮可以采用和“搭訕”按鈕一樣的引導模式進行新手引導。

以上就是今天實戰小case的內容，希望對各位能有億點點幫助~

作者 | 柒爺
來源公眾號 | Nana的設計錦囊（id:NanaUxDesign）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。