導(dǎo)語：凡是有用戶體系的產(chǎn)品都應(yīng)具備個人中心頁面，看似結(jié)構(gòu)簡單的個人中心實(shí)則包含了眾多容易被忽視的設(shè)計細(xì)節(jié)。本文作者整理、歸納和總結(jié)了個人中心頁面的設(shè)計規(guī)律，為大家提供一些設(shè)計參考。

一、個人中心與個人主頁的區(qū)別

• 個人中心：與用戶相關(guān)的各種數(shù)據(jù)、功能入口和全局性操作的匯總，僅用戶本人可見，設(shè)計目標(biāo)：提高效率；
• 個人主頁：用于展示用戶信息以塑造形象，由用戶的基本信息、身份等級、自主上傳的內(nèi)容組成，用戶可以設(shè)置可見范圍，設(shè)計目標(biāo)：展示個性。

有用戶體系的產(chǎn)品就有個人中心，而個人主頁常見于帶有社交屬性的產(chǎn)品，因此兩者是包含關(guān)系，社交類型產(chǎn)品同時擁有個人中心頁面和個人主頁頁面。

二、個人中心的信息架構(gòu)

個人中心的信息復(fù)雜度與產(chǎn)品本身有關(guān)。體系越龐大的產(chǎn)品，對應(yīng)個人中心頁面需要承載的內(nèi)容越多，結(jié)構(gòu)勢必復(fù)雜。

一般平臺型電商的個人中心頁面必須涵蓋：用戶基礎(chǔ)信息、全局性操作（設(shè)置）、關(guān)鍵數(shù)據(jù)記錄（收藏、關(guān)注）、購買激勵（會員、紅包）、核心業(yè)務(wù)（訂單信息）、工具集合（工具箱）……

面對如此多且雜的信息，梳理并分類至關(guān)重要，整理出合理的信息優(yōu)先級是安排頁面布局的前提和關(guān)鍵。

大多數(shù)產(chǎn)品的個人中心可以總結(jié)為幾大信息模塊：個人信息、全局操作、重點(diǎn)推廣、核心功能、全部功能，特別復(fù)雜或者簡約的產(chǎn)品可以在此基礎(chǔ)上增加或者刪減模塊。

三、頭圖樣式

個人信息一般放置在頁面頂部，頂部設(shè)計形式多樣，結(jié)合產(chǎn)品的業(yè)務(wù)屬性和風(fēng)格調(diào)性，選擇合適的樣式。一般帶有社交屬性的產(chǎn)品的個人主頁，鼓勵用戶充分展示個性，允許用戶自主上傳背景圖片。而對于其他產(chǎn)品來說，穩(wěn)定和秩序感比個性更加重要。

頭圖主要分為兩類：固定樣式、自定義樣式。

上面依次展示了從簡約到精美的頭圖設(shè)計，不同的設(shè)計適應(yīng)不同的產(chǎn)品屬性。一味增加復(fù)雜度并不一定合適自己的產(chǎn)品，關(guān)鍵還是需要了解目標(biāo)用戶的視覺喜好，以及產(chǎn)品想傳遞的品牌認(rèn)知。

四、個人信息模塊

個人信息模塊一般包含：頭像、昵稱、身份屬性這類內(nèi)容，從布局上來看，一般有以下幾種排版方式：頭像居左、頭像居中、頭像居右。

從信息布局上來說，三種排版方式?jīng)]有優(yōu)劣，根據(jù)觀察，線上產(chǎn)品超八成使用頭像居左的布局方式。通常人的瀏覽習(xí)慣呈現(xiàn)“F”形，左上角內(nèi)容是最先觸達(dá)人眼的信息，適合放置關(guān)鍵信息便于定位。

頭像居中的布局方式適用于個人主頁，更加強(qiáng)調(diào)和突出頭像本身，對于社交產(chǎn)品來說，也是一種增加差異化的選擇。

五、全局性操作模塊

全局性操作一般指的是如設(shè)置、信息、掃一掃等產(chǎn)品層面的內(nèi)容，不僅限于當(dāng)前頁面。

全局性操作有3種常見的布局方式：

1. 放置在導(dǎo)航欄
2. 放置在個人信息模塊內(nèi)
3. 放置在下方列表中

這種布局方式拓展性最強(qiáng)，導(dǎo)航欄可以盛放多個控件而不會出現(xiàn)布局局促的問題，同時符合用戶使用習(xí)慣，設(shè)置放在右上角或者左上角，也是最常見方案。

這種布局方式拓展性較弱，右側(cè)案例可見，當(dāng)昵稱較長，控件較多時，容易在視覺上感覺擁擠。從信息親密性上來說，全局性操作和個人信息也不應(yīng)該歸于同一模塊中。

這種布局方式弱化了“設(shè)置”，通常認(rèn)為如果“設(shè)置”的優(yōu)先級較低，無需單獨(dú)將其展示在頭部，直接以列表的形式放置在底部即可。

六、如何突出信息

每個頁面都有重點(diǎn)信息和次要信息，梳理好信息的優(yōu)先級，用不同的視覺方式呈現(xiàn)給用戶，幫助用戶第一時間獲取關(guān)鍵信息，提高效率。

