如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在這個(gè)看臉的時(shí)代，無(wú)論是真實(shí)社交，還是網(wǎng)絡(luò)社交，甚至虛擬形象社交，都是「顏值即正義」。長(zhǎng)得好看是一大優(yōu)勢(shì)，或者至少要滿(mǎn)足彼此的審美才有進(jìn)一步發(fā)展的可能。當(dāng)然要想真正地完成社交目的，還是要看個(gè)人的社交能力。在進(jìn)行網(wǎng)絡(luò)社交時(shí)（興趣社交除外），可謂「無(wú)頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據(jù)說(shuō)，有好事者在三里屯注冊(cè)了某一款陌生人社交軟件，并將頭像設(shè)置成了一個(gè)在盧浮宮的露背少女照片，在短短時(shí)間內(nèi)，居然收到了 10000 多次點(diǎn)贊，頭像的魔力可見(jiàn)一斑。

頭像設(shè)置流程

頭像設(shè)置流程一般包括頭像選擇、上傳、裁剪、預(yù)覽四個(gè)步驟，在用戶(hù)界面展現(xiàn)時(shí)，部分步驟可合并或跳過(guò)，但至少要包括裁剪和預(yù)覽。

1. 選擇圖片源

頭像圖片的來(lái)源包括本地圖片、系統(tǒng)推薦頭像、用戶(hù)個(gè)人線(xiàn)上相冊(cè)、即時(shí)拍攝等。同一產(chǎn)品在不同端可以支持不同的上傳渠道，比如 PC 端攝像頭拍攝質(zhì)量不佳，而且臺(tái)式機(jī)不一定配備，一般可以不做支持。

2. 上傳條件限制

上傳本地圖片作為頭像時(shí)，圖片的格式、尺寸、文件大小規(guī)則應(yīng)盡量放開(kāi)限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。隨著手機(jī)拍攝照片的尺寸和大小越來(lái)越大，所以 5~6M 是一個(gè)比較合適的上限。關(guān)于服務(wù)器圖片存儲(chǔ)，應(yīng)保留一張高清大圖和多套不同尺寸的縮略圖。

3. 裁剪處理

圖片裁剪包括系統(tǒng)自動(dòng)裁剪和用戶(hù)手動(dòng)裁剪。如果不支持手動(dòng)裁剪，最好把系統(tǒng)自動(dòng)裁剪和截取做了。京東商城 web 端就沒(méi)有截取圖片中央?yún)^(qū)域，而是直接擠壓或拉伸圖片，導(dǎo)致圖片變形效果很差。手動(dòng)裁剪時(shí)，一般要輔助縮放、旋轉(zhuǎn)、鏡像等功能?？s放時(shí)需注意極限值，否則會(huì)導(dǎo)致背景空白（如QQ空間），要做相應(yīng)的填充處理。裁剪框最好加入輔助線(xiàn)（如九宮格、方圓）和遮罩，方便實(shí)時(shí)預(yù)覽方形和圓形頭像的效果。有時(shí)也會(huì)加入濾鏡、貼紙等功能。

4. 效果預(yù)覽

「所見(jiàn)即所得」是打造優(yōu)良用戶(hù)體驗(yàn)的訣竅之一，所以提供實(shí)時(shí)反饋和預(yù)覽是必不可少的。比如裁剪得到的各種形狀和尺寸的預(yù)覽，濾鏡效果實(shí)時(shí)渲染等。當(dāng)然，實(shí)時(shí)性也和系統(tǒng)性能有關(guān)。

頭像的常見(jiàn)展示形狀包括方和圓，有時(shí)也有異形頭像。關(guān)于頭像形狀的「方圓」論證可以參考微信和 QQ 設(shè)計(jì)師的官方回復(fù)。

同樣作為騰訊的產(chǎn)品，為什么 QQ 的頭像是圓的？而微信的頭像是方的呢？

騰訊的回應(yīng)如下：

相比方形，人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景，也更鼓勵(lì)用戶(hù)使用真實(shí)自拍作為 QQ 頭像。

