header_v0.7.2

一个“好”icon应具备哪些素质?

116天前发布

原创文章 / UI / 教程
洛七七 原创,如需商业用途或转载请与洛七七联系,谢谢配合。

icon设计可谓是UI设计中的一个重要组成部分。那么icon设计有哪些原则呢?
简书http://www.jianshu.com/p/c4a6d4035a78
http://www.ui.cn/detail/227932.html

在之前的文章中我有提到产品用户体验要素包含五个层面即:战略层、范围层、结构层、框架层和表现层。视觉设计师是主要职责则是体现在产品的表现层即视觉设计。前面的文章我也把视觉设计师比喻成美妆师,主要负责给产品“化妆”,让产品看起来“更好看”。


93ed58e1d727a801219c77511ff0.jpg



然而在表现层也就是视觉设计层面,想把界面设计的更好,也不是那么容易的事情,其中有一个必不可少的部分,那就是icon的设计。icon设计可谓是UI设计的一个重要组成部分。


a37a58e1d74ea801219c77a99031.jpg


我们知道人类的大脑的构成天生就对图像的记忆完胜与对文字的识别和记忆。每个人的视觉感知能力都能轻易的理解一些图形所包含的信息,用图形来代替文字降低了我们大脑处理文字信息的认知成本。 因此成熟的视觉感知是更有效的信息传递途径。而应用中的icon则兼具了这样一部分职责。

icon设计看似容易,实则不然。icon设计做的好坏也体现了一个设计师的 设计功底。


那么,好的icon应具备哪些特征呢?根据工作中的经验我也总结了几点,如下:


1.统一性
2.差异性
3.可识别性
4.趣味性


下面来一一陈述。


1.统一性 
icon的统一性在我看来可谓是icon设计的最基础要求。一个产品里的icon首先应具备的条件就是统一性,它就像古装剧里的不同派系一样,什么武当派,峨眉派,少林派,不同派系必有自己内部的制度,要求或是着装,就连所用武功套路也必定不大有区别。然而每一个派系内部所学的武功则是一样的。如若不同派系之间互相参杂可想然染会引起矛盾,这也往往是这些个古装剧能够持续演下去的原因。


e43158e1d77fa801219c770de91a.jpg


我们知道和谐东西往往能产生美,之所以要求icon具有统一性,是因为和谐动东西能产生美,更能使整个UI界面看上去舒服。然而一组你形我异的icon汇聚在一起必然失去了它统一性,从而也失去了它的美观性。



2.差异性

之所以要求图标的差异性,是因为icon往往是功能入口视觉化的产物,它往往兼具着某一功能的入口。如若一套icon里,所有的图标差异性不大,用俗语说就是:“长得一样”,我们很可能难以辨别。你可以想象下你看到一对双胞时的感受。而icon一但长得一样用户必会傻傻分不清,在界面中找寻某个功能时花费的时间会比想象中的时间要长这也增加了用户使用时的识别成本。


a48958e1d7a7a801219c7784dd99.jpg


所以设计师在设计一套图标是要尽量放大图标之间的差异性,减弱图标的之间的相似性。因为在统一性的基础上差异性越大,用户越容易辨认他所代表的不同功能,从而降低用户使用时的辨别成本。放大统一性,减弱相似性,这也是容易被设计师忽略的的一个原则,设计师往往为了追求视觉风格的统一性,而舍弃了图标的差异性。这点需要谨记。



3.可识别性 
在统一性差异性的基础上还有一个对icon的重要要求:可识别性。可识别性是icon设计的目的,我们设计icon就是为了让用户能够更好的辨识不同icon所代表的不同功能。如果一组iocn失去了它的可识别性可谓是忘本逐末,即便画的再好看也失去了它价值所在。
一个一眼就能认知的icon大大提升了用户的操作效率,降低了用户操作的辨识成本。


663158e1d7bea801219c77794713.jpg




4.趣味性

我对趣味性的定义不只是直观的讲一组icon应具备多有趣味,多么可爱。而这里的“趣味”实则更是指应用到产品中的一组icon应具备提升和侧面传达产品的气质,体现产品的商业特性或属性。一组有“趣味性”图标,在我看来更像是一个“灵魂歌者”,与普通歌手不同的是它的气场能够直逼听者灵魂深处,也像国画中的“气韵”一样,有一种道不明的朦胧美。


这也是我为什么我把它放到最后表述的原因。在我看来对一组icon的这样的要求是最高的要求。需要设计师的更深的设计功力。


6dfc58e1d7f6a801219c77e38839.jpg



而在设计时,我们在对icon的想要设计的更好是,往往也是在简约与装饰性、抽象与具体之间的平衡,要设计师自己把握。正是这个把握的度也是考验设计师是否设计能力是否成熟的表现。

以上是我对icon设计的一些看法和总结,希望本文对你有帮助,也欢迎一起探讨学习。


4

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功