10分鐘搞定扁平風(fēng)建筑小插畫兒
讀這個文章也要不了10分鐘噢
這是我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è)計你好呀







































