關于列表頭像設計,你了解多少?

3 評論 5110 瀏覽 22 收藏 10 分鐘

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 圓形代表自由,方形代表穩定。一個是陌生人交友qq,一個是熟人圈子微信??隙吧烁纹ば┯脠A形了,熟人之間長時間相看不厭的話還是中規中矩一些啦。

    來自北京 回復
    1. 贊,有道理….

      來自江蘇 回復
  2. 圓形代表自由,方形代表可靠。一個是陌生人交友qq,一個是熟人圈子微信??隙吧烁纹ば┯脠A形了,熟人之間長時間相看不厭的話還是中規中矩一些啦。

    來自北京 回復