插畫正逐漸成為用戶體驗的重要組成部分，因為它們有助于產(chǎn)品傳達品牌理念。在Adobe，我們圍繞著如何統(tǒng)一品牌插畫風格，進行了多次重要的討論。隨著產(chǎn)品成長，我們希望能為用戶打造更好的品牌認知，并且在用戶與產(chǎn)品間建立更深的連接。

Adobe擁有從創(chuàng)意工具到通訊、營銷工具等100多種產(chǎn)品、服務和社區(qū)。那我們應當如何創(chuàng)作富有創(chuàng)意且趣味十足的插畫風格，來適應像Adobe這種公司的產(chǎn)品陣容？

Adobe產(chǎn)品插畫的歷史概覽

在我們?yōu)楫a(chǎn)品探索彩色的插畫之前，圖標小組于2016年就建立了一套線性插畫風格，并且將這套風格廣泛應用在各個產(chǎn)品里。典型應用場景如：空頁面、登錄頁等。

最初，我們的設想是希望把Marco Mueller創(chuàng)作的線性風融合進新的品牌插畫系統(tǒng)，以求在兩個風格間實現(xiàn)無縫過渡。我試過把可與線性元素產(chǎn)生互動的人物形象加入故事中。這些人物角色的原型靈感實際上是來源于2001年Acrobat5.0包裝設計。

（左為早期插畫探索 右為Acrobat5.0包裝設計的）

（Adobe Capture的開屏插畫）

（CC library插畫）

在這種風格首次發(fā)布后，我們內(nèi)部進行了幾次討論。Adobe的首席設計師Khoi Vinh就視覺識別提出一些看法。先不管它的歷史淵源多有趣，這個方法將矢量形狀和人物形象相結(jié)合，在科技類產(chǎn)品的視覺呈現(xiàn)中得到廣泛運用。接下來，我們團隊決定重新審視這個項目，探索其他的可能性。

Khoi Vinh在《兩種大相徑庭的插畫》里面提及到：“我們現(xiàn)在有必要回過頭審視我們的產(chǎn)品使用插畫的方式、并且應嘗試弄清楚為什么我們決定選取這種方式?！?/p>

我很榮幸能同Adobe知名插畫師和藝術家——Kyle Webster合作參與此項目。我們也為本次的插畫風格創(chuàng)作設定了一些目標：我們希望通過創(chuàng)造力和趣味性展示Adobe對世界一流插畫的承諾。插畫語言需要足夠包容，允許樣式的多樣性，隨著時間推移、產(chǎn)品成長得以豐富拓展，也可以讓更多插畫師參與進來貢獻他們的力量。我們也希望這樣的插畫風格對于Adobe來說是獨一無二的，而不是簡單的被一家公司所“擁有”。

一開始，Kyle試著能否加入更多視覺元素讓已有的插畫風格變得更豐富充實。如你所見，他加入了像膚色細節(jié)、服飾紋理、陰影等元素，讓這個人物形象更豐滿有深度。

有趣的是，可以觀察到我把樣式從原有素材中抽離出的程度，并且在插畫里仍然保留了傳統(tǒng)的人物形象。但很明顯，這個方向并沒有著我們期待的那樣靈活可變，不會給我們太多發(fā)揮和探索的空間。我很慶幸，我們改變了方向，而Emma精彩絕倫的探索，指引我們走上更正確的道路，從而發(fā)展出一套更獨特、適應性更強的視覺語言?！狵yle Webster

如Kyle所言，最初的探索成果仍然同原有風格有些接近，但是在團隊成員進行一系列的頭腦風暴后，我們決定將視線移至更抽象的視覺語言，不再局限于標準化的人物形象。

是時候不再盲目跟隨潮流了…

我們生活在一個充斥著各種軟件的時代，插畫變得同質(zhì)化、或者說更具通用性。插畫師經(jīng)常在插圖里弱化人物個體的創(chuàng)意特征，而去捕捉各種各樣的人的共性。他們更聚焦于具象的形體，而不會花太多時間在研究如何更抽象地傳達理念。

在Meg Robichaud讓人備受啟發(fā)的文章里“你不能畫了一個有紫色皮膚的人物，就稱人具有多樣性”，她探討了產(chǎn)品插圖的包容性問題。之前的插畫都聚焦于展示人物的多樣性，而我此次想要將重心轉(zhuǎn)移：通過抽象形狀去傳達相同的用戶理念，并且能在這個方向上探尋不同的可能性。

建立原則，開始探索

插畫是一種觀感直白但具有主觀性的藝術形式，想要跨多平臺和產(chǎn)品把它轉(zhuǎn)譯成一種系統(tǒng)語言也是極具挑戰(zhàn)的事情。

