如何讓復雜的頁面更加易用？

注：為什么我精心做的頁面，用戶不知道怎么用？為什么我做的頁面轉化率這么低？其實問題就出在了不知道重點在哪。

文/@隔壁劉設計

前兩天在古典老師的文章看到這樣一個故事。

在瑞士日內瓦湖邊，有一條長隧道，投入使用的時候，工程師遇到一個問題：很多車主在隧道開車時，會打開車燈，但是出了隧道，一看到好的風景就會停車拍照，回來發現電量耗光了。工程師決定在隧道出口立一塊牌子提醒大家關車燈?！罢堦P閉車燈”。但是這樣做，會有另外一個問題，很多車主是晚上進出隧道的，如果他們看到這個牌子，關掉車燈，又可能會遇到危險。

有人說，牌子寫上“如果是晚上，請保持燈打開；如果是白天，請出隧道后關閉車燈?！?/p>

我想象了一下場景，給這個場景配了個圖：

這個答案看似很周全，如果當時的車速是 120 公里/時，等你看完這么多字，再反應一下，估計已經撞車了。

工程師最后把牌子變成了一個提問：“你的燈還亮著嗎？”

對，你沒有看錯，就是這么一個簡單的答案創造性地提供了一個解決方案。如果是白天，那這塊牌子就是提醒車主關燈，如果是晚上則是提醒車主開燈。很精簡的一句話，這也是我們今天要討論的主題

如何讓復雜的頁面變的更加簡單易用？

在你實際工作中，經常會遇到這樣的問題：

為什么我精心做的頁面，用戶不知道怎么用？為什么我做的頁面轉化率這么低？

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

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

這是一個會議室預訂的確認頁面，當你看到這樣一個頁面的時候什么感覺？

崩！潰！

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

那我們一起分析一下這個頁面的問題：

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

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

我們看到了問題，那我們站在用戶的角度應該怎么去設計這個頁面呢？讓我們一起理清思路：

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

2，將重點信息突出展示，明確用戶想看到什么？你又想讓用戶看到什么？不要太高估用戶的注意力，對于重點信息，應該放大十倍去對待；

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

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

改良了 3 點：

1，用不同的間距表明頁面內容的層級關系，使頁面看起來更有層次感，同一組的元素相互靠近間距為20px，不同組距離分開間距為50px，劃定固定高度；

2，將重點信息進行重點展示，對于預約會議室的公司來說，會議室名稱，與會時間，誰預訂的是最重要的部分，所以將重要信息進行了字號，顏色變化的處理，將時間元素用類似日歷的形式展示出來用區別的顏色把積分展示出來，用戶對信息全盤快速接受；

3，將會議室設備用圖標的形式展示，一目了然。

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

1、脈脈

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

2、Airbnb

這是Airbnb中房源預定詳情頁面第一屏顯示的內容，在簡潔的白色背景上，不同層級的標題采用了不同的字號和顏色，層級越高字號越大，房間內部陳設通過圖標+文字表達，頁面底部的預定按鈕在整個頁面突出可見，對比強烈，毫無疑慮引導著這個頁面的主要操作。

3、 163 郵箱

這是 163 郵箱的收件箱頁面，對于用戶來說，未讀的郵件更為重要，所以對于未讀信息和已讀信息在字體粗細和字體顏色做了明顯的區分，已讀信息弱化，此外在未讀信息前還加了藍色點標示，已讀信息則去掉。讓用戶在查看郵件的時候可以第一眼看到重要信息。

小結

很多時候，當我們拿到產品原型的時候急于去展示信息，而忘了思考我們拿到的信息這么多，對于用戶來說他想看到什么？而你又想怎么展示重要信息，關鍵時候記住這幾招：

1. 注意分解信息，讓頁面的層級更明確；

2. 讓重要的信息跳出來，可以通過對字體加大加粗，色彩對比，元素分割等方式區分；

3. 嘗試著將文字圖形化，有趣的將信息展示出來。

這或許就是為什么百度只有一個搜索欄，IOS11 中大字體流行的原因。

好了，分享完畢，有任何問題歡迎進一步交流。

(編輯：小酷)