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