QQ 作為平臺(tái)會(huì)接入游戲和第三方應(yīng)用內(nèi)容，圓形 QQ 頭像在這些方形、異形圖標(biāo)環(huán)境中提高辨識(shí)度，降低用戶(hù)的認(rèn)知門(mén)檻。

QQ 希望給用戶(hù)傳遞樂(lè)在溝通，展現(xiàn)年輕個(gè)性的態(tài)度，圓形 QQ 頭像更具靈動(dòng)和活力，與之無(wú)縫銜接的頭像掛件也為用戶(hù)帶來(lái)更個(gè)性化的搭配和豐富的自我展示。

因?yàn)檎掌緛?lái)是方的，方頭像更符合用戶(hù)習(xí)慣。

《為什么微信頭像是方的？QQ頭像是圓的？｜你問(wèn)鵝答》

還有百度小程序關(guān)于頭像的規(guī)范可供參考：頭像應(yīng)保證清晰，頭像的主體元素在方形或圓形參考線(xiàn)內(nèi)，不遮擋關(guān)鍵信息，確保前端展現(xiàn)時(shí)能在圓形輪廓中展現(xiàn)完全。

設(shè)置頭像的12種方式

1. 默認(rèn)頭像

為縮短注冊(cè)流程，減少潛在用戶(hù)流失，用戶(hù)注冊(cè)過(guò)程中一般不會(huì)強(qiáng)制用戶(hù)設(shè)置頭像。所以，為防止用戶(hù)不去設(shè)置頭像以及頁(yè)面中頭像加載不出來(lái)，系統(tǒng)會(huì)提供默認(rèn)頭像以便在相關(guān)位置展示?？梢圆捎没疑^像，也可以采用基于企業(yè)吉祥物卡通形象設(shè)計(jì)的彩色頭像（例如蝦米、轉(zhuǎn)轉(zhuǎn)）。二者各有好處，灰色頭像可以時(shí)常提醒用戶(hù)去設(shè)置頭像，彩色頭像則可以豐富畫(huà)面、增加趣味性。不過(guò)唯一的遺憾是一旦設(shè)置了新頭像，改不回默認(rèn)頭像了，畢竟有的默認(rèn)頭像還是挺好看的。有的社區(qū)允許游客用戶(hù)進(jìn)行點(diǎn)贊、評(píng)論等操作，這時(shí)便會(huì)用到游客默認(rèn)頭像。當(dāng)然，同一系統(tǒng)內(nèi)，默認(rèn)頭像也可以不唯一，比如，根據(jù)用戶(hù)性別、星座匹配頭像，根據(jù)用戶(hù)身份角色匹配頭像（司機(jī)/乘客，招聘者/求職者），或者制作頭像庫(kù)為用戶(hù)隨機(jī)分配頭像。

2. 系統(tǒng)推薦頭像

讓用戶(hù)自己拍攝或找到一張自己滿(mǎn)意的圖片做頭像，對(duì)有些用戶(hù)而言其實(shí)是一件成本比較高的事情。如果用戶(hù)群體足夠大，圖片質(zhì)量難以保證，甚至內(nèi)容監(jiān)管又會(huì)帶來(lái)新的問(wèn)題，所以推薦一些優(yōu)質(zhì)頭像供用戶(hù)挑選，就成了一個(gè)很不錯(cuò)的輔助解決方案。QQ 很早就推出了類(lèi)似功能，甚至成了會(huì)員服務(wù)的一部分。平安金管家 APP 也有類(lèi)似功能，提供了四個(gè)商務(wù)風(fēng)格的卡通頭像供用戶(hù)選擇。

最近比較火的匿名社交APP Soul 也同樣支持使用系統(tǒng)推薦頭像，而且是只能使用系統(tǒng)頭像，如下圖所示，用戶(hù)可以根據(jù)自己所設(shè)置的性別，頭像風(fēng)格選擇心儀的頭像。Soul 不允許用戶(hù)上傳其他照片作為頭像，也是希望用戶(hù)能拋開(kāi)顏值，找到真正的靈魂伴侶。這些頭像本身也體現(xiàn)了用戶(hù)個(gè)體的審美情趣、價(jià)值觀(guān)等。最近 Soul 新上線(xiàn)了「超萌捏臉功能」，下文會(huì)著重詳細(xì)分析，不過(guò)捏臉而成的頭像依然可以算是系統(tǒng)推薦頭像，只是把頭像拆解成了頭發(fā)、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素，然后再由用戶(hù)自己排列組合。

