品牌形象通常由不同的視覺元素組成，例如徽標(biāo)、調(diào)色板和特定字體。除此之外，插圖是視覺傳達(dá)的另一種強(qiáng)大手段sketch up logo，UI 界面中越來越需要這種手段。插畫系統(tǒng)是樹立企業(yè)視覺品牌的有效途徑。本文作者分享了一個(gè)強(qiáng)大的插畫系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)過程sketch up logo，供大家參考和學(xué)習(xí)。

01 邊境

插畫在當(dāng)今的視覺設(shè)計(jì)中變得越來越重要，但是隨手一畫就能成為成功的插畫嗎？顯然不是?；诟鞣N例證，以吸引流量為最終目標(biāo)，從產(chǎn)生到實(shí)施有一套系統(tǒng)的方法可遵循。今天小編就在這里給大家揭曉其中的秘密。首先我想談?wù)凢ACE TEAM團(tuán)隊(duì)。出生。

02的誕生

故事是這樣開始的。我心里一直有一個(gè)想法，那就是設(shè)計(jì)輸出能否像故事集一樣有一個(gè)主角，通過主角來講述房地產(chǎn)業(yè)務(wù)線的故事。直到召開周例會(huì)時(shí)，一位朋友才提出了類似的想法。她說，如果我們有一個(gè)固定的房東或租客的形象，設(shè)計(jì)起來就會(huì)非常方便，而且會(huì)很統(tǒng)一。這讓我感覺這個(gè)方向似乎很有潛力。用現(xiàn)在的管理方法（OKR）來說這個(gè)，就是我把這個(gè)想法列為我的O之一。

之后，我閱讀了大量相關(guān)資料，發(fā)現(xiàn)了品牌插畫的概念——它是建立公司視覺品牌的有效方式。良好的品牌形象不僅能表達(dá)公司信息，還能與用戶建立聯(lián)系。它最大的優(yōu)勢在于可以將敘事元素引入視覺內(nèi)容中，甚至可以完全脫離現(xiàn)實(shí)，讓用戶看到品牌構(gòu)建的理想世界。我覺得這對業(yè)務(wù)線來說是一件非常有意義、值得做的事情。

隨著研究的繼續(xù)，我發(fā)現(xiàn)整合插畫也能形成高效的生產(chǎn)體系??；它的原理并不復(fù)雜簡單，就像每個(gè)設(shè)計(jì)師積累的素材庫一樣。同一張圖片可以實(shí)現(xiàn)元素的融合。共享可以最大限度地提高生產(chǎn)效率，避免設(shè)計(jì)資源的浪費(fèi)；另外，我有一個(gè)很深刻的體會(huì)，當(dāng)遇到緊急需求的時(shí)候，有了素材庫的存在，我們可以更加從容的面對，不僅不用加班趕生產(chǎn)，而且設(shè)計(jì)質(zhì)量也不會(huì)因?yàn)椴牧蠋斓拇嬖诙档?。時(shí)間壓縮。

說了這么多好處，接下來就是要實(shí)現(xiàn)這個(gè)想法了。我決定從兩個(gè)方面入手去探索，來建立整個(gè)插畫體系。

第一個(gè)是建立并形成品牌插畫。通俗點(diǎn)就是首先為業(yè)務(wù)線打造固定的人物形象，最終達(dá)到品牌推廣的目的。

二是集成并實(shí)現(xiàn)系統(tǒng)的高效，即將組件分門別類，最終實(shí)現(xiàn)組件可以復(fù)用的過程；同時(shí)，各個(gè)業(yè)務(wù)線的想法又不謀而合，于是它們就這樣誕生了。接下來我將從構(gòu)建和集成兩個(gè)方面來介紹我們是如何實(shí)現(xiàn)插畫系統(tǒng)的。

03 打造、形象品牌插畫

