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

頭像設(shè)置流程

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

1.選擇圖片源

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

2.上傳條件限制

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

3.裁剪處理

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

4.效果預(yù)覽

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

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

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

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

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

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

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

——by QQ設(shè)計(jì)師

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

——by 微信設(shè)計(jì)師

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

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

默認(rèn)頭像

為縮短注冊(cè)流程，減少潛在用戶流失并巍，用戶注冊(cè)過(guò)程中一般不會(huì)強(qiáng)制用戶設(shè)置頭像目木。所以，為防止用戶不去設(shè)置頭像以及頁(yè)面中頭像加載不出來(lái)懊渡，系統(tǒng)會(huì)提供默認(rèn)頭像以便在相關(guān)位置展示刽射。可以采用灰色頭像剃执，也可以采用基于企業(yè)吉祥物卡通形象設(shè)計(jì)的彩色頭像（例如蝦米誓禁、轉(zhuǎn)轉(zhuǎn)）。二者各有好處肾档，灰色頭像可以時(shí)常提醒用戶去設(shè)置頭像摹恰，彩色頭像則可以減少頁(yè)面單調(diào)辫继、增加趣味性。不過(guò)唯一的遺憾是一旦設(shè)置了新頭像俗慈，改不回默認(rèn)頭像了骇两，畢竟有的默認(rèn)頭像還是挺好看的。有的社區(qū)允許游客用戶進(jìn)行點(diǎn)贊姜盈、評(píng)論等操作，這時(shí)便會(huì)用到游客默認(rèn)頭像配阵。當(dāng)然馏颂，同一系統(tǒng)內(nèi)，默認(rèn)頭像也可以不唯一棋傍，比如救拉，根據(jù)用戶性別、星座匹配頭像瘫拣，根據(jù)用戶身份角色匹配頭像（司機(jī)/乘客亿絮，招聘者/求職者），或者制作頭像庫(kù)為用戶隨機(jī)分配頭像麸拄。

系統(tǒng)推薦頭像

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

最近比較火的匿名社交APP Soul也同樣支持使用系統(tǒng)推薦頭像忽媒，而且是只能使用系統(tǒng)頭像争拐，如下圖所示，用戶可以根據(jù)自己所設(shè)置的性別（只允許修改一次）猾浦，頭像風(fēng)格（包括繪本陆错、二次元、可愛(ài)金赦、經(jīng)典四種風(fēng)格）選擇心儀的頭像音瓷。Soul不允許用戶上傳其他照片作為頭像，也是希望用戶能拋開顏值夹抗，找到真正的靈魂伴侶绳慎。這些頭像本身也體現(xiàn)了用戶個(gè)體的審美情趣、價(jià)值觀等。最近Soul新上線了“超萌捏臉功能”杏愤，下文會(huì)著重詳細(xì)分析靡砌，不過(guò)捏臉捏成的頭像依然可以算是系統(tǒng)推薦頭像，只是把頭像拆解成了頭發(fā)珊楼、臉通殃、眉毛、眼睛厕宗、鼻子画舌、嘴巴、衣服配飾等元素已慢，然后再由用戶自己排列組合曲聂。

隨機(jī)選擇頭像

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

使用歷史頭像

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

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

文本頭像

文本頭像在商務(wù)類應(yīng)用中比較常見雳旅，例如OA。由于辦公社交的社交屬性并不是很強(qiáng)间聊，更多在于及時(shí)通訊，所以圖片頭像并不是特別重要抵拘，并且文本頭像中的字號(hào)更大哎榴，更容易辨識(shí)。要注意文本顏色和背景顏色的對(duì)比度僵蛛，另外同一個(gè)應(yīng)用中尚蝌，文本和背景可以多做幾個(gè)配色方案隨機(jī)展示，以豐富視覺(jué)效果充尉。此外還要注意文本的取值顯示規(guī)則飘言，下圖是釘釘?shù)牟糠猪?yè)面截圖，可以從中推測(cè)：①漢字類：?jiǎn)蝹€(gè)或兩個(gè)漢字展示全部漢字驼侠，三個(gè)及以上漢字僅展示后兩個(gè)漢字姿鸿；②英文類：一個(gè)單詞時(shí)取前兩個(gè)字母，兩個(gè)及以上單詞取前兩個(gè)單詞的首字母倒源；③數(shù)字類：?jiǎn)蝹€(gè)或兩個(gè)數(shù)字展示全部數(shù)字苛预，三個(gè)及以上數(shù)字僅展示后兩個(gè)數(shù)字。

角色頭像/匿名頭像

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

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

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

輪播頭像

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

