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

在(exist)你實際工作(do)中，經常會遇到(arrive)這(this)樣的(of)問題：

爲(for)什麽我(I)精心做的(of)頁面，用(use)戶不(No)知道怎麽用(use)？爲(for)什麽我(I)做的(of)頁面轉化率這(this)麽低？

其實就像上(superior)面講的(of)高速路上(superior)你來(Come)不(No)及看的(of)路牌，問題就出(out)在(exist)了(Got it)不(No)知道重點在(exist)哪？

作(do)爲(for)一(one)名設計師，或許我(I)們(them)有時(hour)候沒辦法改變信息量的(of)多少，但是(yes)我(I)們(them)能夠掌握用(use)戶接收信息的(of)方式，廢話不(No)多說了(Got it)，舉一(one)個(indivual)栗子：

這(this)是(yes)一(one)個(indivual)會議室預訂的(of)确認頁面，當你看到(arrive)這(this)樣一(one)個(indivual)頁面的(of)時(hour)候什麽感覺？

崩！潰！

全是(yes)文字，你需要(want)仔細閱讀每一(one)個(indivual)字才能确保信息的(of)正确度，看的(of)時(hour)候相當費勁，太耗腦子了(Got it)。

那我(I)們(them)一(one)起分析一(one)下這(this)個(indivual)頁面的(of)問題：

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

    2.層級不(No)明顯，隻是(yes)做了(Got it)一(one)個(indivual)預約信息和(and)會議室信息的(of)簡單分類，太籠統，文字閱讀起來(Come)很困難。

我(I)們(them)看到(arrive)了(Got it)問題，那我(I)們(them)站在(exist)用(use)戶的(of)角度應該怎麽去設計這(this)個(indivual)頁面呢？讓我(I)們(them)一(one)起理清思路：

1，讓你的(of)頁面看起來(Come)更有層級性，把内容相關聯的(of)放到(arrive)一(one)組，利用(use)親密性，讓整個(indivual)頁面的(of)邏輯看起來(Come)更清晰；對于(At)同類信息要(want)保證一(one)緻性，不(No)同信息要(want)體現出(out)來(Come)差異性，不(No)然會造成誤解，人(people)們(them)天然覺得樣式一(one)樣的(of)信息是(yes)相關聯的(of)；

2，将重點信息突出(out)展示，明确用(use)戶想看到(arrive)什麽？你又想讓用(use)戶看到(arrive)什麽？不(No)要(want)太高估用(use)戶的(of)注意力，對于(At)重點信息，應該放大(big)十倍去對待；

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

所以(by)，上(superior)面的(of)頁面還可以(by)這(this)樣來(Come)展示：

改良了(Got it) 3 點：

    1，用(use)不(No)同的(of)間距表明頁面内容的(of)層級關系，使頁面看起來(Come)更有層次感，同一(one)組的(of)元素相互靠近間距爲(for)20px，不(No)同組距離分開間距爲(for)50px，劃定固定高度；

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

    3，将會議室設備用(use)圖标的(of)形式展示，一(one)目了(Got it)然。

類似的(of)例子，我(I)們(them)平時(hour)經常會看到(arrive)，例如：

1、脈脈

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

2、Airbnb

這(this)是(yes)Airbnb中房源預定詳情頁面第一(one)屏顯示的(of)内容，在(exist)簡潔的(of)白色背景上(superior)，不(No)同層級的(of)标題采用(use)了(Got it)不(No)同的(of)字号和(and)顔色，層級越高字号越大(big)，房間内部陳設通過圖标+文字表達，頁面底部的(of)預定按鈕在(exist)整個(indivual)頁面突出(out)可見，對比強烈，毫無疑慮引導着這(this)個(indivual)頁面的(of)主要(want)操作(do)。

3、 163 郵箱

這(this)是(yes) 163 郵箱的(of)收件箱頁面，對于(At)用(use)戶來(Come)說，未讀的(of)郵件更爲(for)重要(want)，所以(by)對于(At)未讀信息和(and)已讀信息在(exist)字體粗細和(and)字體顔色做了(Got it)明顯的(of)區分，已讀信息弱化，此外在(exist)未讀信息前還加了(Got it)藍色點标示，已讀信息則去掉。讓用(use)戶在(exist)查看郵件的(of)時(hour)候可以(by)第一(one)眼看到(arrive)重要(want)信息。
小結

很多時(hour)候，當我(I)們(them)拿到(arrive)産品原型的(of)時(hour)候急于(At)去展示信息，而忘了(Got it)思考我(I)們(them)拿到(arrive)的(of)信息這(this)麽多，對于(At)用(use)戶來(Come)說他(he)想看到(arrive)什麽？而你又想怎麽展示重要(want)信息，關鍵時(hour)候記住這(this)幾招：

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

    讓重要(want)的(of)信息跳出(out)來(Come)，可以(by)通過對字體加大(big)加粗，色彩對比，元素分割等方式區分；

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

這(this)或許就是(yes)爲(for)什麽百度隻有一(one)個(indivual)搜索欄，IOS11 中大(big)字體流行的(of)原因。

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