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

前沿叮叮棋牌炸金花客服

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

FaceTeam的誕生叮叮棋牌炸金花客服

故事是這樣的開始的,我心中一直有一個想法,那就是設計産出能不能像故事集一樣有個主人公,在主人公的貫穿下講述着房産業務線的故事。直到有一次周會讨論上,有個小夥伴提出了同樣類似的想法,她說如果我們有個固定的房東或者租客形象,可以大大方便了設計,而且還很統一。這讓我覺得,這個方向似乎是大有可為的,用現在的管理方式(OKR)去說這件事,那就是我将這個想法列為了自己的一個O。

在這之後我翻閱了大量有關資料,發現了品牌插畫這個概念——它是建立公司視覺品牌的一種有效方式。一個好的品牌形象不僅能表達公司的信息還能與用戶建立聯系,它最大優勢就是能将叙事元素引入視覺内容中,甚至可以完全脫離了現實,讓用戶看到品牌所構建的理想世界,我覺得這對業務線來說是很有意義值得去做的一個事情。

随着研究的不斷深入,我發現經過整合的插畫,還可形成高效的生産系統;它的原理并不複雜,就好像每個設計師自己積累的素材庫一樣,相同的畫面可以實現元素的共用,最大程度的提升生産效率,避免了設計資源的浪費;另外我還有一個非常深刻的體驗就是,遇到緊急需求時,有了素材庫的存在,我們可以更加從容的面對,不僅不用加班加點趕制,而且更不會因為時間的壓縮降低設計品質。

說了這麼多好處,下一步就是要将這個想法去落地了,我決定從探究了兩個方面着手,去建立整個插畫體系。

第一個就是,去構建,形成一個品牌插畫,通俗點就是先去創造業務線固定的人物形象,最終達到品牌宣傳的目的。

第二個是去整合,實現系統的高效性,意思就是将各組件分門别類進行拆分,最終實現組件可以重複利用的一個過程;與此同時,各業務線的想法也不謀而合,于是faceteam就這樣誕生了。接下來我會從構建和整合兩個方面去介紹我們是如何落地插畫系統的。

去構建,形象品牌插畫叮叮棋牌炸金花客服

欢聚棋牌炸金花作弊器

首先是尋找靈感,這一步其實專業名詞可以稱之為添加情緒版,我們收集了大量現有的成熟插畫案例,參考他們做品牌的經驗,同時也思考着我們自己的道路,這其中有airbnb,Uber和shopify等,airbnb比較偏溫情,它的重心在于強調每個人的不同,因為種族不同的問題,所以希望插畫能是代表了各類膚色的人種;而後兩個比較偏商務,在設計手法上會更加的幹練扁平。

其實創建情緒版之後,我們在初期就定制了設計計劃,我們将整個插畫系統分為三期去制作,它分别是:

  • 确定形象:如房東、租客、經紀人、車商等形象,并且制作人物三視圖;
  • 形象應用:我們希望在UI的使用能做減法,搭配常用組件和背景形成小場景,體現品牌感;運營使用上做加法,可以隻保留形象特征,替換服飾,拓展更多畫風,增強品質感;
  • 平面變立體:從動效,3D建模去應用插畫組件,由2D轉3D的效果實現。

有了初步的研究與計劃,我決定問大家一個問題「那就是你有freestyle嗎?」其實就是抛給大家一個命題:自己心中58的人物形象應該是什麼樣的。原因很簡單,就是一開始不想限制大家的思維,希望更多新奇的想法碰撞出更有意思的設計。

手机棋牌炸金花开挂

于是便有了faceteam成立以來的第一次海選大賽,大家各抒己見,每個人都描繪出了自己心中58人物的樣子,這裡歸納一下其實可以分為三個類别,有偏寫實風格的人物樣式,也有這種圓潤可盤的樣式,還有最後比較抽象的誇張類樣式。

非常棋牌炸金花作弊器

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

最終我們決定從兩個方面去考慮:

  • 從58的産品屬性出發,它是一個服務于大衆的生活信息平台,那我們的設計就一定要迎合大衆的口味。
  • 作為插畫系統,它也要具備方便繪制容易疊代的特性。

