不少APP應(yīng)用都帶有個(gè)人社交主頁(yè)，而在這一頁(yè)面里，個(gè)人主頁(yè)頭部的設(shè)計(jì)其實(shí)也有一定細(xì)節(jié)和“套路”需注意。在本篇文章里，作者就嘗試總結(jié)了這一區(qū)域的通用設(shè)計(jì)方法，與可注意的設(shè)計(jì)細(xì)節(jié)，一起來(lái)看看作者的總結(jié)與分析。

一、組件介紹

個(gè)人主頁(yè)頭部與其說(shuō)是一個(gè)組件，不如說(shuō)是「在個(gè)人頁(yè)中一塊聚合信息的區(qū)域」，因?yàn)榻^大多數(shù)帶個(gè)人社交主頁(yè)的App，都采用了類(lèi)似的做法，或有相似的框架，所以我們可以在這里討論這一區(qū)域的通用設(shè)計(jì)方法。

二、使用場(chǎng)景

在解釋「?jìng)€(gè)人主頁(yè)」的使用場(chǎng)景之前，我們首先需要區(qū)分兩個(gè)頁(yè)面類(lèi)型：「我的」和「?jìng)€(gè)人主頁(yè)」，這兩者通常都有一個(gè)聚合用戶(hù)信息的頭部。

但是這兩者有本質(zhì)的不同：與社交的相關(guān)性。「?jìng)€(gè)人主頁(yè)」與社交絕對(duì)強(qiáng)相關(guān)，因?yàn)閭€(gè)人主頁(yè)就是用戶(hù)之間相互瀏覽的門(mén)戶(hù)；而「我的」與社交幾乎不相關(guān)，不管App有沒(méi)有社交屬性，用戶(hù)都需要一個(gè)針對(duì)本人賬戶(hù)的信息概覽和設(shè)置頁(yè)面，這就是「我的」。

這種區(qū)別會(huì)在具體排版上產(chǎn)生一定的影響，「我的」頁(yè)面的頭部往往會(huì)更簡(jiǎn)潔，信息更加凝練集中，而「?jìng)€(gè)人主頁(yè)」的頭部，裝飾性大于信息傳達(dá)性。

但在日常使用的App 中，你們可能也會(huì)注意到，有很多App「我的」頁(yè)就是用戶(hù)本人的「?jìng)€(gè)人主頁(yè)」，只是某些細(xì)微的信息展示有所不同 (例如關(guān)注按鈕)。確實(shí)存在這種情況，這是不同產(chǎn)品根據(jù)自身的功能特性對(duì)頁(yè)面的不同理解。

具體「我的」和「?jìng)€(gè)人主頁(yè)」是否應(yīng)該一致，主要以以下兩點(diǎn)作為主要判據(jù)：

1. 核心功能是否為社交；
2. 「我的」頁(yè)面是否有額外大量的功能承載需求。

我來(lái)舉兩個(gè)例子。

第一個(gè)，小宇宙。

這是一個(gè)功能并不復(fù)雜的播客App，但它的核心是播客而非社交，所以「我的」頁(yè)面和「?jìng)€(gè)人主頁(yè)」用來(lái)展示不同的兩類(lèi)信息，盡管有部分賬戶(hù)核心信息是重疊的。

第二個(gè)，微博。

這是一個(gè)絕對(duì)社交核心App，這是毋庸置疑的，但是微博的「我的」需要用來(lái)承載更多額外的，與社交無(wú)關(guān)的功能入口，所以這兩者的設(shè)計(jì)依然不同。

那在什么情況下，兩者是相同的呢？是小紅書(shū)、抖音、站酷、即刻，社交功能占據(jù)絕對(duì)的C位，「我的」頁(yè)也不需要承載別的亂七八糟的功能入口，這些App就將兩者設(shè)計(jì)成了一致。

