編輯導語：隨著互聯(lián)網(wǎng)的發(fā)展，各種社交軟件也在不斷地更新迭代，頭像可以說是社交軟件中尤其重要的一個設(shè)計。本文作者分享了有關(guān)產(chǎn)品頭像的基礎(chǔ)設(shè)計知識，講述了頭像元素的方方面面，感興趣的一起來看看吧。

最真實的例子，當我們在某社交軟件將頭像設(shè)置成帥哥/美女，搭訕與被搭訕的概率會成倍提升，這也是為什么行騙的人總是會先設(shè)置一個美女頭像（背后摳腳大漢）總能提高成功率的原因，頭像的魔力可見一斑。

不論是真實社交、虛擬網(wǎng)絡(luò)，甚至跟社交毫不沾邊，任何應(yīng)用只要有用戶的概念，就會有頭像的存在，只不過產(chǎn)品頭像權(quán)重、用戶重視程度不同而已。在這個“看臉的時代”，跟陌生人搭訕的成本很高，第一步就用看頭像來確定是否建立社交關(guān)系是最直接快速的方式。

在UI設(shè)計中，95%以上的應(yīng)用會涉及到頭像元素，例如消息列表、個人中心/主頁、會員服務(wù)、評價、排行榜等功能版塊，明明用昵稱或幾個文字就能說清楚的地方，偏偏設(shè)計了一個頭像、而且還占據(jù)該信息組的主視覺。

那么，看起來簡簡單單、或方或圓的小頭像到底還有哪些我們不知道的細節(jié)知識，今天筆者就通過這篇文章跟大家聊聊頭像元素的方方面面，希望對大家有所幫助，歡迎共同探討，相互交流。

一、頭像在UI界面中的作用

1. 多賬號區(qū)分

出于特殊原因，很多銷售、客服等職業(yè)，在同一個應(yīng)用中可能會存在多個賬號，需要確認自己當前登錄的是哪個賬號時，查看頭像就是最好的區(qū)分（需設(shè)置不同的頭像）方式，當然也有一些非正常需要的用戶有另外的小號，相信頭像也會有所區(qū)別，其作用這里不便多說，避免「社死」。

另外，如QQ登錄、微信賬號切換頁面，也會利用突出的頭像來快速區(qū)分賬號信息。

2. 凸顯自身形象

某個用戶使用了一張成熟穩(wěn)重、端莊得體的形象照作為個人頭像時，在大多數(shù)情況下，這個人一定不是個動不動就爆粗口的鍵盤俠或網(wǎng)絡(luò)噴子，雖然“隔著屏幕你又打不到我”，但在發(fā)表內(nèi)容時會注意自己的措辭，潛意識的維護自己的網(wǎng)絡(luò)形象（頭像），這就是現(xiàn)實與網(wǎng)絡(luò)中頭像的人格映射。

當碰到匿名社交時，為自己戴上面具后就會變得肆無忌憚，與前者相比，至少不再那么約束。

3.“面對面”溝通代表

很多時候，不管是跟好友聊天、還是在不同的應(yīng)用中留言評論，有頭像的用戶總感覺是在進行平等交流，這么說感覺很抽象，下面舉個例子：

如果是一個單身男性，當社交應(yīng)用中有人加好友或請教問題時，針對有美女頭像的用戶，其響應(yīng)效率、質(zhì)量都會比其他頭像的用戶要高，這是不爭的事實（別杠，我們不談個例），這也說明自己時刻都在注意在對方心中的形象，總擔心被對方看“穿”。

二、各場景中的頭像類型

1. 默認頭像

非強制登錄的應(yīng)用，切換到個人中心時，一般會有一個默認頭像占位，可以是人物形象剪影或品牌吉祥物，以確保用戶在登錄之前保持頁面的完整性。另外，即便用戶登錄后有上傳自己的頭像，但遇到網(wǎng)絡(luò)延遲、頭像加載失敗、匿名操作等情況，系統(tǒng)默認頭像都可起到臨時替補的作用。常見的默認頭像有灰色、彩色兩種色彩模式，其二者各有利弊。

1）灰色頭像

灰色頭像色彩感較弱，可能會導致視覺不平衡，打破畫面的美感，但也正好通過這一絲的不和諧，用一種明顯且突兀的方式提醒用戶去更換頭像，強迫癥患者幾乎無法抵抗。

