關(guān)于列表頭像設(shè)計(jì),你了解多少?

3 評(píng)論 5092 瀏覽 22 收藏 10 分鐘

消息列表模塊是大家常見(jiàn)的APP功能了,但是你真的了解這個(gè)功能嗎?本文作者從3個(gè)角度對(duì)消息列表模塊進(jìn)行了分析探究,希望通過(guò)此文能夠加深你對(duì)列表頭像設(shè)計(jì)的認(rèn)識(shí)。

消息列表功能模塊應(yīng)該是大家日常生活中接觸最多的APP功能了,只要是有社交屬性的產(chǎn)品都有此功能,想必大家也貌似都非常熟悉它,日常工作的處理,友誼情感的加深,都離不開(kāi)它,可是你真的對(duì)它了解有多少呢?還是它只是你最熟悉的陌生人?接下來(lái)就和大家一起聊一聊消息列表那點(diǎn)事…..(上茶,點(diǎn)煙,看座)哈哈哈哈….

消息列表的元素構(gòu)成:

消息列表的樣式雖各領(lǐng)風(fēng)騷,但大致相同,包括;頭像,姓名/主題,消息內(nèi)容/個(gè)性簽名,時(shí)間信息,還有一個(gè)就是極具有中國(guó)特色的必不可少的全宇宙超級(jí)無(wú)敵可愛(ài) mini小紅點(diǎn)了….

在這么多元素中,我在這里想和大家討論的是關(guān)于列表頭像范疇的這點(diǎn)事,它雖身居高位(視覺(jué)捕捉的前沿位置和體態(tài))卻很少被我們深切關(guān)注過(guò),在我們的日常項(xiàng)目設(shè)計(jì)中我們對(duì)它是真有點(diǎn)拿村長(zhǎng)不當(dāng)干部的感覺(jué),不知道各位小主是不是這樣的感覺(jué)哈….

那就先讓我這個(gè)大頭兵,替大家前去踩個(gè)點(diǎn)打探個(gè)究竟,看一看頭像這玩意兒有哪些好玩的地方,是不是有啥大保健套餐式的酸爽,我從以下幾個(gè)角度去探索搗鼓一下先:

  1. 造型
  2. 顏色
  3. 屬性識(shí)別

01 造型

以主流社交產(chǎn)品為例,頭像區(qū)域造型主要有:圓形和方形(圓角),即使是方形也是有圓角,以微信為例16px圓角,縱觀app頭像的發(fā)展演變,也是大都從方形迭代成圓形,不過(guò)即使是騰訊系的微信(方)和QQ(圓)也是截然不同,我想大多數(shù)人不要問(wèn):why?what is the matter?

圓形和方形分別對(duì)人有哪些影響呢?《設(shè)計(jì)心理學(xué)》對(duì)圖形形狀給人的影響作了充分的解答:

1. 方形

這種形狀被認(rèn)為是最常用的形狀。我們每天都會(huì)看到它們很多次。墻壁和家具,書(shū)籍或顯示器,手機(jī)和相機(jī)以及許多其他日常用品都有方形或矩形。這種形狀的直線和直角給人一種可靠性和安全感。人們強(qiáng)烈地將方形與建筑物聯(lián)系起來(lái),這就是為什么它們帶來(lái)了信任和權(quán)威的感覺(jué)。

代表含義:科學(xué) 、強(qiáng)度、 勇氣、 安全、可靠性

2. 圓形

這種形狀的第一個(gè)也是最重要的意義是永恒,因?yàn)樗鼈儧](méi)有開(kāi)始或結(jié)束。圓與太陽(yáng)和地球以及其他宇宙物體有著很長(zhǎng)的聯(lián)系,而橢圓與整個(gè)宇宙相似。這就是為什么圓形可以給人一種神奇和神秘的感覺(jué)。

此外,與以前的形狀不同,圓圈沒(méi)有角度,因此它們更柔軟,更溫和。

代表含義:永恒 、團(tuán)結(jié)、和諧、神秘、積極、溫暖柔和

從感知上來(lái)講,圓形更容易聚焦,因?yàn)樗挥?個(gè)中心點(diǎn),而方形有更多分散的焦點(diǎn),不容易聚焦,人類(lèi)的眼睛構(gòu)造就是天然圓形,我們更容易優(yōu)先捕捉到圓形。

所以我們做具體項(xiàng)目要基于我們產(chǎn)品的定位,去設(shè)計(jì)提煉符合我們品牌調(diào)性的風(fēng)格控件。每一個(gè)app都有它自己獨(dú)有的氣質(zhì)和聲音。不是拍腦袋,憑感覺(jué)去設(shè)計(jì)。所以至于為什么騰訊的產(chǎn)品用的形狀不一樣,他們也有自己的發(fā)聲:

02 顏色