綜上，「?jìng)€(gè)人主頁(yè)」的頭部形式，應(yīng)用在與社交直接綁定的用戶(hù)門(mén)戶(hù)展示頁(yè)面上，它需要提供該用戶(hù)最核心的社交數(shù)據(jù)和交互信息，在某些情況下，「?jìng)€(gè)人主頁(yè)」可以直接展示在「我的」頁(yè)面上。

三、設(shè)計(jì)要點(diǎn)

個(gè)人主頁(yè)的頭部想到來(lái)說(shuō)是比較復(fù)雜的，因?yàn)樗脑O(shè)計(jì)實(shí)際上非常的自由，并沒(méi)有一些可總結(jié)的全局化范式，我在這里也知道挑出其中一些細(xì)節(jié)來(lái)講講，局部該如何進(jìn)行布局和設(shè)計(jì)。

1. 頭像的位置

頭像是一個(gè)視覺(jué)重量相當(dāng)大的元素，所以它的位置不僅也影響著周?chē)芏嗥渌氐呐虐?，也?huì)給用戶(hù)不同的感受。從排版上來(lái)說(shuō)，頭像基本上有三個(gè)固定的位置：居左、居中和居右。

1）居左

居左是一種比較常規(guī)的排版方式，但不常規(guī)的地方在于，昵稱(chēng)和其余信息可以置于頭像的不同方位：右方或者下方。

2）居中

也算是一種相對(duì)來(lái)說(shuō)比較常見(jiàn)的布局，但是頭像居中會(huì)導(dǎo)致昵稱(chēng)除了下方?jīng)]有別的地方可放，所以會(huì)比較占用縱向空間。

3）居右

較為少見(jiàn)，所以看起來(lái)會(huì)比較新鮮，但是頭像的權(quán)重會(huì)相比昵稱(chēng)下降 (因?yàn)殚喿x習(xí)慣)。

2. 數(shù)據(jù)布局

個(gè)人主頁(yè)頭部會(huì)集成一些社交的核心數(shù)據(jù)，例如：關(guān)注數(shù)、被關(guān)注數(shù)、發(fā)帖數(shù)、總收藏?cái)?shù)、總點(diǎn)贊數(shù)等等UGC的核心指標(biāo)，當(dāng)然在展示的過(guò)程中必須要挑選出2-4項(xiàng)最核心的，最需要被直接展示的數(shù)據(jù)類(lèi)型，不宜過(guò)多。

這些數(shù)據(jù)在頭部的展示中包括View的布局和字段在View內(nèi)的布局兩方面內(nèi)容，這需要分開(kāi)來(lái)說(shuō)。

1）View的布局

分為通欄和非通欄兩種。通欄即：數(shù)據(jù)占據(jù)一整行，View可以均分一行所有的橫向空間。通欄需要數(shù)據(jù)量不低于3個(gè)，因?yàn)槿绻麛?shù)據(jù)少，會(huì)讓這一整行看起來(lái)不夠豐滿(mǎn)。

只在一種情況下使用非通欄的View，就是同一行還需要放置別的元素，例如按鈕，例如某些App會(huì)將數(shù)據(jù)放置在頭像右側(cè)。

2）字段在View內(nèi)的布局

也有兩種：居中和居左 (居右?guī)缀鯖](méi)見(jiàn)過(guò))。具體如何選擇應(yīng)該視視覺(jué)效果而定，如果View整體偏左，那字段也可以居左來(lái)讓左側(cè)保持對(duì)齊。

3. 背景

個(gè)人主頁(yè)的背景是一塊很方便用戶(hù)展示個(gè)性的區(qū)域，不少App也不會(huì)放過(guò)這么好的機(jī)會(huì)；不過(guò)這也會(huì)額外支出服務(wù)器帶寬和存儲(chǔ)資源，所以如何做選擇，是App根據(jù)自己的情況而定的。

1）素底/微漸變

純色的背景或做一些細(xì)微的灰色漸變的背景，能夠起到突出主體 (用戶(hù)信息) 的作用。

2）頭像模糊