2）彩色頭像

絕大多數(shù)是結(jié)合品牌色、吉祥物等進行展示，還能起到豐富畫面、增加趣味性的作用，相比灰色頭像則更加生動，不管用戶是否登錄、有無更換頭像，都能保持界面的視覺平衡，唯一的缺點可能降低用戶更換頭像的欲望。

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

1）用戶選擇

大家早期接觸的QQ就是最典型的案例，系統(tǒng)提供了多種頭像以供用戶選擇，甚至將部分頭像納入了QQ會員功能，當用戶沒有合適的圖片作為頭像且難以抉擇時，使用系統(tǒng)推薦的頭像不僅能降低用戶的選擇成本，還能滿足部分個性化需求。如果默認頭像跟產(chǎn)品相關(guān)聯(lián)，也可作為品牌傳播途徑，兩全其美的選擇。

另外，最近很火的匿名社交應(yīng)用Soul 只能使用系統(tǒng)頭像（可自定義調(diào)整），不允許上傳圖片，這源于平臺希望用戶拋開顏值，通過不同的個體審美、價值觀等進行心靈交流，找到真正的靈魂伴侶。

同時，因為龐大的用戶量，圖片是否合法、質(zhì)量的好壞帶來了一系列的監(jiān)管問題，使用系統(tǒng)推薦頭像，在很大程度上能降低圖片管理成本（PS：強制使用系統(tǒng)頭像跟產(chǎn)品定位有著絕對的關(guān)系，并非拍腦門決定）。

2）系統(tǒng)選擇

注冊成功后，系統(tǒng)會隨機匹配個人頭像，相比用戶自己在列表手動選擇，則多了一份神秘感與期待感，讓頭像的設(shè)置變的更有趣，例如小紅書、B站等應(yīng)用。

3. 文字頭像

常出現(xiàn)在移動辦公類應(yīng)用中，由系統(tǒng)自動處理，基于OA類應(yīng)用社交屬性并不強，大多用于內(nèi)部團隊工作中的溝通交流，例如釘釘、紛享銷客、飛書等。為了更清晰的獲取對方個人信息，這類產(chǎn)品頭像更傾向于上傳自己的真實照片（部分企業(yè)強制），在用戶未上傳照片的情況下，系統(tǒng)會提取中文名字中的后兩個字（兩個字的全名顯示）、英文名字前兩個字母作為個人頭像使用，方便團隊成員更好的辨認。

4. 群組頭像

只出現(xiàn)在群聊中，由多個群成員的頭像組合而成，不同的應(yīng)用對頭像上限的設(shè)定不同，最為常見的是4個、9個兩種。群組頭像大多數(shù)不支持自定義上傳，會根據(jù)當前群成員的數(shù)量（1-4人、1-9人）進行宮格排列，且不會超出設(shè)定的上限，例如釘釘群、微信群、QQ群等。

5. 用戶頭像組

在部分應(yīng)用場景中，產(chǎn)品將多個用戶頭像堆疊組合在一起，通過“羊群效應(yīng)”引導后續(xù)用戶產(chǎn)生從眾心理，以提高轉(zhuǎn)化率，例如有多少用戶已購買、多少用戶已中獎等。另外，視頻平臺的直播間也會將排名靠前的用戶頭像組合排列并展示出來，吸引其他用戶關(guān)注。

6. 歷史頭像

1）同平臺

QQ會將用戶之前使用過的頭像搜集起來并單獨提供一個入口，用戶需要換頭像時，可再次選擇使用，雖然重新使用的幾率并不高，但也不失為一種情懷，用戶能清楚知道頭像更換的歷史軌跡，滿滿的回憶感。

設(shè)置微信頭像時，也可選擇使用上一張頭像，方便用戶設(shè)置新頭像后反悔，可以理解為撤銷本次更換操作，如果需要對圖片進行裁切，也方便用戶跟上一張頭像反復(fù)對比。

2）跨平臺

第三方登錄的標配，用戶無需重新編輯，就可以無差別繼承第三方賬號的頭像、昵稱等信息，節(jié)省了大量的時間及操作成本，例如微信、QQ、支付寶、微博授權(quán)登錄等。

7. 其他頭像

除了上述頭像類型外，還有如視頻頭像、GIF頭像、輪播頭像等，這些并不常用，了解一下就好。

