大廠案例 | 酷家樂人物插畫體系

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

PART 01 項(xiàng)目背景

插畫作為現(xiàn)代設(shè)計(jì)的一種重要的視覺傳達(dá)形式，因其直觀的形象性、真實(shí)的生活和美的感染力，在現(xiàn)代設(shè)計(jì)中占有獨(dú)特的地位，它能將復(fù)雜的文字信息轉(zhuǎn)化成清晰、明確、最直接的方式傳遞給用戶，線上插圖作為品牌視覺中的一部分，也是品牌與用戶建立聯(lián)系的重要軟連接，隨著業(yè)務(wù)需求的快速增長，我們需要針對插畫做系統(tǒng)的規(guī)劃整理來提高品牌形象傳達(dá)的深度和廣度，同時(shí)沉淀插畫組件，快速提升工作效率。

PART 02 設(shè)計(jì)思路

根據(jù)設(shè)計(jì)目標(biāo)，如何去打造一個(gè)合適自己的插畫風(fēng)格呢？基于對公司業(yè)務(wù)、用戶、品牌視覺原則的信息提取，我們將繁雜的信息概括聚焦，同時(shí)我們希望插畫體系能將細(xì)碎重復(fù)的工作變得有序、規(guī)范化。結(jié)合以上考慮，我們總結(jié)出了設(shè)計(jì)方向的 3 個(gè)關(guān)鍵詞。

插畫風(fēng)格選取

我們收集了大量現(xiàn)有的成熟插畫案例，歸納整理了 3 種應(yīng)用非常廣泛的插畫方向：扁平插畫、手繪插畫、立體插畫。為了選擇一個(gè)合理的插畫方向，我們從繪制難度、拓展性、畫面細(xì)膩度、易用性 4 個(gè)角度做了利弊權(quán)衡。最終選擇了簡約的扁平插畫來進(jìn)行視覺落地。此類造型風(fēng)格，外輪廓概括性很高，具有明顯的幾何特征，刪減了大量細(xì)節(jié)，在繪制和多人協(xié)作上占很大優(yōu)勢，同時(shí)具有設(shè)計(jì)裝飾感，能形成較大張力的畫面效果。

用戶分析

根據(jù)《酷家樂用戶畫像報(bào)告》顯示，酷家樂平臺擁有 7 成的男性用戶， 90 后為主要人群，整體設(shè)計(jì)方向需要符合主流人群審美。插畫在不同場景中需要傳遞不同信息的和情緒，通過用戶分析，我們能更清晰需要設(shè)計(jì)的內(nèi)容和方向。

PART 03 設(shè)計(jì)方案

過于強(qiáng)烈的風(fēng)格容易造成極度喜愛或者極度反感的兩極化現(xiàn)象出現(xiàn)，要保證大多數(shù)人的接受，我們避免過度抽象、夸張的藝術(shù)設(shè)計(jì)風(fēng)格。同時(shí)考慮男性用戶居多，設(shè)計(jì)風(fēng)格遵循中性化的原則來設(shè)計(jì)。

角色設(shè)定

在風(fēng)格探索的過程中，為了滿足不同業(yè)務(wù)場景情況下的應(yīng)用，根據(jù)酷家樂用戶分析，我們圍繞5種常見的職業(yè)進(jìn)行人物角色設(shè)計(jì)，結(jié)合其職業(yè)特點(diǎn)賦予角色不同的視覺形象。

我們對顏色、線條、圖案的應(yīng)用方式進(jìn)行了規(guī)范，根據(jù)前景色設(shè)定了相對應(yīng)的背景色，豐富場景畫面。

有了基本的角色設(shè)計(jì)和規(guī)范，我們將人物角色進(jìn)行拆解，拓展了不同的人物角度、人物表情，并結(jié)合人物基礎(chǔ)骨骼延伸出各種人物動(dòng)態(tài)，方便不同場景中的應(yīng)用。

場景元素

場景元素是常見工作場景中的裝飾元素，本著凸出前景元素，背景裝飾做為輔助點(diǎn)綴的設(shè)計(jì)原則，場景元素可與人物角色靈活搭配，創(chuàng)造不同故事畫面。

PART 04 設(shè)計(jì)應(yīng)用

為了滿足更豐富的視覺表現(xiàn)，我們也嘗試了與 3D 元素相結(jié)合使用的方式，未來，我們也會將資產(chǎn)三維化，建造更完整的插畫體系。

---

超值課程推薦

華為用戶體驗(yàn)設(shè)計(jì)的體系搭建方法

超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗(yàn)的？

揭秘滴滴、蔚來等大廠的用戶體驗(yàn)設(shè)計(jì)策略

原創(chuàng)好文推薦

2021 年用戶體驗(yàn)設(shè)計(jì)趨勢分析

想要引導(dǎo)用戶行為轉(zhuǎn)化，設(shè)計(jì)師必須深刻理解這 4 個(gè)認(rèn)知心理學(xué)理論

讓設(shè)計(jì)圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設(shè)計(jì)專家這么說

如何系統(tǒng)的增強(qiáng)用戶粘性，提升產(chǎn)品轉(zhuǎn)化率？你要懂得“行為設(shè)計(jì)學(xué)”

設(shè)計(jì)新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實(shí)現(xiàn)效果的詳細(xì)教程

如何將設(shè)計(jì)系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個(gè)需要注意的關(guān)鍵點(diǎn)

---

歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。