研究數十個熱門 APP后,我來教你如何做好「設置頭像」功能 - 優設網 - UISDC

研究數十個熱門 APP后,我來教你如何做好「設置頭像」功能

2019/06/18 9581評論 6

在這個看臉的時代,無論是真實社交,還是網絡社交,甚至虛擬形象社交,都是「顏值即正義」。長得好看是一大優勢,或者至少要滿足彼此的審美才有進一步發展的可能。當然要想真正地完成社交目的,還是要看個人的社交能力。在進行網絡社交時(興趣社交除外),可謂「無頭像,不社交」,畢竟跟陌生人搭訕的篩選成本太高,看頭像照片是最直接快速的方式。據說,有好事者在三里屯注冊了某一款陌生人社交軟件,并將頭像設置成了一個在盧浮宮的露背少女照片,在短短時間內,居然收到了 10000 多次點贊,頭像的魔力可見一斑。

頭像設置流程

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

1. 選擇圖片源

頭像圖片的來源包括本地圖片、系統推薦頭像、用戶個人線上相冊、即時拍攝等。同一產品在不同端可以支持不同的上傳渠道,比如 PC 端攝像頭拍攝質量不佳,而且臺式機不一定配備,一般可以不做支持。

2. 上傳條件限制

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

3. 裁剪處理

圖片裁剪包括系統自動裁剪和用戶手動裁剪。如果不支持手動裁剪,最好把系統自動裁剪和截取做了。京東商城 web 端就沒有截取圖片中央區域,而是直接擠壓或拉伸圖片,導致圖片變形效果很差。手動裁剪時,一般要輔助縮放、旋轉、鏡像等功能。縮放時需注意極限值,否則會導致背景空白(如QQ空間),要做相應的填充處理。裁剪框最好加入輔助線(如九宮格、方圓)和遮罩,方便實時預覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。

4. 效果預覽

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

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

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

騰訊的回應如下:

相比方形,人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景,也更鼓勵用戶使用真實自拍作為 QQ 頭像。

QQ 作為平臺會接入游戲和第三方應用內容,圓形 QQ 頭像在這些方形、異形圖標環境中提高辨識度,降低用戶的認知門檻。

QQ 希望給用戶傳遞樂在溝通,展現年輕個性的態度,圓形 QQ 頭像更具靈動和活力,與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

因為照片本來是方的,方頭像更符合用戶習慣。

《為什么微信頭像是方的?QQ頭像是圓的?|你問鵝答》

還有百度小程序關于頭像的規范可供參考:頭像應保證清晰,頭像的主體元素在方形或圓形參考線內,不遮擋關鍵信息,確保前端展現時能在圓形輪廓中展現完全。

設置頭像的12種方式

1. 默認頭像

為縮短注冊流程,減少潛在用戶流失,用戶注冊過程中一般不會強制用戶設置頭像。所以,為防止用戶不去設置頭像以及頁面中頭像加載不出來,系統會提供默認頭像以便在相關位置展示。可以采用灰色頭像,也可以采用基于企業吉祥物卡通形象設計的彩色頭像(例如蝦米、轉轉)。二者各有好處,灰色頭像可以時常提醒用戶去設置頭像,彩色頭像則可以豐富畫面、增加趣味性。不過唯一的遺憾是一旦設置了新頭像,改不回默認頭像了,畢竟有的默認頭像還是挺好看的。有的社區允許游客用戶進行點贊、評論等操作,這時便會用到游客默認頭像。當然,同一系統內,默認頭像也可以不唯一,比如,根據用戶性別、星座匹配頭像,根據用戶身份角色匹配頭像(司機/乘客,招聘者/求職者),或者制作頭像庫為用戶隨機分配頭像。

2. 系統推薦頭像

讓用戶自己拍攝或找到一張自己滿意的圖片做頭像,對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大,圖片質量難以保證,甚至內容監管又會帶來新的問題,所以推薦一些優質頭像供用戶挑選,就成了一個很不錯的輔助解決方案。QQ 很早就推出了類似功能,甚至成了會員服務的一部分。平安金管家 APP 也有類似功能,提供了四個商務風格的卡通頭像供用戶選擇。