于是我們總結出了形象制作的四個關鍵詞:

1. 平均風格

個性過于強烈的風格,會形成⼀部分用戶極喜歡,而另⼀部分極不喜歡的争議形設計,所以我們要保證大多數人的接受,人物形象的設計就需要保持平均風格,避免過度抽象和誇張。

2. 圓潤親和

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

3. 可拓展

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

4. 輕量

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

百人棋牌炸金花

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

我們初步的想法有兩種:

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

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

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

棋牌炸金花app下载

接下來一張圖幫了我們大忙,這是互聯網人群的年齡分布圖,每個人在生活中會扮演這個不同的角色,但是他在自己的年齡所表現出的那種狀态和精神面貌是大多數人都較為接近的,所以年齡,這正是我們要找的所有人物的共同點。

大家都很認同這個觀點,我們決定做5個年齡段的人物骨骼,涵蓋整個58用戶人群,這樣的話哪個業務線需要哪個年齡段的人物都可以随取随用,非常方便,根據業務屬性的不同,給他們替換相應的服飾就可體現出他們的人物所扮演的角色。

找到了共同點,接下來我們就可以去制作人物骨骼了,但是在制作之前,我們還得确定的一件事情就是,剛才我們列為可重點發展對象的那套人物,放在各個業務線是否适用,我們得再驗證一波。

大神棋牌炸金花

于是我們将這一類身形圓潤,手腳略微偏小的橄榄球式人物形象應用在各業務線中,發現是可行的,但是出現的問題是每個人對造型拿捏不準,有的形象誇張,有的比較收斂,有的甚至出現了比較油膩的狀态,但是我們認為這是可以通過骨骼系統來規避的。

棋牌炸金花开挂插件

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

大神棋牌炸金花官网下载

我們剛開始在每個年齡段選擇了一個代表,然後制作了這個年齡段的一個人物形象的樣式,從人的相貌,體态、身高等方面入手,比如說随着人年紀增大會發福,老一輩人身高偏矮這些客觀規律去表現,目的就是為了制作出每個年齡段最具代表性的人物。其實初稿反映出了很多的制作問題,比如女性胯部較大腰又較細,如果用同樣的制作方法會顯得胳膊過于粗壯,另外40歲男性我們感覺應該更矮點等問題。

百川棋牌炸金花开挂辅助器

于是在初稿的基礎上我們進行修改,并且将人物延伸至了每個年齡段分别會有男女兩個角色,但是這一版也并不能達到我們最終想要的效果,首先帶眼鏡的人群有點多,我們覺得應該适當減少近視人群的數量,讓畫面更符合國情。

另外人物在美觀性還需要加強,人物表情過于嚴肅、大媽有點返祖等一系列問題。于是我們又更新了一版,這一版本就是我們現在一直沿用的基礎,在内部為了好稱呼制作出來的人物還給他們每個人起了對應的名字,也許未來會給他們都賦予性格,成為一個更鮮活的人物形象。

友闲棋牌炸金花软件破解

有了精準的人物形象作依托,我們在形象身上提取動作線和關節骨骼,實現人物骨骼化。這裡可看到我們初稿将上半身胳膊骨骼定義為弧形,雖然現在的插畫形象有很多這種藝術化的處理方式,但是再三思量定義:圓潤是人物形象的外在表現,但是骨骼也應該是平直的,這樣既符合現實,也更容易讓人理解。

百人棋牌炸金花2.6.63

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

叮叮棋牌炸金花外挂

最後對人物特點進行了總結,是一種圓臉圓肩小手小腳的特征,人物整體呈錐形體,軀幹胳膊腿部都是由很多錐形組成,并且用骨骼圖的形式定義了腰、肩膀、胯關節這些關鍵的人體構成要素,有了這些便能幫助我們描繪出更精準的人物形象。

棋牌炸金花网站8178vip顶好

接下來就是顔色的定義,因為是多業務線共用的情況,我們的想法是可以根據各業務線需求來更換顔色,所以這裡的顔色僅供參考不做強制要求,算是提供一個基礎配色。58的logo是紅藍橙綠四色,所以我們也将基礎配色定義為四種顔色,隻是适當降低顔色飽和度以達到插畫組合最為舒适的狀态,然後根據基色推演出來較深的色系作為描邊陰影等處理,較淺的色系做背景,氛圍等處理。