將用戶(hù)的頭像做一定的模糊處理，當(dāng)作背景使用。在某種程度上算是曲線(xiàn)完成了用戶(hù)個(gè)性化的目標(biāo)，但又不是完全個(gè)性化，比較容易控制統(tǒng)一風(fēng)格。

3）自定義圖片

完全由用戶(hù)自主控制的背景圖片，但是為了控制背景的亮度從而在任何情況下都不會(huì)影響前景，通常還會(huì)加一層透明的黑色遮罩。

4. 按鈕

最后再討論一下按鈕的位置，這里我說(shuō)的按鈕，指的是需要做大的互動(dòng)按鈕，例如「關(guān)注」、「私信」，而一些全局功能的按鈕 (如「返回」、「更多」) ，就不再討論了。

1）單個(gè)大按鈕

單個(gè)大按鈕一般只有「關(guān)注」，或在用戶(hù)本人的主頁(yè)中蓋按鈕可以替換成「編輯資料」，這兩個(gè)按鈕是不會(huì)同時(shí)存在的，所以可以原位替換。另外只有一個(gè)圖標(biāo)的小按鈕因?yàn)檎嘉徊⒉淮螅钥梢愿诖蟀粹o旁邊，但通常也不會(huì)超過(guò)1個(gè)。

這個(gè)按鈕的位置非常靈活多變，通常還需要結(jié)合頭像、昵稱(chēng)、數(shù)據(jù)位置進(jìn)行設(shè)計(jì)，沒(méi)辦法單獨(dú)提取出來(lái)聊。

所以我在這里只說(shuō)幾種情況，大家可以自行參考。

① 在居左的數(shù)據(jù)信息右側(cè)。這是一個(gè)絕佳的位置，因?yàn)榫幼蟮臄?shù)據(jù)信息本身會(huì)在右側(cè)留出一個(gè)空位，所以在這里放置按鈕是合理且美觀的選擇。

② 在昵稱(chēng)/頭像右側(cè)。在頭像居左的情況下，將按鈕放置在右側(cè)也是一個(gè)不錯(cuò)的選擇，因?yàn)殛欠Q(chēng)的長(zhǎng)度通常有限，無(wú)法撐滿(mǎn)屏幕右側(cè) (盡管就這么空著也沒(méi)什么太大的問(wèn)題)，此時(shí)按鈕就可以填補(bǔ)這部分空缺，讓元素在右側(cè)也能對(duì)齊。

③ 放置在下方。例如居中排版的信息，就不太適合將按鈕放置在左右兩側(cè)，所以就算只有一個(gè)按鈕，也需要單獨(dú)占去一行，放置在下方。而居左排版的App有時(shí)也會(huì)使用這種方法來(lái)提升按鈕權(quán)重。

2）多個(gè)按鈕

按鈕一旦多起來(lái)，就沒(méi)法隨心所欲地放在其他元素因?qū)R空缺出來(lái)位置了，所以在多個(gè)按鈕的秦嶺下，幾乎只存在一種情況：?jiǎn)为?dú)占據(jù)一行。

5. 不一樣的個(gè)人頁(yè)頭部

1）馬蜂窩

馬蜂窩，又是它！馬蜂窩的個(gè)人主頁(yè)設(shè)計(jì)可謂獨(dú)樹(shù)一幟，除了這個(gè)默認(rèn)的地球背景圖之外，數(shù)據(jù)展示也比較特別，并非常見(jiàn)的布局。

2）汽水音樂(lè)

來(lái)自字節(jié)的后起之秀音樂(lè)App，個(gè)人主頁(yè)的背景采用該用戶(hù)偏愛(ài)的音樂(lè)專(zhuān)輯或標(biāo)簽墻，下拉還可以有更進(jìn)一步的交互，這種背景算是比較少見(jiàn)的。

四、樣式拓展

這里收集了一些個(gè)人主頁(yè)頭部的線(xiàn)上案例，也可以作為設(shè)計(jì)時(shí)的參考：