個(gè)人中心該怎么畫?

8 評(píng)論 33166 瀏覽 390 收藏 16 分鐘

導(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不錯(cuò),點(diǎn)贊

    來(lái)自湖北 回復(fù)
  2. 深度好文

    來(lái)自北京 回復(fù)
  3. 贊一個(gè)

    來(lái)自廣東 回復(fù)
  4. 給作者一個(gè)贊????

    回復(fù)
  5. 很棒!

    來(lái)自湖南 回復(fù)
  6. 細(xì)膩

    來(lái)自江蘇 回復(fù)
  7. 不錯(cuò)

    來(lái)自山東 回復(fù)
    1. 不錯(cuò)

      來(lái)自北京 回復(fù)