采用類似輪播頭像做法的還有音遇APP，雖說(shuō)主張以歌會(huì)友叶沛，但誰(shuí)又不想自己喜歡的唱歌好聽的小哥哥小姐姐也有高顏值呢贰健。如下圖，個(gè)人主頁(yè)背景圖即頭像輪播恬汁。還有一些社交軟件可以將個(gè)人系列頭像設(shè)為私密伶椿，然后定向開放展示給需要的人。

捏臉頭像

ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風(fēng)氓侧，雖然是三維形象的玩法脊另，但和之前紅極一時(shí)的臉萌并沒(méi)有本質(zhì)的區(qū)別，要想實(shí)現(xiàn)從工具到社交的轉(zhuǎn)變约巷，獲取關(guān)系鏈才是王道偎痛。多閃和Soul動(dòng)作也很快，已經(jīng)上線了捏臉功能独郎，雖然目前是二維的踩麦，但相信巨頭們?cè)缫验_始布局三維虛擬形象社交了枚赡。可以稍微看看目前ZEPETO可以做哪些事：臉部可編輯發(fā)型與發(fā)色谓谦、臉型與膚色贫橙、眉毛、眼睛反粥、眼皮卢肃、鼻子、嘴巴才顿、胡子莫湘、眼鏡、頭飾郑气、痣幅垮、雀斑等，甚至可以進(jìn)行簡(jiǎn)單的化妝（眼影尾组、睫毛忙芒、腮紅、口紅等）演怎。服裝配飾則包括套裝、上衣避乏、褲子爷耀、鞋子、襪子拍皮、眼鏡歹叮、帽子、頭飾铆帽、項(xiàng)鏈咆耿、耳飾等，且支持按上架時(shí)間爹橱、價(jià)格等排序萨螺。室內(nèi)裝飾則涵蓋了地板、墻紙愧驱、家具慰技、擺件、掛件组砚、綠植吻商、電器、樂(lè)器等糟红。手勢(shì)主要是一些肢體動(dòng)作庫(kù)艾帐，動(dòng)作效果十分連貫乌叶。可以說(shuō)ZEPETO集成了用戶對(duì)場(chǎng)景搭建+服飾搭配+顏值定義+炫酷動(dòng)作的完美幻想柒爸，同時(shí)也擴(kuò)充了人們對(duì)虛擬形象社交乃至電商新形態(tài)的想象空間准浴。

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

頭像掛件

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

使用第三方頭像

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

群組頭像

這里以QQ狂巢、微信和釘釘為例進(jìn)行分析。微信群聊頭像由群成員頭像組合生成书聚，在方框內(nèi)嵌套群成員的方形頭像唧领，根據(jù)群成員的數(shù)量多少（1-9）進(jìn)行相應(yīng)排布，多于9人時(shí)顯示前9人頭像雌续。另外斩个，微信暫不支持設(shè)置圖片為群頭像。釘釘群與微信類似驯杜，不過(guò)外觀上是圓形外框嵌套群成員的方形頭像受啥，顯示數(shù)量也有所限制（最多顯示前4個(gè)），但可以選擇其他圖片作為群組頭像鸽心。QQ群比較復(fù)雜些滚局，可分為討論組和群，雖然現(xiàn)在統(tǒng)稱“群聊”顽频，根據(jù)創(chuàng)建方式區(qū)分如下：選人創(chuàng)建（對(duì)應(yīng)的是討論組）和按分類創(chuàng)建（對(duì)應(yīng)的是群）藤肢。討論組也是不能設(shè)置頭像的，是在圓形內(nèi)嵌套群成員的圓形頭像糯景，最多可顯示前5個(gè)成員的頭像嘁圈。而群頭像由管理員設(shè)置，且可以查看歷史頭像莺奸、使用系統(tǒng)推薦頭像等丑孩。另外還有TIM冀宴，定位是對(duì)抗釘釘?shù)霓k公軟件灭贷，比QQ更輕量化，視覺(jué)風(fēng)格也大不相同略贮，TIM中討論組頭像的展示就采用了類似釘釘?shù)淖龇ā獔A形外邊框+方形頭像甚疟。

延伸一下，有人說(shuō)微信重新定義了群的設(shè)計(jì)形態(tài)逃延，更貼近用戶自然使用方式：無(wú)需群ID览妖，無(wú)需刻意創(chuàng)建群，隨時(shí)拉人開聊揽祥，無(wú)需命名讽膏，默認(rèn)不保存到通訊錄，搜索群時(shí)可通過(guò)直接搜人實(shí)現(xiàn)等拄丰。而關(guān)于QQ討論組和群的區(qū)別可參考張?《多人聊天府树，究竟需不需要區(qū)分討論組和群俐末？》http://www.woshipm.com/operate/1030520.html。

劃重點(diǎn)

本文列舉分析了頭像設(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ì)量的輸出弯洗。