J-018

大厂金刚区越来越“乱了

入库日期
2024-01-15
作者
AG 阿吉
类目
J-产品设计
原文出处
访问原文 ↗
主题/J-产品设计领域/产品设计形式/评论信息架构导航金刚区

文章分析大厂应用金刚区从追求视觉一致性转向注重可识别性的设计趋势,从用户、业务与品牌角度阐释原因,并从颜色与形状两方面介绍提升图标可识别性的要点,提出明确色彩倾向、语义明确、相邻图标形成对比等设计原则。

大家有没有发现,在早些年,各家金刚区还是相对比较规整的,这两年金刚区却变的越来越“乱”。用户体验变的不重要了吗? 背后是怎样思考的呐?


1. 从一致性到可识别性

以淘宝为例,可以发现金刚区的图标开始舍弃了“视觉一致性”,转而更注重“可识别性”。

策略思考:

  1. 用户角度:更好的可识别性,能方便用户快速 get 到功能,在需要的时候也能更容易被找到;
  2. 业务角度: banner 消失,黄金位置需要发挥更大的价值。且随着市场竞争激烈,业务有更大的流量诉求。独特才能脱颖而出;
  3. 品牌角度: 超级 APP 中,很多子频道都有单独的 APP,专属的“可识别性”,有利于建立品牌心智;

那么表达“可识别性”有哪些关键点?


2. 可识别性要素—色

颜色的对比最基础,也最直观。

抖音和淘宝虽然使用了不同的风格(扁平 Or 微拟物+毛玻璃),但每个图标有明确的色彩倾向,尽量以 1 种颜色为主。颜色种类根据图标多少,最多不要超过 4 个。

Tips:判断图标颜色明度统一小技巧

一部分颜色在 HSB 上是一致的,但是“视觉感受”上仍会有差异。例如黄色颜色始终觉得比较亮。

可以叠加纯黑色图形 -> 去色模式,再对比灰度。


3. 可识别性要素—形

形的对比是灵魂,也最出彩。

1. 视觉联想

从图标名称可发散出代表性关键词,然后将关键词变成一个具象化的、用户熟悉的“图形”。如:美食 -> 餐具  -> 叉勺。

2. 场景联想

通过主元素(大)+辅助元素(小),形成一个场景化的视觉带入感。如:山 + 太阳 = 游玩。

Tips:参考迪士尼,查看“剪影”判断是否具有辨识度


4. 可识别性的设计原则

  1. 要有明确的色彩倾向,尽量以 1 种颜色为主。颜色种类根据图标多少,最多尽量不要超过 4 个;
  2. 通过视觉关联、场景联想等出发,语义要明确
  3. 相邻图标要在色、形上尽量有明确对比和区分

大家可以根据自己的业务特征,进行这些设计原则的比例组合。例如:颜色 40%+外形 60%,像支付宝这种颜色比较少 icon 还多的、顺序也不固定的,更多还是外形。 🆃