從產(chǎn)品的角度講，不同時期的產(chǎn)品有不同的主推內(nèi)容，現(xiàn)階段為了增加用戶粘性提升市場占比，會員體系的建立相當(dāng)關(guān)鍵，有會員體系的產(chǎn)品都不約而同地激勵用戶開會員，爭取盡可能多的權(quán)益展示機(jī)會。

個人中心就是一個很好的推廣會員的觸點(diǎn)。除了推廣會員以外，卡券、紅包福利，也是推廣重點(diǎn)。

可以從以下幾個維度進(jìn)行視覺強(qiáng)化突出：

1. 色塊突出
2. 位置突出
3. 利益點(diǎn)突出（按鈕文案、角標(biāo)）
4. 樣式突出

非會員類型的板塊，經(jīng)常使用主色進(jìn)行突出。板塊與背景顏色對比度越大，越突出。用色邏輯與按鈕用色一致，若不想過分強(qiáng)調(diào)，可以使用淺色背景，參考花椒案例。

用戶已經(jīng)對會員概念有一種大概的既定認(rèn)知，“特權(quán)”、“尊享”等關(guān)鍵詞是設(shè)計會員板塊的指向，與之匹配且應(yīng)用廣泛的配色主要集中在：黑、金、銀三大類，和一些延伸色如玫瑰金、鎏金等。

這類用色雖然不能體現(xiàn)品牌感，但已經(jīng)成為移動UI下的一種既定語義，用戶能將金屬色與會員直接地聯(lián)系起來。

強(qiáng)調(diào)板塊一般放置在頁面中上部，除了位置固定的個人信息板塊外，越需要強(qiáng)調(diào)的板塊，位置越靠上。

利益是吸引用戶開通會員的直接原因，在個人中心頁面直接展示優(yōu)惠金額，以數(shù)字的形式激勵用戶最為直接有力。

七、布局形式

個人中心主要分為兩大區(qū)塊，頭（個人信息+全局操作）+身（功能集合）。頭部信息的布局方式上文已經(jīng)有所闡述，主體部分一般承載的內(nèi)容是個人中心頁面的各種功能集合，承載形式有：列表、卡片、宮格、泳道。

關(guān)于信息容器的詳細(xì)內(nèi)容，請參見：《信息容器的歸類與應(yīng)用》一文，本文重點(diǎn)討論頭身兩板塊的過渡如何處理。

八、頭、身板塊的過渡形式

由于承載的內(nèi)容不同，頭部往往和主體的展示樣式也不同。兩種不同的視覺樣式之間可以用過渡來銜接，也可以不過渡直接鋪陳下去。

頭部的個人信息區(qū)域沒有特殊設(shè)計，和主體功能入口部分沒有明確差異，直接將信息鋪陳下去即可，頁面整體性強(qiáng)。

頭部色彩，主體背景消色，中間用色彩漸隱的方式進(jìn)行過度，較為自然。

頭身直接隔斷，有明確的分界線。頭部和主體分割感較為強(qiáng)烈，便于定位。

這種情況頭身同樣有一條明確的分割線，用卡片置于其上，作為銜接，視覺上更加和諧緊湊。且位于分割線之上的卡片往往承載的是最重要信息，如訂單信息或會員信息。

使用此方案的產(chǎn)品比較重視用戶個性化表達(dá)，從放置頭像的位置來看，放置在關(guān)鍵的頭身分割線上，頭像的面積也往往較大。

用類似底部半彈窗的形式盛放主體內(nèi)容，給人主體內(nèi)容“高于”頭部背景的印象，更加突出主體內(nèi)容。

常見的頭身分割樣式有：水平分割、漸隱，其他的分割方式如斜線分割或者弧度分割，增加了頁面的創(chuàng)意和獨(dú)特性。

九、側(cè)邊欄（抽屜）

一般有Tab Bar的產(chǎn)品會把個人中心放在最后一個或者倒數(shù)第二個tab里，有些產(chǎn)品沒有Tab Bar，如滴滴，該類工具型產(chǎn)品常使用側(cè)邊欄的形式盛放個人中心相關(guān)信息。

有些產(chǎn)品有Tab Bar，依然將個人信息收納在左上角，如網(wǎng)易云音樂和qq。其中qq采用了全屏的側(cè)邊欄形式。

十、未登錄狀態(tài)

當(dāng)用戶是未登錄狀態(tài)時，有些產(chǎn)品不向用戶開放瀏覽個人中心頁面的權(quán)限，要求用戶必須先完成登錄注冊。更多產(chǎn)品允許用戶進(jìn)入個人中心頁面，當(dāng)用戶觸發(fā)某個操作時，提示用戶進(jìn)行登錄。未登錄狀態(tài)下的個人中心，沒有用戶信息。默認(rèn)頭像和昵稱的占位文案的處理方式值得探討。

使用ip作為默認(rèn)頭像，兼具品牌感和設(shè)計感?？旖莸卿浿苯釉趥€人中心頁面露出登錄方式，減少交互步長。

十一、結(jié)語

個人中心頁面有許多設(shè)計細(xì)節(jié)點(diǎn)可以挖掘，選擇最適合自己產(chǎn)品的設(shè)計形式至關(guān)重要。本文僅是個人經(jīng)驗(yàn)總結(jié)，如有疏漏或者說得不對的地方，歡迎交流指正。

感謝閱讀。

本文由 @doo_W 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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