UI界面設(shè)計

Adobe公司的統(tǒng)一形象的插畫設(shè)計

3435

插畫正在成為用戶體驗的重要組成部分，因為它們有助于將品牌直接表達(dá)到產(chǎn)品中。在Adobe，我們圍繞統(tǒng)一品牌插圖風(fēng)格的這一目標(biāo)進(jìn)行了很多必要的討論。隨著我們的產(chǎn)品不斷發(fā)展，我們希望確保與用戶建立更好的品牌認(rèn)知度，并在用戶和產(chǎn)品之間建立更深層次的聯(lián)系。

也許您看過我的團(tuán)隊成員過去的文章（例如Sonja Hernandez的《品牌系統(tǒng)條款》和Anny Chen的《文件類型圖標(biāo)案例研究》），要知道到像我們這么大的產(chǎn)品格局，需要考慮很多因素。 Adobe包括一百多種產(chǎn)品、服務(wù)和社區(qū)，從創(chuàng)意工具到溝通和營銷工具。我們?nèi)绾翁峁┮环N富有創(chuàng)意且有趣的插畫風(fēng)格還可以擴展到像Adobe公司這樣的產(chǎn)品陣容？

Adobe產(chǎn)品插畫簡史

在我們開始在產(chǎn)品中探索色彩插畫之前，我們的圖標(biāo)團(tuán)隊已經(jīng)在2016年建立了一種更線性的插畫風(fēng)格，這種風(fēng)格在我們的產(chǎn)品中仍然廣泛使用。這些線性插圖通常用于提供信息的上下文，如空白狀態(tài)和用戶登錄流程。

歡迎來到創(chuàng)意云資產(chǎn)。（設(shè)計：Marco Muller）

最初，我們想將圖標(biāo)設(shè)計師Marco Mueller創(chuàng)造的這種線性風(fēng)格與我們的新品牌插畫系統(tǒng)結(jié)合起來，使這兩個領(lǐng)域之間盡可能無縫過渡。我嘗試著添加與線性元素交互的圖形來創(chuàng)建故事。這些原始圖形的風(fēng)格實際上是受到了2001年acrobat5.0包裝上使用的插圖的啟發(fā)。

早期插畫風(fēng)格實驗（左）Adobe Acrobat 5.0套裝插圖畫（右）

Adobe Capture登錄插畫

創(chuàng)意云庫插畫

在首次發(fā)布之后，我們就這種風(fēng)格進(jìn)行了幾次內(nèi)部討論 – Adobe的主要設(shè)計師Khoi Vinh提出了一些關(guān)于視覺識別的問題。無論其有趣的歷史淵源如何，這種方法都使用了矢量形狀和人體圖形的組合，這種圖形已廣泛應(yīng)用于科技行業(yè)。所以我們的團(tuán)隊決定重新審視這個項目并探索其他方向。

“我們有必要回顧一下我們的產(chǎn)品使用插圖的方式，并試圖理解為什么我們都選擇了這種特殊的方法。”

——《兩種截然不同的插畫》Khoi Vinh

我很榮幸能與Adobe公司出色的插畫家兼藝術(shù)家Kyle Webster合作完成這個項目。這一次，我們?yōu)椴鍒D風(fēng)格設(shè)定了幾個目標(biāo):我們希望通過創(chuàng)造性和趣味性來展示Adobe對世界級插圖的承諾。說明性語言需要允許風(fēng)格內(nèi)的多樣性，以便隨著時間的推移，它可以跨產(chǎn)品和消息傳遞系統(tǒng)進(jìn)行擴展，并允許其他插畫家參與進(jìn)來。我們還希望它是能讓Adobe區(qū)別于其他公司的獨有風(fēng)格。

首先，Kyle想看看我們是否可以添加更多視覺元素來突出插畫風(fēng)格。正如你所看到的，他通過膚色，服裝風(fēng)格細(xì)節(jié)和陰影來為人物增添更多個性，為角色帶來更多內(nèi)涵。

“雖然很有趣,但這和原來的方案有沒有很大不同 , 同時人物畫風(fēng)也還很傳統(tǒng), 很明顯，這個方向不會像我們所希望的那樣靈活新穎，也不會給我們真正發(fā)揮和實驗的空間。我很高興我們改變了方向，Emma做了一個奇妙徹底的探索，使我們在正確的道路上發(fā)展一個獨特的和適應(yīng)性強的視覺語言。

——Kyle Webster