最近比較火的匿名社交APP Soul 也同樣支持使用系統推薦頭像,而且是只能使用系統頭像,如下圖所示,用戶可以根據自己所設置的性別,頭像風格選擇心儀的頭像。Soul 不允許用戶上傳其他照片作為頭像,也是希望用戶能拋開顏值,找到真正的靈魂伴侶。這些頭像本身也體現了用戶個體的審美情趣、價值觀等。最近 Soul 新上線了「超萌捏臉功能」,下文會著重詳細分析,不過捏臉而成的頭像依然可以算是系統推薦頭像,只是把頭像拆解成了頭發、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素,然后再由用戶自己排列組合。

3. 隨機選擇頭像

前文也提到了隨機頭像,即系統會在用戶注冊成功后為其隨機匹配頭像,避免單一默認頭像的沉悶,記憶中以前 GitHub 就是采用這種做法。另一種隨機頭像是指用戶主動選擇隨機頭像,獲得相應的驚喜,比如嗶哩嗶哩就采用了這種做法。不過實在難以琢磨出這種類似「變臉」的玩法背后的設計邏輯。

4. 使用歷史頭像

在用戶使用過一段產品之后,可能會積累大量的歷史頭像(主要是用戶自主上傳的,使用過的系統頭像不記錄在內)。QQ 就把用戶的這些頭像收集起來展示給用戶,以便用戶查看或重新選擇,雖然用戶重新使用的幾率并不大,但不失為一種增進用戶情感、提高用戶粘性的做法,畢竟這里面滿滿都是青春的回憶,很容易給用戶帶來觸動。

微信也有類似的做法,不過只能查看上一張頭像。微信的設計哲學是不去刻意討好用戶,所以這里更多的是防止用戶反悔,方便用戶在最近使用的兩張頭像之間切換對比。馬蜂窩的做法與 QQ 類似,不過增加了刪除歷史頭像的功能(當前頭像不可刪除)。聊天寶(原子彈短信)有很多錘子的設計基因,錘子的設計師們推崇工匠精神,愛為用戶創造小驚喜,所以聊天寶不能查看自己的歷史頭像,但卻能查看好友的歷史頭像。不妨推測下背后的設計動機:現代人分分鐘互相加個好友,但可能來不及備注,而人們對圖像的記憶更準確、持久,所以看到頭像可能就會很快地回憶起好友姓名、相識的場景等信息。

5. 文本頭像

文本頭像在商務類應用中比較常見,例如 OA。由于辦公社交的社交屬性并不是很強,更多在于及時通訊,所以圖片頭像并不是特別重要,并且文本頭像中的字號更大,更容易辨識。要注意文本顏色和背景顏色的對比度,另外同一個應用中,文本和背景可以多做幾個配色方案隨機展示,以豐富視覺效果。此外還要注意文本的取值顯示規則,下圖是釘釘的部分頁面截圖,可以從中推測:

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

6. 角色頭像/匿名頭像

相信很多人都玩過 QQ 的匿名聊天功能,然后就被管理員禁止了,它更像是一種娛樂性玩法。其實還有類似的做法,在游戲中較為常見,在角色確定前顯示的是用戶頭像,角色確定后就顯示角色頭像。比如斗地主,地主身份確定前顯示用戶本身頭像,確定后則顯示角色頭像,而且還會根據角色性別顯示相應頭像。

7. 動態視頻頭像

動態視頻頭像可以讓用戶跨越時間維度從多角度展示自己。依然以 QQ 為例,動態頭像分兩種,一種是 QQ 會員才可使用的動態頭像,由系統推薦,用戶自主選擇;另一種是讓用戶自己拍攝錄制。具體流程如下圖,用戶先錄制視頻,然后選擇一幀作為靜態頭像,以便能在不支持展示動態頭像的地方展示。這也是目前的一大趨勢,不過如果好友列表的頭像都在動也還挺嚇人的。

8. 輪播頭像

針對陌生人社交場景,如探探,頭像更顯得重要,左滑還是右滑就在剎那之間,點進去主頁也根本不會下滑屏幕細看具體的興趣、資料,所以就要盡量在首屏展示更多更大更清晰的照片,輪播圖就是一種很好的形式。探探最多可設置 6 張圖片或 6 段視頻作為輪播頭像。其實,輪播頭像類似 QQ 照片墻的概念,不過自我展示意味更濃。