3. 隨機(jī)選擇頭像

前文也提到了隨機(jī)頭像，即系統(tǒng)會(huì)在用戶(hù)注冊(cè)成功后為其隨機(jī)匹配頭像，避免單一默認(rèn)頭像的沉悶，記憶中以前 GitHub 就是采用這種做法。另一種隨機(jī)頭像是指用戶(hù)主動(dòng)選擇隨機(jī)頭像，獲得相應(yīng)的驚喜，比如嗶哩嗶哩就采用了這種做法。不過(guò)實(shí)在難以琢磨出這種類(lèi)似「變臉」的玩法背后的設(shè)計(jì)邏輯。

4. 使用歷史頭像

在用戶(hù)使用過(guò)一段產(chǎn)品之后，可能會(huì)積累大量的歷史頭像（主要是用戶(hù)自主上傳的，使用過(guò)的系統(tǒng)頭像不記錄在內(nèi)）。QQ 就把用戶(hù)的這些頭像收集起來(lái)展示給用戶(hù)，以便用戶(hù)查看或重新選擇，雖然用戶(hù)重新使用的幾率并不大，但不失為一種增進(jìn)用戶(hù)情感、提高用戶(hù)粘性的做法，畢竟這里面滿(mǎn)滿(mǎn)都是青春的回憶，很容易給用戶(hù)帶來(lái)觸動(dòng)。

微信也有類(lèi)似的做法，不過(guò)只能查看上一張頭像。微信的設(shè)計(jì)哲學(xué)是不去刻意討好用戶(hù)，所以這里更多的是防止用戶(hù)反悔，方便用戶(hù)在最近使用的兩張頭像之間切換對(duì)比。馬蜂窩的做法與 QQ 類(lèi)似，不過(guò)增加了刪除歷史頭像的功能（當(dāng)前頭像不可刪除）。聊天寶（原子彈短信）有很多錘子的設(shè)計(jì)基因，錘子的設(shè)計(jì)師們推崇工匠精神，愛(ài)為用戶(hù)創(chuàng)造小驚喜，所以聊天寶不能查看自己的歷史頭像，但卻能查看好友的歷史頭像。不妨推測(cè)下背后的設(shè)計(jì)動(dòng)機(jī)：現(xiàn)代人分分鐘互相加個(gè)好友，但可能來(lái)不及備注，而人們對(duì)圖像的記憶更準(zhǔn)確、持久，所以看到頭像可能就會(huì)很快地回憶起好友姓名、相識(shí)的場(chǎng)景等信息。

5. 文本頭像

文本頭像在商務(wù)類(lèi)應(yīng)用中比較常見(jiàn)，例如 OA。由于辦公社交的社交屬性并不是很強(qiáng)，更多在于及時(shí)通訊，所以圖片頭像并不是特別重要，并且文本頭像中的字號(hào)更大，更容易辨識(shí)。要注意文本顏色和背景顏色的對(duì)比度，另外同一個(gè)應(yīng)用中，文本和背景可以多做幾個(gè)配色方案隨機(jī)展示，以豐富視覺(jué)效果。此外還要注意文本的取值顯示規(guī)則，下圖是釘釘?shù)牟糠猪?yè)面截圖，可以從中推測(cè)：

• 漢字類(lèi)：?jiǎn)蝹€(gè)或兩個(gè)漢字展示全部漢字，三個(gè)及以上漢字僅展示后兩個(gè)漢字；
• 英文類(lèi)：一個(gè)單詞時(shí)取前兩個(gè)字母，兩個(gè)及以上單詞取前兩個(gè)單詞的首字母；
• 數(shù)字類(lèi)：?jiǎn)蝹€(gè)或兩個(gè)數(shù)字展示全部數(shù)字，三個(gè)及以上數(shù)字僅展示后兩個(gè)數(shù)字。

6. 角色頭像/匿名頭像

