如何快速出一套界面图标

以前，很多人对UI的理解，就是平面设计，就是画画图的美工。如今，伴随着互联 的不断发展，UI设计不再局限某个领域。

而是在移动应用产品设计、游戏软件、多媒体制作、广告设计、工业设计及医疗、军事、科技、交通、通讯、商业流通等等各行各业都有广阔的发展空间。

相对的，学习UI设计的人群在增加。但是，不同于美工只需要懂得绘画，UI更多的是考验设计师对用户心理的摸索和把握。

零基础想要入门学习UI的话，建议先了解什么是UI设计？UI设计需要学习哪些软件？这样你才能更好的开展工作学习计划！

UI设计需要学什么软件

分别有PS，AI，AE，ARP，思维导图等软件

Adobe Photoshop CC

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。

在UI设计中PS的使用率在90%以上，所以作为一个合格的UI设计师。PS是肯定得掌握的。

PS可以在UI设计中，绘制界面设计，图标设计等。

Adobe Illustrator CC 2018

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件

AI可以用来从事，平面设计， 页设计，UI设计等多种设计工作。

在UI设计中AI的使用率也是非常高的，主要可以用来绘制图标，界面等设计。

Adobe After Effects CC 2018

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，

包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。

在UI设计中PS主要用制作交互动效图。

Axure RP Pro 8.0

Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP是Rapid Prototyping（快速原型）的缩写。

Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，

另外，架构师、程序开发工程师也在使用Axure。

在UI设计中ARP主要用制作交互原型图。

Mindjet MindManager简称思维导图

MindManager，中文商标译作C，俗称“脑图”，又叫“心智图”，是一款创造、管理和交流思想的通用标准的绘图软件，

由美国Mindjet公司开发，界面可视化，有着直观、友好的用户界面和丰富的功能。

在UI设计中主要用来整理交互逻辑思维层。

简单了解UI设计的常用软件之后，也开始我们今天的教程：

如何快速设计出3种风格统一系统图标呢？

图标是决定一个APP风格的重要构成元素，要设计一款讲究的APP，成为一个讲究的设计师。掌握如何设计一套统一风格的icon是基本要求。

APP中的图标的类型多种多样，最常出现的有：面形图标，线形图标，扁平描线图标。文章主要讲这3种图标。图标的形式没有绝对的对错，只要在当下是合适就是最好的。设计圈有点像时尚界，有些反复，时不时会流行复古，时不时又流行现代……

一. 面形图标

面形图标的视觉占比大，有比较强的视觉表达力，通常用在应用中的主要入口。那么面型图标的风格要如何统一呢？

在APP界面中，面型图标通常有两种使用方法：正形和反白。

1.正形

上图是面形图标的正形使用，要统一风格，要注意的是:

a. 面的面积

b.负形的面积

c. 线条的统一

d. 形的统一。可以从形的形状，圆角进行统一

示例中的icon，在面的形上也进行了统一，全部用了圆形进行布尔运算，这种统一在需要画大量功能性icon时，并不是必要条件。满足以上3个条件，基本就可以做一套风格统一的面形icon了。

2.反白

上图是面形图标的反白使用，反白使用时，除了正形图标的3个注意点，还需注意图标和背板的尺寸比例，比例并没有严格的规定，但是建议用0.618黄金比例。

注意点如下：

a. 面的面积

b. 负形的面积

c. 线条的统一

d. 形的构成统一。比如：圆角统一

e. 背板和图标的比例

二.线形图标

线形图标比较轻量化，减少视觉干扰，让用户集中在产品核心功能上。

线形图标的使用也有两种：正形和反白。不建议线形图标的反白使用，因为从设计逻辑上讲，背板结合线形图标是互相矛盾的。

正形

上图中线形图标，要统一风格，有以下几点：

a. 线的形状

b. 闭合区域的大小

c. 线的粗细

d. 线的断点

三.扁平描线图标

扁平描线图标其实是面形和线形的结合，一开始这种设计形式，主要用来做复杂度比较高的插画，后来逐渐在标签栏，首页功能入口这些位置开始应用。这类图标相对于纯面形，纯线形来说，风格明显，个性化程度更强。有一款APP叫“想去”，它的分类图标就用了扁平描线图标，有兴趣的同学可以去看下。

扁平描线图标，统一风格，除了要注意线形图标设计以外，要注意填色区域的大小。

a. 线的形状

b.线的粗细

c. 线的断点

d. 填色区域的大小，颜色

基础已经讲完了，当你掌握了统一图标风格的基本方法以后，就可以开始创新，有自己APP特色的图标了。

图标设计有专业的参考 格，按照参考 格设计可以很大程度的使图标大小更为统一，不过最重要的还是视觉统一。

参考 格是帮助设计的工具，不要被它所限制。UI设计就是这样，不仅要融会贯通理论知识，同时要将理论与实践相结合，这样才能更好的成长！