國內優秀UI插畫組件庫：HiTu

Sponsor

前言：本文推薦的HiTu插畫組件庫，可以讓不會插畫的設計師輕松做出插畫UI，比如插畫BANNER，網頁界面，APP場景圖、運營海報設計都很合適，推薦大家使用。

Hello ! 在這里先跟大家自我介紹一下，我叫伏星，是 HiTu 插畫資產的設計負責人之一，來自螞蟻金服體驗技術部創意團隊。關于 HiTu 的項目背景，相信大家也有所了解，HiTu 的推出主要是以圖形化設計資產的形式，通過構圖、顏色、寓意等一系列設計指引幫助設計者快速且優雅地完成圖形化設計需求，讓人人都是插畫設計師。今天的目的主要也是想跟大家分享一下我們在做 HiTu 插畫設計的一些過程和方法，希望能給同樣做這塊內容的同學帶來幫助與啟發；

PS: 文末有使用教學視頻。

下載地址：https://kitchen.alipay.com/

#01?

為什么要做這件事情？

BU通常在接到插畫需求時，經常會遇到以下情況：

• 插畫師少，創作執行時投入的時間精力周期長成本高；
• 無插畫資源支持的情況下，上網扒圖容易觸及版權風險；
• 溝通成本高，影響業務進度；
• 學習成本高，資產單一，復用率低，內部資產質量參差不齊；
• 視覺風格不一致，修改成本高，體驗度不佳；

通過以上問題的分析，我們將影響業務價值的因素歸納兩塊內容，效能與體驗，以下圖所示：

#02?

如何解決這個問題呢？

我們需要創造一套能靈活覆用于大多數業務場景的優質設計資產，除了設計師外，也希望能幫助到做需求支持的非插畫專業的同學快速上手，并高效完成插畫場景的搭建工作，即簡單、好用，因此我們也通過對大量業務場景問題的探索與分析，并最終決定以 ETCG 的設計思路作為整個插畫設計資產的設計指引；

何為ETCG？

ETCG設計思路（ETCG 分別是 案例 example ，模板template，組件 component ，全局樣式 global style ），從最底層的全局樣式到最上層的使用案例。我們用組件化的設計思路，將元素組合成組件，組件又可以根據不同的場景組合成豐富的模板，模板可以組合搭配成各種使用場景的案例。

如何定義全局樣式 Global Style ？

全局樣式是決定我們 HiTu 未來資產整體風格走向的重要一環，在定義顏色、線條、圓角、材質等內容前，我們開始針對我們自身服務的產品業務進行分析與探索；

確定整體基因方向

開始建立這套插畫機制體系前，我們通過設計小組與技術團隊、產品、用研等多個領域的同學一起對螞蟻企業級產品當前的能力、業務價值、服務群體與未來發展等多維度進行了品牌基因探索提取腦暴會議，并最終確定以了以科技、情感、自然，未來的四層品牌策略作為本次設計的方向；

風格化探索階段

基于這些關鍵詞的概念方向，并結合螞蟻企業級產品的場景內容，我們對行業中較受歡迎的插畫作品做了大量的搜資與分析，并總結到大多企業級產品場景插畫都有個多個共同點：

扁平化、線面結合、偽3D、3D等四種表現樣式、色彩偏藍白冷色調；

（ 以上插畫均來源于互聯網搜資，僅作為競品分析不作任何商業用途 ）

#03?

色彩篇章定義

主色

HiTu 的初衷是為了幫助更多人快樂高效完成圖形化設計工作，解放設計生產力，讓人人都可成為插畫師，通過搜資調研與四層品牌關鍵詞方向指引。我們從 AntDesign 色板中選擇了最具科技感，有代表著探索、鉆研有著像廣闊天空與包容海洋般的極客藍作為我們的主色；

輔助色（副色與點綴色）

基于AntDesign的色板并配合Adobe Color三元取色工具，最終定義了我們HiTu自己的應用色板，并盡把副色與點綴色控制在6個左右，在這里，設計師們如果要自定義某新品牌色彩選擇時，可以嘗試使用以上方法進行顏色篩選，但僅作參考，不同品牌的色彩選擇還需根據業務的實際屬性等綜合角度去考慮；

色彩使用比例建議：主色 > 輔助色（副色、點綴色）

