中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

品牌形象通常是由不同的視覺(jué)元素構(gòu)成的，比如logo、調(diào)色板、特定的字體。除了這些，插圖是另一種強(qiáng)大的視覺(jué)傳達(dá)手段，對(duì)于在UI的界面上也越來(lái)越需要。插畫系統(tǒng)是一個(gè)建立公司視覺(jué)品牌一種有效的方式，本文作者分享了如何設(shè)計(jì)并落地一套強(qiáng)大的插畫系統(tǒng)的過(guò)程，供大家一起參考學(xué)習(xí)。

01 前沿

插畫在現(xiàn)在的視覺(jué)設(shè)計(jì)中越來(lái)越重要，但是隨便一畫就是成功的插畫嗎？顯然不是，基于各種以引流為最終目的的插畫，從生成到落地都有一套有規(guī)可循的系統(tǒng)方法，今天我將在這里為大家來(lái)揭秘，首先我想談的是關(guān)于FACE TEAM團(tuán)隊(duì)的誕生。

02 FaceTeam的誕生

故事是這樣的開始的，我心中一直有一個(gè)想法，那就是設(shè)計(jì)產(chǎn)出能不能像故事集一樣有個(gè)主人公，在主人公的貫穿下講述著房產(chǎn)業(yè)務(wù)線的故事。直到有一次周會(huì)討論上，有個(gè)小伙伴提出了同樣類似的想法，她說(shuō)如果我們有個(gè)固定的房東或者租客形象，可以大大方便了設(shè)計(jì)，而且還很統(tǒng)一。這讓我覺(jué)得，這個(gè)方向似乎是大有可為的，用現(xiàn)在的管理方式（OKR）去說(shuō)這件事，那就是我將這個(gè)想法列為了自己的一個(gè)O。

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

隨著研究的不斷深入，我發(fā)現(xiàn)經(jīng)過(guò)整合的插畫，還可形成高效的生產(chǎn)系統(tǒng)；它的原理并不復(fù)雜簡(jiǎn)單，就好像每個(gè)設(shè)計(jì)師自己積累的素材庫(kù)一樣，相同的畫面可以實(shí)現(xiàn)元素的共用，最大程度的提升生產(chǎn)效率，避免了設(shè)計(jì)資源的浪費(fèi)；另外我還有一個(gè)非常深刻的體驗(yàn)就是，遇到緊急需求時(shí)，有了素材庫(kù)的存在，我們可以更加從容的面對(duì)，不僅不用加班加點(diǎn)趕制，而且更不會(huì)因?yàn)闀r(shí)間的壓縮降低設(shè)計(jì)品質(zhì)。

說(shuō)了這么多好處，下一步就是要將這個(gè)想法去落地了，我決定從探究了兩個(gè)方面著手，去建立整個(gè)插畫體系。

第一個(gè)就是，去構(gòu)建，形成一個(gè)品牌插畫，通俗點(diǎn)就是先去創(chuàng)造業(yè)務(wù)線固定的人物形象，最終達(dá)到品牌宣傳的目的。

第二個(gè)是去整合，實(shí)現(xiàn)系統(tǒng)的高效性，意思就是將各組件分門別類進(jìn)行拆分，最終實(shí)現(xiàn)組件可以重復(fù)利用的一個(gè)過(guò)程；與此同時(shí)，各業(yè)務(wù)線的想法也不謀而合，于是faceteam就這樣誕生了。接下來(lái)我會(huì)從構(gòu)建和整合兩個(gè)方面去介紹我們是如何落地插畫系統(tǒng)的。

03 去構(gòu)建，形象品牌插畫

首先是尋找靈感，這一步其實(shí)專業(yè)名詞可以稱之為添加情緒版，我們收集了大量現(xiàn)有的成熟插畫案例，參考他們做品牌的經(jīng)驗(yàn)，同時(shí)也思考著我們自己的道路，這其中有airbnb，Uber和shopify等，airbnb比較偏溫情，它的重心在于強(qiáng)調(diào)每個(gè)人的不同，因?yàn)榉N族不同的問(wèn)題，所以希望插畫能是代表了各類膚色的人種；而后兩個(gè)比較偏商務(wù)，在設(shè)計(jì)手法上會(huì)更加的干練扁平。