為了試驗并且定義一種新的風格，我將圍繞四個要素進行探索：

*人體的形與透視
*畫質(zhì)肌理
*形狀
*色彩

我接下來會就每個要素進行舉例說明，細細講解。

人體的形與透視

包含著人體形象的展示可以迅速同用戶在感知上建立聯(lián)系，但是這些人體形象能抽象到什么樣的程度且仍讓用戶在感知上產(chǎn)生聯(lián)系？我們是否應該總創(chuàng)造出一個完整的人物形象？關于人物形象的設計是否應該總是注意透視細節(jié)設計：如投影和尺寸？

（心臟的重量：在法術125中，阿努比斯稱了半神木乃伊的心臟。該法術最早是從公元前1475年，哈特謝普蘇特（埃及第18朝女王）和圖特摩斯三世統(tǒng)治的時期傳出的。圖像資料來源于古埃及的藝術與建筑）

（側(cè)面輪廓畫像探索）

在古埃及藝術插圖中，繪制人的頭部時，只留輪廓不帶陰影。我由此受到啟發(fā)：嘗試繪出一系列側(cè)面輪廓以及能以不同方式集結(jié)的手臂/手部組合來講述故事。

畫質(zhì)肌理

（Kyle的肌理探索）

添加肌理是讓這些人物形象更生動、富有個性化、風格更鮮明的一個好辦法。Kyle調(diào)試出一套筆刷，在插畫應用中生成一些微妙但有趣的紋理。我們玩轉(zhuǎn)了各種各樣的肌理樣式以及上述研究中提到的構圖。最終，探索出很多方案。就構圖而言，我們傾向于看著更開放、更輕快的方案A，但也喜歡方案E的筆刷觸感以及同形狀的完美相融。在此，我們決定將兩方案相結(jié)合并繼續(xù)探索。

形狀

（亞歷山大·羅德琴科（和瓦爾瓦拉·斯特凡諾娃的共同著作海報（1924年）采用了簡單的幾何圖形和扁平色彩來表現(xiàn)工人教育運動，圖像來自于《設計運動的簡易指南：結(jié)構主義》。

形狀在我們的設計原則中扮演著重要的角色，它們有助于將這種新樣式與之前已開發(fā)、信息量豐富的插畫聯(lián)系起來。我有著平面設計的背景，我想嘗試將幾何元素混融到我們的風格中，以創(chuàng)造出簡約而現(xiàn)代的造型。我一直以來深受至上主義和結(jié)構主義的啟發(fā)，它們是重要的藝術運動和平面設計哲學。兩類藝術運動旨在利用基礎的幾何形式以及重要的構圖技法去構建更有影響力的視覺設計。

（我在插畫中使用到的形狀）

色彩

色彩可以增強產(chǎn)品和插畫的聯(lián)系，所以我們根據(jù)產(chǎn)品的主題色生成了一系列色板，并且另添加了一些互補色。我們希望色彩搭配組合更具靈活性，設計師可以隨心所欲選取配色打造最合適的插畫。我們在色彩分層上制定了唯一的規(guī)范：深色僅用于描邊線條和和人物、淺色用于圖形填充和背景鋪色。

定義視覺語言

為了找到最適合我們講故事的視覺語言系統(tǒng)，我嘗試著把以上談論到的元素整合起來。下面是早期探索的一些例子。

我嘗試著在插畫里減少人物數(shù)量。思路的出發(fā)點很簡單：用最少的元素為故事闡述最多的內(nèi)容。底部的兩種插畫清晰地傳達了這種想法，簡化形式保留本質(zhì)。

肌理和線條

這個階段，我嘗試著在插畫里找到線條、肌理、形狀組合的最佳結(jié)合點：觀感有趣且視覺平衡。

此次的目標是在前景、背景、圖層和尺寸之間做一個清晰的定義，并且在線條和形狀之間創(chuàng)建意一些想不到、妙趣橫生的互動，以此增強信息的展示。

（線性形狀的探索）

案例示意

下面將展示我此次基于新的視覺系統(tǒng)創(chuàng)作的插畫。你可能在最近發(fā)布的文件云里看到過它們，這周的創(chuàng)意云也會發(fā)布。敬請關注你喜愛的Adobe應用程序接下來發(fā)布的更多動態(tài)。

（Acrobat DC ?啟屏）

（Creative Cloud移動端啟屏）

（Creative Cloud啟屏）

（Adobe Adobe I/O控制臺XD插件網(wǎng)頁）

（Adobe Illustrator CC 2019 啟屏banner）

今天的Adobe品牌插畫設計過程就分享到這里，你學習會了嗎？感謝閱讀！