另外就是之前刮起的一陣虛擬形象社交風潮而爆火的捏臉頭像，極具針對性的新型頭像類型，如果感興趣，可以去下載Soul、崽崽APP體驗，這里不多做贅述。

三、頭像狀態(tài)與附加操作

1. 不同的用戶狀態(tài)

用彩色頭像和黑白頭像來區(qū)分用戶是否在線是最直觀的表現(xiàn)方式，例如打開QQ好友列表，對方當前是否在線一目了然。除此之外，QQ的在線狀態(tài)還延展了多種子級狀態(tài)，例如：離開、忙碌、聽歌中、請勿打擾…等，設(shè)置成功后，會以小圖標的樣式重疊在頭像右下角，好友看到后能清晰感知當前狀態(tài)下是否可以立即聯(lián)系你。抖音采用了較為簡單的方式，頭像右下角有綠色小圓點顯示表示在線，沒有則代表離線。

2. 事件通知

常用于非社交類應(yīng)用（社交應(yīng)用有更專業(yè)的處理方式）的未讀消息/事件通知，顯示在頭像右上角，點擊查看后會消失?？稍O(shè)計不同的樣式以體現(xiàn)視覺的強弱關(guān)系，對用戶產(chǎn)生不同程度的引導。

• 弱提示：小圓點提示，填充紅色或主體色，提示程度較弱；
• 中等提示：白色圓形+數(shù)字提示，數(shù)字色彩可以是紅色或主體色；
• 強提示：圓形白色描邊及紅色填充+數(shù)字反白，較突兀的提示方式。

3. 掛件/裝飾

很多掛件只是純粹的裝飾品，能起到美化、娛樂、趣味性的作用；增值服務(wù)、特權(quán)服務(wù)、認證類的標識更是一種身份的象征，體現(xiàn)出榮譽、尊貴的感覺；有小部分應(yīng)用將用戶的勛章標識重疊在頭像某個位置，時刻給用戶帶來一種堅持完成任務(wù)之后的成就感，滿足其虛榮心的表現(xiàn)。

4. 交互操作

在很多應(yīng)用中，個人中心頁面的頭像區(qū)域隱藏了設(shè)置功能，點擊后會進入到個人主頁、個人信息頁或更換頭像頁面。還有一些無實際功能作用、純?nèi)の痘慕换?，例如雙擊微信好友的頭像“拍一拍”、拖動即刻個人中心頭像會出現(xiàn)一個紅心等，不同程度的給用戶制造意外驚喜。

還有部分應(yīng)用，在頭像右下角通過有明確指向含義的圖標引導用戶操作。

例如在完成表單過程中需要添加頭像，上傳成功后，頭像右下角會出現(xiàn)刪除圖標；Soul個人中心頭像右下角增加了個性商城入口；QQ、即刻則通過相機圖標提示用戶點擊可直接更換頭像，這種引導性的圖標都相對較小，需要精準點擊，為避免無效操作，在不影響其他交互的情況下，請盡量擴大圖標熱區(qū)范圍。

四、方形與圓形的定義

雖然我們用過、研究過大量的互聯(lián)網(wǎng)產(chǎn)品，但也許真的沒怎么關(guān)注過頭像的形狀，以當前幾個主流的產(chǎn)品為例，QQ、抖音是圓形頭像，而微信、釘釘則是方形（圓角）頭像，如果真的要分出個勝負，那么很明顯，大部分產(chǎn)品使用的都是圓形。方形和圓形到底有什么區(qū)別？設(shè)計時該如何選擇？下面我們就一起來嘮一嘮。

• 方形頭像對照片的空間利用率更高、降低空間損失，圓形通過裁剪讓空間更平衡、看起來更精致；
• 方形對四角、中心點均可構(gòu)成聚焦區(qū)域，使用靈活，圓形則邊界完美，沒有聚焦沖突，可突出核心；
• 古埃及曾認為圓形是神賜予人們的神圣圖形，因圖形邊界完美，能給人公正、信任感，但矩形卻能給人一種專業(yè)、穩(wěn)定的感覺；
• 圓形被認為是活潑，方形則顯得比較嚴肅；
• QQ團隊曾給出答案，因產(chǎn)品定位就要是給人一種年輕化、活躍的感覺，且人的臉也接近圓形，裁切后更能凸顯人的臉部特征（看臉時代），明顯使用圓形更適合。微信設(shè)計師的說法是圖片本來就是方形（扯遠了），方形頭像能最大程度的降低圖片損失，而且微信的定位相對成熟，方形還能給用戶一種穩(wěn)定可靠的感覺，更符合用戶習慣，如果一定要用圓形，將頭像處理成圓形即可，方/圓兼具；