其實(shí)創(chuàng)建情緒版之后，我們?cè)诔跗诰投ㄖ屏嗽O(shè)計(jì)計(jì)劃，我們將整個(gè)插畫系統(tǒng)分為三期去制作，它分別是：

1. 確定形象：如房東、租客、經(jīng)紀(jì)人、車商等形象，并且制作人物三視圖；
2. 形象應(yīng)用：我們希望在UI的使用能做減法，搭配常用組件和背景形成小場(chǎng)景，體現(xiàn)品牌感；運(yùn)營(yíng)使用上做加法，可以只保留形象特征，替換服飾，拓展更多畫風(fēng)，增強(qiáng)品質(zhì)感；
3. 平面變立體：從動(dòng)效，3D建模去應(yīng)用插畫組件，由2D轉(zhuǎn)3D的效果實(shí)現(xiàn)。

有了初步的研究與計(jì)劃，我決定問(wèn)大家一個(gè)問(wèn)題“那就是你有freestyle嗎？”其實(shí)就是拋給大家一個(gè)命題：自己心中58的人物形象應(yīng)該是什么樣的。原因很簡(jiǎn)單，就是一開始不想限制大家的思維，希望更多新奇的想法碰撞出更有意思的設(shè)計(jì)。

于是便有了faceteam成立以來(lái)的第一次海選大賽，大家各抒己見，每個(gè)人都描繪出了自己心中58人物的樣子，這里歸納一下其實(shí)可以分為三個(gè)類別，有偏寫實(shí)風(fēng)格的人物樣式，也有這種圓潤(rùn)可盤的樣式，還有最后比較抽象的夸張類樣式。

其實(shí)除了剛才的三類，還有一類可以稱之為幫幫形象延展類，但是這個(gè)想法在第一輪我們就將它否定了的，因?yàn)閹蛶托蜗筇^(guò)于卡通畫，將人物形象也卡通畫設(shè)計(jì)會(huì)不夠穩(wěn)重，不太符合企業(yè)形象。所以，如何達(dá)成共識(shí)尋找到一個(gè)適合58的人物形象成為我們當(dāng)下急需解決的問(wèn)題。

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

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

于是我們總結(jié)出了形象制作的四個(gè)關(guān)鍵詞：

1）平均風(fēng)格

個(gè)性過(guò)于強(qiáng)烈的風(fēng)格，會(huì)形成?部分用戶極喜歡，而另?部分極不喜歡的爭(zhēng)議形設(shè)計(jì)，所以我們要保證大多數(shù)人的接受，人物形象的設(shè)計(jì)就需要保持平均風(fēng)格，避免過(guò)度抽象和夸張。

2）圓潤(rùn)親和

我們想給用戶體現(xiàn)的是一種安全舒適的感覺(jué)，所以要避免過(guò)于沖擊性的畫面和奇特的人物外形，圓潤(rùn)的外形將會(huì)給用戶帶來(lái)更多的親和感。

3）可拓展

我們?cè)O(shè)計(jì)的插畫需要形成一個(gè)統(tǒng)一的系統(tǒng)，而不是單次獨(dú)立場(chǎng)景的制作。因此，它得能滿足多數(shù)設(shè)計(jì)師好上手，易模仿的特質(zhì)（有規(guī)律可循）。

4）輕量

這里主要是希望表現(xiàn)技法能采用互聯(lián)主流的扁平化畫法，線與面的結(jié)合，畫面精簡(jiǎn)歸納性強(qiáng)。

根據(jù)以上四點(diǎn)原則，我們之前過(guò)稿時(shí)的那種體態(tài)圓潤(rùn)，手腳略微收縮的人物形象更符合我們的預(yù)期，我們將它劃定為重點(diǎn)可發(fā)展的對(duì)象。有了可發(fā)展對(duì)象，但是面對(duì)58繁多的業(yè)務(wù)線我們又該如何去制作呢？

我們初步的想法有兩種：

第一個(gè)是各業(yè)務(wù)線獨(dú)立制作，這樣的好處在于體量較小，各業(yè)務(wù)線方便管理，但是就會(huì)出現(xiàn)很多風(fēng)格；

