三、图标设计五步法
1、定义
图标是界面中的一部分，因此在设计图标时，我们首先要考虑图标的使用场景。根据图标的使用场景的关键因素，进行样式的推导。可以从以下四个方面进行分析。
（1）承载的作用
发现页按功能可划分为2部分：活动入口、积分商城。由于积分商城图片质量较差，因此这4个图标成为影响页面是否美观的重要因素。因此构图上以整齐统一为主。考虑去除破形设计，改为统一的圆形icon。
（2）重要性
此图标为当前页面最重要的ui元素，视觉层级较高。应通过设计，增加活动入口的吸引力，提高点击率。
（3）所处页面信息的复杂程度
发现页信息较为简单，仅有活动icon和积分商城2部分，因此在设计时，可以考虑加入一些细节和质感，使页面更加丰富。
（4）扩展性要求
由于后续会就该设计风格进行更多图标设计，需制定出图标规范，方便后续样式风格延伸。
2、提炼
经过上面的推导，我们对即将设计的图标风格大体上有了定位，可以开始针对单个图标进行设计。由于图标设计时间有限，因此要在最短的时间里，得到最优的效果。我使用的是发散关键词—提炼关键词—提炼特征的方法。
以邀好友为例：首先进行头脑风暴，邀好友的活动内容大致为邀请好友后，自己和好友均可获得超值大礼包。我列出的关键词有：递东西的手、爱心、紧握在一起的手、礼包、优惠券、红包、招财猫、温暖、拥抱。通过归纳和提炼，最终保留的关键词为递东西的手，和礼包。设计上体现温暖的感觉。
同理进行其他icon的关键词提炼。
接下来进行图片参考，经过素材收集，最终选定灵感参考图片。参考图片种类可以很丰富，可以选择风格近似的插画，也可找实物进行参考，唯一要注意的是，内容一定要符合提炼的关键词。
由于设计时间并不富裕，设计时可以尽量借鉴参考图片上的元素。还是以邀好友为例，参考图片我找到了礼包原型，和手的原型，接下来很容易将两者进行结合，绘制出我们所需要的icon内容。
3、风格
通过关键词提炼，我们已经对即将绘制的图标有了大体的概念，但在颜色和风格上还需要进一步的考究。为了快速出图，风格借鉴必不可少。在这里要着重强调借鉴和抄袭的界限。我们所做的是优秀作品风格的提取，并不表示照搬优秀设计作品。下面，我将从风格提取、造型提取和颜色提取三个方面进行借鉴的详细讲解。
图标的种类多种多样，经过上文对图标风格的推导，我们将图标风格大体定位：圆形面性图标，扁平风，色彩鲜艳。我们发现，好好住app的插画风格清新扁平年轻化，颜色上虽然和品牌色有出入，但用色方法上值得借鉴，因此打算从提炼这组插画的风格入手。
好好住app的插画
通过观察，不难总结出，这组icon 在风格上，采取扁平的风格，将主题内容抽象画，去除多余的透视、肌理、投影关系，配合轻微的渐变色，给人以清爽舒适的感觉。
造型上：用简单的几何图形和不规则的图形的进行组合，画面主体部分显示，并搭配适当留白，制造出画面的空间感。
颜色上：大面积使用同色系，营造和谐的氛围；邻近色作为点缀，使画面更为生动活泼（多为黄色）；利用消色（白色）表达明暗关系，起平衡作用。
在颜色设定上，并不建议大家直接吸取参考的颜色，而是通过规律的提炼，进行大胆尝试。在设计icon时，我利用同色系+消色+黄色点缀，进行了4种颜色尝试。
4、绘制
经过之前的关键词提炼，找出元素参考，再根据风格和颜色提炼，选定绘制的主色和点缀色，绘制过程就变得简单多了。
绘制图标时，要注意图层之间的遮挡关系。即使画面只露出了主体物的一部分，也要考虑主体物的形状和比例是否正确。如果对主体的结构把握不好，可以继续寻找类似的插画或照片进行参考，或对现实物体进行观察。另外需要确保画面中每一个邻近的色块，结构和颜色都清晰可辨，不要有含糊不清的结构，或糊在一起分不清边界的颜色，不然会显得画面很脏，同时也会降低整体图标的识别度。
5、调整
通过上面4个把单个图标设计好后，需要从整体上和细节上重新审查我们的图标，看看是否整体能够达到一致的视觉统一和视觉平衡。有时候自己设计的图标会因为过于熟悉而不易发现问题，这时候也可以请教下你的朋友，从旁观者的角度提出问题，往往会得到建设性的意见。越到后面的阶段越需要我们耐心和细心的调整，以达到更好的效果。
（1）以我们的图标为例，通过整体观察，发现在统一性和视觉平衡上存在一定的问题。第1个图标主体物右下部分进行隐藏，2、3图标左下部位隐藏，而4图标上面部分被隐藏，造成杂乱无序的视觉体验。经过位置调整和主体物的翻转，统一把主体物的左下角进行隐藏，增加了图标的统一性。
（2）进一步观察发现，3图标的转盘外圈和圆心部位给人以高起的感觉，原因是阴影给的过重，使其明显与其他图标不协调。通过调整阴影透明度和局部颜色，最终得到了与其他icon协调的视觉呈现。
（3）再进行细节观察，2图标主体物在比例上有一些不舒服的地方，于是把老虎机的结构进行了调整优化，使其看起来更舒服。
四、扩展设计说明
为了方便后续图标的延展，还要将所绘制的图标要点进行总结，概括出扩展设计说明，一来方便以后查看，二来其他同事进行同类icon绘制时，可以迅速把握图标特点，绘制出一致统一的图标。
1、表意上，突出主题，表意清晰；
2、颜色上，采用同色系为主色，配合黄色或邻近色进行点缀，利用同色系的消色配合，表达明暗关系的变化；
3、风格上，以扁平风为主，适量加入渐变色，营造年轻化的感官效果；
4、主体物统一进行左下角的隐藏，圆形的右上角适当留白，增加icon的空气感；
5、阴影上，考虑到视觉效果的统一，如需添加阴影，不易过深。
五、总结
以上四点可以帮助大家在绘制图标时捋清思路，摸清方法。扁平化风格特点较为突出，具有很高的通用性，大部分日常设计中都会用到。当然写这篇教程的初衷，并不只是希望大家学会这种设计风格，而是希望能在设计过程中进行思考和方法总结。设计产物是灵活的，但方法是可以融会贯通的。在今后的工作中，不管是什么风格，是图标还是插画，我们都可以参考以上的设计方法来进行设计。
第一次手写教程，有不清楚或者不完善的地方希望大家多包涵。