主色是作為品牌第一印象的基調色，輔助色包含副色與點綴色，副色為更好地突出主色優點而存在，使整體畫面更飽滿，點綴色的特點是使用面積小，色相清晰、醒目，能對畫面能起到畫龍點睛，豐富細節等作用,畫面中的色彩比例關系里，視覺表現度盡量大于輔助色，同時我們可以嘗試多用主色的鄰近色作為畫面的輔助色，這樣能幫助畫面的色彩視覺差過度更自然；

左：案例 中：案例色彩比例圖 右：巧用輔助色的參考樣式

概念草圖設計

結合了搜資與產品的品牌調性，我們快速進入了草圖概念創作階段，并通過借助產品中的常見圖形場景案例如：異常頁、產品首焦、功能介紹、幫助頁面等內容進行實驗對象，我們組織了多位設計師基于場景內容，大膽做了多個風格表現手法的設計嘗試，希望通過此種方式得到有效的篩選結果，這一過程也是個試錯的過程，因為風格多樣化的插畫海洋中，要找到一個符合自身特色的設計風格本身就是種很大的挑戰；

以上為場景化案例草圖概念設定過程

在草圖概念設計的過程中，我們對業務場景中的人物與業務元素加入了情緒化的互動情節，希望通過生動的畫面幫助用戶更快速輕松了解信息內容；

以上為幫助頁概念草圖

以上插圖均來自創意小分隊中的不同設計師之手

表現手法：線面結合結合

在做了大量草圖概念設計的案例中，我們最終擬定了以 線面結合 的插畫方式作為下一階段的風格設計方向，原因是我們發現線面繪制的表現手法能幫助圖形帶來非常高的可塑性空間和特殊的藝術感；

線面樣式 / 全局樣式

線條樣式

以下為資產線條的使用說明，至于為什么會這么做，在接下來的組件設計篇我們會詳細說到；

圓角（ 適用于通用組件 ）

此規范主要適用于通用組件和背景組件，基于這類型組件種類多樣，我們不去過多限制設計者的創意空間，為了保持視覺上一致性與韻律感，我們推薦設計師在1024*1024的畫板中繪制組件，且圖形的圓角大小應保持8的倍數關系；

圖形大小繪制范圍推薦控制在896*896px的范圍內

材質機理

海兔資產默認無機理扁平化，出于涉及到不同領域業務場景的使用情況，設計者可以適當地對圖形添加噪點、紋路、漸變等機理效果，這一塊不作詳細建議，根據實際情況自定義即可；

如何定義組件 Component 設計 ？

組件資產主要由人物組件和通用組件（業務、背景元素）組成，是整個資產構成的核心內容，下面我們會從這兩塊內容原型從 0～1 這樣的一個設計過程對大家進行展示。

以上為組件中的人物組件與通用組件樣式展示案例

組件 / 人物設計篇

在人物資產組件設計上，定義了一男一女的基礎角色，并開始草圖概念繪制，在草圖設計中我們對人物的外觀棱角柔硬度，線條的外輪廓處理方式做了幾番設計與探索，如下圖所示：

1 期人物設定草圖

線條描邊樣式案例嘗試與選擇

基礎人物最終定稿

比例上我們基于自然的設計價值指引，并考慮到適配的業務場景是企業級產品為主，所以保留了符合人類 7～8 頭的正常身高比例，不推薦使用Q版、低幼或者過度夸張的設計比例，在外觀上棱角的處理會偏圓滑柔和，線條表現手法上也做了簡化處理，描邊不會使用全輪廓化，而是靈活出現在結構、陰影等交界處，讓畫面看起來更輕量清爽；

身高比例 ：7～8頭身比例

人物組件拓展

在確定了原型基礎的條件下，我們便開始對人物的動作、表情、服飾等內容進行拓展設計；

動作姿態

我們提供12組姿態動作，能適用于多種頁面場景、如異常頁、幫助頁等

服飾搭配

可替換發型

人物場景化使用案例

在頁面異常頁面中，人物結合表情臉譜與肢體語言使用將使畫面變得更加生動

組件 / 人物設計升級