第一步是尋找靈感。其實(shí)這一步專業(yè)用語可以稱為添加情緒板。我們收集了大量現(xiàn)有的成熟插畫案例，參考了他們做品牌的經(jīng)驗(yàn)，也思考了自己的道路。其中，Uber He等人。更加深情，他們的重點(diǎn)是強(qiáng)調(diào)每個(gè)人的差異。因?yàn)椴煌N族的問題，我希望插畫能夠代表不同膚色的人；而后兩者則更偏向于商業(yè)，在設(shè)計(jì)手法上也會(huì)更加成熟。干凈、平坦。

事實(shí)上，在創(chuàng)建了情緒板之后，我們前期就定制了設(shè)計(jì)方案。我們將整個(gè)插畫系統(tǒng)分為三個(gè)階段進(jìn)行制作，分別是：

確定形象：如房東、租客、代理人、車商等形象，創(chuàng)建人物三視圖；形象應(yīng)用：我們希望能夠從UI的使用上進(jìn)行減法，用通用的組件和背景組成小場景來體現(xiàn)品牌感；操作通過使用加法，只能保留圖像特征，更換衣服，拓展更多畫風(fēng)，提升品質(zhì)感；平面變?yōu)槿S：應(yīng)用動(dòng)效和3D建模的插畫組件，實(shí)現(xiàn)2D轉(zhuǎn)3D的效果。

有了初步的研究和計(jì)劃，我決定問大家一個(gè)問題：“你們有嗎？”其實(shí)就是給大家一個(gè)命題：你心目中的58個(gè)人物形象應(yīng)該是什么樣子。原因很簡單，就是一開始不想限制大家的思維，希望更多新奇的想法相互碰撞，創(chuàng)造出更多有趣的設(shè)計(jì)。

于是就有了成立以來的第一次選秀比賽。大家各抒己見，每個(gè)人都在自己的腦海中描述著58個(gè)角色的模樣。這里總結(jié)一下，其實(shí)可以分為三類，包括寫實(shí)人物風(fēng)格，還有其他。這種圓溜溜的風(fēng)格，最后是比較抽象夸張的風(fēng)格。

其實(shí)，除了剛才提到的三類之外，還有一類可以稱為棒棒的延伸形象。不過我們第一輪就拒絕了這個(gè)想法，因?yàn)榘舭舻男蜗筇ㄍɑ?，人物形象也卡通化了。設(shè)計(jì)會(huì)不夠穩(wěn)定，也不符合企業(yè)形象。因此，如何達(dá)成共識，找到適合58的人物形象，成為我們當(dāng)下急需解決的問題。

最終我們決定從兩個(gè)方面來考慮：

從58的產(chǎn)品屬性出發(fā)，它是一個(gè)服務(wù)大眾的生活信息平臺(tái)，所以我們的設(shè)計(jì)一定要迎合大眾的口味。作為一個(gè)插畫系統(tǒng)，還必須具備繪圖方便、易于迭代的特點(diǎn)。

所以我們總結(jié)了圖像制作的四個(gè)關(guān)鍵詞：

1）平均風(fēng)格

過于個(gè)性化的風(fēng)格會(huì)形成有爭議的設(shè)計(jì)，有些用戶非常喜歡，有些用戶則不喜歡。因此，我們需要保證大多數(shù)人的接受度。人物形象的設(shè)計(jì)需要保持平均風(fēng)格，避免過度抽象和抽象。夸大。

2）溫和、友善

我們想要給用戶一種安全感和舒適感，所以我們必須避免過于有沖擊力的圖像和奇怪的人物形狀。圓潤的造型會(huì)給用戶帶來更多的親切感。

3）可擴(kuò)展

我們設(shè)計(jì)的插畫需要形成一個(gè)統(tǒng)一的系統(tǒng)，而不是單一獨(dú)立場景的制作。因此，它必須能夠滿足大多數(shù)設(shè)計(jì)者易于使用和模仿（有規(guī)則可循）的特點(diǎn)。

4) 輕量級

這里主要是希望表現(xiàn)手法能夠采用網(wǎng)絡(luò)主流的平面繪畫方式，線面結(jié)合，畫面精簡概括。

