可乐橙是头一回主导移动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个有细微差异的版本:

  1. 第一个是由浅蓝到深蓝的渐

  2. 第二个是由海蓝到紫罗兰的渐

  3. 第三个由半透明色块相互叠加构成,想表达出类似水晶的质

  4. 第四个是向Google致敬的作品,底部有厚度和透视角度,图钉的颜色是纯色

由于某人对blingbling的东西情有独钟,加上可乐橙最近又很迷纪念碑谷这款游戏,很难控制向它致敬的冲动。又擅自补充了两款激进风格的,完全去掉了图钉,停车的含义反而更突出了,用色和布局都更加夸张。

最后在朋友中发起了一轮投票,两个激进方案由于出现较晚,没有参与投票过程。前4枚icon朋友们给出的票数竟然非常接近,分别是3、3、2、3,结合团队成员和可乐橙自己的选择,最终定稿。

No. 2 就你了!

小结

以前总认为icon设计是美术功底非常扎实的设计师才能做好的事情,尽管那对于设计确实有帮助,却不应成为阻碍自己尝试新领域的借口。这小小的四方天地中,怎样的设计能够出彩,考验的更多是设计师对于所要传达信息的理解与把握,还有反复雕琢的耐心。这一版赶着和APP一块儿上线,暂且告一段落,希望以后自己获得更多提升后,再回头来将它做得更细致,或者设计出更棒的替代方案。