這是我16年滴滴公交小程序開城的項目需求，現(xiàn)在過了蠻久也是時候翻出來沉淀一下了～

在版本迭代的項目中對于選擇城市頁我們想要體現(xiàn)熱點城市，也想做些趣味，便決定增加插圖的表達(dá)。在確定界面之后，要在1～2天內(nèi)完成8個城市的插圖(其中2個上線晚點)，時間還是蠻緊張的，畢竟要去畫之前腦子基本還是空的...所以我的核心策略是“流程可以快速復(fù)制并達(dá)意”…說到底就是要快。

@待填充插圖的界面

前期準(zhǔn)備工作消耗了一些時間，比如選擇城市地標(biāo)(確保識別性和差異性)、確定插畫風(fēng)格，這些過程我就淡淡略過了，善用搜索即可，就直接進(jìn)入 HOW TO DO 啦。

| HOW TO DO

0.用什么畫！

當(dāng)時我選擇用illustrator是因為ai畫起來又快又輕松，高興的畫完了發(fā)現(xiàn)忘記預(yù)設(shè)的尺寸也忘記了小圖圖的像素對齊oh no，雖然ai也能完成像素對齊，以防不測我謹(jǐn)慎的選擇挪到ps再來一遍，耽誤了不少時間?，F(xiàn)在看來用sketch直接畫可能更方便。

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

@喜歡ai的素描模式！城市地標(biāo)由左至右由上至下分別是：1.重慶-人民大禮堂／2.上海-東方明珠電視塔／3.北京-天壇／4.深圳-地王大廈／5.貴州-甲秀樓／6.南京-中山陵／7.成都-望江樓／8.天津-廣播電視塔

1.幾何搭建！

選擇單純幾何圖形搭建的原因：一方面是建筑本身的幾何形態(tài)特征明顯，提煉方便；另一方面就是幾何化的插圖更容易控制，確保風(fēng)格統(tǒng)一。

總之這樣就是好畫。

@這些形狀足夠用了

在這個階段需要關(guān)注形態(tài)的抽象化表達(dá)，到底要抽象到哪個層級，需要在畫第一個建筑的時候就要留心，在完成多個建筑之后還需整體協(xié)調(diào)。

不同城市地標(biāo)間的特色也想要凸顯以加強(qiáng)區(qū)別，比如南明河上的甲秀樓和林中的望江樓，所處的環(huán)境特征就可以利用起來。

@甲秀樓-望江樓-天壇

形態(tài)簡約、沒有光影、減少風(fēng)格化表達(dá)是我的核心思路，至于why我會在下面講。

2.色彩選擇！

插圖體現(xiàn)的是熱點城市，熱點城市需要與一般城市拉開層次。拉開層次的方式有很多，字大字小、關(guān)鍵位置等等手段都能滿足這個需要，我認(rèn)為拉開層次的關(guān)鍵詞是適可而止——圖文對比的形式本身已經(jīng)足以拉開熱點&一般城市間的層級，若過于強(qiáng)調(diào)插圖(飽和度和精細(xì)度)就有些喧賓奪主了。

畢竟插圖在這里的作用不是吸睛增加點擊率的，所以我傾向更簡單的表達(dá)，并選擇較高明度的性冷淡(maybe)顏色，確保插圖在界面的呈現(xiàn)更加自然。

@要天色不同還要天色合理是蠻煩的

建筑的顏色是僅次于形態(tài)的識別要素，所以建筑本身顏色的選擇還是要基于現(xiàn)實。對于用戶來說讀圖在很多時候就是讀色，色彩印象可以是不同城市區(qū)分的關(guān)鍵。所以我考慮以大面積的天空顏色作為區(qū)分城市的一個依據(jù)，加強(qiáng)不同城市色彩印象的區(qū)別。

3.畫完啦！

加上小云朵就畫完了！是不是超簡單！

@是的，超簡單

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

@闊以闊以

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

更多設(shè)計文章和有趣的設(shè)計師訪談在我的公眾號里面噢！歡迎小伙伴關(guān)注與我直接交流～

掃一掃或搜索公眾號 設(shè)計你好呀