插畫組件庫設(shè)計(jì)指南
在互聯(lián)網(wǎng)企業(yè)日常的項(xiàng)目需求中,插畫經(jīng)常會(huì)大量運(yùn)用在各類產(chǎn)品設(shè)計(jì)、產(chǎn)品運(yùn)營、產(chǎn)品宣傳中。然而傳統(tǒng)的插畫方式經(jīng)常會(huì)遇到風(fēng)格不一致、產(chǎn)出效率低、品牌感弱這3個(gè)問題,如何解決呢?本文作者對(duì)此進(jìn)行了分析,一起來看一下吧。
在互聯(lián)網(wǎng)企業(yè)日常的項(xiàng)目需求中,插畫經(jīng)常會(huì)大量地運(yùn)用在各類產(chǎn)品設(shè)計(jì)、產(chǎn)品運(yùn)營、產(chǎn)品宣傳中,但是傳統(tǒng)的插畫方式主要存在以下幾個(gè)問題:
- 不同崗位不同的設(shè)計(jì)師產(chǎn)出的插畫風(fēng)格不一致,質(zhì)量參差不齊
- 每次的設(shè)計(jì)插畫需求都是從頭開始繪制,插畫的產(chǎn)出效率太低
- 插畫的風(fēng)格不一致很難形成一致的品牌印象,品牌感太弱
于是我們可以看到一些互聯(lián)網(wǎng)團(tuán)隊(duì)已經(jīng)走在了前面,通過構(gòu)建系統(tǒng)的插畫組件庫來解決以上3個(gè)問題,對(duì)于設(shè)計(jì)師來說,插畫組件庫雖然已經(jīng)不是什么特別新鮮的話題了,但是實(shí)際的執(zhí)行過程中大部分設(shè)計(jì)師可能會(huì)遇到很多難題。那么,今天的飛凡指南就通過3個(gè)方面來深度解讀下插畫組件庫的這個(gè)設(shè)計(jì)話題。
01 插畫組件庫的價(jià)值
1. 設(shè)計(jì)提效
當(dāng)我們通過傳統(tǒng)的流程去設(shè)計(jì)一個(gè)運(yùn)營頁面的時(shí)候,往往需要2~3天的時(shí)間,但是有了插畫組件庫,設(shè)計(jì)產(chǎn)出的效率基本上可以提升1倍以上,而節(jié)省出來的時(shí)間,設(shè)計(jì)師可以去考慮更有價(jià)值的事情。
2. 統(tǒng)一風(fēng)格
整套的插畫組件庫,在構(gòu)建的時(shí)候,對(duì)風(fēng)格、色彩、人物、元素、背景都有著統(tǒng)一的規(guī)范,在面對(duì)不同設(shè)計(jì)能力設(shè)計(jì)師的時(shí)候,都能夠較大程度上保證風(fēng)格統(tǒng)一和插畫的產(chǎn)出質(zhì)量。
3. 提升品牌感
插畫組件庫再構(gòu)建之初就要考慮和產(chǎn)品調(diào)性、品牌調(diào)性的一致性,這樣在傳播的過程中才更能在用戶心中形成一致的品牌形象,提升品牌感。
02 插畫組件庫需要考慮4個(gè)方面的問題
當(dāng)我們?cè)跇?gòu)建插畫庫的時(shí)候,以下4個(gè)問題是我們需要重點(diǎn)考慮的:
- 如何凸顯產(chǎn)品屬性;
- 如何體現(xiàn)品牌調(diào)性;
- 如何滿足用戶場景;
- 如何打造差異化的風(fēng)格
1)凸顯產(chǎn)品屬性
插畫的最終目的是輔助文字去傳遞產(chǎn)品信息,我們需要直觀的向我們的用戶告訴我們是干什么的,而避免用戶做過多的思考。
2)如何體現(xiàn)品牌調(diào)性
和消費(fèi)品一樣,品牌是用戶考慮的一個(gè)非常重要的因素,插畫是傳遞信息和塑造品牌調(diào)性一個(gè)非常重要的渠道,所以插畫庫應(yīng)該考慮如何能夠?qū)ξ覀兊钠放普{(diào)性或產(chǎn)品調(diào)性進(jìn)行補(bǔ)充。
3)如何滿足用戶場景
在考慮插畫的元素構(gòu)成的時(shí)候,我們也需要把用戶考慮進(jìn)來,他們使用產(chǎn)品的時(shí)候是哪些場景,再基于用戶的場景去設(shè)計(jì)我們的插畫組件元素,這樣在實(shí)際應(yīng)用插畫庫的時(shí)候才能夠盡可能涵蓋傳播的場景。
4)如何打造差異化的風(fēng)格
我們可以看到各大互聯(lián)網(wǎng)產(chǎn)品的插畫風(fēng)格都基本上非常雷同,很難有明顯的插畫風(fēng)格特征,這樣的結(jié)果就是用戶很難記住你,所以對(duì)于插畫差異性的考慮也是一個(gè)很重要的點(diǎn)。
03 插畫組件庫構(gòu)建的3個(gè)步驟
對(duì)于設(shè)計(jì)師來說,最重要的還是如何將插畫組件庫落地了,總結(jié)下來可以分為3個(gè)步驟:插畫風(fēng)格推導(dǎo)、插畫組件庫搭建、插畫組件庫應(yīng)用
1. 插畫風(fēng)格推導(dǎo)
插畫風(fēng)格我們主要可以從3個(gè)方面去推導(dǎo):品牌、用戶、產(chǎn)品。
1)品牌
我們需要了解的是品牌的調(diào)性、色彩、輔助圖形、logo特征、品牌資產(chǎn)……這些都是我們構(gòu)建品牌插畫庫的基礎(chǔ)參照。比如下面這張圖是梳理的出來的fashion data的品牌相關(guān)的元素。
2)用戶&產(chǎn)品
了解我們的用戶和產(chǎn)品,我們可以用以下這個(gè)電梯宣言的方法去梳理。
關(guān)于用戶:為了滿足【目標(biāo)用戶】;他們的【什么痛點(diǎn)或需求】。
關(guān)于產(chǎn)品:我們的【產(chǎn)品名稱】;是一個(gè)【怎么樣的產(chǎn)品類型】;它可以【關(guān)鍵優(yōu)點(diǎn),通過什么樣的功能,為用戶帶來什么樣的價(jià)值】;而不像【市場上某競品及其特點(diǎn)】;我們的產(chǎn)品是一個(gè)【主要獨(dú)特價(jià)值點(diǎn)】。
比如,下面這張圖是對(duì)fashion data的用戶和產(chǎn)品進(jìn)行的梳理,去快速的了解用戶的需求痛點(diǎn)、產(chǎn)品定位、產(chǎn)品價(jià)值……
了解完品牌、產(chǎn)品、用戶之后就要推導(dǎo)出插畫庫的風(fēng)格方向了。
在討論fashion data的插畫風(fēng)格選定的時(shí)候,其他幾組插畫在風(fēng)格上差異性和個(gè)性表達(dá)上雖然會(huì)比較強(qiáng),但是和B端產(chǎn)品的定位差異比較大,最后還是選定了普通的矢量風(fēng)格插畫風(fēng)格,它能比較好地向用戶傳遞出B端產(chǎn)品的高效、專業(yè)、嚴(yán)謹(jǐn)?shù)钠放菩蜗螅笃诓町惢饕峭ㄟ^融入品牌元素和塑造插畫角色這2個(gè)手段來體現(xiàn)。
2. 插畫組件庫搭建
插畫組件庫的搭建,可復(fù)用性是我們考慮的重點(diǎn),要達(dá)到這個(gè)目標(biāo),我們?cè)贅?gòu)建分子的時(shí)候就應(yīng)該盡可能的把插畫拆分成比較細(xì)的分子,比如頭部我們可以拆分成不同角度的基礎(chǔ)頭型、發(fā)型、表情……
1)角色組件
①定義角色基礎(chǔ)的形體比例、肢體細(xì)節(jié)
形體比例、肢體細(xì)節(jié)基本上就能夠確定我們的角色是何種特點(diǎn),比如,我們常見的互聯(lián)網(wǎng)扁平插畫風(fēng)格就和我們的正常人物比例、肢體細(xì)節(jié)比較接近一些,但是一些歐美的插畫風(fēng)格經(jīng)常會(huì)用很夸張的比例造型來塑造個(gè)性的角色,比如頭特別小,肢體特別大。
還有不同人物的比例也會(huì)有所不一樣,比如男性女性的黃金比例是9a(九頭身),小孩的比例大大約是4a,但這不是固定不變的,還要看具體的插畫風(fēng)格。
②為角色搭建靈活的骨骼系統(tǒng)
構(gòu)建組件庫,我們自然是希望我們的插畫能夠和人的骨骼一樣,能夠靈活的做出各種動(dòng)作,這就要借助于靈活的骨骼系統(tǒng)了,通常情況下我們可以將我們的人體骨骼拆分成以下的組織。
在組織的連接處,我們盡量都能夠采用正圓形,這樣在變換動(dòng)作的時(shí)候才能夠更好的銜接上,大家可以看看傳統(tǒng)的皮影人偶也是采用的這種連接方式,才能在舞臺(tái)上作出靈活的動(dòng)作。
③建立不同角度下的表情、動(dòng)作、服飾……組件
人物的應(yīng)用場景不僅僅只有正面的角度,還有其他的角度,我們一般只需要設(shè)計(jì)正面、半側(cè)、正側(cè)這3個(gè)角度即可,在這3個(gè)角度我們需要構(gòu)建不同的表情、動(dòng)作、服飾……盡可能滿足角色在不同場景的使用需求。
2)通用組件
通用組件我們一般基于用戶場景來制定。比如下面的這個(gè)案例,fashion data是一個(gè)高效的跨境電商數(shù)據(jù)管理平臺(tái),主要針對(duì)店鋪運(yùn)營人員,為他們提供快速管理店鋪商品、直觀查看店鋪經(jīng)營數(shù)據(jù)等服務(wù),所以用戶的場景主要辦公場景和業(yè)務(wù)場景,辦公場景的元素有比如:書桌、電腦、辦公用品……業(yè)務(wù)場景的元素有,比如:倉儲(chǔ)、物流、數(shù)據(jù)、商品……最后我們?cè)倩谶@些元素去制定通用的組件。
3)背景組件
背景組件一共可以分為2種類型,場景背景和紋理背景。
場景背景一般是基于某個(gè)特定的場景來制定的,用來交代畫面所處的環(huán)境,比如室內(nèi)背景、白天、黑夜、晴天……
紋理背景一般是用來裝飾和豐富背景,比如,下面的插畫,加了背景紋理插畫明顯層次和畫面更加豐富了。
3. 插畫組件庫應(yīng)用
搭建完組件庫之后,就可以在產(chǎn)品運(yùn)營、線下物料、產(chǎn)品界面使用它們來提升設(shè)計(jì)的效率了。當(dāng)然隨著業(yè)務(wù)不斷的變化和用戶場景的變化,我們的插畫組件庫也應(yīng)該及時(shí)的擴(kuò)容和優(yōu)化。
04 寫在最后
需要提醒的是,插畫組件庫的目標(biāo)是幫助那些重復(fù)、且設(shè)計(jì)質(zhì)量要求不高的設(shè)計(jì)需求提效,而設(shè)計(jì)難度較高的設(shè)計(jì)需求還是需要設(shè)計(jì)師來處理,而這才是設(shè)計(jì)師能夠真正體現(xiàn)價(jià)值的地方,同時(shí),把時(shí)間節(jié)省出來,設(shè)計(jì)師才有精力去思考更多更有價(jià)值的事情。
本文由 @飛凡實(shí)驗(yàn)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!