全栈工程师?
嗯.....目前并不是!

頭像設置:無頭像,不社交

本文介紹了頭像設置流程,列舉分析了頭像設置的相關設計思路和案例。閱讀此文,相信大家對於社交產品的頭像設計會有一定的啟發。

在這個看臉的時代,無論真實社交,還是網絡社交(特別是陌生人社交),甚至虛擬形象社交,“顏值即正義”。長得好看是一大優勢,或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的,還是要看個人的社交能力。

在進行網絡社交時(興趣社交除外),可謂“無頭像,不社交”,畢竟跟陌生人搭訕的篩選成本太高,看頭像照片是最直接快速的方式。據說,有好事者在三里屯註冊了某一款陌生人社交軟件,並將頭像設置成了一個在盧浮宮的露背少女照片,在短短時間內,居然收到了10000多次點贊。頭像的魔力可見一斑。

一、頭像設置流程

頭像設置流程一般包括頭像選擇、上傳、裁剪、預覽四個步驟,在用戶界面上展現時,部分步驟可合併或跳過,但至少要包括裁剪和預覽。

1. 選擇圖片源

頭像圖片的來源包括:本地圖片、系統推薦頭像、用戶個人線上相冊、即時拍攝等。

同一產品在不同端可以支持不同的上傳渠道,比如:PC端攝像頭拍攝質量不佳,而且台式機不一定配備,一般可以不做支持。

2. 上傳條件限制

上傳本地圖片作為頭像時,圖片的格式、尺寸、文件大小規則應盡量放開限制,至少要支持JPG、GIF、PNG、JPEG、BMP等格式。隨着手機拍攝照片的尺寸和大小越來越大,所以5-6M是一個比較合適的上限。關於服務器圖片存儲,應保留一張高清大圖和多套不同尺寸的縮略圖。

3. 裁剪處理

圖片裁剪包括:系統自動裁剪和用戶手動裁剪。

如果不支持手動裁剪,最好把系統自動裁剪和截取做了,比如:京東商城web端就沒有截取圖片中央區域,而是直接擠壓或拉伸圖片,導致圖片變形效果很差。

手動裁剪時,一般要輔助縮放、旋轉、鏡像等功能。縮放時需注意極限值,否則會導致背景空白(如QQ空間),要做相應的填充處理。

裁剪框最好加入輔助線(如九宮格、方圓)和遮罩,方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。

TIM截圖20190320084207.png

4. 效果預覽

“所見即所得”是打造優良用戶體驗的訣竅之一,所以提供實時反饋和預覽是必不可少的,比如:裁剪得到的各種形狀和尺寸的預覽,濾鏡效果實時渲染等。當然,實時性也和系統性能有關。

頭像的常見展示形狀包括方和圓,有時也有異形頭像。關於頭像形狀的“方圓”論證可以參考微信和QQ設計師的官方回復:

同樣作為騰訊的產品,為什麼QQ的頭像是圓的?而微信的頭像是方的呢?

騰訊的回應如下:

  1. 相比方形,人的頭像更接近圓形。圓形QQ頭像能更突出頭像弱化背景,也更鼓勵用戶使用真實自拍作為QQ頭像。
  2. QQ作為平台會接入遊戲和第三方應用內容,圓形QQ頭像在這些方形、異形圖標環境中提高辨識度,降低用戶的認知門檻。
  3. QQ希望給用戶傳遞樂在溝通,展現年輕個性的態度,圓形QQ頭像更具靈動和活力,與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

——by QQ設計師

“因為照片本來是方的,方頭像更符合用戶習慣。”——by 微信設計師

還有百度小程序關於頭像的規範可供參考:

頭像應保證清晰,頭像的主體元素在方形或圓形參考線內,不遮擋關鍵信息,確保前端展現時能在圓形輪廓中展現完全。

二、設置頭像的各種方式

1. 默認頭像

