Icon 实用设计流程

在彻底弄清栅格式规范后，花了两天的时间重新把平台端的设计重新做了一遍。今天把icon/图标补上，正好回顾一下icon的设计规范。

图形化设计是所有设计师都会遇到的设计需求之一，初级设计师基本也都是从这个开始的。虽然需求很小但是对设计能力的考验了，作为初级设计师需要认真对待！

图标设计分为两种：一种作为功能配图使用（如上图），其二作为功能按钮（❎  、  ）。

一、功能配图使用

配图使用多为补充说明、点缀画面使用。即使可点击确无实际意义，辅助说明作用。就行商场卫生间，即使画了男女标示在门口处也会有明显的男厕、女厕文字标示。

这种配图的icon多出现在首页，作为功能入口。这就需要用色彩欢快、设计细节丰富的设计吸引用户的目光，增加其功能区的点击量。

二、功能按钮

第二种便是功能性的，点赞、分享、返回，多为线性。使用简洁明了的图形设计，在强调功能的前提下，不影响用户操作流程。

以上两种基本涵盖了icon设计的使用场景，以今天完成的图标设计为例，以下为设计流程反思。

设计流程

功能入口的icon设计，第一原则吸引用户。但是考虑到学习类应用并没有做的很拟物，一方面比较耗费精力另一方面需要留出时间完成其他工作（懒啊）。

所以，从开始打开figma到设计完成大概花了两个小时。

一，先从设计指南里找到启动图标的设计规范图。无规矩无方圆，标准图为我们的图形设计提供很大帮助。

二、https://www.iconfont.cn/，能够为我们提供很好的帮助，能够搜索到很多很多icon。

三、通过搜索，能够下载到不同设计风格（线面、纯线、纯面）的icon。

四、把下载的图标调整到统一尺寸，然后把规范图叠在最下面锁定。

五、这时候就需要进行统一性设计了，包括：大小、设计风格、颜色、透视、细节！

六、尽量在圆（规范图）内进行设计，即留出安全距离。这样做主要是为了以后替换图标不会产生大小失错。

说起来还是比较简单的，但是回顾我的设计生涯icon占据了很大的一部分。由开始很大很丑很慢到现在比较快能够在设计水平线上，也算不断的在成长。

之前看到过一枚初级做的一套icon，我以为三年多的设计没问题。但是的确凸显了很多的问题，我当时应该给他总结了问题，找到后发出来。

但无非就是统一性问题，这是很多设计师忽略的！

做之前，确保所找到的设计资源尽量一致。都是线性的突然找一个面的，改动这个面的就比较费时间！

另外，确保设计尺寸数据上的一致！的确需要眼睛看一下大小区别，但是那仅限于最后的微调呀！如果开始做图一个80px*80px，另一个60px*60px，这用得着肉眼看？

之后便是设计风格，在整合找到的参考时考虑，大小、设计风格、颜色、透视、细节！例如画线型的会有人选择断点，那同套其他icon也要做个断点保持设计的一致性吧！

尽量相信数据，不骗人呀！如上图所示，在完成设计后会拉辅助线看一下图标的实际尺寸是否过大/小。图标与图标之间实际尺寸差距过大，尽量调一下，别说等肉眼看到了再说，没准眼神不好呢？

最后，软件都会有mirror在手机上肉眼看一下，适当调整就可以了。

以上就是我做icon的流程/步骤，至于具体怎么画不解释了吧。联想！搜索！参考！

最后抛重点！统一很重要！时刻检查自己画的这一套东西是否是一套！！！