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

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

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

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

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

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

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

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

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

三、頭圖樣式

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

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

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

四、個(gè)人信息模塊

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

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

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

五、全局性操作模塊

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

全局性操作有3種常見(jiàn)的布局方式：

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

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

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

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

六、如何突出信息

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

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

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

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

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

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

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

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

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

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

七、布局形式

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

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

八、頭、身板塊的過(guò)渡形式

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

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

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

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

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

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

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

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

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

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

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

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

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

使用ip作為默認(rèn)頭像，兼具品牌感和設(shè)計(jì)感。快捷登錄直接在個(gè)人中心頁(yè)面露出登錄方式，減少交互步長(zhǎng)。

十一、結(jié)語(yǔ)

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

感謝閱讀。

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

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