采用類似輪播頭像做法的還有音遇 APP,雖說主張以歌會友,但誰都喜歡唱歌好聽的小哥哥小姐姐還有高顏值。如下圖,個人主頁背景圖即頭像輪播。還有一些社交軟件可以將個人系列頭像設為私密,然后定向開放展示給需要的人。

9. 捏臉頭像

ZEPETO(中文名:崽崽)的火爆刮起了一陣虛擬形象社交的風潮,雖然是三維形象的玩法,但和之前紅極一時的臉萌并沒有本質的區別,要想實現從工具到社交的轉變,獲取關系鏈才是王道。多閃和 Soul 動作也很快,已經上線了捏臉功能,雖然目前是二維的,但相信巨頭們早已開始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型,甚至可以進行簡單的化妝。服裝配飾則包括衣服、頭飾、首飾等,且支持按上架時間、價格等排序。室內裝飾則涵蓋了地板、家具、擺件、樂器等等。手勢主要是一些肢體動作庫,動作效果十分連貫。可以說 ZEPETO 集成了用戶對場景搭建+服飾搭配+顏值定義+炫酷動作的完美幻想,同時也擴充了人們對虛擬形象社交乃至電商新形態的想象空間。

目前市面上,尤其是游戲領域,不管畫風是 Q萌,還是 3D,時尚亦或仙俠,人物建模及捏臉系統已經比較完善,且得到廣泛應用。這里推薦一款叫做 IMVU 的 APP,它的人物畫風、服飾質感比 ZEPETO 更加寫實,更偏成人化,視角轉換也更加流暢,支持俯視/仰視。不過,臉萌早已涼涼,美圖的圖片社交之路似乎完全和 ins 對不上標,所以 3D 虛擬形象社交的未來之路也未可知。

10. 頭像掛件

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

11. 使用第三方頭像

使用第三方社交賬號快速登錄已經成為登錄注冊頁面的標配,畢竟一個授權就解決了賬號注冊、頭像及昵稱設置等問題。這兩天,吃瓜群眾們又一次見證了「頭騰大戰」。多閃使用了用戶的微信頭像和昵稱,可是并沒有得到相應授權,因為之前的授權是給抖音的,當然現在也停止授權了。不管是不是抖音碰瓷,但微信/QQ 賬戶上的頭像、昵稱的權益歸屬確實是個問題。個人上傳的頭像還好說,如果用的是系統推薦頭像,這些圖片的版權是不是歸屬騰訊呢?用戶使用第三方登錄后,最好還是引導用戶盡快綁定手機并設置完善其他資料。

12. 群組頭像

這里以 QQ、微信和釘釘為例進行分析。微信群聊頭像由群成員頭像組合生成,在方框內嵌套群成員的方形頭像,根據群成員的數量多少(1-9)進行相應排布,多于 9 人時顯示前 9 人頭像。另外,微信暫不支持設置圖片為群頭像。釘釘群與微信類似,不過外觀上是圓形外框嵌套群成員的方形頭像,顯示數量也有所限制(最多顯示前4個),但可以選擇其他圖片作為群組頭像。QQ 群比較復雜些,可分為討論組和群,雖然現在統稱「群聊」,根據創建方式區分如下:選人創建(對應的是討論組)和按分類創建(對應的是群)。討論組也是不能設置頭像的,是在圓形內嵌套群成員的圓形頭像,最多可顯示前 5 個成員的頭像。而群頭像由管理員設置,且可以查看歷史頭像、使用系統推薦頭像等。另外還有 TIM,定位是對抗釘釘的辦公軟件,比 QQ 更輕量化,視覺風格也大不相同, TIM 中討論組頭像的展示就采用了類似釘釘的做法──圓形外邊框+方形頭像。

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

結語

本文列舉分析了頭像設置的相關設計思路和案例,對社交產品的頭像設計大有裨益。在設計時,尋求相關設計參考是獲取靈感和解決方案的有效方法,認真發現生活中的好設計,及時積累并總結,才能在關鍵時刻有高質量的輸出。

歡迎關注作者的微信公眾號:「UXD」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/head-setting-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 設計師干貨 職場 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計規范 海報設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特