頭像設計，“統一”與“豐富”間的平衡。

頭像又叫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 協議