亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

01 插畫系統(tǒng)的背景

近年來，面對企業(yè)內部產品的多樣性和業(yè)務快速增長，插畫系統(tǒng)不僅提升了產品的整體美觀度，也讓工具變得高效。組件化的插畫設計增加了界面的美觀性，更好地傳遞品牌特性的同時也提升了協(xié)同效率。

本文將從插畫風格的選擇,如何建立插畫組件庫,插畫系統(tǒng)應用三個方面進行詳細的介紹：

02 設計理念

• 2.1 風格的選取

項目開始前，建立了情緒版，并收集了多種插畫風格進行設計與分析。如扁平、線條、3d、幾何風格等。

風格選取不僅需要考慮到品牌的差異性，也要遵循可落地性、精致性、延展性等特點。我們摒棄了常規(guī)的扁平風格和需要大量人工投入的3d插畫。幾何插畫又過于抽象，不能達到很好的直觀理解，所以這些風格都被一一排除，最后選擇微立體的漸變風格。

微立體風格：是在扁平插畫的基礎上，增加立體感，以同色系漸變?yōu)榛A底色，加入高光和陰影所形成的。它對比扁平插畫增加了更多的細節(jié)，更好地突出畫面的精致感。對比3d插畫體量感更輕，能很好地融合于界面之中。 

• 
  

• 2.2 設計理論

• 基于原子理論搭建設計組件資產。通過原子元素進行排列組合，多種原子分子排列組合方式構成了插畫模塊。

設計形成：人物模式、場景模式、元素模式。 

• 2.3 顏色的定義

顏色作為品牌表現(xiàn)和情感傳達的重要因素之一。從58logo中提取4個色系：藍、紅、黃、綠，并結合B端產品的特性，在原色彩體系上降低了飽和度。選取精致藍作為我們的主色，同時搭配黃，紅，綠為點綴色。

在顏色設定上也考慮了無障礙設計，保障色彩比率大于5。      

2.4 元素演變

通過提取58logo 品牌符號進行變形延展，將 L、O 、 O、C等元素的組合變形,應用在背景元素和衣服紋理中。  

03 設計流程

• 3.1 人物設計

人物設計難點：既要保證設計的精致化與差異性，又要便于后期組件化的建立和協(xié)同使用。這就需要設計要有一定的規(guī)范性，且其規(guī)范要簡單，容易復用。

人物組件設計上采用：漸變+暗面+白色高光，組合成統(tǒng)一的規(guī)范。

品牌特征的應用不僅體現(xiàn)在元素和背景上，也體現(xiàn)在人物細節(jié)的處理上。為確保整體人物符合設計語言，在圓角的處理上以4的倍數(shù)為基礎單位進行遞增，最小圓角為4px,最大24px，保證插畫整體圓滑性。 

• 
  

• 3.2 角色的定義

• 根據(jù)不同業(yè)務線，給每個產品線定義對應的人物角色,并讓人物更具有鮮活特性和故事性。如：hr叫coco，
• 58員工-男程序員叫馬克，攻破代碼意思，客服叫vivi,對應客服打電話“喂喂”的聲音。

3.2.1 人物展示

3.2.2 人物動態(tài)

人物基礎動作結合企業(yè)場景選定常用的人物動態(tài)：走路、坐、站立、指向等。以coco為基礎人物，設計10個動作，并針對8個角色，復用10個人物動態(tài)，共完成70+人物動態(tài)設計。

3.2.3 人物物品

通過互聯(lián)網人物身份來定義手拿物品。如筆記本，電腦、文件、文件夾、卡片等為互聯(lián)網人辦公常用的物品。同時，物品作為組件可根據(jù)需求自由更換。 

• 

• 
  

• 3.3 前景、中景、背景的定義

3.3.1 前景

主體人物，最為精致的設計，可以更換不同動作和其他人物。

3.3.2 中景

通用組件和卡片組合形成中景元素，其中通用組件icon，可以在插畫系統(tǒng)icon庫中調取。

3.3.3 背景

單一的主題色，對整體畫面起到點綴的作用。 

• 3.4 插畫擴展-圖標設計

我們也設計了一套插畫系統(tǒng)圖標。圖標可應用在插畫場景里，也可在UI界面中呈現(xiàn)，使插畫系統(tǒng)得到更廣泛的應用。

• 
  

• 04 場景模式

4.1 場景類別劃分

人物模型：重要層級信息引導或指示性引導頁面如：首頁、引導頁等。

物體模型：由于人物會給畫面更多重量感，適用于空間較大的頁面中。所以增加了場景模式以確保畫面的豐富性與輕量化。

場景色彩類別

考慮到不用業(yè)務線的系統(tǒng)顏色多樣性，我將場景設計分為2個色系：

淺色：適用于白色背景的淺色插畫組件

深色：適用于彩色背景的深色插畫組件。

• 4.2 模塊設計與組件應用

為了提高設計產出效率，我們也根據(jù)不同業(yè)務場景產出相對應的插畫模版，如：登錄頁、空頁、引導頁、首頁、詳情頁等20余種模版類型。并對模版使用場景進行系統(tǒng)地說明，方便使用者根據(jù)模板組件快速產出設計。 

05 插畫系統(tǒng)的應用與賦能

企業(yè)級插畫系統(tǒng)上線后在各個業(yè)務平臺得到了應用，囊括了數(shù)據(jù)中臺、業(yè)務中臺、技術中臺以及多個企業(yè)產品線。后期它將不斷的延展到各個的企業(yè)級項目當中。  

寫在最后的話

插畫系統(tǒng)的產出提升了企業(yè)產品的效率，實現(xiàn)了高效賦能。未來任重道遠， 插畫系統(tǒng)也將在之后形成一個系統(tǒng)化工具化，使其更具便捷性，讓我們一起期待吧！

Powered by Froala Editor