說了這么多，依然不知道如何選擇，那么筆者將根據(jù)一些常用到頭像的三個模塊給你一些建議：

1. 個人中心/主頁：如無特別需要，大部分情況下使用圓形，不會出錯；
2. 消息列表/即時會話：根據(jù)產(chǎn)品定位、上述的參考比較后決定，沒有明確的要求，使用其中一種形狀后，在其他同等級頁面統(tǒng)一即可；
3. 評論/交流區(qū)：直接圓形，沒有為什么。頭像本來就小，裁切掉無關(guān)信息會更聚焦。

五、頭像設(shè)置步驟

1. 頭像來源

用移動端設(shè)備上傳頭像時，來源主要為系統(tǒng)推薦、歷史頭像、從相冊選擇、拍照這幾種方式，電腦端因設(shè)備限制等原因，一般只有系統(tǒng)推薦和上傳本地圖片。

2. 上傳限制

上傳圖片時，一般會對圖片的格式（JPG/PNG/GIF等）、尺寸（寬*高）、文件大?。ǘ嗌貹B/M）作出限制，這些需要給予明確的提示，避免用戶因操作多次失敗而受挫離開，同時也能避免因用戶不知道平臺可使用GIF、視頻等頭像格式，而雪藏了產(chǎn)品的多元化服務(wù)。

3. 圖片裁剪

因圖片來源、拍攝手法不一，針對橫圖、豎圖，系統(tǒng)會貼著邊緣（避免壓縮/拉伸）先進行一次自動裁剪進行取方，然后用戶可自行調(diào)整大小，選取最佳位置。

4. 效果預(yù)覽

需要給用戶提供真實的效果預(yù)覽圖，避免用戶因操作失誤或?qū)μ幚砗蟮念^像不滿意再次重復(fù)整個更換流程。所見即所得，通過降低用戶重復(fù)操作的概率也是提升用戶滿意度的方式之一。

六、引導用戶上傳頭像

1. 文案引導

當產(chǎn)品要求用戶組做某件事情時，即便是為用戶考慮，也需要給予一個合理的理由，可使用趣味、情感化或鼓勵性質(zhì)的文案引導用戶主動上傳頭像，例如社交類應(yīng)用“一切都很完美、就差一個帥氣的頭像了”、“換個好頭像會讓更多人認識你”等?；蛘哂脩粼诰庉媯€人信息時給予鼓勵“恭喜你，只差最后一步了，換個頭像就十分完美了”。

2. 第三方授權(quán)

前面講到過第三方登錄的方式，相信這也是對懶癌癥患者上傳頭像最直接粗暴的方式了。

3. 納入注冊流程

部分社交類應(yīng)用將上傳頭像作為注冊流程中的必選步驟，任何用戶都無法跳過，切記這種方式非必要不可濫用/亂用，這相當于對用戶注冊增加了門檻，任何產(chǎn)品每多一點操作成本，都會有一批用戶離開，需根據(jù)產(chǎn)品定位以及強制上傳頭像的重要性來決定，避免得不償失。

七、結(jié)語

「無頭像不社交」，在設(shè)計界面之前，設(shè)計師應(yīng)該考慮清楚產(chǎn)品社交屬性的等級，再來決定頭像在界面中的權(quán)重、占比，至于如何使用，還需根據(jù)產(chǎn)品的實際情況并結(jié)合用戶頭像的基礎(chǔ)知識合理的做出判斷。

「麻雀最小、五臟俱全」，頭像看似一個很簡單的UI元素，但在設(shè)計過程中需考慮的知識點還是有很多，這就需要我們平時不斷的積累、探索，并多多總結(jié)，再融合到實際的UI設(shè)計中，做出有理有據(jù)的設(shè)計。

最后，分享一個圖片轉(zhuǎn)插畫頭像的工具：https://newprofilepic.com，非常好用，如果感興趣就試試吧！

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。