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