相信很多人都玩過(guò) QQ 的匿名聊天功能，然后就被管理員禁止了，它更像是一種娛樂(lè)性玩法。其實(shí)還有類(lèi)似的做法，在游戲中較為常見(jiàn)，在角色確定前顯示的是用戶(hù)頭像，角色確定后就顯示角色頭像。比如斗地主，地主身份確定前顯示用戶(hù)本身頭像，確定后則顯示角色頭像，而且還會(huì)根據(jù)角色性別顯示相應(yīng)頭像。

7. 動(dòng)態(tài)視頻頭像

動(dòng)態(tài)視頻頭像可以讓用戶(hù)跨越時(shí)間維度從多角度展示自己。依然以 QQ 為例，動(dòng)態(tài)頭像分兩種，一種是 QQ 會(huì)員才可使用的動(dòng)態(tài)頭像，由系統(tǒng)推薦，用戶(hù)自主選擇；另一種是讓用戶(hù)自己拍攝錄制。具體流程如下圖，用戶(hù)先錄制視頻，然后選擇一幀作為靜態(tài)頭像，以便能在不支持展示動(dòng)態(tài)頭像的地方展示。這也是目前的一大趨勢(shì)，不過(guò)如果好友列表的頭像都在動(dòng)也還挺嚇人的。

8. 輪播頭像

針對(duì)陌生人社交場(chǎng)景，如探探，頭像更顯得重要，左滑還是右滑就在剎那之間，點(diǎn)進(jìn)去主頁(yè)也根本不會(huì)下滑屏幕細(xì)看具體的興趣、資料，所以就要盡量在首屏展示更多更大更清晰的照片，輪播圖就是一種很好的形式。探探最多可設(shè)置 6 張圖片或 6 段視頻作為輪播頭像。其實(shí)，輪播頭像類(lèi)似 QQ 照片墻的概念，不過(guò)自我展示意味更濃。

采用類(lèi)似輪播頭像做法的還有音遇 APP，雖說(shuō)主張以歌會(huì)友，但誰(shuí)都喜歡唱歌好聽(tīng)的小哥哥小姐姐還有高顏值。如下圖，個(gè)人主頁(yè)背景圖即頭像輪播。還有一些社交軟件可以將個(gè)人系列頭像設(shè)為私密，然后定向開(kāi)放展示給需要的人。

9. 捏臉頭像

ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風(fēng)潮，雖然是三維形象的玩法，但和之前紅極一時(shí)的臉萌并沒(méi)有本質(zhì)的區(qū)別，要想實(shí)現(xiàn)從工具到社交的轉(zhuǎn)變，獲取關(guān)系鏈才是王道。多閃和 Soul 動(dòng)作也很快，已經(jīng)上線(xiàn)了捏臉功能，雖然目前是二維的，但相信巨頭們?cè)缫验_(kāi)始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型，甚至可以進(jìn)行簡(jiǎn)單的化妝。服裝配飾則包括衣服、頭飾、首飾等，且支持按上架時(shí)間、價(jià)格等排序。室內(nèi)裝飾則涵蓋了地板、家具、擺件、樂(lè)器等等。手勢(shì)主要是一些肢體動(dòng)作庫(kù)，動(dòng)作效果十分連貫?？梢哉f(shuō) ZEPETO 集成了用戶(hù)對(duì)場(chǎng)景搭建+服飾搭配+顏值定義+炫酷動(dòng)作的完美幻想，同時(shí)也擴(kuò)充了人們對(duì)虛擬形象社交乃至電商新形態(tài)的想象空間。

目前市面上，尤其是游戲領(lǐng)域，不管畫(huà)風(fēng)是 Q萌，還是 3D，時(shí)尚亦或仙俠，人物建模及捏臉系統(tǒng)已經(jīng)比較完善，且得到廣泛應(yīng)用。這里推薦一款叫做 IMVU 的 APP，它的人物畫(huà)風(fēng)、服飾質(zhì)感比 ZEPETO 更加寫(xiě)實(shí)，更偏成人化，視角轉(zhuǎn)換也更加流暢，支持俯視/仰視。不過(guò)，臉萌早已涼涼，美圖的圖片社交之路似乎完全和 ins 對(duì)不上標(biāo)，所以 3D 虛擬形象社交的未來(lái)之路也未可知。

