成立18年
專業南京網站建設經驗
QQ咨詢
025-83462468
形象設計構建,一套插畫系統的產生
形象通常是由不同的視覺元素構成的,比如logo、調色板、特定的字體。除了這些,插圖是另一種強大的視覺傳達手段,對于在UI的界面上也越來越需要。插畫系統是一個建立公司視覺一種有效的方式,本文作者分享了如何設計并落地一套強大的插畫系統的過程,供大家一起參考學習。

01 前沿
插畫在現在的視覺設計中越來越重要,但是隨便一畫就是成功的插畫嗎?顯然不是,基于各種以引流為終目的的插畫,從生成到落地都有一套有規可循的系統方法,今天我將在這里為大家來揭秘,首先我想談的是關于FACE TEAM團隊的誕生。

02 FaceTeam的誕生
故事是這樣的開始的,我心中一直有一個想法,那就是設計產出能不能像故事集一樣有個主人公,在主人公的貫穿下講述著房產業務線的故事。直到有一次周會討論上,有個小伙伴提出了同樣類似的想法,她說如果我們有個固定的房東或者租客形象,可以大大方便了設計,而且還很統一。這讓我覺得,這個方向似乎是大有可為的,用現在的管理方式(OKR)去說這件事,那就是我將這個想法列為了自己的一個O。
在這之后我翻閱了大量有關資料,發現了插畫這個概念——它是建立公司視覺的一種有效方式。一個好的形象不僅能表達公司的信息還能與用戶建立聯系,它大優勢就是能將敘事元素引入視覺內容中,甚至可以完全脫離了現實,讓用戶看到所構建的理想,我覺得這對業務線來說是很有意義值得去做的一個事情。
隨著研究的不斷深入,我發現經過整合的插畫,還可形成高效的生產系統;它的原理并不復雜簡單,就好像每個設計師自己積累的素材庫一樣,相同的畫面可以實現元素的共用,大程度的提升生產效率,避免了設計資源的浪費;另外我還有一個非常深刻的體驗就是,遇到緊急需求時,有了素材庫的存在,我們可以更加從容的面對,不僅不用加班加點趕制,而且更不會因為時間的壓縮降低設計品質。
說了這么多好處,下一步就是要將這個想法去落地了,我決定從探究了兩個方面著手,去建立整個插畫體系。
個就是,去構建,形成一個插畫,通俗點就是先去創造業務線固定的人物形象,終達到宣傳的目的。
第二個是去整合,實現系統的高效性,意思就是將各組件分門別類進行拆分,終實現組件可以重復利用的一個過程;與此同時,各業務線的想法也不謀而合,于是faceteam就這樣誕生了。接下來我會從構建和整合兩個方面去介紹我們是如何落地插畫系統的。

03 去構建,形象插畫
首先是尋找靈感,這一步其實專業名詞可以稱之為添加情緒版,我們收集了大量現有的成熟插畫案例,參考他們做的經驗,同時也思考著我們自己的道路,這其中有airbnb,Uber和shopify等,airbnb比較偏溫情,它的重心在于強調每個人的不同,因為種族不同的問題,所以希望插畫能是代表了各類膚色的人種;而后兩個比較偏商務,在設計手法上會更加的干練扁平。
其實創建情緒版之后,我們在初期就定制了設計計劃,我們將整個插畫系統分為三期去制作,它分別是:
確定形象:如房東、租客、經紀人、車商等形象,并且制作人物三視圖;形象應用:我們希望在UI的使用能做減法,搭配常用組件和背景形成小場景,體現感;運營使用上做加法,可以只保留形象特征,替換服飾,拓展更多畫風,增強品質感;平面變立體:從動效,3D建模去應用插畫組件,由2D轉3D的效果實現。有了初步的研究與計劃,我決定問大家一個問題“那就是你有freestyle嗎?”其實就是拋給大家一個命題:自己心中58的人物形象應該是什么樣的。原因很簡單,就是一開始不想限制大家的思維,希望更多新奇的想法碰撞出更有意思的設計。
于是便有了faceteam成立以來的次海選大賽,大家各抒己見,每個人都描繪出了自己心中58人物的樣子,這里歸納一下其實可以分為三個類別,有偏寫實風格的人物樣式,也有這種圓潤可盤的樣式,還有后比較抽象的夸張類樣式。

其實除了剛才的三類,還有一類可以稱之為幫幫形象延展類,但是這個想法在輪我們就將它否定了的,因為幫幫形象太過于卡通畫,將人物形象也卡通畫設計會不夠穩重,不太符合企業形象。所以,如何達成共識尋找到一個適合58的人物形象成為我們當下急需解決的問題。
終我們決定從兩個方面去考慮:

