如何在產品設計里建立良好的信息層次感？

數十萬互聯網從業者的共同關注！

作者：林奕龍，作者授權早讀課轉載。

來源：1區18號

編輯：Verna

我們在平時體驗產品的過程中，總發現很多產品的界面很花很亂，乍眼過去，都是重點，不知點何處，一臉懵逼。那問題出現在哪裡？其實就是沒有建立良好的信息層次感。

我們玩攝影的同學都知道，好的攝影作品都是有層次感的，而層次感如何體現呢，就是通過前景，中景，後景的強弱關係進而來體現的。如果把前景作為視覺中心，那麼前景一定最大最清晰最明亮，中景是較模糊較暗的，遠景是最模糊最暗的。那如果把中景作為視覺中心點的話，那麼中景一定是最清晰最明亮，而前景是較模糊和較暗的，遠景是最模糊最暗的。如果這樣去處理的話，整個照片就顯得很有層次感，看著就舒服自然。因為我們人眼就是這樣地去看待這個美麗的世界的。至於如何加強或弱化，無非就是大小，明暗，和清晰度。

回到開頭中提到產品界面體驗糟糕的原因，是沒有建立良好的信息層次感。那麼，在產品設計中何為信息層次感？其實就是誰重要，誰次要，哪些是要整合在一起的，哪些是分隔開來的。而接下來就是利用大小，顏色，對比，對齊，反覆，留白，動效等元素來達成你想要的信息層次感。

而在建立良好的信息層次感的過程中，就涉及了兩個核心點。一個是信息層次區分是否合理？另外一個就是信息層次的展現是否有效？

如何將信息層次區分得合理？

1、優先順序的確認

（1）依據用戶操作行為來確認優先順序

今年最火的行業無非就是共享單車，我們來看看佔市場份額第一的OFO小黃車和第二的摩拜，OFO的用戶操作行為流程主要為掃碼用車 - 展示解鎖碼 - 手動開鎖 - 騎車 - 手動關鎖 - 結束行程 - 支付行程費用 - 分享紅包 - 騎行抽獎，摩拜的用戶操作行為流程主要為掃碼用車 - 電子開鎖 - 領取紅包 - 騎車 - 手動關鎖 - 支付行程費用 - 打開紅包聊點題外話，從流程上來看，OFO的物理鎖在流程上至少多出了「展示解鎖碼」，「手動開鎖」，「結束行程」三步，硬體上的硬傷導致沒有摩拜操作簡單。我們看到二者的第一步都是掃碼用車，也是用戶最核心的操作之一，來看看二者首頁的界面。

從二者的首頁界面來看，OFO的信息層次感會優於摩拜，OFO的信息優先順序為掃碼用車>地圖上的紅包信息>右上角的活動信息推薦> OFO小黃車LOGO>底部用戶和活動中心的按鈕>保護按鈕>重新定位按鈕;而摩拜的信息優先順序為地圖上的紅包信息>標籤>掃碼開鎖>活動信息推薦>紅包按鈕和客服按鈕>側邊欄按鈕，搜索按鈕，消息按鈕>刷新按鈕，重新定位按鈕。掃碼開鎖作為用戶的核心操作行為按鈕，OFO將優先順序放在第一位，明顯會比摩拜將其放在第三位更加合理，用戶在打開產品界面時，OFO會比摩拜更容易操作，更容易找到自己最核心的操作按鈕，乾脆利落不困惑。用戶在絕大部分場景下，找到一部共享單車後，趕緊掃碼開鎖，趕著去見朋友或者上班要遲到了或者要趕最近一班地鐵等，而不是要看看這輛單車有沒有紅包拿（有當然更好啦），有當然極少部分中年大媽買完菜後實在是沒事幹，那就騎幾輛車湊一下10塊錢提現一下（反正也可以減肥）

（2）依據業務目標來確認優先順序

「五導家設計法」中對業務目標的定義是：用某策略給目標用戶帶來某價值，以實現某變現方式。「變現方式」就是商業行為的本質，所以在設計信息層次的時候，肯定離不開業務目標，所以自然而然要考慮到業務目標本身的優先順序。比如共享單車裡的紅包就是業務目標之一，紅包雖然是給用戶福利，是商業流血，但是紅包背後的邏輯是拉新及留住老用戶，只有搶佔更多的市場份額，才能將企業的估值做大，才能達成產品想要的商業模式，本質上還是「變現方式」。

而如何權衡用戶行為流程和業務目標之間的平衡性？筆者的意見是，可以根據羅振宇在跨年演講「時間的朋友」中提到的觀點，產品基本上可以以時間為維度區分成兩種：一種是提供服務，優化用戶的時間;另一種是讓用戶上癮，拖住用戶的時間顯然，共享單車屬於第一種，是優化用戶時間的產品，所以應該優先滿足於用戶行為流程。而至於第二種，讓用戶上癮，拖住用戶時間的產品，可以讓業務目標的優先順序加強，當然前提是不破壞用戶體驗。比如在直播軟體中，兩個掛件的優先順序應該是最高的，在盛典的時候尤為明顯，但這問題不大，因為這是在拖住用戶時間的產品上，而且並沒有明顯地破壞到用戶體驗。

