初次做APP的同学，绘制图标是占界面问题比重较大的一块内容，虽然网络资源很多, 但仍旧做不好一套统一风格及意见意义性的界面功能图标，特此，来专门举证说一下这个问题, 如何绘制造风统一的APP界面图标？
在这里我们先从最紧张的功能图标做起，也便是tabbar一级功能图标，相对来说这里的图标不须要过多装饰，做出富有自己产品风格的图标就可以，须要把稳的是，一级功能的图标须要做两套，即 默认的 和 点击之后 的，常日点击之后的图标须要更突出一些，你可以用颜色来区分或者线条转为块状来区分。
首页 : 即APP界面中的第一个页面，相称于用户即将进入产品、理解产品、 从而利用产品，以是很多首页都会以屋子的外不雅观形式来表示，当然你也可以结合你的产品内容来变换首页图标的展示形式。
分类 :即APP界面中的第二个页面，仅次于首页，意为该产品有多项选择内容可供用户利用，查看分类，大概就会理解该产品紧张内容是什么了。
创造 : 这个页面多用于在紧张产品展示后，用户会有新的创造内容，比如揭橥个人动态，查看关于这个产品的话题精选之类。
我的：也可以名为“个人中央”，是所有APP都会具备的功能页面，由于用户进入新的产品都该当有自己的账户，那么就须要用户来管理自己的账户，以是常日会有人物头像来做为图标造型。
当我们把功能图标的寓意都理解清楚了，就可以绘制自己的初稿图标了，这里我们常日用AI软件的钢笔工具绘制线性图标，为了更方便精准的掌握图标大小，你可以建立网格线来作为绘制图标的基准，点击菜单“编辑／首选项/参考线和网格” 为网格线设置一下参数，然后对齐网格。网格线间隔1px，次分割线1， 这样设置过后，每个网格和间距都是1px。
在这里须要把稳一下视觉重量，以上的图标高度同等，线条粗细同等，但是在视觉效果上总以为大小不一，我们来举例解释下这个问题
我们可以看到上面的三个图形在软件里的物理尺寸宽和高都是相等的，但是我们不雅观察它们各自的负空间（赤色区域）并不一样大。从而我们得出结论：它们只是宽度和高度相同而面积却不同，那么我们就须要加大三角形和圆形的面积，来让视觉重量达到同等的效果。
三角形和圆形分别往外延伸，这个延伸多少得当呢，一样平常情形，以眼睛看到的视觉大小舒适自然就可以，当然如果你要精算一下各自的面积也可以。那么我们知道这个事理之后，就可以动手来做我们的图标了。
尺寸调度
这里解释下，一级功能图标的线条最好略微粗一些，一样平常我会用3px，最少也不要低于2px， 一级功能嘛，自当让它看起来有些分量的。
细节调度
在调度阶段，最好是复制出一份来做调度，你想换几种样式就复制几份来做相应调度，不要在初稿里直接做调度，那样如果你再次去换种样式调度的话，可能就比较麻烦了，良心忠言！
！
确认风格定稿
首页功能与我们一级功能图标操作同等，但是！
！
由于是在界面紧张的功能入口，我们须要花点心思来提升图标的设计感，以此丰富界面的展示效果。在这里我们还是以导图里面的功能为例进行操作
最初的图形绘制好之后，我们就开始来给它美化上妆了，比如给它调度构图然后换个不同背景，大家该当都会想到加背景肯定便是圆形或者圆角了，圆形都能理解，但是圆角会有不同的表现办法，不同的圆角形式，效果也会不一样。
以上除了羊角螺线繁芜一些之外，想必大家都能够理解了，当然繁芜的东西我已经为大家做好了，文章末了会长传一份源文件供大家参考学习利用。末了定好风格颜色后可以调度下细节做出自己满意的效果就大功告成了。
怎么样，是不是很Q 很弹 很好吃的样子啊:-), 哈哈，当然大家也可以根据自己的创意做出不同风格的主题icon, 在这里我们只是演示最通用的办法。
图标颜色这块也涉及到配色的知识，如果要详细来说的话可能又要写一篇了，哈哈，在这里我把自己配色图标的履历大略和大家分享下，我们还是以首页功能图标为例。
首先不管你的功能图标有几个，第一个图标始终因此主色来调和的，比如我的主色是蓝色，那么我的第一个图标便是一个弱渐变的蓝色为主，这样可以更贴合你的界面风格。 须要把稳的是：虽然我解释了第一个图标为界面主色，但这并不是固定的规则，并且也不须要一定按照你的主色色值来做，你只须要担保色相同等，饱和度和明度可以根据情形来调度。
当你把第一个图标的颜色调度完成之后，复制出一个，在复制出来的图标里，只需调度色相就可以，饱和度或明度可以进行微调，到这里你基本可以自己节制了。
从调色板里可以看出，我调度过的这四个图标明显的能看出色相的变革，但是明度和饱和度险些都是在一个区域的，并且大家会创造，我是按照一冷一暖的色调来搭配的。看到这里，你是否已经明白了图标的配色技巧呢。
定好单色调之后，弱渐变的调度就大略多了，只须要在渐变一头的滑块颜色调的更亮一些就ok了，渐变色最好是上面浅下面深，90度或者斜角度渐变都可以，加上投影让它更有立体感哦。关于图标内容的层次就不多说了，紧张是不同透明度的改变。嗯，希望本次分享能够帮到大家办理实际中的一些问题哦。
OK,那么本次分享就到这里，喜好本篇小教程的同学请点个赞吧!
本文章来源：http://www.xueuisheji.com/?p=6067