基于以上四個(gè)原則，我們之前擬定的圓潤身軀、手腳微縮的人物形象更符合我們的預(yù)期，我們將其定為重點(diǎn)開發(fā)對象。我們有可開發(fā)的對象，但面對58眾多的業(yè)務(wù)線，我們該如何創(chuàng)建呢？

我們最初的想法有兩個(gè)：

一是各業(yè)務(wù)線獨(dú)立生產(chǎn)。這樣做的好處是，每個(gè)業(yè)務(wù)線的規(guī)模較小，更容易管理，但樣式會(huì)很多；

二是統(tǒng)一生產(chǎn)，形成大家庭。這樣做的好處在于品牌的統(tǒng)一性。俗話說，一家人齊整，但是會(huì)比獨(dú)立制作更具挑戰(zhàn)性，所以大家經(jīng)過一番討論后，決定選擇后者，更有家庭的語言。

融入一個(gè)大家庭，如何設(shè)定人物其實(shí)是面臨的第一個(gè)問題。舉個(gè)例子，比如一個(gè)年輕人是二手車的買家，但可能是房地產(chǎn)的賣家。買家和賣家必須表現(xiàn)出不同的感受，所以在這種情況下我們必須單獨(dú)設(shè)置很多角色。 58這么多業(yè)務(wù)線，工作量太大，不現(xiàn)實(shí)，所以角色設(shè)置不一定可行。所以我們想知道是否可以找到一個(gè)主線程來連接它們。最后，我們發(fā)現(xiàn)找到它們之間的共同點(diǎn)就能解決所有問題。

下一張圖片對我們有很大幫助。這是互聯(lián)網(wǎng)人群的年齡分布圖。每個(gè)人在生活中都會(huì)扮演這樣不同的角色，但他在自己這個(gè)年紀(jì)所表現(xiàn)出的狀態(tài)和精神面貌卻是居多。人們的年齡都比較接近，所以這就是我們在所有角色中尋找的東西。

大家都同意這個(gè)觀點(diǎn)。我們決定制作5個(gè)年齡段的角色骨架，覆蓋整個(gè)58個(gè)用戶群體。這樣，無論哪個(gè)業(yè)務(wù)線需要哪個(gè)年齡段的角色，都可以隨時(shí)使用。非常方便，可以根據(jù)不同的業(yè)務(wù)屬性來使用。 ，用相應(yīng)的服裝替換它們可以體現(xiàn)其角色所扮演的角色。

找到共同點(diǎn)之后，我們就可以制作角色骨架了，但是在制作之前，我們要確定的一件事是，我們剛才列為重點(diǎn)開發(fā)目標(biāo)的角色集是否應(yīng)該放在各個(gè)業(yè)務(wù)線中。是否適用，需要再次驗(yàn)證。

于是我們把這種身體圓潤、手腳略小的橄欖球式人物應(yīng)用到各種業(yè)務(wù)線中，發(fā)現(xiàn)是可行的。但問題是，大家都不確定形狀。有些圖像被夸大了，有些圖像被夸大了。有些比較澀，有些甚至顯得油膩，但我們認(rèn)為這可以通過骨骼系統(tǒng)來避免。

所以我們決定以這種類型的角色為參考來構(gòu)建骨架。我們采用的方法是先確定各個(gè)年齡段的字風(fēng)，然后根據(jù)字風(fēng)框架推導(dǎo)出字骨架。我們稱之為比喻演繹。抽象的制作方法。

我們首先為每個(gè)年齡段選出一個(gè)代表，然后針對這個(gè)年齡段制定一個(gè)人物形象風(fēng)格，從人的外貌、體型、身高等入手。比如人隨著年齡的增長，體重會(huì)增加。表達(dá)代際身高矮化的客觀規(guī)律，目的是塑造各年齡段最具代表性的人物形象。其實(shí)第一稿就體現(xiàn)了很多制作上的問題，比如女性臀部較大，腰部較細(xì)，如果用同樣的制作方法，手臂會(huì)顯得太粗，我們覺得40歲的男人應(yīng)該更短一些。