2、對信息之間的關係進行區分和歸類

信息之間的關係有並列，關聯，包含，因果等，而每種關係都可以通過多種視覺表現形式來傳達。

信息的並列

WORD軟體中對眾多並列功能信息的分塊區分，能讓用戶在大塊中尋找小塊，提高識別效率，當我們要對文字做對齊處理時，能快速地找到第三模塊去進行操作，而不受其他模塊的干擾。

信息的關聯

在一個頁面里往往會有各種信息，如果這些信息都是一成不變地羅列，用戶找起來會很費勁。這時就需要將關聯的信息放在一個的信息放在同一個區域，沒有關聯信息的區域之間做好區分。蘋果的設置里關聯信息就放在同一個區域，用白底來表達同一個區域，而信息之間用灰線條做弱區分，而沒有關聯關係之間的區域用一定高度的灰底做強區分，信息層次感就建立起來了。

信息的包含

像微信里左邊聊天群聊或者對象和右側的聊天內容是包含關係，所以通過左右位置和加灰底色的方式和來表達這種包含關係，用戶一目了然右側的信息是屬於左側加灰底色目錄的內容。

信息的因果

例如全面?歌的音準線和PERFECT×8就是屬於因果關係，用戶音準唱得好，圓點就會在音準線上，音準線會變紅，而完美就會顯示出來，完美的位置剛好在音準線區域上面（不會有交叉），而作為用戶的正反饋信息，會通過顏色上凸顯和動效來強化，用戶很好理解是自己唱得好，而且很爽。有因才有果，而有果的存在和期待才讓用戶更關注因，而因果同時存在時，在信息層級關係上，果會強於因。

如何將信息層次展現得有效？

首先如何理解「有效」，用戶看到的是否是設計師想要表達的結果。那有效的更高境界是巧妙，用戶如果是看到賞心悅目的界面時，還能發出「嘿哈，有意思」，那就是對設計師最大的肯定。

1、大小

較大的物體當然具有更大的吸引力。尺寸的控制是建立信息層次感的有效工具，最大的元素大部分情況是具有最大的重要性，最小的元素應該是最不重要的，而大小的控制就要考慮到整體頁面的協調性，大要大得顯眼而且舒服，小要小得能看得見（不要低於平台官方規範的最小範圍）

2.顏色

顏色可以在信息組織上和個性表達上起到作用。醒目，對比強烈的顏色在特殊的元素中會引起更大的關注（例如按鈕，錯誤信息或者超鏈接等），當作為一個體現個性的工具時，顏色可以延伸到體現更精鍊的層次感上，用到豪華，舒適的顏色將給頁面帶來感情上的吸引力。顏色可以影響產品的每一個角落，從商標到整體形象。但在一個頁面里顏色的種類不宜過多，要有主色和輔色之分。灰和白是最適合去做信息的區分。

3.對比

對比體現出相對的重要性。字體大小上戲劇性的變化將傳遞出某個信息的重要性或者需要某些特別關注。從較亮的背景轉到一個較暗的較暗的背景將較快地區分出核心內容與頁腳內容。

4.對齊

對齊體現出元素的組織關係，可以簡單到僅僅用「主欄」和「側欄」區分對齊可以讓一個產品頁面看起來比較規範整齊對齊一般有三種方式：左對齊，居中對齊，右對齊在文字運用比較多的是左對齊和左對齊，大篇幅的文字右對齊可讀性上會比較差，但在產品右側元素（長短不一）一般使用右對齊。在產品的界面里，會有很多元素，而元素的對齊分布讓整個界面看起來整齊簡潔，井然有序，內容劃分也變得比較明確，元素過於隨意擺放沒有規律，會讓界面顯得雜亂無章。

5.反覆

反覆體現了元素之間的關聯性，如果所有段落的文字都是灰色的，當一個用戶在另外一個地方看到同樣的灰色文字時，用戶會自燃地理解成其中的另一段;當遇到一個藍色的鏈接或者一個黑色的標題時，會理解成段落以外的東西。

6.留白

適當的留白能夠很好地指引用戶尋找到所需要的信息，提高用戶體驗。留白可以給予設計呼吸的空間，提供布局上的平衡。留白區域的環繞與陪襯，能很好地襯托出中心區域的信息。之前和公司的另外一個設計師在探討如何讓產品顯得有逼格，就是讓產品界面顯得極其簡潔，留白就是一個很好的手段之一。

建立信息層次感的作用到底有哪些呢？

1.能讓用戶在有限的時間裡，快速獲取和理解有興趣的信息，並因此產生下一步行為;

2.可體現出設計師的專業性，設計師應有意識地分析信息優先順序，了解那些視覺表現手法可以建立信息層次以及每一種方法背後的理論依據，而不僅僅是憑感覺去做設計。

總結，好的產品設計不是靠抄襲競品，也不能僅僅靠突發奇想的靈感，而是靠其背後的設計邏輯，產品好的視覺表現應服務於其富有邏輯的信息層次。

本文由作者授權早讀課發表，轉載請聯繫作者。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！