為縮短註冊流程,減少潛在用戶流失,用戶註冊過程中一般不會強制用戶設置頭像。

所以,為防止用戶不去設置頭像以及頁面中頭像加載不出來,系統會提供默認頭像以便在相關位置展示。可以採用灰色頭像,也可以採用基於企業吉祥物卡通形象設計的彩色頭像(例如:蝦米、轉轉)。

二者各有好處,灰色頭像可以時常提醒用戶去設置頭像,彩色頭像則可以減少頁面單調、增加趣味性。不過唯一的遺憾是:一旦設置了新頭像,改不回默認頭像了,畢竟有的默認頭像還是挺好看的。有的社區允許遊客用戶進行點贊、評論等操作,這時便會用到遊客默認頭像。

當然,同一系統內,默認頭像也可以不唯一,比如:根據用戶性別、星座匹配頭像,根據用戶身份角色匹配頭像(司機/乘客,招聘者/求職者),或者製作頭像庫為用戶隨機分配頭像。

2. 系統推薦頭像

讓用戶自己拍攝/找到一張自己滿意的圖片做頭像,對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大,圖片質量難以保證,甚至內容監管又會帶來新的問題。

所以,推薦一些優質頭像供用戶挑選,就成了一個很不錯的輔助解決方案。QQ很早就推出了類似功能,甚至成了會員服務的一部分。平安金管家APP也有類似功能,提供了四個商務風格的卡通頭像供用戶選擇。

image.png

最近比較火的匿名社交APP Soul也同樣支持使用系統推薦頭像,而且是只能使用系統頭像,如下圖所示。

用戶可以根據自己所設置的性別(只允許修改一次),頭像風格(包括繪本、二次元、可愛、經典四種風格)選擇心儀的頭像。Soul不允許用戶上傳其他照片作為頭像,也是希望用戶能拋開顏值,找到真正的靈魂伴侶。這些頭像本身也體現了用戶個體的審美情趣、價值觀等。

最近Soul新上線了“超萌捏臉功能”,下文會着重詳細分析,不過捏臉捏成的頭像依然可以算是系統推薦頭像,只是把頭像拆解成了頭髮、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素,然後再由用戶自己排列組合。

image.png

3. 隨機選擇頭像

前文也提到了隨機頭像——即系統會在用戶註冊成功後為其隨機匹配頭像,避免單一默認頭像的沉悶,記憶中GitHub以前就是採用這種做法。

另一種隨機頭像是指:用戶主動選擇隨機頭像,獲得相應的驚喜,比如嗶哩嗶哩就採用了這種做法。

不過實在難以琢磨出這種類似“變臉”的玩法背後的設計邏輯。

image.png

4. 使用歷史頭像

在用戶使用過一段產品之後,可能會積累大量的歷史頭像(主要是用戶自主上傳的,使用過的系統頭像不記錄在內)。

QQ就把用戶的這些頭像收集起來展示給用戶,以便用戶查看或重新選擇。雖然用戶重新使用的幾率並不大,但不失為一種增進用戶情感、提高用戶粘性的做法,畢竟這裡面滿滿都是青春的回憶,很容易給用戶帶來觸動。

image.png

微信也有類似的做法,不過只能查看上一張頭像。

微信的設計哲學是不去刻意討好用戶,所以這裡更多的是防止用戶反悔,方便用戶在最近使用的兩張頭像之間切換對比。

馬蜂窩的做法與QQ類似,不過增加了刪除歷史頭像的功能(當前頭像不可刪除)。

聊天寶(原子彈短信)有很多的鎚子的設計基因,鎚子的設計師們推崇工匠精神,愛為用戶創造小驚喜,所以聊天寶不能查看自己的歷史頭像,但卻能查看好友的歷史頭像。

不妨推測下背後的設計動機:現代人分分鐘互相加個好友,但可能來不及備註,而人們對圖像的記憶更準確、持久,所以看到頭像可能就會很快的回憶起好友姓名、相識的場景等信息。