第二個(gè)就是統(tǒng)一制作，形成一個(gè)大家庭，這樣的好處在于品牌的統(tǒng)一性，俗話說(shuō)的一家人整整齊齊的，但是它相比于獨(dú)立制作，會(huì)更有挑戰(zhàn)性，于是大家經(jīng)過(guò)一番商討，決定選擇了更有家族化語(yǔ)言的后者。

整合成一個(gè)大家庭，人物角色如何設(shè)定其實(shí)是面臨的第一個(gè)難題，這里可以舉個(gè)例子，比如一個(gè)男青年，他在二手車是買家，但是在房產(chǎn)又可能是賣家，買家和賣家一定要展現(xiàn)出來(lái)不一樣的感覺(jué)，所以這樣的話我們一個(gè)人就要設(shè)定很多的角色，58這么多業(yè)務(wù)線，那工作量太龐大也不現(xiàn)實(shí)，所以角色設(shè)定可能行不通。于是我們想能不能找出一根主線將他們都串聯(lián)在一起，最后我們發(fā)現(xiàn)找到他們之間的共同點(diǎn)這一切問(wèn)題都就迎刃而解了。

接下來(lái)一張圖幫了我們大忙，這是互聯(lián)網(wǎng)人群的年齡分布圖，每個(gè)人在生活中會(huì)扮演這個(gè)不同的角色，但是他在自己的年齡所表現(xiàn)出的那種狀態(tài)和精神面貌是大多數(shù)人都較為接近的，所以年齡，這正是我們要找的所有人物的共同點(diǎn)。

大家都很認(rèn)同這個(gè)觀點(diǎn)，我們決定做5個(gè)年齡段的人物骨骼，涵蓋整個(gè)58用戶人群，這樣的話哪個(gè)業(yè)務(wù)線需要哪個(gè)年齡段的人物都可以隨取隨用，非常方便，根據(jù)業(yè)務(wù)屬性的不同，給他們替換相應(yīng)的服飾就可體現(xiàn)出他們的人物所扮演的角色。

找到了共同點(diǎn)，接下來(lái)我們就可以去制作人物骨骼了，但是在制作之前，我們還得確定的一件事情就是，剛才我們列為可重點(diǎn)發(fā)展對(duì)象的那套人物，放在各個(gè)業(yè)務(wù)線是否適用，我們得再驗(yàn)證一波。

于是我們將這一類身形圓潤(rùn)，手腳略微偏小的橄欖球式人物形象應(yīng)用在各業(yè)務(wù)線中，發(fā)現(xiàn)是可行的，但是出現(xiàn)的問(wèn)題是每個(gè)人對(duì)造型拿捏不準(zhǔn)，有的形象夸張，有的比較收斂，有的甚至出現(xiàn)了比較油膩的狀態(tài)，但是我們認(rèn)為這是可以通過(guò)骨骼系統(tǒng)來(lái)規(guī)避的。

所以我們決定以這類形象人物為參考進(jìn)行骨骼建立，我們采用的方法是先確定各年齡段的人物形象樣式，繼而在人物形象樣式的框架上反推出的人物骨骼，我們稱它為由具象推演抽象的制作方法。

我們剛開始在每個(gè)年齡段選擇了一個(gè)代表，然后制作了這個(gè)年齡段的一個(gè)人物形象的樣式，從人的相貌，體態(tài)、身高等方面入手，比如說(shuō)隨著人年紀(jì)增大會(huì)發(fā)福，老一輩人身高偏矮這些客觀規(guī)律去表現(xiàn)，目的就是為了制作出每個(gè)年齡段最具代表性的人物。其實(shí)初稿反映出了很多的制作問(wèn)題，比如女性胯部較大腰又較細(xì)，如果用同樣的制作方法會(huì)顯得胳膊過(guò)于粗壯，另外40歲男性我們感覺(jué)應(yīng)該更矮點(diǎn)等問(wèn)題。

于是在初稿的基礎(chǔ)上我們進(jìn)行修改，并且將人物延伸至了每個(gè)年齡段分別會(huì)有男女兩個(gè)角色，但是這一版也并不能達(dá)到我們最終想要的效果，首先帶眼鏡的人群有點(diǎn)多，我們覺(jué)得應(yīng)該適當(dāng)減少近視人群的數(shù)量，讓畫面更符合國(guó)情；

