關(guān)于用戶頭像的設(shè)計思考

6 評論 19984 瀏覽 31 收藏 6 分鐘

對于有用戶體系的產(chǎn)品來說,用戶的缺省頭像如何設(shè)計,是一個普遍存在的難題。

你的設(shè)計稿常常會因?yàn)槭褂昧搜髿獾耐峁首黝^像,而使它們看起來很棒。但回到現(xiàn)實(shí)中,絕大多數(shù)用戶上傳的頭像要么質(zhì)量很差,要么就干脆沒有。

有頭像和沒有頭像的對比。作者?Olia Gozha.

現(xiàn)在有兩個問題,第一個是關(guān)于頭像顯示的——若沒人上傳頭像,你的設(shè)計稿看起來會怎樣?第二個問題是如何鼓勵用戶上傳頭像,這個我將在下一篇文章里再說。

通用頭像

Facebook 解決問題的方式是,使用一組通用的人物剪影來作為默認(rèn)的用戶頭像。它會根據(jù)你設(shè)置的性別來決定到底展示男性還是女性。

8649-12d815bcee70fd82

Facebook 的通用頭像

但我并不認(rèn)為這是一個好辦法,理由如下。

若有兩個性別一樣的用戶,那他們的默認(rèn)頭像就是一樣的。其次,如果只有一小部分用戶會上傳頭像,那界面看起來又是非常同質(zhì)化并且令人困惑的。

若你的用戶還沒有設(shè)置過性別,你就還得再設(shè)置一個缺省選項(xiàng)。這個缺省選項(xiàng)應(yīng)該對應(yīng)什么默認(rèn)值呢?男性?女性?還是隔壁老王?

有些產(chǎn)品(例如 OKCupid,譯注:歪果仁的珍愛網(wǎng),在線交友網(wǎng)站),設(shè)計了一系列其他性別(譯注:例如雙性人和變性人等),這使得通用頭像這種設(shè)計方案變的更加復(fù)雜。

不過話說回來,F(xiàn)acebook 的設(shè)計方案并不會引起什么問題,因?yàn)閹缀趺恳粋€ Facebook 的用戶都上傳了頭像,所以通用的缺省頭像很少能見到。

有趣的藝術(shù)圖案

Twitter,Slack,Tumblr 等網(wǎng)站使用了藝術(shù)圖案作為用戶的默認(rèn)頭像。這個方案有一個很大的好處就是強(qiáng)化了品牌感。例如 Slack,使用了它的 logo 的變形圖案作為缺省頭像。當(dāng)沒人上傳頭像時,界面看起來也是完整的,誘人的,并且有品牌感的。

8649-a7713f300dac19b7

沒有頭像的 Slack 看起來也很漂亮。作者?Slack

假如每一個缺省頭像都是獨(dú)特的話,那這個解決方案會很棒。然而,在 Slack 里,每一個缺省頭像看起來都只有一點(diǎn)微妙的變化。這使得很難從一堆默認(rèn)頭像里去辨別某個人。不過如果有一部分用戶修改了頭像的話,這個方案還是能夠提供一部分識別作用的。

首字母

Gmail,Dropbox 和 Apple 采用了第三種方案(也是我個人最喜歡的)——使用用戶名字的首字母大寫作為默認(rèn)頭像。有些使用了姓和名一起(Apple),有些則只使用了名字(Gmail)。

8649-d83b7559ee0f98ea

iOS 的默認(rèn)頭像

Gmail 和 Dropbox 做了更多嘗試——給每一個用戶頭像增加了一種獨(dú)特的顏色。例如,羅輯的頭像是紅色的 LJ,汪淼的頭像就是綠色的 WM。這個設(shè)計方案既能夠彼此區(qū)別,還具有上下文的語意。值得注意的是,這個解決方案對于非英語母語國家來說,他們的用戶的名字可能不止是兩個大寫字母簡寫。

8649-320711922d851bb4

Dropbox 的默認(rèn)頭像

那么,我們該怎么做呢?你肯定不想從16777216種顏色里挑選一個隨機(jī)值,因?yàn)殡S機(jī)顏色很有可能看起來很糟糕。所以我們需要挑選一些適合設(shè)計的顏色——不要超過 10 種。

接下來,我們需要去給每一位用戶分配一種顏色。用戶頭像顏色不能是隨機(jī)出現(xiàn)的,因?yàn)榱_輯就必須一直就是紅色的 LJ。如果你刷新頁面,羅輯的頭像變成了綠色,那就出大事了。

我們可以使用哈希值來解決這個問題。我們能夠通過用戶姓名計算出一個保持不變的哈希值,所以我們不需要新建一個數(shù)據(jù)庫字段去存儲每一位用戶的顏色……

 

以上譯文僅代表原作者觀點(diǎn)。原作者?[Morgan?Carter](http://morgancarter.com.au/)

原文?[Placeholder?Avatars](http://morgancarter.com.au/design-solutions/placeholder-avatars)。

#專欄作家#

zhucbeta,微信公眾號:設(shè)計譯言,人人都是產(chǎn)品經(jīng)理專欄作家。前產(chǎn)品汪現(xiàn)線框仔,關(guān)注以用戶為中心的產(chǎn)品設(shè)計。Trying?to?make?a?Duang?in?the?universe.

轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 缺省頭像這個,國內(nèi)是不是可以按照百家姓的來做做文章呢,值得考慮一下吧

    來自北京 回復(fù)
  2. 看看缺省頭像是什么

    來自浙江 回復(fù)
  3. 我想看看woshipm的缺省頭像是什么哈哈哈哈哈哈

    來自四川 回復(fù)
    1. 哈哈,就是我這個

      來自廣東 回復(fù)
  4. :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen:

    來自廣東 回復(fù)
    1. ?

      來自浙江 回復(fù)