棋牌炸金花开挂怎么下载

于是我們的線稿就這樣有了最基礎的顔色,搭配上同類色的背景,這就是我們想營造出來的多彩、親和的生活服務類平台的感覺。有這些産出,我們決定将它們放入業務線中進一步去推進,然後發現這當中出現了很多急需去解決的問題:

比如說,我們在應用過程中發現,人物繪制還存在不可控因素,主要是一些偏手繪的勾線與一些複雜的陰影,這樣可能導緻不同設計師繪制出的東西差異性較大,所以我們決定在基礎制作中讓這些更加有規矩。

棋牌炸金花软件要怎么开挂

修改之後的形象我們嚴格規定了描邊粗度為1像素,人物五官較之前也更加精簡,人物減少了複雜明暗關系,畫面整體感覺更加幹淨清爽。至此人物形象上色稿也就基本确認,按照計劃我們給每個形象定制了一個标準套裝,套裝包含一個骨骼圖,一套基礎服飾的三視圖,一款春秋服飾和一個人物動作。所以我們第一部分确定人物形象的計劃已經基本達成。

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

去整合,實現高效插畫系統叮叮棋牌炸金花客服

構建了基礎的品牌插畫人物,接下來我們就是要去整合插畫,實現高效的插畫系統,最終達到讓組件重複利用的目的了。我們整合插畫系統的方法是将所有組件分成三大類别,分别是作為基底的背景組件,代表各業務線屬性的通用組件,和最重要的人物組件。

棋牌炸金花app下载

這裡我們可以舉個例子,上圖選中的人物組件、通用組件和背景組件。将它們進行組裝,便可以生成一個我們想要的插畫場景,然後我們将這個場景拆分再和其他組件結合,又能形成更多我們想要的場景插畫,這種增長可以說是幾何式的裂變,能夠最高效的實現組件的重複利用,提升設計效率。

當然一個好用的插畫系統一定要擁有豐富的組件資源,這樣用起來才更加的得心應手,所以除了自建以外,我們還有内容共建機制。

大神棋牌炸金花官网下载

它的具體做法是這樣的,第一步是收集,定期收集各業務線在插畫體系中的落地案例;第二步是篩選,篩選符合品牌插畫繪制規則,并且具備示範性和代表性的案例;第三步是收錄,通過篩選的新内容,我們将會收錄插畫系統中,形成新的插畫組件;第四步就是同步,我們會定期更新同步到wiki和雲盤中供大家使用,讓整個插畫庫更加健康的運轉。

手机棋牌炸金花开挂软件

當然,規範也有可能遇到不好落地的情況,所以我們也會不斷去修改規範以達到最适用的狀态,這裡我們還有個規則共建的方法。

首先也是收集,但這次我們收集的是各業務線在插畫使用中遇到的難點,然後我們首先評估問題是否成立,然後探究導緻落地困難的規範條款哪裡不合理,接下來就是修訂,針對不合理的規則條款進行修訂,最後還是定期更新同步到wiki和雲盤中供大家使用。

友闲棋牌炸金花规律

關于去整合實現系統高效。未來我們會通過自建的方式産出更多與業務相關的場景,人物動作,包括服飾發型也可進行替換,并會将這些組件嘗試嵌入sketch裡進行自由組合。另外我們也寄希望于内容共建,目前我們正聯合水晶球共同打造UXD高品質素材庫,大家可以去水晶球faceteam主題專欄下去下載體驗。

百人棋牌炸金花怎么玩的详细

另外現在我們也有嘗試FaceTeam人物在3D中的使用場景,未來我們也會制作更多更好的素材供大家使用,敬請期待。

歡迎關注「58UXD」的微信公衆号:

棋牌炸金花app

點贊 27
收藏 50
繼續閱讀相關文章

發表評論 已發布 4棋牌炸金花软件下载

還可以輸入 800 個字
 
 
載入中....
4 收藏