另外人物在美觀性還需要加強(qiáng)，人物表情過(guò)于嚴(yán)肅、大媽有點(diǎn)返祖等一系列問(wèn)題；于是我們又更新了一版，這一版本就是我們現(xiàn)在一直沿用的基礎(chǔ)，在內(nèi)部為了好稱呼制作出來(lái)的人物還給他們每個(gè)人起了對(duì)應(yīng)的名字，也許未來(lái)會(huì)給他們都賦予性格，成為一個(gè)更鮮活的人物形象。

有了精準(zhǔn)的人物形象作依托，我們?cè)谛蜗笊砩咸崛?dòng)作線和關(guān)節(jié)骨骼，實(shí)現(xiàn)人物骨骼化。這里可看到我們初稿將上半身胳膊骨骼定義為弧形，雖然現(xiàn)在的插畫形象不妨很多這種藝術(shù)化的處理方式，但是再三思量定義：圓潤(rùn)是人物形象的外在表現(xiàn)，但是骨骼也應(yīng)該是平直的，這樣既符合現(xiàn)實(shí)，也更容易讓人理解。

于是我們將骨骼進(jìn)行修改，定義了人物的頭身比，并且確定了各個(gè)關(guān)節(jié)位置等一系列關(guān)鍵點(diǎn)，制作完成所有人物的骨骼圖。

最后對(duì)人物特點(diǎn)進(jìn)行了總結(jié)，是一種圓臉圓肩小手小腳的特征，人物整體呈錐形體，軀干胳膊腿部都是由很多錐形組成，并且用骨骼圖的形式定義了腰、肩膀、胯關(guān)節(jié)這些關(guān)鍵的人體構(gòu)成要素，有了這些便能幫助我們描繪出更精準(zhǔn)的人物形象。

接下來(lái)就是顏色的定義，因?yàn)槭嵌鄻I(yè)務(wù)線共用的情況，我們的想法是可以根據(jù)各業(yè)務(wù)線需求來(lái)更換顏色，所以這里的顏色僅供參考不做強(qiáng)制要求，算是提供一個(gè)基礎(chǔ)配色。58logo是紅藍(lán)橙綠四色，所以我們也將基礎(chǔ)配色定義為四種顏色，只是適當(dāng)降低顏色飽和度以達(dá)到插畫組合最為舒適的狀態(tài)，然后根據(jù)基色推演出來(lái)較深的色系作為描邊陰影等處理，較淺的色系做背景，氛圍等處理。

于是我們的線稿就這樣有了最基礎(chǔ)的顏色，搭配上同類色的背景，這就是我們想營(yíng)造出來(lái)的多彩、親和的生活服務(wù)類平臺(tái)的感覺(jué)。有這些產(chǎn)出，我們決定將他們放入業(yè)務(wù)線中進(jìn)一步去推進(jìn)，然后發(fā)現(xiàn)這當(dāng)中出現(xiàn)了很多急需去解決的問(wèn)題：

比如說(shuō)，我們?cè)趹?yīng)用過(guò)程中發(fā)現(xiàn)，人物繪制還存在不可控因素，主要是一些偏手繪的勾線與一些復(fù)雜的陰影，這樣可能導(dǎo)致不同設(shè)計(jì)師繪制出的東西差異性較大，所以我們決定在基礎(chǔ)制作中讓這些更加有規(guī)矩。

修改之后的形象我們嚴(yán)格規(guī)定了描邊粗度為1像素，人物五官較之前也更加精簡(jiǎn)，人物減少了復(fù)雜明暗關(guān)系，畫面整體感覺(jué)更加干凈清爽。至此人物形象上色稿也就基本確認(rèn)，按照計(jì)劃我們給每個(gè)形象定制了一個(gè)標(biāo)準(zhǔn)套裝，套裝包含一個(gè)骨骼圖，一套基礎(chǔ)服飾的三視圖，一款春秋服飾和一個(gè)人物動(dòng)作。所以我們第一部分確定人物形象的計(jì)劃已經(jīng)基本達(dá)成。