從58的產品屬性出發,它是一個服務于大眾的生活信息平臺,那我們的設計就一定要迎合大眾的口味。作為插畫系統,它也要具備方便繪制容易迭代的特性。于是我們總結出了形象制作的四個關鍵詞:
1)平均風格
個性過于強烈的風格,會形成部分用戶喜歡,而另部分不喜歡的爭議形設計,所以我們要保證大多數人的接受,人物形象的設計就需要保持平均風格,避免過度抽象和夸張。

2)圓潤親和
我們想給用戶體現的是一種安全舒適的感覺,所以要避免過于沖擊性的畫面和奇特的人物外形,圓潤的外形將會給用戶帶來更多的親和感。

3)可拓展
我們設計的插畫需要形成一個統一的系統,而不是單次獨立場景的制作。因此,它得能滿足多數設計師好上手,易模仿的特質(有規律可循)。

4)輕量
這里主要是希望表現技法能采用互聯主流的扁平化畫法,線與面的結合,畫面精簡歸納性強。

根據以上四點原則,我們之前過稿時的那種體態圓潤,手腳略微收縮的人物形象更符合我們的預期,我們將它劃定為重點可發展的對象。有了可發展對象,但是面對58繁多的業務線我們又該如何去制作呢?
我們初步的想法有兩種:

個是各業務線獨立制作,這樣的好處在于體量較小,各業務線方便管理,但是就會出現很多風格;

第二個就是統一制作,形成一個大家庭,這樣的好處在于的統一性,俗話說的一家人整整齊齊的,但是它相比于獨立制作,會更有挑戰性,于是大家經過一番商討,決定選擇了更有家族化語言的后者。

整合成一個大家庭,人物角色如何設定其實是面臨的個難題,這里可以舉個例子,比如一個男青年,他在二手車是買家,但是在房產又可能是賣家,買家和賣家一定要展現出來不一樣的感覺,所以這樣的話我們一個人就要設定很多的角色,58這么多業務線,那工作量太龐大也不現實,所以角色設定可能行不通。于是我們想能不能找出一根主線將他們都串聯在一起,后我們發現找到他們之間的共同點這一切問題都就迎刃而解了。

接下來一張圖幫了我們大忙,這是互聯網人群的年齡分布圖,每個人在生活中會扮演這個不同的角色,但是他在自己的年齡所表現出的那種狀態和精神面貌是大多數人都較為接近的,所以年齡,這正是我們要找的所有人物的共同點。
大家都很認同這個觀點,我們決定做5個年齡段的人物骨骼,涵蓋整個58用戶人群,這樣的話哪個業務線需要哪個年齡段的人物都可以隨取隨用,非常方便,根據業務屬性的不同,給他們替換相應的服飾就可體現出他們的人物所扮演的角色。

找到了共同點,接下來我們就可以去制作人物骨骼了,但是在制作之前,我們還得確定的一件事情就是,剛才我們列為可重點發展對象的那套人物,放在各個業務線是否適用,我們得再驗證一波。
于是我們將這一類身形圓潤,手腳略微偏小的橄欖球式人物形象應用在各業務線中,發現是可行的,但是出現的問題是每個人對造型拿捏不準,有的形象夸張,有的比較收斂,有的甚至出現了比較油膩的狀態,但是我們認為這是可以通過骨骼系統來規避的。
所以我們決定以這類形象人物為參考進行骨骼建立,我們采用的方法是先確定各年齡段的人物形象樣式,繼而在人物形象樣式的框架上反推出的人物骨骼,我們稱它為由具象推演抽象的制作方法。
我們剛開始在每個年齡段選擇了一個代表,然后制作了這個年齡段的一個人物形象的樣式,從人的相貌,體態、身高等方面入手,比如說隨著人年紀增大會發福,老一輩人身高偏矮這些客觀規律去表現,目的就是為了制作出每個年齡段具代表性的人物。其實初稿反映出了很多的制作問題,比如女性胯部較大腰又較細,如果用同樣的制作方法會顯得胳膊過于粗壯,另外40歲男性我們感覺應該更矮點等問題。

于是在初稿的基礎上我們進行修改,并且將人物延伸至了每個年齡段分別會有男女兩個角色,但是這一版也并不能達到我們終想要的效果,首先帶眼鏡的人群有點多,我們覺得應該適當減少近視人群的數量,讓畫面更符合國情;
另外人物在美觀性還需要加強,人物表情過于嚴肅、大媽有點返祖等一系列問題;于是我們又更新了一版,這一版本就是我們現在一直沿用的基礎,在內部為了好稱呼制作出來的人物還給他們每個人起了對應的名字,也許未來會給他們都賦予性格,成為一個更鮮活的人物形象。
有了精準的人物形象作依托,我們在形象身上提取動作線和關節骨骼,實現人物骨骼化。這里可看到我們初稿將上半身胳膊骨骼定義為弧形,雖然現在的插畫形象不妨很多這種藝術化的處理方式,但是再三思量定義:圓潤是人物形象的外在表現,但是骨骼也應該是平直的,這樣既符合現實,也更容易讓人理解。

