消息列表模塊是大家常見的APP功能了，但是你真的了解這個功能嗎？本文作者從3個角度對消息列表模塊進行了分析探究，希望通過此文能夠加深你對列表頭像設計的認識。

消息列表功能模塊應該是大家日常生活中接觸最多的APP功能了，隻要是有社交屬性的産品都有此功能，想必大家也貌似都非常熟悉它，日常工作的處理，友誼情感的加深，都離不開它，可是你真的對它了解有多少呢？還是它隻是你最熟悉的陌生人？接下來就和大家一起聊一聊消息列表那點事…..（上茶，點煙，看座）哈哈哈哈….

消息列表的元素構成：

消息列表的樣式雖各領風騷，但大緻相同，包括；頭像，姓名/主題，消息内容/個性簽名，時間信息，還有一個就是極具有中國特色的必不可少的全宇宙超級無敵可愛 mini小紅點了….

在這麼多元素中，我在這裡想和大家讨論的是關于列表頭像範疇的這點事，它雖身居高位（視覺捕捉的前沿位置和體态）卻很少被我們深切關注過，在我們的日常項目設計中我們對它是真有點拿村長不當幹部的感覺，不知道各位小主是不是這樣的感覺哈….

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

1. 造型
2. 顔色
3. 屬性識别

01 造型

以主流社交産品為例，頭像區域造型主要有：圓形和方形（圓角），即使是方形也是有圓角，以微信為例16px圓角，縱觀app頭像的發展演變，也是大都從方形疊代成圓形，不過即使是騰訊系的微信（方）和QQ（圓）也是截然不同，我想大多數人不要問：why？what is the matter？

圓形和方形分别對人有哪些影響呢？《設計心理學》對圖形形狀給人的影響作了充分的解答：

1. 方形

這種形狀被認為是最常用的形狀。我們每天都會看到它們很多次。牆壁和家具，書籍或顯示器，手機和相機以及許多其他日常用品都有方形或矩形。這種形狀的直線和直角給人一種可靠性和安全感。人們強烈地将方形與建築物聯系起來，這就是為什麼它們帶來了信任和權威的感覺。

代表含義：科學 、強度、 勇氣、 安全、可靠性

2. 圓形

這種形狀的第一個也是最重要的意義是永恒，因為它們沒有開始或結束。圓與太陽和地球以及其他宇宙物體有着很長的聯系，而橢圓與整個宇宙相似。這就是為什麼圓形可以給人一種神奇和神秘的感覺。

此外，與以前的形狀不同，圓圈沒有角度，因此它們更柔軟，更溫和。

代表含義：永恒 、團結、和諧、神秘、積極、溫暖柔和

從感知上來講，圓形更容易聚焦，因為他隻有1個中心點，而方形有更多分散的焦點，不容易聚焦，人類的眼睛構造就是天然圓形，我們更容易優先捕捉到圓形。

所以我們做具體項目要基于我們産品的定位，去設計提煉符合我們品牌調性的風格控件。每一個app都有它自己獨有的氣質和聲音。不是拍腦袋，憑感覺去設計。所以至于為什麼騰訊的産品用的形狀不一樣，他們也有自己的發聲：

02 顔色

顔色是一個産品的靈魂符，能直觀傳達産品的調性，每一種顔色都有自己的語言,在設計項目中我們會根據産品的定位和情感傳達推演選擇符合自己氣質的顔色：

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

頭像的默認配色亦然，現在主流樣式有：灰白色系、品牌色、定義匹配色

其中釘釘的默認配色是由多色向品牌藍單色疊代，是一個做減法的過程，減少多餘的輔助顔色降低視覺幹擾，增強了品牌的傳播力度，固化用戶的品牌認知心智。

黑白灰在色彩學上屬于無色系，是最安全最高級的的顔色，中庸而又平和，用在任何場景都不會虛飄，這也是其它默認場景配置中使用更多的色彩。

03 屬性識别

屬性識别主要是指用戶獲取頭像并快速識别出對象是誰的這樣一種标簽屬性，它大緻包括以下幾種樣式（上傳照片的除外）：

• 品牌色/灰色 默認頭像
• 定義4色或多色匹配/品牌色 姓名後2字或尾字
• 群組消息頭像疊加，以灰/品牌色為背景

1. 頭像字色顯示

對于默認狀态名字顯示的情況，不同的産品策略也有差别，阿裡《釘釘》取得是姓名後兩個字段，《脈脈》取得是姓名的最後1個字段：

2. 多色定義

關于多色背景定義的其他産品的定義策略我不甚了解，但我做過一個類似的《阿聯酋》電信的項目，那我就把我知道的策略和大家分享下：

根據品牌色設定出4個輔助顔色，将姓名首字母對應的ASCII碼數值除以3所得餘數，與這四種顔色去一一匹配，有一點不足就是這樣在未上傳照片的情況下會有很多顔色，不利于聚焦有效信息，這也是後來其它類似産品設計做減法的原因吧。

3. 群組

群組的形式大都是頭像疊加組合顯示，各自的規則有所差異，《微信》的群組小于9個分别展示出來，以9為邊界值，大于等于9都顯示9個頭像組合；

《釘釘》的群組以4個邊界值，超過4個人的群組頭像都統一顯示出4個，小于4個分别對應顯示。頭像的選取按照加入群的先後順利排列展示。

最後

以上關于列表頭像設計的信息點你都get到了嘛？“麻雀雖小，五髒俱全”，看似簡單的一個元素，其實都含有很多隐形的知識點，我們在設計過程中要不斷探索，不斷深挖，這樣我們做的的設計在和産研小夥伴評審的時候才能做到有理有據有節，才能經得起大家和同行的推敲。

本文由 @屎克郎 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部