關(guān)于去構(gòu)建，形成一個(gè)品牌插畫。在人物形象確定的時(shí)候我算是邁出了第一步，但是也面臨著很多挑戰(zhàn)。比如：大眾產(chǎn)品和互聯(lián)網(wǎng)屬性，使得插畫必須兼容各類人群喜歡，再加上主流的扁平畫法，在表現(xiàn)上難免面臨同質(zhì)化的問(wèn)題。為了增加品牌的識(shí)別特性，未來(lái)我們將會(huì)在業(yè)務(wù)的使用顏色和輔助圖形上來(lái)增加插畫的區(qū)分性，以達(dá)到更好的品牌傳遞效應(yīng)。

04 去整合，實(shí)現(xiàn)高效插畫系統(tǒng)

構(gòu)建了基礎(chǔ)的品牌插畫人物，接下來(lái)我們就是要去整合插畫，實(shí)現(xiàn)高效的插畫系統(tǒng)，最終達(dá)到讓組件重復(fù)利用的目的了。我們整合插畫系統(tǒng)的方法是將所有組件分成三大類別，分別是作為基底的背景組件，代表各業(yè)務(wù)線屬性的通用組件，和最重要的人物組件。

這里我們可以舉個(gè)例子，上圖選中的人物組件、通用組件和背景組件。將它們進(jìn)行組裝，便可以生成一個(gè)我們想要的插畫場(chǎng)景，然后我們將這個(gè)場(chǎng)景拆分再和其他組件結(jié)合，又能形成更多我們想要的場(chǎng)景插畫，這種增長(zhǎng)可以說(shuō)是幾何似的裂變，能夠最高效的實(shí)現(xiàn)組件的重復(fù)利用，提升設(shè)計(jì)效率。

當(dāng)然一個(gè)好用的插畫系統(tǒng)一定要擁有豐富的組件資源，這樣用起來(lái)才更加的得心應(yīng)手，所以除了自建以外，我們還有內(nèi)容共建機(jī)制。

它的具體做法是這樣的，第一步是收集，定期收集各業(yè)務(wù)線在插畫體系中的落地案例；第二步是篩選，篩選符合品牌插畫繪制規(guī)則，并且具備示范性和代表性的案例；第三步是收錄，通過(guò)篩選的新內(nèi)容，我們將會(huì)收錄插畫系統(tǒng)中，形成新的插畫組件；第四步就是同步，我們會(huì)定期更新同步到wiki和云盤中供大家使用，讓整個(gè)插畫庫(kù)更加健康的運(yùn)轉(zhuǎn)。

當(dāng)然，規(guī)范也有可能遇到不好落地的情況，所以我們也會(huì)不斷去修改規(guī)范以達(dá)到最適用的狀態(tài)，這里我們還有個(gè)規(guī)則共建的方法。

首先也是收集，但這次我們收集的是各業(yè)務(wù)線在插畫使用中遇到的難點(diǎn)，然后我們首先評(píng)估問(wèn)題是否成立，然后探究導(dǎo)致落地困難的規(guī)范條款哪里不合理，接下來(lái)就是修訂，針對(duì)不合理的規(guī)則條款進(jìn)行修訂，最后還是定期更新同步到wiki和云盤中供大家使用。

關(guān)于去整合實(shí)現(xiàn)系統(tǒng)高效。未來(lái)我們會(huì)通過(guò)自建的方式產(chǎn)出更多與業(yè)務(wù)相關(guān)的場(chǎng)景，人物動(dòng)作，包括服飾發(fā)型也可進(jìn)行替換，并會(huì)將這些組件嘗試嵌入sketch里進(jìn)行自由組合。另外我們也寄希望于內(nèi)容共建，目前我們正聯(lián)合水晶球共同打造UXD高品質(zhì)素材庫(kù)，大家可以去水晶球faceteam主題專欄下去下載體驗(yàn)。

另外現(xiàn)在我們也有嘗試FaceTeam人物在3D中的使用場(chǎng)景，未來(lái)我們也會(huì)制作更多更好的素材供大家使用，敬請(qǐng)期待。

作者：魏哲，視覺(jué)設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@魏哲

題圖來(lái)自Unsplash，基于CC0協(xié)議