頭像設置:無頭像,不社交
本文介紹了頭像設置流程,列舉分析了頭像設置的相關設計思路和案例。閱讀此文,相信大家對于社交產(chǎn)品的頭像設計會有一定的啟發(fā)。
在這個看臉的時代,無論真實社交,還是網(wǎng)絡社交(特別是陌生人社交),甚至虛擬形象社交,“顏值即正義”。長得好看是一大優(yōu)勢,或者至少要滿足彼此的審美才有進一步發(fā)展的可能。當然要想真正地完成社交目的,還是要看個人的社交能力。
在進行網(wǎng)絡社交時(興趣社交除外),可謂“無頭像,不社交”,畢竟跟陌生人搭訕的篩選成本太高,看頭像照片是最直接快速的方式。據(jù)說,有好事者在三里屯注冊了某一款陌生人社交軟件,并將頭像設置成了一個在盧浮宮的露背少女照片,在短短時間內(nèi),居然收到了10000多次點贊。頭像的魔力可見一斑。
一、頭像設置流程
頭像設置流程一般包括頭像選擇、上傳、裁剪、預覽四個步驟,在用戶界面上展現(xiàn)時,部分步驟可合并或跳過,但至少要包括裁剪和預覽。
1. 選擇圖片源
頭像圖片的來源包括:本地圖片、系統(tǒng)推薦頭像、用戶個人線上相冊、即時拍攝等。
同一產(chǎn)品在不同端可以支持不同的上傳渠道,比如:PC端攝像頭拍攝質(zhì)量不佳,而且臺式機不一定配備,一般可以不做支持。
2. 上傳條件限制
上傳本地圖片作為頭像時,圖片的格式、尺寸、文件大小規(guī)則應盡量放開限制,至少要支持JPG、GIF、PNG、JPEG、BMP等格式。隨著手機拍攝照片的尺寸和大小越來越大,所以5-6M是一個比較合適的上限。關于服務器圖片存儲,應保留一張高清大圖和多套不同尺寸的縮略圖。
3. 裁剪處理
圖片裁剪包括:系統(tǒng)自動裁剪和用戶手動裁剪。
如果不支持手動裁剪,最好把系統(tǒng)自動裁剪和截取做了,比如:京東商城web端就沒有截取圖片中央?yún)^(qū)域,而是直接擠壓或拉伸圖片,導致圖片變形效果很差。
手動裁剪時,一般要輔助縮放、旋轉(zhuǎn)、鏡像等功能??s放時需注意極限值,否則會導致背景空白(如QQ空間),要做相應的填充處理。
裁剪框最好加入輔助線(如九宮格、方圓)和遮罩,方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。
4. 效果預覽
“所見即所得”是打造優(yōu)良用戶體驗的訣竅之一,所以提供實時反饋和預覽是必不可少的,比如:裁剪得到的各種形狀和尺寸的預覽,濾鏡效果實時渲染等。當然,實時性也和系統(tǒng)性能有關。
頭像的常見展示形狀包括方和圓,有時也有異形頭像。關于頭像形狀的“方圓”論證可以參考微信和QQ設計師的官方回復:
同樣作為騰訊的產(chǎn)品,為什么QQ的頭像是圓的?而微信的頭像是方的呢?
騰訊的回應如下:
1.相比方形,人的頭像更接近圓形。圓形QQ頭像能更突出頭像弱化背景,也更鼓勵用戶使用真實自拍作為QQ頭像。
2.QQ作為平臺會接入游戲和第三方應用內(nèi)容,圓形QQ頭像在這些方形、異形圖標環(huán)境中提高辨識度,降低用戶的認知門檻。
3.QQ希望給用戶傳遞“樂在溝通,展現(xiàn)年輕個性”的態(tài)度,圓形QQ頭像更具靈動和活力,與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。
——by QQ設計師
“因為照片本來是方的,方頭像更符合用戶習慣。”
——by 微信設計師
還有百度小程序關于頭像的規(guī)范可供參考:
頭像應保證清晰,頭像的主體元素在方形或圓形參考線內(nèi),不遮擋關鍵信息,確保前端展現(xiàn)時能在圓形輪廓中展現(xiàn)完全。
二、設置頭像的各種方式
1. 默認頭像
為縮短注冊流程,減少潛在用戶流失,用戶注冊過程中一般不會強制用戶設置頭像。
所以,為防止用戶不去設置頭像以及頁面中頭像加載不出來,系統(tǒng)會提供默認頭像以便在相關位置展示??梢圆捎没疑^像,也可以采用基于企業(yè)吉祥物卡通形象設計的彩色頭像(例如:蝦米、轉(zhuǎn)轉(zhuǎn))。
二者各有好處,灰色頭像可以時常提醒用戶去設置頭像,彩色頭像則可以減少頁面單調(diào)、增加趣味性。不過唯一的遺憾是:一旦設置了新頭像,改不回默認頭像了,畢竟有的默認頭像還是挺好看的。有的社區(qū)允許游客用戶進行點贊、評論等操作,這時便會用到游客默認頭像。
當然,同一系統(tǒng)內(nèi),默認頭像也可以不唯一,比如:根據(jù)用戶性別、星座匹配頭像,根據(jù)用戶身份角色匹配頭像(司機/乘客,招聘者/求職者),或者制作頭像庫為用戶隨機分配頭像。
2. 系統(tǒng)推薦頭像
讓用戶自己拍攝/找到一張自己滿意的圖片做頭像,對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大,圖片質(zhì)量難以保證,甚至內(nèi)容監(jiān)管又會帶來新的問題。
所以,推薦一些優(yōu)質(zhì)頭像供用戶挑選,就成了一個很不錯的輔助解決方案。QQ很早就推出了類似功能,甚至成了會員服務的一部分。平安金管家APP也有類似功能,提供了四個商務風格的卡通頭像供用戶選擇。
最近比較火的匿名社交APP Soul也同樣支持使用系統(tǒng)推薦頭像,而且是只能使用系統(tǒng)頭像,如下圖所示。
用戶可以根據(jù)自己所設置的性別(只允許修改一次),頭像風格(包括繪本、二次元、可愛、經(jīng)典四種風格)選擇心儀的頭像。Soul不允許用戶上傳其他照片作為頭像,也是希望用戶能拋開顏值,找到真正的靈魂伴侶。這些頭像本身也體現(xiàn)了用戶個體的審美情趣、價值觀等。
最近Soul新上線了“超萌捏臉功能”,下文會著重詳細分析,不過捏臉捏成的頭像依然可以算是系統(tǒng)推薦頭像,只是把頭像拆解成了頭發(fā)、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素,然后再由用戶自己排列組合。
3. 隨機選擇頭像
前文也提到了隨機頭像——即系統(tǒng)會在用戶注冊成功后為其隨機匹配頭像,避免單一默認頭像的沉悶,記憶中GitHub以前就是采用這種做法。
另一種隨機頭像是指:用戶主動選擇隨機頭像,獲得相應的驚喜,比如嗶哩嗶哩就采用了這種做法。
不過實在難以琢磨出這種類似“變臉”的玩法背后的設計邏輯。
4. 使用歷史頭像
在用戶使用過一段產(chǎn)品之后,可能會積累大量的歷史頭像(主要是用戶自主上傳的,使用過的系統(tǒng)頭像不記錄在內(nèi))。
QQ就把用戶的這些頭像收集起來展示給用戶,以便用戶查看或重新選擇。雖然用戶重新使用的幾率并不大,但不失為一種增進用戶情感、提高用戶粘性的做法,畢竟這里面滿滿都是青春的回憶,很容易給用戶帶來觸動。
微信也有類似的做法,不過只能查看上一張頭像。
微信的設計哲學是不去刻意討好用戶,所以這里更多的是防止用戶反悔,方便用戶在最近使用的兩張頭像之間切換對比。
馬蜂窩的做法與QQ類似,不過增加了刪除歷史頭像的功能(當前頭像不可刪除)。
聊天寶(原子彈短信)有很多的錘子的設計基因,錘子的設計師們推崇工匠精神,愛為用戶創(chuàng)造小驚喜,所以聊天寶不能查看自己的歷史頭像,但卻能查看好友的歷史頭像。
不妨推測下背后的設計動機:現(xiàn)代人分分鐘互相加個好友,但可能來不及備注,而人們對圖像的記憶更準確、持久,所以看到頭像可能就會很快的回憶起好友姓名、相識的場景等信息。
5. 文本頭像
文本頭像在商務類應用中比較常見,例如OA。
由于辦公社交的社交屬性并不是很強,更多在于及時通訊,所以圖片頭像并不是特別重要,并且文本頭像中的字號更大,更容易辨識。
要注意文本顏色和背景顏色的對比度,另外同一個應用中,文本和背景可以多做幾個配色方案隨機展示,以豐富視覺效果。此外,還要注意文本的取值顯示規(guī)則,下圖是釘釘?shù)牟糠猪撁娼貓D,可以從中推測:
- 漢字類:單個或兩個漢字展示全部漢字,三個及以上漢字僅展示后兩個漢字;
- 英文類:一個單詞時取前兩個字母,兩個及以上單詞取前兩個單詞的首字母;
- 數(shù)字類:單個或兩個數(shù)字展示全部數(shù)字,三個及以上數(shù)字僅展示后兩個數(shù)字。
6. 角色頭像/匿名頭像
相信很多人都嘗試玩過QQ的匿名聊天功能,然后就被管理員禁止了,它更像是一種娛樂性玩法。
其實還有類似的做法,在游戲中較為常見,在角色確定前顯示的是用戶頭像,角色確定后就顯示角色頭像,比如:斗地主,地主身份確定前顯示用戶本身頭像,確定后則顯示角色頭像,而且還會根據(jù)角色性別顯示相應頭像。
7. 動態(tài)視頻頭像
動態(tài)視頻頭像可以讓用戶跨越時間維度從多角度展示自己。
依然以QQ為例:動態(tài)頭像分兩種,一種是QQ會員才可使用的動態(tài)頭像,由系統(tǒng)推薦,用戶自主選擇;另一種是讓用戶自己拍攝錄制。
具體流程如下圖:用戶先錄制視頻,然后選擇一幀作為靜態(tài)頭像,以便能在不支持展示動態(tài)頭像的地方展示。這也是目前的一大趨勢,不過如果好友列表的頭像都在動也還挺嚇人的。
8. 輪播頭像
針對陌生人社交場景,如探探,頭像更顯得重要,左滑還是右滑就在剎那之間,點進去主頁也根本不會下滑屏幕細看具體的興趣、資料,所以就要盡量在首屏展示更多更大更清晰的照片,輪播圖就是一種很好的形式。
探探最多可設置6張圖片或6段視頻作為輪播頭像。其實,輪播頭像類似QQ照片墻的概念,不過自我展示意味更濃。
采用類似輪播頭像做法的還有音遇APP,雖說主張以歌會友,但誰又不想自己喜歡的唱歌好聽的小哥哥小姐姐也有高顏值呢。如下圖,個人主頁背景圖即頭像輪播。
還有一些社交軟件可以將個人系列頭像設為私密,然后定向開放展示給需要的人。
9. 捏臉頭像
ZEPETO(中文名:崽崽)的火爆刮起了一陣虛擬形象社交的風,雖然是三維形象的玩法,但和之前紅極一時的臉萌并沒有本質(zhì)的區(qū)別,要想實現(xiàn)從工具到社交的轉(zhuǎn)變,獲取關系鏈才是王道。
多閃和Soul動作也很快,已經(jīng)上線了捏臉功能,雖然目前是二維的,但相信巨頭們早已開始布局三維虛擬形象社交了。
可以稍微看看目前ZEPETO可以做哪些事:
- 臉部可編輯發(fā)型與發(fā)色、臉型與膚色、眉毛、眼睛、眼皮、鼻子、嘴巴、胡子、眼鏡、頭飾、痣、雀斑等,甚至可以進行簡單的化妝(眼影、睫毛、腮紅、口紅等)。
- 服裝配飾則包括套裝、上衣、褲子、鞋子、襪子、眼鏡、帽子、頭飾、項鏈、耳飾等,且支持按上架時間、價格等排序。
- 室內(nèi)裝飾則涵蓋了地板、墻紙、家具、擺件、掛件、綠植、電器、樂器等。
- 手勢主要是一些肢體動作庫,動作效果十分連貫。
可以說,ZEPETO集成了用戶對“場景搭建+服飾搭配+顏值定義+炫酷動作”的完美幻想,同時,也擴充了人們對虛擬形象社交乃至電商新形態(tài)的想象空間。
目前市面上,尤其是游戲領域,不管畫風是Q萌,還是3D,時尚抑或仙俠,人物建模及捏臉系統(tǒng)已經(jīng)比較完善,且得到廣泛應用。
這里推薦一款叫做IMVU的APP,它的人物畫風、服飾質(zhì)感比ZEPETO更加寫實,更偏成人化,視角轉(zhuǎn)換也更加流暢,支持俯視/仰視。
不過,臉萌早已涼涼,美圖的圖片社交之路似乎完全和ins對不上標,所以3D虛擬形象社交的未來之路也未可知。
10. 頭像掛件
頭像掛件、等級徽章、認證標志也屬于頭像的一部分,不過需要結(jié)合付費會員、用戶成長體系、認證規(guī)則進行討論才有意義。
11. 使用第三方頭像
使用第三方社交賬號快速登錄已經(jīng)成為登錄注冊頁面的標配,畢竟一個授權(quán)就解決了賬號注冊、頭像及昵稱設置等問題。
這兩天,吃瓜群眾們又一次見證了“頭騰大戰(zhàn)”。多閃使用了用戶的微信頭像和昵稱,可是并沒有得到相應授權(quán),因為之前的授權(quán)是給抖音的,當然現(xiàn)在也停止授權(quán)了。
不管是不是抖音碰瓷,但微信/QQ賬戶上的頭像、昵稱的權(quán)益歸屬確實是個問題。個人上傳的頭像還好說,如果用的是系統(tǒng)推薦頭像,這些圖片的版權(quán)是不是歸屬騰訊呢?用戶使用第三方登錄后,最好還是引導用戶盡快綁定手機并設置完善其他資料。
12. 群組頭像
這里以QQ、微信和釘釘為例進行分析。
微信群聊頭像由群成員頭像組合生成,在方框內(nèi)嵌套群成員的方形頭像,根據(jù)群成員的數(shù)量多少(1-9)進行相應排布,多于9人時顯示前9人頭像。另外,微信暫不支持設置圖片為群頭像。
釘釘群與微信類似,不過外觀上是圓形外框嵌套群成員的方形頭像,顯示數(shù)量也有所限制(最多顯示前4個),但可以選擇其他圖片作為群組頭像。
QQ群比較復雜些,可分為討論組和群。雖然現(xiàn)在統(tǒng)稱“群聊”,根據(jù)創(chuàng)建方式區(qū)分如下:選人創(chuàng)建(對應的是討論組)和按分類創(chuàng)建(對應的是群)。討論組也是不能設置頭像的,是在圓形內(nèi)嵌套群成員的圓形頭像,最多可顯示前5個成員的頭像。而群頭像由管理員設置,且可以查看歷史頭像、使用系統(tǒng)推薦頭像等。
另外還有TIM,定位是對抗釘釘?shù)霓k公軟件,比QQ更輕量化,視覺風格也大不相同,TIM中討論組頭像的展示就采用了類似釘釘?shù)淖龇ā獔A形外邊框+方形頭像。
延伸一下,有人說微信重新定義了群的設計形態(tài),更貼近用戶自然使用方式:無需群ID,無需刻意創(chuàng)建群,隨時拉人開聊,無需命名,默認不保存到通訊錄,搜索群時可通過直接搜人實現(xiàn)等。
而關于QQ討論組和群的區(qū)別可參考張?《多人聊天,究竟需不需要區(qū)分討論組和群?》
劃重點
本文列舉分析了頭像設置的相關設計思路和案例,對社交產(chǎn)品的頭像設計大有裨益。
在設計時,尋求相關設計參考是獲取靈感和解決方案的有效方法。認真發(fā)現(xiàn)生活中的好設計,及時積累并總結(jié),才能在關鍵時刻有高質(zhì)量的輸出。
本文由 @ TAOTAO 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
贊