一期資產設計完成后，在推動業務落地上我們遇到了些問題，業務方反饋了人物角色太少，動作不夠，只有男女兩種較單一的人物選擇，在不同業務場景不好適配，基于這些問題我們開始有了角色新增的想法，并針對不同業務人群分析，將 11 種（ 設計師、用研、程序員、BD、經理、PD、商人、保安、互聯網工作者、客服 ）常見的職業進行設計。從服裝、形體差異上，同時結合職業本身的一些性格特質，我們賦予了他們不同形象風格，并在后期增加更多姿態動作，來滿足不同的業務場景使用。

概念設計草圖

正稿樣式

最終我們從創意草圖中篩并選擇了其中 9 個角色進行正稿繪制，并對人物進行了規范化的設計梳理；

人物組件構成指引

考慮到角色在業務場景中能得到更高的利用率，方便設計師靈活編輯與延展，我們對人物肢體進行組件化解構拆分處理，在設定角色新姿態時，設計者可對肢體模塊進行自定義節點移動進行二次組合，為保證肢體的自然運動協調度，可以參考下圖右方的運動軌跡方法或者通過我們提供的動作骨骼模型進行參考；

動作骨骼模型

我們提供了40+的姿態動作選擇，設計師可以結合這套動作指引配合人物組件進行新動作合成的參考指引，更多骨骼模型正在研發中，敬請期待～～

人物資產預覽

基于人物元素組件配盒骨骼動作模型的參考，我們高效快速地完成了180+的人物組件，幫助節省了更多的繪畫執行時間，解放了更多設計生產力；

組件 / 通用組件設計篇

這次我們同樣組織了來自不同業務線的設計師，進行了一次關于業務元素組件收集的腦暴會議，并最終根據各自業務匯總了250+的業務元素關鍵詞， 并對通用組件進行了分類梳理成兩大類：業務元素、背景裝飾元素；這次元素收集會的其中一環意義，是希望通過這種業務碰撞的方式驗證我們組件并不是憑空想象，而是通過業務所需去定義而得到的結果，真正取之于業務，用之于業務；

草圖概念設計稿

正稿樣式

在全局樣式的風格上基本和人物資產保持一致，目前 HiTu 資產已上線250+設計資產，新資產還在繼續更新中…

通用組件構成方法指引

通用組件（業務組件、背景組件）都是由業務中的原子級元素組成，原子級元素可以通過改變顏色、大小、角度、得到不同的新元素組件，利用不同的子元素組合能得到多種新的通用組件，我們通過這樣的方式讓每個組件在場景中充分地的發揮了其利用率與覆用率，如下圖所示，對話框、植物、幾何體，它們就像樂高積木一樣，可以通過簡單的原始單體元素組合出豐富多樣的新圖形組建；

Template 模版

模版內容主要是插畫場景的構成案例和頁面布局樣式組成；

插畫場景構成指引

在搭建一幅完整圖形場景時，我們使用了分層的概念將場景拆分成前景，中景以及背景三個層次，在組件的排放時候，前景凸顯重要的元素（如人，核心元素組件等），中間交代所處環境，背景則渲染烘托氛圍，顏色飽和度與透明度也會隨著層級的推移逐漸降低，如下圖所示：

這樣的排序方式可以更清清晰處理畫面元素的層級關系

關于插畫模版案例

場景模版案例這塊內容比較開放且復雜，不同的應用場景與不同的組件樣式會產生多種多樣的的組合方式，設計者可自定義進行創作組合，所以目前我們僅提供了30+的基礎模版樣式，未來也會繼續針對這塊內容做詳細的方法沉淀與增量工作；

頁面布局樣式

我們目前提供了4 種常規的基礎排版模式，信息圖形上下左右的排布方式，基本都能滿足Web端大部分如：登陸、詳情、異常狀態、功能描述等頁面內容；

HITU插畫教學視頻：
https://v.qq.com/x/page/b32651m2sd7.html

最后

這期分享我們基本就到這里結束，下次會給大家帶來更多內容，目前我們的資產可能還有多不足之處，也在一步步改進中，讓大家有更好的使用體驗，HiTu 資產已經上線Kitchen ，但目前僅支持Mac端用戶使用，為普及更多設計者，我們已經開始web端的開發工作，希望大家繼續關注我們的動態；

感謝前期參與的設計成員：奇靈、它山、線絲、松鳩、芮晗、梓元、舊一、松仙、魚亦

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。