15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

UI设计中的图标辅助图形

路亚杰| 发布于 2021-11-11 15:33:22| 446阅读| 0点赞| 0评论
举报

如何使图标更有细节感

什么是图标辅助图形?


首先,我们在设计小程序也好,网页也好,甚至是app的过程中,都会使用到图标。图标其实也是品牌识别度的一种展现方式,而图标中的辅助图形,简单理解就是一些装饰元素。他能让图标有更多的细节和特点,强化图标识别性。同时还能让图标更具视觉冲击力


像下面这套图标中的浅蓝色就是图标里的辅助图形,去掉这些浅蓝色块不大影响图标整体的识别性,但增加这些辅助图形后,图标变得更有特点,更容易被记住。


1.尽量让辅助图标有意义。

图标的辅助图形不是随随便便就加上去的,他的出现应该是代表了一些东西的。而不是随便的一个圆形,一个方块就算。底下这个是我找的网上的一个案例。这里面的图标辅助图形就是一个圆,出现在右上角。而且所有图形的圆出现的位置和大小都不变。其实他去掉这个圆形对整体的识别度也不会有影响,加了这个圆反而会让图形出现视觉疲劳。



2.综合品牌色来进行设计

我们设计的时候可以参照品牌的主色,辅助色就是辅助图形的颜色。主次关系有搞明白。不能让辅助图形占据主导。所以辅助图形的占比一定是比主色要小的。我发现了像爱奇艺的底部图标就是使用了品牌色加辅助色的搭配。使得整体看起来更加富有细节。



3.避免太过一致

对于多图标的时候来说,一定要避免重复使用一种形状和颜色。完全一致的辅助图形会让图标显得呆板、缺乏细节。还是这个案例,他页面就重复使用了圆形。




4.主次分清

另外就是图标和辅助图形是由一个主次关系的,辅助图形不要喧宾夺主。这个案例里的辅助图形就是和图标的占比太多。使得用户一看到的时候一时间分不清哪个是图标哪个是辅助图形。



ps:以上仅仅只是个人结合了网上的一些案例进行的参考,可能有的地方不是很对,也不够全面。也仅是参考之用

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

路亚杰
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部