想必,我们看多了太多“会说话”的icon,比如左边,统一成一个购物主题的icon矩阵,右边,用icon排出一句话。
当你爱上一个人,连icon都可以是爱ta的形状。
但是我今天想和大家分享我最近突然感兴趣的另一种会说话的icon,可以说是“icon中的心机con”。但从专业角度来说,其实就是小红点设计,之前看过其他牛逼的设计师写过这个控件,文章在这里:https://www.jianshu.com/p/292dab3898e9。
从淘宝说起:
红色框处的部分,大家都是很清楚,就红色框出的部分,就非常常见,作用是提醒消息条数,但是我们看这种绿色部分才比较心机,他在同一排的icon在一起,就成了会说话的icon。用的也不是小红点,而是一个气泡,说的是“免费抢。”
这样的设计,不单单只是icon的视觉设计,更是交互设计。他们往往:
1.和其他图标一样,本身是提供入口,与文字相适应,更形象;
2.但是更鹤立鸡群,在不是全部icon都有,而是其中部分有,但有了就显得更吸睛,带营销气息;
3.可能是下方文字的补充,或者解释;
4.颜色上有统一性。
这些心机小气泡往往是带说明功能的,如上图,对于“城市服务”,支付宝中,可以用来查询你的社会保障服务,“查三金”的用途,但是在招商银行,主要是用来缴费,生活用水、用电等等其他服务的,虽然两个icon都是城市服务,但内容的说明是通过这个小气泡来区分的。有很多运用的很好的案例,如下图:
在金融产品中,我最欣赏京东金融内的设计,颜色简介,气泡和内容对比明显,低调却饱含营销气息,小气泡是对话气泡的样式,有嗷嗷待哺的感觉。
不是说这种心机icon效果好,就会适用所有情况,也有例外,比方说,我觉得餐饮类App的“心机”就显得有点弄巧成拙,因为所有icon都很花哨,用红色满减等一些标识的显示就非常弱。
以上,简略地小结一下:
1.icon多且icon不花哨的时候,可以用一些心机气泡
2.不需要所有icon都加,但加了以后会有个别很醒目
3.说明内容或者强调营销
4.Badge/徽标/小红点不仅是视觉艺术,也是交互艺术
欢迎提意见,感谢阅读~