如何讓複雜(zá)的頁面變的更加簡單易用

在你實際工(gōng)作中(zhōng)，經常會遇到這樣的問題：

爲什麽我(wǒ)精心做的頁面，用戶不知(zhī)道怎麽用？爲什麽我(wǒ)做的頁面轉化率這麽低？

其實就像上面講的高速路上你來不及看的路牌，問題就出在了不知(zhī)道重點在哪？

作爲一(yī)名設計師，或許我(wǒ)們有時候沒辦法改變信息量的多少，但是我(wǒ)們能夠掌握用戶接收信息的方式，廢話(huà)不多說了，舉一(yī)個栗子：

這是一(yī)個會議室預訂的确認頁面，當你看到這樣一(yī)個頁面的時候什麽感覺？

崩！潰！

全是文字，你需要仔細閱讀每一(yī)個字才能确保信息的正确度，看的時候相當費(fèi)勁，太耗腦子了。

那我(wǒ)們一(yī)起分(fēn)析一(yī)下(xià)這個頁面的問題：

    1.整頁信息毫無重點，不知(zhī)道這個頁面想讓用戶看到什麽？視覺的差異性不明顯；

    2.層級不明顯，隻是做了一(yī)個預約信息和會議室信息的簡單分(fēn)類，太籠統，文字閱讀起來很困難。

我(wǒ)們看到了問題，那我(wǒ)們站在用戶的角度應該怎麽去(qù)設計這個頁面呢？讓我(wǒ)們一(yī)起理清思路：

1，讓你的頁面看起來更有層級性，把内容相關聯的放(fàng)到一(yī)組，利用親密性，讓整個頁面的邏輯看起來更清晰；對于同類信息要保證一(yī)緻性，不同信息要體(tǐ)現出來差異性，不然會造成誤解，人們天然覺得樣式一(yī)樣的信息是相關聯的；

2，将重點信息突出展示，明确用戶想看到什麽？你又(yòu)想讓用戶看到什麽？不要太高估用戶的注意力，對于重點信息，應該放(fàng)大(dà)十倍去(qù)對待；

3，文字太枯燥，可以将文字圖形化，易于信息接受。

所以，上面的頁面還可以這樣來展示：

改良了 3 點：

    1，用不同的間距表明頁面内容的層級關系，使頁面看起來更有層次感，同一(yī)組的元素相互靠近間距爲20px，不同組距離(lí)分(fēn)開(kāi)間距爲50px，劃定固定高度；

    2，将重點信息進行重點展示，對于預約會議室的公司來說，會議室名稱，與會時間，誰預訂的是 重要的部分(fēn)，所以将重要信息進行了字号，顔色變化的處理，将時間元素用類似日曆的形式展示出來用區别的顔色把積分(fēn)展示出來，用戶對信息全盤快速接受；

    3，将會議室設備用圖标的形式展示，一(yī)目了然。

類似的例子，我(wǒ)們平時經常會看到，例如：

1、脈脈

對于個人信息采用模塊化的形式，主要内容和次要内容明顯分(fēn)開(kāi)，每個模塊之間的區分(fēn)也很明顯，每個功能的入口采用圖+文結合的形式，這樣使得頁面顯得靈活多樣，突出特色模塊，緩解用戶的閱讀疲勞，直切主題。

2、Airbnb

這是Airbnb中(zhōng)房源預定詳情頁面第一(yī)屏顯示的内容，在簡潔的白(bái)色背景上，不同層級的标題采用了不同的字号和顔色，層級越高字号越大(dà)，房間内部陳設通過圖标+文字表達，頁面底部的預定按鈕在整個頁面突出可見，對比強烈，毫無疑慮引導着這個頁面的主要操作。

3、 163 郵箱

這是 163 郵箱的收件箱頁面，對于用戶來說，未讀的郵件更爲重要，所以對于未讀信息和已讀信息在字體(tǐ)粗細和字體(tǐ)顔色做了明顯的區分(fēn)，已讀信息弱化，此外(wài)在未讀信息前還加了藍(lán)色點标示，已讀信息則去(qù)掉。讓用戶在查看郵件的時候可以第一(yī)眼看到重要信息。
小(xiǎo)結

很多時候，當我(wǒ)們拿到産品原型的時候急于去(qù)展示信息，而忘了思考我(wǒ)們拿到的信息這麽多，對于用戶來說他想看到什麽？而你又(yòu)想怎麽展示重要信息，關鍵時候記住這幾招：

    注意分(fēn)解信息，讓頁面的層級更明确；

    讓重要的信息跳出來，可以通過對字體(tǐ)加大(dà)加粗，色彩對比，元素分(fēn)割等方式區分(fēn)；

    嘗試着将文字圖形化，有趣的将信息展示出來。

這或許就是爲什麽百度隻有一(yī)個搜索欄，IOS11 中(zhōng)大(dà)字體(tǐ)流行的原因。

好了，分(fēn)享完畢，有任何問題歡迎進一(yī)步交流。