在UI設(shè)計中，95%以上的應(yīng)用會涉及到頭像元素，例如消息列表、個人中心/主頁、會員服務(wù)、評價、排行榜等功能版塊，明明用昵稱或幾個文字就能說清楚的地方，偏偏設(shè)計了一個頭像、而且還占據(jù)該信息組的主視覺。那么，看起來簡簡單單、或方或圓的小頭像到底還有哪些我們不知道的細(xì)節(jié)知識，今天筆者就通過這篇文章跟大家聊聊頭像元素的方方面面，希望對大家有所幫助，歡迎共同探討，相互交流。
一、頭像在UI界面中的作用
1. 多賬號區(qū)分
出于特殊原因，很多銷售、客服等職業(yè)，在同一個應(yīng)用中可能會存在多個賬號，需要確認(rèn)自己當(dāng)前登錄的是哪個賬號時，查看頭像就是最好的區(qū)分（需設(shè)置不同的頭像）方式，當(dāng)然也有一些非正常需要的用戶有另外的小號，相信頭像也會有所區(qū)別，其作用這里不便多說，避免「社死」。另外，如QQ登錄、微信賬號切換頁面，也會利用突出的頭像來快速區(qū)分賬號信息。
2. 凸顯自身形象
某個用戶使用了一張成熟穩(wěn)重、端莊得體的形象照作為個人頭像時，在大多數(shù)情況下，這個人一定不是個動不動就爆粗口的鍵盤俠或網(wǎng)絡(luò)噴子，雖然“隔著屏幕你又打不到我”，但在發(fā)表內(nèi)容時會注意自己的措辭，潛意識的維護(hù)自己的網(wǎng)絡(luò)形象（頭像），這就是現(xiàn)實與網(wǎng)絡(luò)中頭像的人格映射。當(dāng)碰到匿名社交時，為自己戴上面具后就會變得肆無忌憚，與前者相比，至少不再那么約束。
3. “面對面”溝通代表
很多時候，不管是跟好友聊天、還是在不同的應(yīng)用中留言評論，有頭像的用戶總感覺是在進(jìn)行平等交流，這么說感覺很抽象，下面舉個例子：
如果是一個單身男性，當(dāng)社交應(yīng)用中有人加好友或請教問題時，針對有美女頭像的用戶，其響應(yīng)效率、質(zhì)量都會比其他頭像的用戶要高，這是不爭的事實（別杠，我們不談個例），這也說明自己時刻都在注意在對方心中的形象，總擔(dān)心被對方看“穿”。
二、各場景中的頭像類型
1. 默認(rèn)頭像
非強(qiáng)制登錄的應(yīng)用，切換到個人中心時，一般會有一個默認(rèn)頭像占位，可以是人物形象剪影或品牌吉祥物，以確保用戶在登錄之前保持頁面的完整性。另外，即便用戶登錄后有上傳自己的頭像，但遇到網(wǎng)絡(luò)延遲、頭像加載失敗、匿名操作等情況，系統(tǒng)默認(rèn)頭像都可起到臨時替補(bǔ)的作用。常見的默認(rèn)頭像有灰色、彩色兩種色彩模式，其二者各有利弊。
1）灰色頭像
灰色頭像色彩感較弱，可能會導(dǎo)致視覺不平衡，打破畫面的美感，但也正好通過這一絲的不和諧，用一種明顯且突兀的方式提醒用戶去更換頭像，強(qiáng)迫癥患者幾乎無法抵抗。
2）彩色頭像
絕大多數(shù)是結(jié)合品牌色、吉祥物等進(jìn)行展示，還能起到豐富畫面、增加趣味性的作用，相比灰色頭像則更加生動，不管用戶是否登錄、有無更換頭像，都能保持界面的視覺平衡，唯一的缺點可能降低用戶更換頭像的欲望。
2. 系統(tǒng)推薦頭像
1）用戶選擇
大家早期接觸的QQ就是最典型的案例，系統(tǒng)提供了多種頭像以供用戶選擇，甚至將部分頭像納入了QQ會員功能，當(dāng)用戶沒有合適的圖片作為頭像且難以抉擇時，使用系統(tǒng)推薦的頭像不僅能降低用戶的選擇成本，還能滿足部分個性化需求。如果默認(rèn)頭像跟產(chǎn)品相關(guān)聯(lián)，也可作為品牌傳播途徑，兩全其美的選擇。
另外，最近很火的匿名社交應(yīng)用Soul 只能使用系統(tǒng)頭像（可自定義調(diào)整），不允許上傳圖片，這源于平臺希望用戶拋開顏值，通過不同的個體審美、價值觀等進(jìn)行心靈交流，找到真正的靈魂伴侶。同時，因為龐大的用戶量，圖片是否合法、質(zhì)量的好壞帶來了一系列的監(jiān)管問題，使用系統(tǒng)推薦頭像，在很大程度上能降低圖片管理成本。
（PS：強(qiáng)制使用系統(tǒng)頭像跟產(chǎn)品定位有著絕對的關(guān)系，并非拍腦門決定）
2）系統(tǒng)選擇
注冊成功后，系統(tǒng)會隨機(jī)匹配個人頭像，相比用戶自己在列表手動選擇，則多了一份神秘感與期待感，讓頭像的設(shè)置變的更有趣，例如小紅書、B站等應(yīng)用。
3. 文字頭像
常出現(xiàn)在移動辦公類應(yīng)用中，由系統(tǒng)自動處理，基于OA類應(yīng)用社交屬性并不強(qiáng)，大多用于內(nèi)部團(tuán)隊工作中的溝通交流，例如釘釘、紛享銷客、飛書等。為了更清晰的獲取對方個人信息，這類產(chǎn)品頭像更傾向于上傳自己的真實照片（部分企業(yè)強(qiáng)制），在用戶未上傳照片的情況下，系統(tǒng)會提取中文名字中的后兩個字（兩個字的全名顯示）、英文名字前兩個字母作為個人頭像使用，方便團(tuán)隊成員更好的辨認(rèn)。
4. 群組頭像
只出現(xiàn)在群聊中，由多個群成員的頭像組合而成，不同的應(yīng)用對頭像上限的設(shè)定不同，最為常見的是4個、9個兩種。群組頭像大多數(shù)不支持自定義上傳，會根據(jù)當(dāng)前群成員的數(shù)量（1-4人、1-9人）進(jìn)行宮格排列，且不會超出設(shè)定的上限，例如釘釘群、微信群、QQ群等。
5. 用戶頭像組
在部分應(yīng)用場景中，產(chǎn)品將多個用戶頭像堆疊組合在一起，通過“羊群效應(yīng)”引導(dǎo)后續(xù)用戶產(chǎn)生從眾心理，以提高轉(zhuǎn)化率，例如有多少用戶已購買、多少用戶已中獎等。另外，視頻平臺的直播間也會將排名靠前的用戶頭像組合排列并展示出來，吸引其他用戶關(guān)注。
6. 歷史頭像
1）同平臺
QQ會將用戶之前使用過的頭像搜集起來并單獨提供一個入口，用戶需要換頭像時，可再次選擇使用，雖然重新使用的幾率并不高，但也不失為一種情懷，用戶能清楚知道頭像更換的歷史軌跡，滿滿的回憶感。
設(shè)置微信頭像時，也可選擇使用上一張頭像，方便用戶設(shè)置新頭像后反悔，可以理解為撤銷本次更換操作，如果需要對圖片進(jìn)行裁切，也方便用戶跟上一張頭像反復(fù)對比。
2）跨平臺
第三方登錄的標(biāo)配，用戶無需重新編輯，就可以無差別繼承第三方賬號的頭像、昵稱等信息，節(jié)省了大量的時間及操作成本，例如微信、QQ、支付寶、微博授權(quán)登錄等。
7. 其他頭像
除了上述頭像類型外，還有如視頻頭像、GIF頭像、輪播頭像等，這些并不常用，了解一下就好。另外就是之前刮起的一陣虛擬形象社交風(fēng)潮而爆火的捏臉頭像，極具針對性的新型頭像類型，如果感興趣，可以去下載Soul、崽崽APP體驗，這里不多做贅述。
三、頭像狀態(tài)與附加操作
1. 不同的用戶狀態(tài)
用彩色頭像和黑白頭像來區(qū)分用戶是否在線是最直觀的表現(xiàn)方式，例如打開QQ好友列表，對方當(dāng)前是否在線一目了然。除此之外，QQ的在線狀態(tài)還延展了多種子級狀態(tài)，例如：離開、忙碌、聽歌中、請勿打擾…等，設(shè)置成功后，會以小圖標(biāo)的樣式重疊在頭像右下角，好友看到后能清晰感知當(dāng)前狀態(tài)下是否可以立即聯(lián)系你。抖音采用了較為簡單的方式，頭像右下角有綠色小圓點顯示表示在線，沒有則代表離線。
2. 事件通知
常用于非社交類應(yīng)用（社交應(yīng)用有更專業(yè)的處理方式）的未讀消息/事件通知，顯示在頭像右上角，點擊查看后會消失?？稍O(shè)計不同的樣式以體現(xiàn)視覺的強(qiáng)弱關(guān)系，對用戶產(chǎn)生不同程度的引導(dǎo)。
- 弱提示：小圓點提示，填充紅色或主體色，提示程度較弱；
- 中等提示：白色圓形+數(shù)字提示，數(shù)字色彩可以是紅色或主體色；
- 強(qiáng)提示：圓形白色描邊及紅色填充+數(shù)字反白，較突兀的提示方式。
3. 掛件/裝飾
很多掛件只是純粹的裝飾品，能起到美化、娛樂、趣味性的作用；增值服務(wù)、特權(quán)服務(wù)、認(rèn)證類的標(biāo)識更是一種身份的象征，體現(xiàn)出榮譽(yù)、尊貴的感覺；有小部分應(yīng)用將用戶的勛章標(biāo)識重疊在頭像某個位置，時刻給用戶帶來一種堅持完成任務(wù)之后的成就感，滿足其虛榮心的表現(xiàn)。
4. 交互操作
在很多應(yīng)用中，個人中心頁面的頭像區(qū)域隱藏了設(shè)置功能，點擊后會進(jìn)入到個人主頁、個人信息頁或更換頭像頁面。還有一些無實際功能作用、純?nèi)の痘慕换?，例如雙擊微信好友的頭像“拍一拍”、拖動即刻個人中心頭像會出現(xiàn)一個紅心等，不同程度的給用戶制造意外驚喜。
還有部分應(yīng)用，在頭像右下角通過有明確指向含義的圖標(biāo)引導(dǎo)用戶操作。例如在完成表單過程中需要添加頭像，上傳成功后，頭像右下角會出現(xiàn)刪除圖標(biāo)；Soul個人中心頭像右下角增加了個性商城入口；QQ、即刻則通過相機(jī)圖標(biāo)提示用戶點擊可直接更換頭像，這種引導(dǎo)性的圖標(biāo)都相對較小，需要精準(zhǔn)點擊，為避免無效操作，在不影響其他交互的情況下，請盡量擴(kuò)大圖標(biāo)熱區(qū)范圍。
四、方形與圓形的定義
雖然我們用過、研究過大量的互聯(lián)網(wǎng)產(chǎn)品，但也許真的沒怎么關(guān)注過頭像的形狀，以當(dāng)前幾個主流的產(chǎn)品為例，QQ、抖音是圓形頭像，而微信、釘釘則是方形（圓角）頭像，如果真的要分出個勝負(fù)，那么很明顯，大部分產(chǎn)品使用的都是圓形。方形和圓形到底有什么區(qū)別？設(shè)計時該如何選擇？下面我們就一起來嘮一嘮。
- 方形頭像對照片的空間利用率更高、降低空間損失，圓形通過裁剪讓空間更平衡、看起來更精致；
- 方形對四角、中心點均可構(gòu)成聚焦區(qū)域，使用靈活，圓形則邊界完美，沒有聚焦沖突，可突出核心；
- 古埃及曾認(rèn)為圓形是神賜予人們的神圣圖形，因圖形邊界完美，能給人公正、信任感，但矩形卻能給人一種專業(yè)、穩(wěn)定的感覺；
- 圓形被認(rèn)為是活潑，方形則顯得比較嚴(yán)肅；
- QQ團(tuán)隊曾給出答案，因產(chǎn)品定位就要是給人一種年輕化、活躍的感覺，且人的臉也接近圓形，裁切后更能凸顯人的臉部特征（看臉時代），明顯使用圓形更適合。微信設(shè)計師的說法是圖片本來就是方形（扯遠(yuǎn)了），方形頭像能最大程度的降低圖片損失，而且微信的定位相對成熟，方形還能給用戶一種穩(wěn)定可靠的感覺，更符合用戶習(xí)慣，如果一定要用圓形，將頭像處理成圓形即可，方/圓兼具；
- ……
說了這么多，依然不知道如何選擇，那么筆者將根據(jù)一些常用到頭像的三個模塊給你一些建議：
- 個人中心/主頁：如無特別需要，大部分情況下使用圓形，不會出錯；
- 消息列表/即時會話：根據(jù)產(chǎn)品定位、上述的參考比較后決定，沒有明確的要求，使用其中一種形狀后，在其他同等級頁面統(tǒng)一即可；
- 評論/交流區(qū)：直接圓形，沒有為什么。頭像本來就小，裁切掉無關(guān)信息會更聚焦。
五、頭像設(shè)置步驟
1. 頭像來源
用移動端設(shè)備上傳頭像時，來源主要為系統(tǒng)推薦、歷史頭像、從相冊選擇、拍照這幾種方式，電腦端因設(shè)備限制等原因，一般只有系統(tǒng)推薦和上傳本地圖片。
2. 上傳限制
上傳圖片時，一般會對圖片的格式（JPG/PNG/GIF等）、尺寸（寬*高）、文件大小（多少KB/M）作出限制，這些需要給予明確的提示，避免用戶因操作多次失敗而受挫離開，同時也能避免因用戶不知道平臺可使用GIF、視頻等頭像格式，而雪藏了產(chǎn)品的多元化服務(wù)。
3. 圖片裁剪
因圖片來源、拍攝手法不一，針對橫圖、豎圖，系統(tǒng)會貼著邊緣（避免壓縮/拉伸）先進(jìn)行一次自動裁剪進(jìn)行取方，然后用戶可自行調(diào)整大小，選取最佳位置。
4. 效果預(yù)覽
需要給用戶提供真實的效果預(yù)覽圖，避免用戶因操作失誤或?qū)μ幚砗蟮念^像不滿意再次重復(fù)整個更換流程。所見即所得，通過降低用戶重復(fù)操作的概率也是提升用戶滿意度的方式之一。
六、引導(dǎo)用戶上傳頭像
1. 文案引導(dǎo)
當(dāng)產(chǎn)品要求用戶組做某件事情時，即便是為用戶考慮，也需要給予一個合理的理由，可使用趣味、情感化或鼓勵性質(zhì)的文案引導(dǎo)用戶主動上傳頭像，例如社交類應(yīng)用“一切都很完美、就差一個帥氣的頭像了”、“換個好頭像會讓更多人認(rèn)識你”等?；蛘哂脩粼诰庉媯€人信息時給予鼓勵“恭喜你，只差最后一步了，換個頭像就十分完美了”。
2. 第三方授權(quán)
前面講到過第三方登錄的方式，相信這也是對懶癌癥患者上傳頭像最直接粗暴的方式了。
3. 納入注冊流程
部分社交類應(yīng)用將上傳頭像作為注冊流程中的必選步驟，任何用戶都無法跳過，切記這種方式非必要不可濫用/亂用，這相當(dāng)于對用戶注冊增加了門檻，任何產(chǎn)品每多一點操作成本，都會有一批用戶離開，需根據(jù)產(chǎn)品定位以及強(qiáng)制上傳頭像的重要性來決定，避免得不償失。
七、結(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，非常好用，如果感興趣就試試吧！
原文地址：能量眼球
作者：大漠飛鷹CYSJ
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》頭像篇 | 幫你快速掌握頭像基礎(chǔ)設(shè)計知識！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司