默認頭像設計(1) —— 統一與豐富間的平衡
頭像設計,“統一”與“豐富”間的平衡。
頭像又叫Avatar,有虛擬化身的意思,最早出現在1979年的一個電腦游戲里,用來代表玩家的身份。前幾年流行的阿凡達的英文也是Avatar,也是有虛擬世界化身的含義?,F在除了游戲,頭像也是媒體或者虛擬平臺上重要的一部分了。Avatar不是真實的頭像,它更像是一個占位符,在人們上傳頭像之前暫時代替著。
頭像設計,我理解,是一個在固定模式中尋求隨機變化的過程。而延展開來,這種“隨機中尋求變化”的方式,也是我有時會在設計中遇到的問題。
設計一個卡片式的頁面的低保真,設定好每個卡片都有一個自己的banner。然而事實卻是?以千為計量單位的卡片,不可能有一一對應的banner。
例如像是IBM的這種頁面,因為卡片的條目很多,達到以“千”為單位的級別,而每一個卡片又不能保證一定有對應的圖片,所以,這個時候就會需要用到默認的圖片。
(IBM相關網站)
而默認的圖片如果只有一種,就會顯得太單調,圖片一多,又會太雜亂。
所以在“統一”與“豐富”之中找到平衡,是我個人認為的一個難點,而默認頭像設計,就帶有這種豐富與平衡的屬性,因此我也希望通過一些資料的查找來深入了解一下這個領域。
因此我問自己一個問題,什么樣的默認頭像才算是處于“平衡”的頭像呢?
當前默認頭像的類別總結
一位產品設計師Michelle在她的文章里提到了當前默認頭像的幾種類別,我總結有這么幾種:
1. 普通人物頭像
這是最常見的類別。例如說常用的社交網站Fackbook,就是使用的普通人物頭像。而他們之前也在考慮普通人物頭像的男女平等問題。這一類的頭像很簡單易懂,也普遍使用得很多,所以也為大眾認可。
(Facebook的默認人物頭像)
2. 生物頭像
注意到簡書使用的就是生物類型的頭像。我剛剛注冊的時候出現的是一個小鹿的頭像,似乎是有一系列的動物頭像可以默認隨機出現。不僅僅是地球上的生物,還有一些外星來的生物也被人類使用。
(生物類型的頭像)
3. 字母頭像
google登錄之后,使用與名字相關的字母作為頭像。通過顏色與字母,達到變化的效果。
(Google的名字首字母頭像)
4. 形狀圖像
通過形狀進行抽象隨機的變化。例如說Slack,使用了格子條紋,通過顏色與位置的調整達到變化。而github則是用過一些格子與顏色的排列,形成像素樣式的頭像。
(Slack的默認頭像)
(Github的默認頭像)
分析點1:當前各種類型頭像的使用情況
而從這些頭像的特征出發,可以發現他們有的“擬人”,有的”擬物”,有的“具象”,有的“抽象”,例如說普通人像頭像,就偏向于“擬人”與“具象”的維度,而形狀圖像則處于“擬人”與“擬物”之間,接近“抽象”的元素。
我重新歷覽了一下手機內的app頭像,也對這些頭像歸了一下類,我發現對于抽象化形式的頭像,目前還是使用得比較少,坐標軸右邊的圖標還是占大部分。而這一類型的頭像,不得不說,對于我個人來看是比較特別的,隨機變化中又突顯了自己品牌的特征。
(app的默認頭像例子)
(默認頭像維度對比圖)
分析點2:關于豐富與統一的含義挖掘
“豐富”再往深挖掘,它有著某些特性,我這邊列舉出來的,有圖標的多樣性,日后的可延展性,而“統一”,包括視覺上的統一,還有與整個品牌的統一。我想隨著維度的變化,我之后會不斷調整細化這個圖,但大方向保持一致。
(關于不同類型頭像的特征對比)
人物頭像雖然認可度比較高,視覺上也統一,但是多樣性和延展性就比較弱,也比較難體現某個品牌的特征。生物頭像看著很活潑,視覺上是一整個系列,也可以延展出不同的生物類型,但對于品牌的體現,就不一定是都適用,畢竟不是所有的品牌都以動物為主題。相比之下,抽象一點的圖標在“延展”與“品牌”方向就比較占優勢,像github的圖標,如果有5*5的格子,格子隨機填滿或者不填滿,就會出現不同的圖案(5*5的平方),加上顏色的變換,就可能會有上百種變換方式,而這種二進制式的感覺,也跟github的主題貼近,因為它相當于是一個代碼存儲的網站。slack的頭像也使用顏色和格子很個性地展現了自己。
結合兩個分析點,我開始感覺,要在“統一”與“豐富”之間尋求平衡,也許抽象,變換的元素會是一個新的角度呢?至于實際用到設計上的時候,怎么做,怎么實踐呢?其實我也還沒想好,最近在看一些隨機生成圖案的網站,希望有些啟發。
那就暫且為標題加個“(1)”吧,繼續找找答案。
Ps:自己的怪獸頭像,其實也是擬人和擬物結合著畫了一下。
參考資料
- http://www.hongkiat.com/blog/free-pattern-generators/
- https://scratch.mit.edu/projects/2693313/
- https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6
- https://slackmojis.com
本文由 @交互小怪獸 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Pixabay,基于 CC0 協議
期待更二 ??
自己給自己留個言
還能再次留言
不喜歡灰色的默認頭像,喜歡彩色的,比如生物頭像,但是問題來了,灰色默認頭像讓我更有動機去上傳自己的頭像,而生物頭像就直接使用了 哈哈哈
設計在于細微處,好的設計,細膩又動人~
同意Tina:)
同意同意
謝謝大富先森:)
寫的不錯的,受教了