10. 頭像掛件

頭像掛件、等級(jí)徽章、認(rèn)證標(biāo)志也屬于頭像的一部分，不過(guò)需要結(jié)合付費(fèi)會(huì)員、用戶(hù)成長(zhǎng)體系、認(rèn)證規(guī)則進(jìn)行討論才有意義。

11. 使用第三方頭像

使用第三方社交賬號(hào)快速登錄已經(jīng)成為登錄注冊(cè)頁(yè)面的標(biāo)配，畢竟一個(gè)授權(quán)就解決了賬號(hào)注冊(cè)、頭像及昵稱(chēng)設(shè)置等問(wèn)題。這兩天，吃瓜群眾們又一次見(jiàn)證了「頭騰大戰(zhàn)」。多閃使用了用戶(hù)的微信頭像和昵稱(chēng)，可是并沒(méi)有得到相應(yīng)授權(quán)，因?yàn)橹暗氖跈?quán)是給抖音的，當(dāng)然現(xiàn)在也停止授權(quán)了。不管是不是抖音碰瓷，但微信/QQ 賬戶(hù)上的頭像、昵稱(chēng)的權(quán)益歸屬確實(shí)是個(gè)問(wèn)題。個(gè)人上傳的頭像還好說(shuō)，如果用的是系統(tǒng)推薦頭像，這些圖片的版權(quán)是不是歸屬騰訊呢？用戶(hù)使用第三方登錄后，最好還是引導(dǎo)用戶(hù)盡快綁定手機(jī)并設(shè)置完善其他資料。

12. 群組頭像

這里以 QQ、微信和釘釘為例進(jìn)行分析。微信群聊頭像由群成員頭像組合生成，在方框內(nèi)嵌套群成員的方形頭像，根據(jù)群成員的數(shù)量多少（1-9）進(jìn)行相應(yīng)排布，多于 9 人時(shí)顯示前 9 人頭像。另外，微信暫不支持設(shè)置圖片為群頭像。釘釘群與微信類(lèi)似，不過(guò)外觀(guān)上是圓形外框嵌套群成員的方形頭像，顯示數(shù)量也有所限制（最多顯示前4個(gè)），但可以選擇其他圖片作為群組頭像。QQ 群比較復(fù)雜些，可分為討論組和群，雖然現(xiàn)在統(tǒng)稱(chēng)「群聊」，根據(jù)創(chuàng)建方式區(qū)分如下：選人創(chuàng)建（對(duì)應(yīng)的是討論組）和按分類(lèi)創(chuàng)建（對(duì)應(yīng)的是群）。討論組也是不能設(shè)置頭像的，是在圓形內(nèi)嵌套群成員的圓形頭像，最多可顯示前 5 個(gè)成員的頭像。而群頭像由管理員設(shè)置，且可以查看歷史頭像、使用系統(tǒng)推薦頭像等。另外還有 TIM，定位是對(duì)抗釘釘?shù)霓k公軟件，比 QQ 更輕量化，視覺(jué)風(fēng)格也大不相同， TIM 中討論組頭像的展示就采用了類(lèi)似釘釘?shù)淖龇īぉA形外邊框+方形頭像。

延伸一下，有人說(shuō)微信重新定義了群的設(shè)計(jì)形態(tài)，更貼近用戶(hù)自然使用方式：無(wú)需群ID，無(wú)需刻意創(chuàng)建群，隨時(shí)拉人開(kāi)聊，無(wú)需命名，默認(rèn)不保存到通訊錄，搜索群時(shí)可通過(guò)直接搜人實(shí)現(xiàn)等。

結(jié)語(yǔ)

本文列舉分析了頭像設(shè)置的相關(guān)設(shè)計(jì)思路和案例，對(duì)社交產(chǎn)品的頭像設(shè)計(jì)大有裨益。在設(shè)計(jì)時(shí)，尋求相關(guān)設(shè)計(jì)參考是獲取靈感和解決方案的有效方法，認(rèn)真發(fā)現(xiàn)生活中的好設(shè)計(jì)，及時(shí)積累并總結(jié)，才能在關(guān)鍵時(shí)刻有高質(zhì)量的輸出。

藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。