这是我16年滴滴公交小程序开城的项目需求，现在过了蛮久也是时候翻出来沉淀一下了～

在版本迭代的项目中对于选择城市页我们想要体现热点城市，也想做些趣味，便决定增加插图的表达。在确定界面之后，要在1～2天内完成8个城市的插图(其中2个上线晚点)，时间还是蛮紧张的，毕竟要去画之前脑子基本还是空的...所以我的核心策略是"流程可以快速复制并达意"…说到底就是要快。

utobao编注：更多AI教程学习进入优图宝AI实例教程栏目: http://www.utobao.com/news/61.html

@待填充插图的界面

前期准备工作消耗了一些时间，比如选择城市地标(确保识别性和差异性)、确定插画风格，这些过程我就淡淡略过了，善用搜索即可，就直接进入 HOW TO DO 啦。

| HOW TO DO

0.用什么画！

当时我选择用illustrator是因为ai画起来又快又轻松，高兴的画完了发现忘记预设的尺寸也忘记了小图图的像素对齐oh no，虽然ai也能完成像素对齐，以防不测我谨慎的选择挪到ps再来一遍，耽误了不少时间。现在看来用sketch直接画可能更方便。

总之工具什么的并不重要啦，重要的是要开心:blush:

@喜欢ai的素描模式！城市地标由左至右由上至下分别是：1.重庆-人民大礼堂／2.上海-东方明珠电视塔／3.北京-天坛／4.深圳-地王大厦／5.贵州-甲秀楼／6.南京-中山陵／7.成都-望江楼／8.天津-广播电视塔

1.几何搭建！

选择单纯几何图形搭建的原因：一方面是建筑本身的几何形态特征明显，提炼方便；另一方面就是几何化的插图更容易控制，确保风格统一。

总之这样就是好画。

@这些形状足够用了

在这个阶段需要关注形态的抽象化表达，到底要抽象到哪个层级，需要在画第一个建筑的时候就要留心，在完成多个建筑之后还需整体协调。

不同城市地标间的特色也想要凸显以加强区别，比如南明河上的甲秀楼和林中的望江楼，所处的环境特征就可以利用起来。

@甲秀楼-望江楼-天坛

形态简约、没有光影、减少风格化表达是我的核心思路，至于why我会在下面讲。

2.色彩选择！

插图体现的是热点城市，热点城市需要与一般城市拉开层次。拉开层次的方式有很多，字大字小、关键位置等等手段都能满足这个需要，我认为拉开层次的关键词是适可而止——图文对比的形式本身已经足以拉开热点&一般城市间的层级，若过于强调插图(饱和度和精细度)就有些喧宾夺主了。

毕竟插图在这里的作用不是吸睛增加点击率的，所以我倾向更简单的表达，并选择较高明度的性冷淡(maybe)颜色，确保插图在界面的呈现更加自然。

@要天色不同还要天色合理是蛮烦的

建筑的颜色是仅次于形态的识别要素，所以建筑本身颜色的选择还是要基于现实。对于用户来说读图在很多时候就是读色，色彩印象可以是不同城市区分的关键。所以我考虑以大面积的天空颜色作为区分城市的一个依据，加强不同城市色彩印象的区别。

3.画完啦！

加上小云朵就画完了！是不是超简单！

@是的，超简单

放到界面上看看～喔唷可以可以～

@阔以阔以

...............................................................................................................................

更多设计文章和有趣的设计师访谈在我的公众号里面噢！欢迎小伙伴关注与我直接交流～

扫一扫或搜索公众号 设计你好呀

utobao编注：更多AI教程学习进入优图宝AI实例教程栏目: http://www.utobao.com/news/61.html