于是我們將骨骼進行修改,定義了人物的頭身比,并且確定了各個關節位置等一系列關鍵點,制作完成所有人物的骨骼圖。

后對人物特點進行了總結,是一種圓臉圓肩小手小腳的特征,人物整體呈錐形體,軀干胳膊腿部都是由很多錐形組成,并且用骨骼圖的形式定義了腰、肩膀、胯關節這些關鍵的人體構成要素,有了這些便能幫助我們描繪出更精準的人物形象。
接下來就是顏色的定義,因為是多業務線共用的情況,我們的想法是可以根據各業務線需求來更換顏色,所以這里的顏色僅供參考不做強制要求,算是提供一個基礎配色。58logo是紅藍橙綠四色,所以我們也將基礎配色定義為四種顏色,只是適當降低顏色飽和度以達到插畫組合為舒適的狀態,然后根據基色推演出來較深的色系作為描邊陰影等處理,較淺的色系做背景,氛圍等處理。

于是我們的線稿就這樣有了基礎的顏色,搭配上同類色的背景,這就是我們想營造出來的多彩、親和的生活服務類平臺的感覺。有這些產出,我們決定將他們放入業務線中進一步去推進,然后發現這當中出現了很多急需去解決的問題:
比如說,我們在應用過程中發現,人物繪制還存在不可控因素,主要是一些偏手繪的勾線與一些復雜的陰影,這樣可能導致不同設計師繪制出的東西差異性較大,所以我們決定在基礎制作中讓這些更加有規矩。
修改之后的形象我們嚴格規定了描邊粗度為1像素,人物五官較之前也更加精簡,人物減少了復雜明暗關系,畫面整體感覺更加干凈清爽。至此人物形象上色稿也就基本確認,按照計劃我們給每個形象定制了一個標準套裝,套裝包含一個骨骼圖,一套基礎服飾的三視圖,一款春秋服飾和一個人物動作。所以我們部分確定人物形象的計劃已經基本達成。

關于去構建,形成一個插畫。在人物形象確定的時候我算是邁出了步,但是也面臨著很多挑戰。比如:大眾產品和互聯網屬性,使得插畫必須兼容各類人群喜歡,再加上主流的扁平畫法,在表現上難免面臨同質化的問題。為了增加的識別特性,未來我們將會在業務的使用顏色和輔助圖形上來增加插畫的區分性,以達到更好的傳遞效應。

04 去整合,實現高效插畫系統
構建了基礎的插畫人物,接下來我們就是要去整合插畫,實現高效的插畫系統,終達到讓組件重復利用的目的了。我們整合插畫系統的方法是將所有組件分成三大類別,分別是作為基底的背景組件,代表各業務線屬性的通用組件,和重要的人物組件。
這里我們可以舉個例子,上圖選中的人物組件、通用組件和背景組件。將它們進行組裝,便可以生成一個我們想要的插畫場景,然后我們將這個場景拆分再和其他組件結合,又能形成更多我們想要的場景插畫,這種增長可以說是幾何似的裂變,能夠高效的實現組件的重復利用,提升設計效率。

當然一個好用的插畫系統一定要擁有豐富的組件資源,這樣用起來才更加的得心應手,所以除了自建以外,我們還有內容共建機制。
它的具體做法是這樣的,步是收集,定期收集各業務線在插畫體系中的落地案例;第二步是篩選,篩選符合插畫繪制規則,并且具備示范性和代表性的案例;第三步是收錄,通過篩選的新內容,我們將會收錄插畫系統中,形成新的插畫組件;第四步就是同步,我們會定期更新同步到wiki和云盤中供大家使用,讓整個插畫庫更加健康的運轉。

當然,規范也有可能遇到不好落地的情況,所以我們也會不斷去修改規范以達到適用的狀態,這里我們還有個規則共建的方法。
首先也是收集,但這次我們收集的是各業務線在插畫使用中遇到的難點,然后我們首先評估問題是否成立,然后探究導致落地困難的規范條款哪里不合理,接下來就是修訂,針對不合理的規則條款進行修訂,后還是定期更新同步到wiki和云盤中供大家使用。

關于去整合實現系統高效。未來我們會通過自建的方式產出更多與業務相關的場景,人物動作,包括服飾發型也可進行替換,并會將這些組件嘗試嵌入sketch里進行自由組合。另外我們也寄希望于內容共建,目前我們正聯合水晶球共同打造UXD高品質素材庫,大家可以去水晶球faceteam主題專欄下去下載體驗。
版權所有:南京希丁哥網絡信息服務有限公司(南京網站建設公司)  電話:025-83462468、83461973  公司地址:南京市鼓樓區建寧路61號中央金地廣場3幢609室  蘇ICP備10214264號-10
電話:025-83462468、83461973
版權所有:南京希丁哥網絡信息服務有限公司
中国xxxx