image.png

5. 文本頭像

文本頭像在商務類應用中比較常見,例如OA。

由於辦公社交的社交屬性並不是很強,更多在於及時通訊,所以圖片頭像並不是特別重要,並且文本頭像中的字號更大,更容易辨識。

要注意文本顏色和背景顏色的對比度,另外同一個應用中,文本和背景可以多做幾個配色方案隨機展示,以豐富視覺效果。此外,還要注意文本的取值顯示規則,下圖是釘釘的部分頁面截圖,可以從中推測:

  1. 漢字類:單個或兩個漢字展示全部漢字,三個及以上漢字僅展示后兩個漢字;
  2. 英文類:一個單詞時取前兩個字母,兩個及以上單詞取前兩個單詞的首字母;
  3. 數字類:單個或兩個數字展示全部數字,三個及以上數字僅展示后兩個數字。

image.png

6. 角色頭像/匿名頭像

相信很多人都嘗試玩過QQ的匿名聊天功能,然後就被管理員禁止了,它更像是一種娛樂性玩法。

其實還有類似的做法,在遊戲中較為常見,在角色確定前顯示的是用戶頭像,角色確定后就顯示角色頭像,比如:鬥地主,地主身份確定前顯示用戶本身頭像,確定后則顯示角色頭像,而且還會根據角色性別顯示相應頭像。

image.png

7. 動態視頻頭像

動態視頻頭像可以讓用戶跨越時間維度從多角度展示自己。

依然以QQ為例:動態頭像分兩種,一種是QQ會員才可使用的動態頭像,由系統推薦,用戶自主選擇;另一種是讓用戶自己拍攝錄製。

具體流程如下圖:用戶先錄製視頻,然後選擇一幀作為靜態頭像,以便能在不支持展示動態頭像的地方展示。這也是目前的一大趨勢,不過如果好友列表的頭像都在動也還挺嚇人的。

image.png

8. 輪播頭像

針對陌生人社交場景,如探探,頭像更顯得重要,左滑還是右滑就在剎那之間,點進去主頁也根本不會下滑屏幕細看具體的興趣、資料,所以就要盡量在首屏展示更多更大更清晰的照片,輪播圖就是一種很好的形式。

探探最多可設置6張圖片或6段視頻作為輪播頭像。其實,輪播頭像類似QQ照片牆的概念,不過自我展示意味更濃。

image.png

採用類似輪播頭像做法的還有音遇APP,雖說主張以歌會友,但誰又不想自己喜歡的唱歌好聽的小哥哥小姐姐也有高顏值呢。如下圖,個人主頁背景圖即頭像輪播。

還有一些社交軟件可以將個人系列頭像設為私密,然後定向開放展示給需要的人。

image.png

9. 捏臉頭像

ZEPETO(中文名:崽崽)的火爆颳起了一陣虛擬形象社交的風,雖然是三維形象的玩法,但和之前紅極一時的臉萌並沒有本質的區別,要想實現從工具到社交的轉變,獲取關係鏈才是王道。

多閃和Soul動作也很快,已經上線了捏臉功能,雖然目前是二維的,但相信巨頭們早已開始布局三維虛擬形象社交了。

可以稍微看看目前ZEPETO可以做哪些事:

  • 臉部可編輯髮型與發色、臉型與膚色、眉毛、眼睛、眼皮、鼻子、嘴巴、鬍子、眼鏡、頭飾、痣、雀斑等,甚至可以進行簡單的化妝(眼影、睫毛、腮紅、口紅等)。
  • 服裝配飾則包括套裝、上衣、褲子、鞋子、襪子、眼鏡、帽子、頭飾、項鏈、耳飾等,且支持按上架時間、價格等排序。
  • 室內裝飾則涵蓋了地板、牆紙、傢具、擺件、掛件、綠植、電器、樂器等。
  • 手勢主要是一些肢體動作庫,動作效果十分連貫。

