我是头一回主导移动APP的UI设计，与一伙志同道合的朋友反复讨论打磨，不知不觉，我们的产品就快1岁啦！接下来还会有个大版本更新，带来一项神奇的新功能和诸多细节优化，杭州的车主旁友们请多多捧场昂！
APP的UI博大精深，着手设计易停车之后，接触到了很多从前做网页不曾触及的知识与技巧，一言难尽，本篇我们大致回顾一下APP的门面——易停车icon背后的故事。
一代icon
首先介绍一下项目背景，易停车顾名思义，核心功能一定和停车有关，它是一款查看实时停车位数据的APP，这也是我们想传达给用户的核心信息。之前翻译的一篇LOGO设计终极指南里讲过，LOGO（icon同理）可以大致分为文字、具象图形、抽象图形3类。鉴于是新产品问世，在设计上更多需要考虑的是易于认知，个人觉得icon应该直观一些，所以方向直接锁定具象图形。即使与美观相冲突，也以准确传达信息为重。
参考了一些同类APP，还有主流的地图类APP，发现有3个意象被广泛使用：字母P、汽车、图钉。其中字母P对于车主来说可以和停车场划等号，这是考驾照必须掌握的基本交通标识。汽车就更直接了，这一切的一切，都与车有关。图钉是被无数地图应用普及过的概念，用来表示地图上的具体地点，时至今日，拿掉地图只留下图钉，用户一样能明白其中含义。对于这些深入人心的形象，善加利用是上上策，为不同而不同，为创新而创新，未必能起到好的效果（我会告诉你是我想不出来了么……）。
开始筛选意象，绘制手稿。我的手绘功底，那是有（cǎn）目（bù）共（rěn）睹（dǔ）的，所以这里就不放出来了，放出来你们也像看医生的签字一样。总之，因为汽车这个意象太宽泛，被果断抛弃了。对于停车这个概念，再也没有比字母P更合适的了，够精准，也够简单。毕竟，下面这样东西，我相信没有车主不认识：
另外，我们APP的主界面是地图，能够查询附近和目标地点周边的停车位情况，所以地图这层含义必须表达出来，但强度较弱。
加上边框，处理一下背景色，微调字体笔划，背后叠一层表示道路的交叉虚线。在没有大创新的情况下，进行微整形更需要精雕细琢。背景色的渐变、文字与边框的渐变、边框位置与粗细、虚线的透明度，都是来来回回反复调整才得出的结果。虽然比较挫，不过这就是我们的第一代icon了，用了半年多。至少可以保证看到它的人，第一反应就是停车场标识。
我甚至还专门设计了中文字体，当然……很不到位，再接再厉，字体设计是我需要恶补的一口大坑。
二代icon
随着产品功能迭代，不再只有1.0时期寥寥可数的几个界面了，APP的整体风格和视觉语言也逐渐体现出来。为保持所有界面协调一致，我设计了一套配色方案，用来确定整个产品的形象和基调。不过实际上，这项工作，最好是在一切开始之前进行。虽然它不属于icon的范畴，但对icon的设计有深远影响。
有了用色标准，APP的界面风格是统一了，但之前的icon却显得脱节了。设计一款同时符合iOS7和Android 4.0+视觉风格的icon势在必行。研究两者的官方设计指南，可以发现一些共同点和差异。首先，扁平化在当下是大势所趋，也是工具类APP极为受用的指导方向。不过iOS7与Android 4.0的扁平风格有所差异，iOS7的扁平可以简单归纳为：细字体、微妙渐变、无阴影无线条、模糊背景，而Android的扁平具备以下特点：纯色、无渐变、微妙阴影、广泛使用线条、卡片式设计。
首先，新icon在内容上需要做到简洁，去除了之前一些冗余元素，例如边框、虚线，引入图钉元素，地图的含义还是需要保留的，大致方向就确定了。然后从iOS7与Android的设计指南中吸取各种特征进行排列组合，对字体倒角、图钉形状和位置大小等进行反复调整，产生了4个有细微差异的版本：
-
第一个是由浅蓝到深蓝的渐
-
第二个是由海蓝到紫罗兰的渐
-
第三个由半透明色块相互叠加构成，想表达出类似水晶的质
-
第四个是向Google致敬的作品，底部有厚度和透视角度，图钉的颜色是纯色
由于某人对blingbling的东西情有独钟，加上我最近又很迷纪念碑谷这款游戏，很难控制向它致敬的冲动。又擅自补充了两款激进风格的，完全去掉了图钉，停车的含义反而更突出了，用色和布局都更加夸张。
最后在朋友中发起了一轮投票，两个激进方案由于出现较晚，没有参与投票过程。前4枚icon朋友们给出的票数竟然非常接近，分别是3、3、2、3，结合团队成员和我自己的选择，最终定稿。
No. 2 就你了！
小结
以前总认为icon设计是美术功底非常扎实的设计师才能做好的事情，尽管那对于设计确实有帮助，却不应成为阻碍自己尝试新领域的借口。这小小的四方天地中，怎样的设计能够出彩，考验的更多是设计师对于所要传达信息的理解与把握，还有反复雕琢的耐心。这一版赶着和APP一块儿上线，暂且告一段落，希望以后自己获得更多提升后，再回头来将它做得更细致，或者设计出更棒的替代方案。