会说话的icon是icon中的心机con

左京东，右天猫.png

想必，我们看多了太多“会说话”的icon，比如左边，统一成一个购物主题的icon矩阵，右边，用icon排出一句话。
当你爱上一个人，连icon都可以是爱ta的形状。

但是我今天想和大家分享我最近突然感兴趣的另一种会说话的icon，可以说是“icon中的心机con”。但从专业角度来说，其实就是小红点设计，之前看过其他牛逼的设计师写过这个控件，文章在这里：https://www.jianshu.com/p/292dab3898e9。

从淘宝说起：

淘宝-我的.png

红色框处的部分，大家都是很清楚，就红色框出的部分，就非常常见，作用是提醒消息条数，但是我们看这种绿色部分才比较心机，他在同一排的icon在一起，就成了会说话的icon。用的也不是小红点，而是一个气泡，说的是“免费抢。”

这样的设计，不单单只是icon的视觉设计，更是交互设计。他们往往：
1.和其他图标一样，本身是提供入口，与文字相适应，更形象；
2.但是更鹤立鸡群，在不是全部icon都有，而是其中部分有，但有了就显得更吸睛，带营销气息；
3.可能是下方文字的补充，或者解释；
4.颜色上有统一性。

说明功能.png

这些心机小气泡往往是带说明功能的，如上图，对于“城市服务”，支付宝中，可以用来查询你的社会保障服务，“查三金”的用途，但是在招商银行，主要是用来缴费，生活用水、用电等等其他服务的，虽然两个icon都是城市服务，但内容的说明是通过这个小气泡来区分的。有很多运用的很好的案例，如下图：

左边爱奇艺，右边优酷（新人福利-就是送VIP；街舞专区-就是wuli韬韬）

在金融产品中，我最欣赏京东金融内的设计，颜色简介，气泡和内容对比明显，低调却饱含营销气息，小气泡是对话气泡的样式，有嗷嗷待哺的感觉。

营销功能.png

不是说这种心机icon效果好，就会适用所有情况，也有例外，比方说，我觉得餐饮类App的“心机”就显得有点弄巧成拙，因为所有icon都很花哨，用红色满减等一些标识的显示就非常弱。

左边大众点评，右边饿了么

以上，简略地小结一下：

1.icon多且icon不花哨的时候，可以用一些心机气泡
2.不需要所有icon都加，但加了以后会有个别很醒目
3.说明内容或者强调营销
4.Badge/徽标/小红点不仅是视觉艺术，也是交互艺术

欢迎提意见，感谢阅读~