2019-6-18 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在這個看臉的時代，無論是真實社交，還是網絡社交，甚至虛擬形象社交，都是「顏值即正義」。長得好看是一大優勢，或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的，還是要看個人的社交能力。在進行網絡社交時（興趣社交除外），可謂「無頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據說，有好事者在三里屯注冊了某一款陌生人社交軟件，并將頭像設置成了一個在盧浮宮的露背少女照片，在短短時間內，居然收到了 10000 多次點贊，頭像的魔力可見一斑。
頭像設置流程一般包括頭像選擇、上傳、裁剪、預覽四個步驟，在用戶界面展現時，部分步驟可合并或跳過，但至少要包括裁剪和預覽。
1. 選擇圖片源
頭像圖片的來源包括本地圖片、系統推薦頭像、用戶個人線上相冊、即時拍攝等。同一產品在不同端可以支持不同的上傳渠道，比如 PC 端攝像頭拍攝質量不佳，而且臺式機不一定配備，一般可以不做支持。
2. 上傳條件限制
上傳本地圖片作為頭像時，圖片的格式、尺寸、文件大小規則應盡量放開限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。隨著手機拍攝照片的尺寸和大小越來越大，所以 5~6M 是一個比較合適的上限。關于服務器圖片存儲，應保留一張高清大圖和多套不同尺寸的縮略圖。
3. 裁剪處理
圖片裁剪包括系統自動裁剪和用戶手動裁剪。如果不支持手動裁剪，最好把系統自動裁剪和截取做了。京東商城 web 端就沒有截取圖片中央區域，而是直接擠壓或拉伸圖片，導致圖片變形效果很差。手動裁剪時，一般要輔助縮放、旋轉、鏡像等功能。縮放時需注意極限值，否則會導致背景空白（如QQ空間），要做相應的填充處理。裁剪框最好加入輔助線（如九宮格、方圓）和遮罩，方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。
4. 效果預覽
「所見即所得」是打造優良用戶體驗的訣竅之一，所以提供實時反饋和預覽是必不可少的。比如裁剪得到的各種形狀和尺寸的預覽，濾鏡效果實時渲染等。當然，實時性也和系統性能有關。
頭像的常見展示形狀包括方和圓，有時也有異形頭像。關于頭像形狀的「方圓」論證可以參考微信和 QQ 設計師的官方回復。
同樣作為騰訊的產品，為什么 QQ 的頭像是圓的？而微信的頭像是方的呢？
騰訊的回應如下：
還有百度小程序關于頭像的規范可供參考：頭像應保證清晰，頭像的主體元素在方形或圓形參考線內，不遮擋關鍵信息，確保前端展現時能在圓形輪廓中展現完全。
1. 默認頭像
為縮短注冊流程，減少潛在用戶流失，用戶注冊過程中一般不會強制用戶設置頭像。所以，為防止用戶不去設置頭像以及頁面中頭像加載不出來，系統會提供默認頭像以便在相關位置展示。可以采用灰色頭像，也可以采用基于企業吉祥物卡通形象設計的彩色頭像（例如蝦米、轉轉）。二者各有好處，灰色頭像可以時常提醒用戶去設置頭像，彩色頭像則可以豐富畫面、增加趣味性。不過唯一的遺憾是一旦設置了新頭像，改不回默認頭像了，畢竟有的默認頭像還是挺好看的。有的社區允許游客用戶進行點贊、評論等操作，這時便會用到游客默認頭像。當然，同一系統內，默認頭像也可以不唯一，比如，根據用戶性別、星座匹配頭像，根據用戶身份角色匹配頭像（司機/乘客，招聘者/求職者），或者制作頭像庫為用戶隨機分配頭像。
2. 系統推薦頭像
讓用戶自己拍攝或找到一張自己滿意的圖片做頭像，對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大，圖片質量難以保證，甚至內容監管又會帶來新的問題，所以推薦一些優質頭像供用戶挑選，就成了一個很不錯的輔助解決方案。QQ 很早就推出了類似功能，甚至成了會員服務的一部分。平安金管家 APP 也有類似功能，提供了四個商務風格的卡通頭像供用戶選擇。
最近比較火的匿名社交APP Soul 也同樣支持使用系統推薦頭像，而且是只能使用系統頭像，如下圖所示，用戶可以根據自己所設置的性別，頭像風格選擇心儀的頭像。Soul 不允許用戶上傳其他照片作為頭像，也是希望用戶能拋開顏值，找到真正的靈魂伴侶。這些頭像本身也體現了用戶個體的審美情趣、價值觀等。最近 Soul 新上線了「超萌捏臉功能」，下文會著重詳細分析，不過捏臉而成的頭像依然可以算是系統推薦頭像，只是把頭像拆解成了頭發、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素，然后再由用戶自己排列組合。
3. 隨機選擇頭像
前文也提到了隨機頭像，即系統會在用戶注冊成功后為其隨機匹配頭像，避免單一默認頭像的沉悶，記憶中以前 GitHub 就是采用這種做法。另一種隨機頭像是指用戶主動選擇隨機頭像，獲得相應的驚喜，比如嗶哩嗶哩就采用了這種做法。不過實在難以琢磨出這種類似「變臉」的玩法背后的設計邏輯。
4. 使用歷史頭像
在用戶使用過一段產品之后，可能會積累大量的歷史頭像（主要是用戶自主上傳的，使用過的系統頭像不記錄在內）。QQ 就把用戶的這些頭像收集起來展示給用戶，以便用戶查看或重新選擇，雖然用戶重新使用的幾率并不大，但不失為一種增進用戶情感、提高用戶粘性的做法，畢竟這里面滿滿都是青春的回憶，很容易給用戶帶來觸動。
微信也有類似的做法，不過只能查看上一張頭像。微信的設計哲學是不去刻意討好用戶，所以這里更多的是防止用戶反悔，方便用戶在最近使用的兩張頭像之間切換對比。馬蜂窩的做法與 QQ 類似，不過增加了刪除歷史頭像的功能（當前頭像不可刪除）。聊天寶（原子彈短信）有很多錘子的設計基因，錘子的設計師們推崇工匠精神，愛為用戶創造小驚喜，所以聊天寶不能查看自己的歷史頭像，但卻能查看好友的歷史頭像。不妨推測下背后的設計動機：現代人分分鐘互相加個好友，但可能來不及備注，而人們對圖像的記憶更準確、持久，所以看到頭像可能就會很快地回憶起好友姓名、相識的場景等信息。
5. 文本頭像
文本頭像在商務類應用中比較常見，例如 OA。由于辦公社交的社交屬性并不是很強，更多在于及時通訊，所以圖片頭像并不是特別重要，并且文本頭像中的字號更大，更容易辨識。要注意文本顏色和背景顏色的對比度，另外同一個應用中，文本和背景可以多做幾個配色方案隨機展示，以豐富視覺效果。此外還要注意文本的取值顯示規則，下圖是釘釘的部分頁面截圖，可以從中推測：
6. 角色頭像/匿名頭像
相信很多人都玩過 QQ 的匿名聊天功能，然后就被管理員禁止了，它更像是一種娛樂性玩法。其實還有類似的做法，在游戲中較為常見，在角色確定前顯示的是用戶頭像，角色確定后就顯示角色頭像。比如斗地主，地主身份確定前顯示用戶本身頭像，確定后則顯示角色頭像，而且還會根據角色性別顯示相應頭像。
7. 動態視頻頭像
動態視頻頭像可以讓用戶跨越時間維度從多角度展示自己。依然以 QQ 為例，動態頭像分兩種，一種是 QQ 會員才可使用的動態頭像，由系統推薦，用戶自主選擇；另一種是讓用戶自己拍攝錄制。具體流程如下圖，用戶先錄制視頻，然后選擇一幀作為靜態頭像，以便能在不支持展示動態頭像的地方展示。這也是目前的一大趨勢，不過如果好友列表的頭像都在動也還挺嚇人的。
8. 輪播頭像
針對陌生人社交場景，如探探，頭像更顯得重要，左滑還是右滑就在剎那之間，點進去主頁也根本不會下滑屏幕細看具體的興趣、資料，所以就要盡量在首屏展示更多更大更清晰的照片，輪播圖就是一種很好的形式。探探最多可設置 6 張圖片或 6 段視頻作為輪播頭像。其實，輪播頭像類似 QQ 照片墻的概念，不過自我展示意味更濃。
采用類似輪播頭像做法的還有音遇 APP，雖說主張以歌會友，但誰都喜歡唱歌好聽的小哥哥小姐姐還有高顏值。如下圖，個人主頁背景圖即頭像輪播。還有一些社交軟件可以將個人系列頭像設為私密，然后定向開放展示給需要的人。
9. 捏臉頭像
ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風潮，雖然是三維形象的玩法，但和之前紅極一時的臉萌并沒有本質的區別，要想實現從工具到社交的轉變，獲取關系鏈才是王道。多閃和 Soul 動作也很快，已經上線了捏臉功能，雖然目前是二維的，但相信巨頭們早已開始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型，甚至可以進行簡單的化妝。服裝配飾則包括衣服、頭飾、首飾等，且支持按上架時間、價格等排序。室內裝飾則涵蓋了地板、家具、擺件、樂器等等。手勢主要是一些肢體動作庫，動作效果十分連貫。可以說 ZEPETO 集成了用戶對場景搭建+服飾搭配+顏值定義+炫酷動作的完美幻想，同時也擴充了人們對虛擬形象社交乃至電商新形態的想象空間。
目前市面上，尤其是游戲領域，不管畫風是 Q萌，還是 3D，時尚亦或仙俠，人物建模及捏臉系統已經比較完善，且得到廣泛應用。這里推薦一款叫做 IMVU 的 APP，它的人物畫風、服飾質感比 ZEPETO 更加寫實，更偏成人化，視角轉換也更加流暢，支持俯視/仰視。不過，臉萌早已涼涼，美圖的圖片社交之路似乎完全和 ins 對不上標，所以 3D 虛擬形象社交的未來之路也未可知。
10. 頭像掛件
頭像掛件、等級徽章、認證標志也屬于頭像的一部分，不過需要結合付費會員、用戶成長體系、認證規則進行討論才有意義。
11. 使用第三方頭像
使用第三方社交賬號快速登錄已經成為登錄注冊頁面的標配，畢竟一個授權就解決了賬號注冊、頭像及昵稱設置等問題。這兩天，吃瓜群眾們又一次見證了「頭騰大戰」。多閃使用了用戶的微信頭像和昵稱，可是并沒有得到相應授權，因為之前的授權是給抖音的，當然現在也停止授權了。不管是不是抖音碰瓷，但微信/QQ 賬戶上的頭像、昵稱的權益歸屬確實是個問題。個人上傳的頭像還好說，如果用的是系統推薦頭像，這些圖片的版權是不是歸屬騰訊呢？用戶使用第三方登錄后，最好還是引導用戶盡快綁定手機并設置完善其他資料。
12. 群組頭像
這里以 QQ、微信和釘釘為例進行分析。微信群聊頭像由群成員頭像組合生成，在方框內嵌套群成員的方形頭像，根據群成員的數量多少（1-9）進行相應排布，多于 9 人時顯示前 9 人頭像。另外，微信暫不支持設置圖片為群頭像。釘釘群與微信類似，不過外觀上是圓形外框嵌套群成員的方形頭像，顯示數量也有所限制（最多顯示前4個），但可以選擇其他圖片作為群組頭像。QQ 群比較復雜些，可分為討論組和群，雖然現在統稱「群聊」，根據創建方式區分如下：選人創建（對應的是討論組）和按分類創建（對應的是群）。討論組也是不能設置頭像的，是在圓形內嵌套群成員的圓形頭像，最多可顯示前 5 個成員的頭像。而群頭像由管理員設置，且可以查看歷史頭像、使用系統推薦頭像等。另外還有 TIM，定位是對抗釘釘的辦公軟件，比 QQ 更輕量化，視覺風格也大不相同， TIM 中討論組頭像的展示就采用了類似釘釘的做法──圓形外邊框+方形頭像。
延伸一下，有人說微信重新定義了群的設計形態，更貼近用戶自然使用方式：無需群ID，無需刻意創建群，隨時拉人開聊，無需命名，默認不保存到通訊錄，搜索群時可通過直接搜人實現等。
本文列舉分析了頭像設置的相關設計思路和案例，對社交產品的頭像設計大有裨益。在設計時，尋求相關設計參考是獲取靈感和解決方案的有效方法，認真發現生活中的好設計，及時積累并總結，才能在關鍵時刻有高質量的輸出。
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。