起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識個人中心該怎么畫？
導語：凡是有用戶體系的產品都應具備個人中心頁面，看似結構簡單的個人中心實則包含了眾多容易被忽視的設計細節。本文作者整理、歸納和總結了個人中心頁面的設計規律，為大家提供一些設計參考。
一、個人中心與個人主頁的區別
- 個人中心：與用戶相關的各種數據、功能入口和全局性操作的匯總，僅用戶本人可見，設計目標：提高效率；
- 個人主頁：用于展示用戶信息以塑造形象，由用戶的基本信息、身份等級、自主上傳的內容組成，用戶可以設置可見范圍，設計目標：展示個性。
有用戶體系的產品就有個人中心，而個人主頁常見于帶有社交屬性的產品，因此兩者是包含關系，社交類型產品同時擁有個人中心頁面和個人主頁頁面。
二、個人中心的信息架構
個人中心的信息復雜度與產品本身有關。體系越龐大的產品，對應個人中心頁面需要承載的內容越多，結構勢必復雜。
一般平臺型電商的個人中心頁面必須涵蓋：用戶基礎信息、全局性操作（設置）、關鍵數據記錄（收藏、關注）、購買激勵（會員、紅包）、核心業務（訂單信息）、工具集合（工具箱）……
面對如此多且雜的信息，梳理并分類至關重要，整理出合理的信息優先級是安排頁面布局的前提和關鍵。
大多數產品的個人中心可以總結為幾大信息模塊：個人信息、全局操作、重點推廣、核心功能、全部功能，特別復雜或者簡約的產品可以在此基礎上增加或者刪減模塊。
三、頭圖樣式
個人信息一般放置在頁面頂部，頂部設計形式多樣，結合產品的業務屬性和風格調性，選擇合適的樣式。一般帶有社交屬性的產品的個人主頁，鼓勵用戶充分展示個性，允許用戶自主上傳背景圖片。而對于其他產品來說，穩定和秩序感比個性更加重要。
頭圖主要分為兩類：固定樣式、自定義樣式。
上面依次展示了從簡約到精美的頭圖設計，不同的設計適應不同的產品屬性。一味增加復雜度并不一定合適自己的產品，關鍵還是需要了解目標用戶的視覺喜好，以及產品想傳遞的品牌認知。
四、個人信息模塊
個人信息模塊一般包含：頭像、昵稱、身份屬性這類內容，從布局上來看，一般有以下幾種排版方式：頭像居左、頭像居中、頭像居右。
從信息布局上來說，三種排版方式沒有優劣，根據觀察，線上產品超八成使用頭像居左的布局方式。通常人的瀏覽習慣呈現“F”形，左上角內容是最先觸達人眼的信息，適合放置關鍵信息便于定位。
頭像居中的布局方式適用于個人主頁，更加強調和突出頭像本身，對于社交產品來說，也是一種增加差異化的選擇。
五、全局性操作模塊
全局性操作一般指的是如設置、信息、掃一掃等產品層面的內容，不僅限于當前頁面。
全局性操作有3種常見的布局方式：
- 放置在導航欄
- 放置在個人信息模塊內
- 放置在下方列表中
這種布局方式拓展性最強，導航欄可以盛放多個控件而不會出現布局局促的問題，同時符合用戶使用習慣，設置放在右上角或者左上角，也是最常見方案。
這種布局方式拓展性較弱，右側案例可見，當昵稱較長，控件較多時，容易在視覺上感覺擁擠。從信息親密性上來說，全局性操作和個人信息也不應該歸于同一模塊中。
這種布局方式弱化了“設置”，通常認為如果“設置”的優先級較低，無需單獨將其展示在頭部，直接以列表的形式放置在底部即可。
六、如何突出信息
每個頁面都有重點信息和次要信息，梳理好信息的優先級，用不同的視覺方式呈現給用戶，幫助用戶第一時間獲取關鍵信息，提高效率。
從產品的角度講，不同時期的產品有不同的主推內容，現階段為了增加用戶粘性提升市場占比，會員體系的建立相當關鍵，有會員體系的產品都不約而同地激勵用戶開會員，爭取盡可能多的權益展示機會。
個人中心就是一個很好的推廣會員的觸點。除了推廣會員以外，卡券、紅包福利，也是推廣重點。
可以從以下幾個維度進行視覺強化突出：
- 色塊突出
- 位置突出
- 利益點突出（按鈕文案、角標）
- 樣式突出
非會員類型的板塊，經常使用主色進行突出。板塊與背景顏色對比度越大，越突出。用色邏輯與按鈕用色一致，若不想過分強調，可以使用淺色背景，參考花椒案例。
用戶已經對會員概念有一種大概的既定認知，“特權”、“尊享”等關鍵詞是設計會員板塊的指向，與之匹配且應用廣泛的配色主要集中在：黑、金、銀三大類，和一些延伸色如玫瑰金、鎏金等。
這類用色雖然不能體現品牌感，但已經成為移動UI下的一種既定語義，用戶能將金屬色與會員直接地聯系起來。
強調板塊一般放置在頁面中上部，除了位置固定的個人信息板塊外，越需要強調的板塊，位置越靠上。
利益是吸引用戶開通會員的直接原因，在個人中心頁面直接展示優惠金額，以數字的形式激勵用戶最為直接有力。
七、布局形式
個人中心主要分為兩大區塊，頭（個人信息+全局操作）+身（功能集合）。頭部信息的布局方式上文已經有所闡述，主體部分一般承載的內容是個人中心頁面的各種功能集合，承載形式有：列表、卡片、宮格、泳道。
關于信息容器的詳細內容，請參見：《信息容器的歸類與應用》一文，本文重點討論頭身兩板塊的過渡如何處理。
八、頭、身板塊的過渡形式
由于承載的內容不同，頭部往往和主體的展示樣式也不同。兩種不同的視覺樣式之間可以用過渡來銜接，也可以不過渡直接鋪陳下去。
頭部的個人信息區域沒有特殊設計，和主體功能入口部分沒有明確差異，直接將信息鋪陳下去即可，頁面整體性強。
頭部色彩，主體背景消色，中間用色彩漸隱的方式進行過度，較為自然。
頭身直接隔斷，有明確的分界線。頭部和主體分割感較為強烈，便于定位。
這種情況頭身同樣有一條明確的分割線，用卡片置于其上，作為銜接，視覺上更加和諧緊湊。且位于分割線之上的卡片往往承載的是最重要信息，如訂單信息或會員信息。
使用此方案的產品比較重視用戶個性化表達，從放置頭像的位置來看，放置在關鍵的頭身分割線上，頭像的面積也往往較大。
用類似底部半彈窗的形式盛放主體內容，給人主體內容“高于”頭部背景的印象，更加突出主體內容。
常見的頭身分割樣式有：水平分割、漸隱，其他的分割方式如斜線分割或者弧度分割，增加了頁面的創意和獨特性。
九、側邊欄（抽屜）
一般有Tab Bar的產品會把個人中心放在最后一個或者倒數第二個tab里，有些產品沒有Tab Bar，如滴滴，該類工具型產品常使用側邊欄的形式盛放個人中心相關信息。
有些產品有Tab Bar，依然將個人信息收納在左上角，如網易云音樂和qq。其中qq采用了全屏的側邊欄形式。
十、未登錄狀態
當用戶是未登錄狀態時，有些產品不向用戶開放瀏覽個人中心頁面的權限，要求用戶必須先完成登錄注冊。更多產品允許用戶進入個人中心頁面，當用戶觸發某個操作時，提示用戶進行登錄。未登錄狀態下的個人中心，沒有用戶信息。默認頭像和昵稱的占位文案的處理方式值得探討。
使用ip作為默認頭像，兼具品牌感和設計感?？旖莸卿浿苯釉趥€人中心頁面露出登錄方式，減少交互步長。
十一、結語
個人中心頁面有許多設計細節點可以挖掘，選擇最適合自己產品的設計形式至關重要。本文僅是個人經驗總結，如有疏漏或者說得不對的地方，歡迎交流指正。
感謝閱讀。
本文由 @doo_W 授權發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
不錯，點贊
深度好文
贊一個
給作者一個贊????
很棒！
細膩
不錯
不錯