所以我們在初稿的基礎(chǔ)上進(jìn)行了修改，將角色進(jìn)行了擴(kuò)展，每個(gè)年齡段包括了兩個(gè)男性和女性角色。然而這個(gè)版本并沒有達(dá)到我們想要的最終效果。首先，戴眼鏡的人很多。 ，我們認(rèn)為應(yīng)該適當(dāng)減少近視人群的數(shù)量，讓畫面更加符合國情；

另外，人物的審美還有待提高。存在角色表情過于嚴(yán)肅、阿姨有點(diǎn)返祖等一系列問題。所以我們更新了另一個(gè)版本。這個(gè)版本是我們現(xiàn)在仍在使用的基礎(chǔ)。它是內(nèi)部為了更好的命名而制作的。角色們還給每個(gè)人起了相應(yīng)的名字。也許將來他們會(huì)被賦予個(gè)性，成為更加生動(dòng)的角色。

以準(zhǔn)確的角色圖像為基礎(chǔ)，提取角色的動(dòng)作線和關(guān)節(jié)骨骼，實(shí)現(xiàn)角色的骨架化。在這里你可以看到我們的初稿將上半身手臂骨骼定義為弧線。雖然現(xiàn)在很多插畫圖像都可以這樣藝術(shù)化的方式來處理，但請?jiān)偎伎家幌露x：圓是人物的外在表現(xiàn)，但骨骼也應(yīng)該是平的。說得直，這既現(xiàn)實(shí)又容易讓人理解。

于是我們修改了骨骼，定義了角色的頭身比例，確定了各個(gè)關(guān)節(jié)的位置等一系列關(guān)鍵點(diǎn)，完成了所有角色的骨骼圖。

最后總結(jié)了人物的特點(diǎn)。就是圓臉、圓肩、小手、小腳。人物整體呈圓錐形。軀干、手臂和腿由許多圓錐體組成，腰部、肩膀和腰部以骨骼圖的形式定義。髖關(guān)節(jié)是人體的關(guān)鍵組成部分。有了這些，就可以幫助我們繪制出更加準(zhǔn)確的人物形象。

接下來是顏色的定義。因?yàn)槭嵌鄠€(gè)業(yè)務(wù)線共享的，所以我們的想法是根據(jù)每個(gè)業(yè)務(wù)線的需求來改變顏色，所以這里的顏色僅供參考，并不強(qiáng)制。它被認(rèn)為提供了基本的顏色匹配。就是紅、藍(lán)、橙、綠四種顏色，所以我們也將基本配色定義為四種顏色。我們只是適當(dāng)降低色彩飽和度，達(dá)到插畫組合最舒適的狀態(tài)，然后在底色的基礎(chǔ)上演繹出較深的色系作為描邊陰影等處理，使用較淺的顏色進(jìn)行背景、氣氛等處理。

所以我們的線條畫有最基本的顏色，搭配同色的背景。這就是我們想要打造的一個(gè)豐富多彩、友善的生活服務(wù)平臺(tái)的感覺。有了這些產(chǎn)出，我們決定將其放到業(yè)務(wù)線中進(jìn)一步推廣，然后發(fā)現(xiàn)有很多問題亟待解決：

例如，在應(yīng)用過程中，我們發(fā)現(xiàn)人物繪制仍然存在不可控因素，主要是一些手繪輪廓和一些復(fù)雜的陰影，這可能會(huì)導(dǎo)致不同設(shè)計(jì)師繪制的內(nèi)容存在較大差異，因此我們決定讓這些更加規(guī)范在基礎(chǔ)生產(chǎn)中。

對于修改后的圖像，我們嚴(yán)格規(guī)定筆畫粗細(xì)為1像素，人物五官比之前更加精簡，人物減少了復(fù)雜的明暗關(guān)系，整體畫面感覺更加干凈清爽。至此，人物著色稿已經(jīng)基本確定。根據(jù)計(jì)劃，我們?yōu)槊總€(gè)角色定制了一套標(biāo)準(zhǔn)套裝。套裝包括骨架圖、基礎(chǔ)服裝三視圖一套、春秋服裝一套、人物動(dòng)作一套。這樣我們第一部分確定人物形象的計(jì)劃已經(jīng)基本完成了。

