网易设计大咖带你3小时玩转ICON设计

大家好，欢迎大家学习黑马带你学设计-3小时玩转ICON设计的系列课程，本季课程主要讲述如何在最短的时间内设计出优秀的ICON。

大家好，欢迎大家学习黑马带你学设计-3小时玩转ICON设计的系列课程，本季课程主要讲述如何在最短的时间内设计出优秀的ICON。

1.icon设计

图标,英文名称为icon。它起源于拉丁词 ‘ eikṓn ‘意思是 “likeness, image”。 图标是全世界最通用的语言。这是一种人人都能理解的语言,不论国籍、种族、年龄或性别。图标无国界。计算机系统代表图标的文件后缀名为.ico。icon是具有明确指代含义的计算机图形，它具有高度浓缩并快捷传达信息、便于记忆的特性。我们狭义的理解icon设计就是计算机交互界面上的图形，当然广义上还有交通指示牌等等.

2.icon演变史

icon设计到今天大致经历了三个时期。在早期的操作系统中，图形和色彩相对简单，主要通过简单的渐变和阴影来绘制交互界面。我们可以看到这张图就是早期计算机的交互界面。

那个时候的计算机内存和CPU的效能和今天都没办法比拟，所以人们的审美也受到技术的限制，我们只能设计出这种相对简陋的icon设计元素，现在看起来相对单调乏味，不过在当时呢，已经算是里程碑式的跃进了。

随着计算机成像能力的发展，在中期icon设计发展出了以拟物化为风格的界面设计。设计师可以设计出色彩更加丰富细腻，更加真实的icon设计元素。在中期主要以写实的设计风格为主。让icon看起来更加生动贴近现实。

到了后期随着网络的普及但受到带宽的限制，计算机软件界面要求能最快时间加载并呈现给用户，拟物化风格icon显然加载会很慢并大量消耗流量，人们也看腻了拟物化的icon。根据现实需求，扁平化icon问世了。就是我们现在依然在用的扁平化设计风格。

使用Icon的好处：

●节省空间

一个icon可以代替一个语义，但只占一个字符位置

●简洁易懂  

比如一个房子，无论各种语言，认不认识，都知道点击带房子图标的东西可以到“首页”。

●易识别

人脑处理图形的速度很快，也不需要像文字一样去阅读，扫一眼就知道，快速理解。通常带图标的项目优先级较高，起着重提示、引导作用。

●增强美感

一套好的设计界面，搭配美观合理的icon设计对提升视觉体验非常有帮助。

●建立品牌形象

独特的视觉语言也是建立品牌形象非常重要的因素，这一点在企业logo和vi系统 的设计上有很好的体现。

3.icon与标志的区别

icon与标志的关系是同源关系。可以说icon是被包含在标志范畴内。标志一般是企业文化和企业灵魂的高度凝聚。而icon我们泛指是计算机交互界面上的图形。他们的相同点都是具有明确指代意义的图形，不同点在于他们的用途和表达方式及风格等都略有差异。看图例

4.icon的种类

5.icon设计的注意事项

我们在绘制icon的时候也应该遵循形色质三个维度去绘制和考量。首先我们应遵循

形状统一

在日常设计工作当中我们绘制的icon都是成套出现的，很少会有让设计师只绘制一个icon。所以我们在绘制icon的时候要保证所有icon的设计风格是高度统一的，看图例

色彩统一

我们在绘制成套icon的时候要遵循UI设计规范中对颜色的规定。如果是单色的icon，那么整套icon应该是一个色值，如果是彩色的icon，在颜色的明度和饱和度上也应该保持高度的统一。

风格统一

同样的道理，我们在绘制成套icon的时候icon的风格必须保持高度统一，不能出现线条宽度不一致，色彩不一致，有线性的块面甚至是拟物化的icon混杂在一套icon当中，这个是绝对不允许的。

以上内容实例均附视频教程，点击链接或扫码即可观看学习：

https://study.163.com/course/introduction/1006083854.htm