正如Kyle所說，這最初的探索仍然非常接近原始風(fēng)格，經(jīng)過幾次頭腦風(fēng)暴會議之后，我們決定進(jìn)一步改變傳統(tǒng)畫風(fēng)，探索更抽象的視覺語言。

是時候放棄老套的畫風(fēng)了

Adobe Spectrum包含banner設(shè)計

我們所處的軟件環(huán)境中，插畫正變得越來越統(tǒng)一，類似。通常情況下，插畫家在他們的插畫中去除了個人的創(chuàng)意想法，以獲得大多數(shù)人的喜愛。他們非常注重數(shù)據(jù)，而不太注重如何更個性地表達(dá)自己的想法。

在Meg Robichaud鼓舞人心的文章《華麗的人物造型并不代表其多元化》中，她討論了產(chǎn)品插圖的包容性問題。我想把焦點從試圖在每一張插圖中表現(xiàn)人物多樣性上轉(zhuǎn)移開，這樣為通過抽象形狀表達(dá)相同的用戶概念開辟了新的可能。

原則的建立及探索

插畫是一種直觀且主觀的藝術(shù)形式，將其翻譯成一種跨平臺、跨產(chǎn)品的系統(tǒng)語言具有一定的挑戰(zhàn)性。

為了嘗試和定義一種新的風(fēng)格，我著重關(guān)注了四個方面來探索:

1, 人物形態(tài)與視角

2, 質(zhì)感

3, 圖形

4, 色彩

我將在這里花一些時間討論每一個方面，并通過一些例子引導(dǎo)您。

人物形態(tài)與視角

包含人物的插畫能讓用戶產(chǎn)生代入感，但人物的抽象程度和用戶有效識別的最大公約數(shù)是多少呢？我們需要有個充分完整的數(shù)據(jù)嗎？包括透視細(xì)節(jié)、陰影和尺寸？

古埃及草紙畫《稱量心臟》：《亡靈書》中的第125法。畫中表現(xiàn)了死神阿努比斯稱量哈尼佛的心臟。這個法術(shù)最先發(fā)現(xiàn)于Hatshepsut and Tuthmose三世統(tǒng)治時期，即公元前1475年?！冻较笮挝淖郑汗虐＜暗乃囆g(shù)與建筑》

側(cè)面輪廓的探索

受古埃及藝術(shù)風(fēng)格的啟發(fā)，我嘗試了一系列側(cè)面輪廓和手臂/手的組合，它們可以以不同的方式組合在一起來講述故事

肌理質(zhì)感

Kyle對質(zhì)感肌理的探索

質(zhì)感是另一種使這些圖形生動的好方法，并賦予它們?nèi)诵曰挠|感，增添了個性和獨具特色的風(fēng)格。Kyle制作了一系列筆刷，可以在插圖中產(chǎn)生微妙且有趣的紋理。我們使用了上述研究中概述的一系列紋理樣式和組合。最終，我們更喜歡“Option A”在構(gòu)圖方面的開放性和透氣感，還有“Option E”中的畫筆筆觸效果以及它與圖形的整合。至此，我們決定結(jié)合這兩種風(fēng)格并繼續(xù)探索。

圖形

Alexander Rodchenko和Varvara Stepanova的著名招貼設(shè)計（1924）采用簡單的幾何形狀和顏色來傳達(dá)信息從而推動工人教育運動，形象來自設(shè)計運動簡單指南：建構(gòu)主義

圖形在我們的設(shè)計原則中扮演著重要的角色，它們還有助于將這種新風(fēng)格與早期開發(fā)的更豐富的插圖聯(lián)系起來。我的背景是平面設(shè)計，我想嘗試將幾何元素融入我們的風(fēng)格，創(chuàng)造出一個簡約和現(xiàn)代的外觀。我一直受到至上主義和建構(gòu)主義這兩個平面設(shè)計中重要的藝術(shù)運動和哲學(xué)的啟發(fā)。這兩個藝術(shù)運動都注重使用基本的幾何形式和構(gòu)圖，以創(chuàng)造一個有影響力的視覺設(shè)計。

我在插畫中使用的圖形

色彩

顏色可以加強插圖和產(chǎn)品之間的聯(lián)系，所以我們根據(jù)產(chǎn)品的主色調(diào)制作了調(diào)色板，然后加入了補充主色的額外顏色。我們想要在顏色組合上有更大的靈活性，因此額外的顏色可以由設(shè)計師自己選擇對每個插圖來說最有意義的顏色。我們提供的關(guān)于顏色的唯一準(zhǔn)則是它們是如何分層的，深色只用于線條和數(shù)字。其他顏色則用于填充色和背景色。