消息列表模塊是大家常見(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é)議