人升开发日志#1 | 6/1 APP 图标设计
名字由来
初想过的项目名是“升级人生”、“游戏人生”之类，就想到了以”人“字为原型设计 APP 图标。
仅有一个”人“字未免显得有些单调，于是乎想到”升“字，那么就把”人“字的两笔换成向上升的形态？
APP 图标就由此诞生了。
最终稿是这个样子的：
接下来说说设计的全过程吧。
绘制格式选择以及工具
图标的绘制一般选用矢量图，原因：
- 图标一般需要多种规格，矢量图不失真方便调整
- 图标一般形状简单，矢量图绘制更为方便
具体用什么格式呢？
我们采用了 svg 格式。
第一个原因是，Android 支持将 SVG 转换成 VectorDrawable。今后开发可能会用到。
第二个原因是，
我们设计的图标期望是 Material Design 设计风格的。
而我所想到的就是拥有着朝向右下角阴影风格的图标，也就是最终稿那个样子。
而且没有检索到具体要怎么做到这种效果，也没有找到这种效果具体的名称。
只模糊地得知可以利用路径的并且差操作做到？
不过，我找到了一个可以简单生成这种风格的网页工具，该网站上传的文件必须是 SVG 格式。
那么，该用什么矢量图绘制工具呢？
首先想到的当然是 Adobe 的 illustrator；
其次，我想到之前做 Android APP时候用到的一款免费开源的矢量图绘制工具 Inkscape 。
最后决定用 Inkscape，方便快捷而且符合操作习惯。
开始绘制
首先，先造个“人”字。
首先想到用字符转换矢量图路径，但可能不太适用？很快就放弃了这个想法。
然后尝试了一下用钢笔工具（在 inkscape 里，被称作「绘制贝塞尔曲线和直线」工具）绘制，发现不会用emm。
最后采用了「绘制手绘线」工具，将平滑调整到最高，一次画一条边，勉勉强强画了一个「“人”形 with 两个箭头 」出来。
接着，使用「选择并变换工具」 以及 「通过节点编辑路径」工具进行微调，删除不需要的路径节点，调整曲率等等。
最后封闭路径填充任意一种颜色。
MD风格图标生成器，启动！
无限转圈…
MD风格图标生成器，关闭！
经过测试，发现刚画出来的稿子可以生成，微调之后的不能生成。
而且，此时是没有错误提示的？
按F12调出开发者工具，可以看到 js 文件执行过程中抛了个异常。
当时还随手画了一个路径拿去测试：
问题发现，开始清除
最后发现问题在于必须存在单条封闭路径。
而我们的矢量图虽然有封闭路径，但其是由多条路径组成的。
也就是说用「通过节点编辑路径」可以看到路径是断开的。
解决方法也很简单：选中所有路径然后点击菜单中的路径→合并即可。
配色
导入之后，可以进行颜色位置之类的调整。
打算采用蓝白配色，在一个MD配色网站挑选具体的RGB值，最后采用的是#29b6f6。
因为是亮蓝色，所以阴影强度也要适度调低。
位置的话，一开始想的是左边元素较多，所以稍微偏右。
然后发现实际效果似乎还不如直接居中，于是就采用了居中。
新增元素
做着做着的时候（其实是遇到坑的时候），又浮现了另外一个想法：
以阶梯做图标，还可以加上一个上阶梯的小人。
因为绘制小人不太容易，于是从现有的图标库中检索。
我们使用的是iconfont，检索关键字为楼梯。
最后也就是这个样子：
后来，我们打算将这个小人加到我们的图标上。
做法是，在网站生成的svg上进行再修改：
首先要把小人抠出来。
摸索出的一个做法是，使用「擦除现有路径」工具，擦出一条边界，然后使用菜单
菜单中的路径→分离，最后使用「通过节点编辑路径」工具，删掉擦除出现的一堆节点，使边缘平滑。将我们的 svg 进行分图层处理，将小人放到图案和背景圆之间。
使用滤镜，添加小人阴影。
最终效果：
当然，问题又来了：
小人和图案的阴影并不统一。
砍掉重做
为了解决这个问题，在上传到那个网站工具之前，就要把小人加到图标中。
再次抠图，将小人放到合适的位置。
然后全选，使用菜单中的路径→并集和分离工具，
再次上传到网站中。
此时，阴影已经统一了：
加一级层次
也曾纠结要不要去掉左边的箭头，因为去掉之后更像“人”字，而且左侧的箭头有种会阻碍小人上行的感觉？
纠结一番后决定，把小人所在的箭头提升一个层次，就不存在阻碍感了。
具体地来说就是加一层阴影。
因为我们一开始是没有分图层的，所以要单独把箭头抠出来。
我们采用的做法是
- 先复制整个图案（不含阴影）到新的一个图层里。
- 然后用「擦除现有路径」工具，用跟之前类似的方法把箭头和小人抠出来，并且加上一层阴影。
这就得到我们的最终稿了。
最后再依次导出各个规格即可。
人升开发日志#1 | 6/1 APP 图标设计