顏色是一個(gè)產(chǎn)品的靈魂符,能直觀傳達(dá)產(chǎn)品的調(diào)性,每一種顏色都有自己的語(yǔ)言,在設(shè)計(jì)項(xiàng)目中我們會(huì)根據(jù)產(chǎn)品的定位和情感傳達(dá)推演選擇符合自己氣質(zhì)的顏色:

  1. 紅色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥
  2. 橙色代表光明、華麗、興奮、甜蜜、快樂(lè)
  3. 黃色代表明朗、愉快、高貴、希望
  4. 綠色代表新鮮、平靜、和平、柔和、安逸、青春
  5. 藍(lán)色代表深遠(yuǎn)、永恒、沉靜、理智、誠(chéng)實(shí)、寒冷
  6. 紫色代表優(yōu)雅、高貴、魅力、自傲
  7. 白色代表純潔、純真、樸素、神圣、明快
  8. 灰色代表憂郁、消極、謙虛、平凡、沉默、中庸、寂寞
  9. 黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、粗莽
  10. ……

頭像的默認(rèn)配色亦然,現(xiàn)在主流樣式有:灰白色系、品牌色、定義匹配色

其中釘釘?shù)哪J(rèn)配色是由多色向品牌藍(lán)單色迭代,是一個(gè)做減法的過(guò)程,減少多余的輔助顏色降低視覺(jué)干擾,增強(qiáng)了品牌的傳播力度,固化用戶(hù)的品牌認(rèn)知心智。

黑白灰在色彩學(xué)上屬于無(wú)色系,是最安全最高級(jí)的的顏色,中庸而又平和,用在任何場(chǎng)景都不會(huì)虛飄,這也是其它默認(rèn)場(chǎng)景配置中使用更多的色彩。

03 屬性識(shí)別

屬性識(shí)別主要是指用戶(hù)獲取頭像并快速識(shí)別出對(duì)象是誰(shuí)的這樣一種標(biāo)簽屬性,它大致包括以下幾種樣式(上傳照片的除外):

  • 品牌色/灰色+默認(rèn)頭像
  • 定義4色或多色匹配/品牌色+姓名后2字或尾字
  • 群組消息頭像疊加,以灰/品牌色為背景

1. 頭像字色顯示

對(duì)于默認(rèn)狀態(tài)名字顯示的情況,不同的產(chǎn)品策略也有差別,阿里《釘釘》取得是姓名后兩個(gè)字段,《脈脈》取得是姓名的最后1個(gè)字段:

2. 多色定義

關(guān)于多色背景定義的其他產(chǎn)品的定義策略我不甚了解,但我做過(guò)一個(gè)類(lèi)似的《阿聯(lián)酋》電信的項(xiàng)目,那我就把我知道的策略和大家分享下:

根據(jù)品牌色設(shè)定出4個(gè)輔助顏色,將姓名首字母對(duì)應(yīng)的ASCII碼數(shù)值除以3所得余數(shù),與這四種顏色去一一匹配,有一點(diǎn)不足就是這樣在未上傳照片的情況下會(huì)有很多顏色,不利于聚焦有效信息,這也是后來(lái)其它類(lèi)似產(chǎn)品設(shè)計(jì)做減法的原因吧。

3. 群組

群組的形式大都是頭像疊加組合顯示,各自的規(guī)則有所差異,《微信》的群組小于9個(gè)分別展示出來(lái),以9為邊界值,大于等于9都顯示9個(gè)頭像組合;

《釘釘》的群組以4個(gè)邊界值,超過(guò)4個(gè)人的群組頭像都統(tǒng)一顯示出4個(gè),小于4個(gè)分別對(duì)應(yīng)顯示。頭像的選取按照加入群的先后順利排列展示。

最后

以上關(guān)于列表頭像設(shè)計(jì)的信息點(diǎn)你都get到了嘛?“麻雀雖小,五臟俱全”,看似簡(jiǎn)單的一個(gè)元素,其實(shí)都含有很多隱形的知識(shí)點(diǎn),我們?cè)谠O(shè)計(jì)過(guò)程中要不斷探索,不斷深挖,這樣我們做的的設(shè)計(jì)在和產(chǎn)研小伙伴評(píng)審的時(shí)候才能做到有理有據(jù)有節(jié),才能經(jīng)得起大家和同行的推敲。

 

本文由 @屎克郎 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 圓形代表自由,方形代表穩(wěn)定。一個(gè)是陌生人交友qq,一個(gè)是熟人圈子微信??隙吧烁纹ば┯脠A形了,熟人之間長(zhǎng)時(shí)間相看不厭的話還是中規(guī)中矩一些啦。

    來(lái)自北京 回復(fù)
    1. 贊,有道理….

      來(lái)自江蘇 回復(fù)
  2. 圓形代表自由,方形代表可靠。一個(gè)是陌生人交友qq,一個(gè)是熟人圈子微信??隙吧烁纹ば┯脠A形了,熟人之間長(zhǎng)時(shí)間相看不厭的話還是中規(guī)中矩一些啦。

    來(lái)自北京 回復(fù)