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