可以說,ZEPETO集成了用戶對“場景搭建+服飾搭配+顏值定義+炫酷動作”的完美幻想,同時,也擴充了人們對虛擬形象社交乃至電商新形態的想象空間。

image.png

目前市面上,尤其是遊戲領域,不管畫風是Q萌,還是3D,時尚抑或仙俠,人物建模及捏臉系統已經比較完善,且得到廣泛應用。

這裡推薦一款叫做IMVU的APP,它的人物畫風、服飾質感比ZEPETO更加寫實,更偏成人化,視角轉換也更加流暢,支持俯視/仰視。

不過,臉萌早已涼涼,美圖的圖片社交之路似乎完全和ins對不上標,所以3D虛擬形象社交的未來之路也未可知。

image.png

10. 頭像掛件

頭像掛件、等級徽章、認證標誌也屬於頭像的一部分,不過需要結合付費會員、用戶成長體系、認證規則進行討論才有意義。

11. 使用第三方頭像

使用第三方社交賬號快速登錄已經成為登錄註冊頁面的標配,畢竟一個授權就解決了賬號註冊、頭像及昵稱設置等問題。

這兩天,吃瓜群眾們又一次見證了“頭騰大戰”。多閃使用了用戶的微信頭像和昵稱,可是並沒有得到相應授權,因為之前的授權是給抖音的,當然現在也停止授權了。

不管是不是抖音碰瓷,但微信/QQ賬戶上的頭像、昵稱的權益歸屬確實是個問題。個人上傳的頭像還好說,如果用的是系統推薦頭像,這些圖片的版權是不是歸屬騰訊呢?用戶使用第三方登錄后,最好還是引導用戶儘快綁定手機並設置完善其他資料。

image.png

12. 群組頭像

這裡以QQ、微信和釘釘為例進行分析。

微信群聊頭像由群成員頭像組合生成,在方框內嵌套群成員的方形頭像,根據群成員的數量多少(1-9)進行相應排布,多於9人時顯示前9人頭像。另外,微信暫不支持設置圖片為群頭像。

釘釘群與微信類似,不過外觀上是圓形外框嵌套群成員的方形頭像,顯示數量也有所限制(最多顯示前4個),但可以選擇其他圖片作為群組頭像。

QQ群比較複雜些,可分為討論組和群。雖然現在統稱“群聊”,根據創建方式區分如下:選人創建(對應的是討論組)和按分類創建(對應的是群)。討論組也是不能設置頭像的,是在圓形內嵌套群成員的圓形頭像,最多可顯示前5個成員的頭像。而群頭像由管理員設置,且可以查看歷史頭像、使用系統推薦頭像等。

另外還有TIM,定位是對抗釘釘的辦公軟件,比QQ更輕量化,視覺風格也大不相同,TIM中討論組頭像的展示就採用了類似釘釘的做法——圓形外邊框+方形頭像。

image.png

延伸一下,有人說微信重新定義了群的設計形態,更貼近用戶自然使用方式:無需群ID,無需刻意創建群,隨時拉人開聊,無需命名,默認不保存到通訊錄,搜索群時可通過直接搜人實現等。

而關於QQ討論組和群的區別可參考張㛃《多人聊天,究竟需不需要區分討論組和群?》

划重點

本文列舉分析了頭像設置的相關設計思路和案例,對社交產品的頭像設計大有裨益。

在設計時,尋求相關設計參考是獲取靈感和解決方案的有效方法。認真發現生活中的好設計,及時積累並總結,才能在關鍵時刻有高質量的輸出。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《頭像設置:無頭像,不社交》
文章链接:https://www.pmbear.com/%e9%a0%ad%e5%83%8f%e8%a8%ad%e7%bd%ae%ef%bc%9a%e7%84%a1%e9%a0%ad%e5%83%8f%ef%bc%8c%e4%b8%8d%e7%a4%be%e4%ba%a4/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们