關(guān)于打造、形成品牌插畫。當(dāng)人物形象確定后，我邁出了第一步，但也面臨著很多挑戰(zhàn)。例如：大眾產(chǎn)品和互聯(lián)網(wǎng)的屬性意味著插畫必須兼容各類人群。再加上主流的平面繪畫方式，不可避免地面臨表現(xiàn)同質(zhì)化的問題。為了增加品牌的識別特征，未來我們會(huì)在業(yè)務(wù)中的色彩和輔助圖形的運(yùn)用上增加插畫的區(qū)分性，以達(dá)到更好的品牌傳播效果。

04 解構(gòu)實(shí)現(xiàn)高效插畫系統(tǒng)

在構(gòu)建了基本的品牌插畫角色后，我們需要將插畫進(jìn)行整合，實(shí)現(xiàn)高效的插畫系統(tǒng)，最終達(dá)到組件復(fù)用的目的。我們整合插畫系統(tǒng)的方法是將所有組件分為三大類，即作為基礎(chǔ)的背景組件、代表各業(yè)務(wù)線屬性的通用組件以及最重要的角色組件。

這里我們可以舉個(gè)例子，上圖中選擇的角色組件、通用組件和背景組件。通過組裝它們，我們就可以生成我們想要的插畫場景。然后我們將這個(gè)場景進(jìn)行拆分，并與其他組件組合起來，形成更多我們想要的場景插畫。這個(gè)增長可以說是幾何級數(shù)。 可以實(shí)現(xiàn)組件最高效的復(fù)用，提高設(shè)計(jì)效率。

當(dāng)然，一個(gè)好用的插畫系統(tǒng)必須有豐富的組件資源，這樣才能更容易使用，所以除了自建之外，我們還有內(nèi)容共建機(jī)制。

其具體做法如下。第一步，收集并定期收集插畫系統(tǒng)中各業(yè)務(wù)線的實(shí)施案例；第二步，選擇符合品牌插畫繪制規(guī)則、具有示范性和代表性的案例；第三步是收集。經(jīng)過篩選后，我們會(huì)將新的內(nèi)容納入插畫系統(tǒng)中，形成新的插畫組件；第四步是同步。我們會(huì)定期更新并同步到維基和云盤供大家使用，讓整個(gè)插畫庫更加健康地運(yùn)行。

當(dāng)然，規(guī)范在執(zhí)行中也可能會(huì)遇到困難，所以我們會(huì)不斷修改規(guī)范，以達(dá)到最適用的狀態(tài)。這里我們還有一個(gè)共建規(guī)則的方法。

首先是采集，但這次我們采集了各個(gè)業(yè)務(wù)線在插畫使用中遇到的困難。那么我們首先評估問題是否成立，然后探究導(dǎo)致執(zhí)行困難的監(jiān)管規(guī)定不合理的地方在哪里。下一步，將對不合理問題進(jìn)行整改和解決。合理的規(guī)則和條款都會(huì)被修改，最后定期更新會(huì)同步到wiki和云盤供大家使用。

關(guān)于去集成以實(shí)現(xiàn)系統(tǒng)效率。未來我們將通過自建生產(chǎn)更多與業(yè)務(wù)相關(guān)的場景。角色動(dòng)作，包括服裝、發(fā)型等也都是可以更換的，我們會(huì)嘗試嵌入這些組件，進(jìn)行自由組合。此外，我們也寄希望于內(nèi)容共建。我們目前正在與 Ball 合作創(chuàng)建高質(zhì)量的 UXD 材質(zhì)庫。您可以前往水晶球主題欄目下載體驗(yàn)。

另外，現(xiàn)在我們也在嘗試在3D場景中使用角色。未來我們還會(huì)制作更多更好的素材供大家使用，敬請期待。

如有侵權(quán)請聯(lián)系刪除！