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

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

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

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

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

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

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

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

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

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

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

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

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

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

崩！潰！

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

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

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

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

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

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

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

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

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

改良了3點：

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

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

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

類似的例子，我們平時經(jīng)常會看到，例如：

1，脈脈

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

2，Airbnb

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

3，163郵箱

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

小結(jié)

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

1. 注意分解信息，讓頁面的層級更明確；
2. 讓重要的信息跳出來，可以通過對字體加大加粗，色彩對比，元素分割等方式區(qū)分；
3. 嘗試著將文字圖形化，有趣的將信息展示出來。

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

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

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

題圖來自PEXELS，基于CC0協(xié)議