图标 icon ·

icon图标设计与筛选的技巧

自从扁平化还有极简设计开始流行之后,图标的设计越来越重要,经常有设计师问,到底软件程序里面的这个图标怎么设计?

另外网页设计的设计师也会问,我们这平台有vip会员,那vip会员的图标要怎么设计?

还有一个app的设计,这聊天里面的群组图标,要怎么设计?

图标的设计,我认为是对于ui/ux设计师来说;是最难的工作之一。

 

图标的用意是什么

我们会使用图标就是用它来在使用者界面上传达有意义的东西;而这个有意义的东西,有可能是你的对象、想法、动作,然后设计师把这些有意义东西视觉化。

图标的优点

1. 它是一个全世界共通的语言,不会受到你文化与语言的影响,举个例子,大家都知道手机对吧,手机的样式很多种,但是看下这个图标你是不是马上就可理解到这个是手机的图标?

icon design 10

手机图标

 

2. 可以快速让使用者识别,尤其是在快速移动的时候,你可以马上轻易的找到你要的功能与东西。

icon design 6

手机在移动的中图标的形象会是这样子,比起文字,更容易在移动的时候识别

 

3. 增加设计的美感。

4. 节省空间,尤其对于喜欢极简设计或者扁化的设计。

5. 图标是一个非常好的点击目标。

以上说了那么多的优点,但是这个优点有个前提,那就是你的图标要设计得非常好,并且可以让使用者马上看的出来你要表达的意思,如果不是,那么你会让使用者产生困惑,导致使用者想要完成某项任务或者事情,使用者会操作失败或者错误点击。

比如:

看下一下gmail,我红色圈起来的部分

icon design 1

gmail信件内的图标

你可以只看图标就知道这个是什么意思吗?

 

设计师通常犯的错误

说了那么多来看很多设计师曾经犯的那些错,导致使用者抱怨最多,并且造成使用者困扰。

1.经常发明图标,导致使用者对于图标不是很了解导致使用者常常错误点击。

2.常常抱怨只要一改版就不知道哪一个功能跑到哪里去了。

3.图标画得太细节,太会发挥创意导致使用者与内容搞混,说白点就是图标抢了内容的风采,让使用者注意的点放在图标上不是内容上,然后在小尺寸上那么细节的图标根本没有必要;使用者大多也看不是很清楚。

4.使用一些通用图标但是没有考虑到多平台的问题,实际上同样是垃圾桶,ios与android本身就有很大的不同。

5.使用意义不是很明确的东西却要用图标表达,自己太会发挥创意导致使用者认知上的困难,例如app的里面的特殊图标要怎么画,结果往往是自己在爽,没有考虑使用者能否领会。

6.为了省下空间而省下空间,没有考虑使用者对于学习新图标的学习成本。

 

设计与选择图标遵循的五个原则

所以你应该这样子做:

一. 能不能在五秒内判断出你的图标的意义

如果不行请重新设计。

二. 选择通用性高的图标

例如下面这些,你一看就知道什么意思

icon design 7

如果你是自己定义这些图标,ios与android的虽然外型差不多,但有明显的风格差异,有些图标的差异性非常大,要找出适合该平台的设计的图标,对于ios与android平台优化,而不是设计一个共用图标全部平台通用。

比如:

icon design 3

这两个差异很大的图标,却是分享,上面是android下面是ios

三. 保持一致性

通用性图标选择有些要很注意,如果你选择的图标在通用上常常代表两种意思以上,那你在使用上要特别小心,这边建议作法是保持一致性,例如爱心代表加入我的最爱,那整个平台的爱心都是加入我的最爱。

几个通用性高但却代表很多意义图标如下

icon design 5

四. 用文字说明抽象的图标

如果空间允许,请你一定要使用文字说明;假设你今天要设计一个图标这个图标是很特殊的,例如群组、vip、天气、快乐….etc;你所设计的这类型抽象的图标,最好加上文字说明。

如果空间不允许,那怎么办,那你应该不要用图标而使用标签来代替图标。

icon design 8

空间真的不够,改用标签

还有设计抽象类型的图标,一定要在真实世界中找到相关联性,尽量不要完全无关;不然你的图标就算用文字说明,也很难让人明白的意思或者快速记住这个图标的意思。

因为抽象的标签很复杂;你这个图标可以用许多的词来表达它的意思,但往往使用者并不知道这个图标的意思。

例如:

icon design 9

图标加上标签

五. 清楚的特征外观

你在设计图标的时候不论是抽象还是共用的;你不应该花太多时间在细节上,因为太小的图标细节是很难被看出来,你应该要花更多时间问自己,使用这类图标的意义在哪里。

所以在特征外型上要有真实的物理特征或者视觉效果。

例如下面这个图标就是用来表示测试手机网速的。

icon design 2

测试网速

经典的抽象图标:设置。

icon design 4

设置的图标

我想大家都看过,设置大部分会使用的图标都是齿轮来表示,那为什么呢?

传统上,机械的操作调整就是利用用齿轮位置/类型/尺寸来决定,讲白一点大家看过机械时钟表吗,那要怎么调整速度…etc,它是怎么跑的是不是要调整齿轮就可以了?

因此,使用齿轮进行设置是一种隐喻,如果你想改变运作方式,你需要改变系统的内部运作,这通常都是齿轮的图标。

参与评论