设计icon你需要注意什么?

icon是界面中除了文字的另一种特殊元素,刚了解ui设计时,就是从临摹icon开始的。这篇文章则是我对这个元素的一点思考。

ICON的作用

1.  代替文字,凸显功能

这是大家最不陌生的功能,图像将抽象的信息进行了具象的表达,icon可以使用户可以快速预知按钮的功能,文本的意义。

2.  充当锚点,立即定位

在文字信息繁多的页面中,icon利用图形天然的优势像一个标杆,紧紧抓住人们的视线,带领视线快速的定位到不同区域。

3.   区分内容层,增加界面节奏

Icon具有的锚点功能,可以在视觉上将信息区分成不同的板块,将要传递的信息的组织起来,清晰的展示了信息的大纲,也使得界面更具有节奏感。

在樊登读书“个人中心”页面中,下半部分的功能采用一个icon一个标题的排列方式,icon像文章中的序号,将每个功能的标题区分开来,部分icon加入黄色色块来强调,信息排列整齐有序,层次清楚明了。

4.   品牌风格的体现

在各类应用严重同质化的现状下,icon是一种可以快速塑造品牌形象的方式。通过区别于其他产品的个性化icon来传递自己的品牌理念。

马蜂窝的底部导航使用品牌的黄色主题,首页使用近似蜂窝的多边形,通过icon来强调自己的品牌

设计 ICON 需要考虑什么

1.   强调特征线索

特征线索是某些区别于其他事物的独特的地方,我们对图形的识别主要依赖于特征线索。

例如,我们识别对话框的icon,就依赖于矩形方块下突出的一个小尖角,如果小尖角消失了,这个icon要表达的意义也就丢失了。

所以在设计icon需要 将特征线索着重突出 。让不同图标区别与其他图标,更加清楚的表达出自己的含义。

2.   简化图形

希克定律告诉我们,视觉混淆程度越小,决策的时间越短。icon越简化也就越容易识别,从另外的一个角度来说,特征线索也将越突出。

下面两枚图标都是表达的是化妆镜子的含义,左边的图标将镜子常见的圆形镜面变成了多边形,并添加一些其他的装饰,而右边仅仅只是保留了镜子的特征元素,就认知来说,右边的图标更容易让人们理解图标的含义。

3.   小尺寸可识别

界面中的图标在屏幕中显示的时候都是很小的一个区域,因此我们需要考虑到,在这样小的尺寸下,是否还可以清晰的识别图标的含义,希望展示的细节是否还清晰可见。

当我们使用断线风格的图标,当缩小尺寸的时,断线的部分因为因为缩小了比例而重新连接到了一起。(小小建议,将断线开在连接处,可以避免部分此类问题哟)

4.   视觉平衡

不知你是否遇到过,画图标的时候明明两个图标的长宽都一样,为什么看着大小差距那么大呢?

就像在下面的图片中,所有的图形有着相同的长和高,但在视觉上看起来,正方形要大的多。

但当我们把圆形和三角形画得突出一点,就会不一样了,三个图形的在视觉感知上变得一样大小了。所以 数学上的精确性并不能提供视觉或感知平衡

使用图标栅格,可以使我们更快的绘制视觉平衡的图标。

在图标栅格中,我们可以观察到其中的参考线围成了两种不同规格的圆形、方形。当我们画图标的时候,可以先观察图标的主要形状,找到类似的形状,按照栅格中参考线的指导,让整个图标以饱满的形式填充在栅格中。另外还需要注意,细节的添加也会增加图标的视觉重量,记得在其他地方做一点平衡哟。

5.   统一   (线条,文字和 icon ,风格,角度,圆角,同一界面中的寓意)

精致的图标,在各方面的表达也一定特别的统一,例如: 风格统一、图案视角统一、线条宽度统一、圆角统一。 同时也别忘了,界面中图标寓意的统一,当你使用星形来代表收藏时,也别忘了在其他页面中,统一使用星形来代表收藏。

--- END.我是分隔线  ---

更多分享,欢迎关注公众号:七七的设计手札

Powered by Froala Editor

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章