在這篇文章中，Yihui Liu 概述了她如何建立一個強(qiáng)大的品牌插畫系統(tǒng)過程。她在中國和歐洲的10多年研究和專業(yè)經(jīng)驗使她的方法得到完善，并從她作為Spacebase首席設(shè)計師的工作中提取了一些例子。

品牌插圖是一個建立公司視覺品牌一種有效的方式。

在大量的在線內(nèi)容中，公司依靠其品牌形象生存或死亡。一個品牌形象必須表達(dá)公司的信息并與用戶建立聯(lián)系，用戶應(yīng)該能夠通過不同的媒體去識別它。

品牌形象通常是由不同的視覺元素構(gòu)成的，比如logo、調(diào)色板、特定的字體。除了這些，插圖是另一種強(qiáng)大的視覺傳達(dá)手段，對于在UI的界面上也越來越需要了。

為什么？

因為插圖可以將敘事元素引入視覺內(nèi)容中，并從微妙的情緒或更復(fù)雜的情況中表達(dá)。包括人的形象使思想變得活躍和更容易理解，通常以一種輕松或異想天開的方式。插圖脫離了現(xiàn)實主義，讓你構(gòu)建品牌所看到的世界。

那么，你應(yīng)該如何著手設(shè)計一個有效的品牌插圖系統(tǒng)呢？

帶你看看我的設(shè)計過程，并以最近我們在Spacebase進(jìn)行的設(shè)計為例。

研究品牌

首先，要知道你要設(shè)計的品牌。

這可能聽起來很簡單，但是不要低估你所涉及的工作。即使你認(rèn)為自己已經(jīng)掌握了工作知識，也值得花時間更新或加深對你對品牌的理解。

深入了解公司及其產(chǎn)品或服務(wù)背后的文化，他們的主要信息是什么，他們現(xiàn)有的視覺標(biāo)識采取什么形式，公司想要朝什么方向發(fā)展？一開始你就徹底地去研究這些，避免你以后遇到更多的麻煩。

組織靈感

一個情緒板對于掌握你接收到的信息和組織你的想法是很重要的，收集競爭對手或公司在該領(lǐng)域與你的預(yù)期目標(biāo)類似的圖像，然后匯編成一個資源。這是一個對于自己激發(fā)靈感的方法，也可以作為你想要實現(xiàn)的整體基調(diào)的指南。

對于Spacebase設(shè)計，我特別受到Airbnb、IBM和Shopify插圖的啟發(fā)。簡單的人物和空間設(shè)計讓我印象深刻，讓我更加感興趣的是它們?nèi)岷偷恼{(diào)色板如何使插圖集中，又不會淹沒圖案元素，它們給人一種平靜、溫暖和包容的感覺。

設(shè)計概念設(shè)計

經(jīng)過研究和情緒板之后，我開始在PS上進(jìn)行草圖繪制。有時我使用Wacom手繪板，但主要是我使用鋼筆工具來控制鼠標(biāo)。我使用形狀創(chuàng)建一個基本結(jié)構(gòu)，并使用鋼筆工具添加細(xì)節(jié)和加強(qiáng)基本輪廓。

記住，你設(shè)計的圖像應(yīng)該結(jié)合在一起形成一個統(tǒng)一的系統(tǒng)，而不是形成獨立的場景。因此，即使這是第一次迭代，也要使插圖具有獨特的風(fēng)格，將來可以在不同的場景設(shè)計中使用它們。

借助Spacebase插圖，我們將重點放在人的性格和配色方案上，使圖像與其他視覺品牌元素保持一致。

我開始畫人物的基本輪廓，來感受他們所代表的情感。我想要流暢的線條，給他們動態(tài)的輪廓和動作的建議。我還想避免任何看起來過于沉重的內(nèi)容，輕量級和友好是關(guān)鍵字。多樣化對我來說也很重要，因為Spacebase是一家國際公司，我一直希望插圖的觀看者能看到自己。

除了人物之外，我還希望對象和環(huán)境具有一種獨特的風(fēng)格（抽象），未來主義和前衛(wèi)設(shè)計。我們想要展示明亮和美麗的內(nèi)部空間，讓用戶參與到空間動態(tài)中，并且使用一些物體建一個理想化的專業(yè)工作環(huán)境。同時，這些也不是為了分散注意力。Spacebase致力于激發(fā)會議室的靈感，品牌更多的是關(guān)于使用這些空間的人。這需要多次的迭代才能得到正確的結(jié)果。

草圖經(jīng)過細(xì)化之后，我想到很多種配色方案。色彩非常有力，可以引起即時反應(yīng)，所以對我來說，重要的是不要壓倒插圖。我想要細(xì)微的陰影來增強(qiáng)和補(bǔ)充場景。色彩方案也要體現(xiàn)品牌的個性，與其他視覺元素相匹配。對

于Spacebase配色方案，重要的是要打破單色并遠(yuǎn)離通常與會議室相關(guān)的色調(diào)顏色。他們的主要品牌色是橙色，所以我用更柔和的色調(diào)來平衡，比如紫色、天藍(lán)色、灰色和芥末黃。

收集反饋

在第一次迭代之后，盡可能收集所有的反饋。顯然，你需要與主要涉眾溝通，談?wù)勊麄儗υO(shè)計的看法。但如果你有用戶或同事的意見，也要試著征求他們的意見，尤其是那些不在設(shè)計領(lǐng)域工作的人。

他們的回答可以引導(dǎo)你下一步應(yīng)該采取什么樣的步驟來改善插圖。為真實的目標(biāo)用戶設(shè)計，而不是想象的需求。

總地來說，我更喜歡聽到人們的意見。夸獎雖然是挺好的，但用處不是很大。

我們了解用戶的痛點，告訴他應(yīng)該把注意力集中在哪里。即使他們不同意你的想法，涉眾和他們的用戶也必須喜歡這個設(shè)計。好的設(shè)計取決于用戶的眼光。

我在Spacebase中最糾結(jié)的一個插圖是取消郵件的橫幅。當(dāng)用戶取消預(yù)訂或當(dāng)Spacebase取消預(yù)訂時，他們就會收到這些信息。沒有人喜歡看到不好的東西，所以我希望設(shè)計能夠給用戶傳遞一些理解。不過早期的版本太復(fù)雜了。

最后，我們把所有的人物都去掉了。

這是一種避免插圖變得過于情緒化并給人以更中性的感覺的方法。最新的迭代最小化了戲劇性，它通過半抽象的屏幕表現(xiàn)來呈現(xiàn)一個問題，但也指出了取消之前的預(yù)期。

參考資料庫

當(dāng)你在畫插圖的時候，建立一個你已經(jīng)使用過的不同元素的資料庫是很有用的。這意味著你在以后可以去參考它們，可以確保你的風(fēng)格在不同的插圖上保持一致。從長遠(yuǎn)來看，保持插圖的一致性是系統(tǒng)整體有效性的關(guān)鍵。

我們經(jīng)歷了很多階段才達(dá)到了最終迭代……

不斷的迭代是一個成功的視覺識別的最重要的部分，不斷的創(chuàng)建新的版本，獲取反饋，并設(shè)計新的迭代。一切都是原型，你必須保持調(diào)整的態(tài)度，以使你的品牌盡可能貼近用戶。讓相關(guān)人士了解最新情況和參與進(jìn)來，并為意外的轉(zhuǎn)折做好準(zhǔn)備。

設(shè)計也是一個過程，每一步都讓你更接近一個更好的結(jié)果。

只要你專注于研究和反饋，你就會朝著正確的方向前進(jìn)。這就是我從設(shè)計中獲得的最大收獲，我對正在進(jìn)行的過程充滿了動力，當(dāng)我感覺自己在不斷改進(jìn)時，我很樂意做我所做的事情。

作者：By Yihui Liu

鏈接：smashingmagazine.com/author/yihui-liu/

譯者：Tzw_n，公眾號「小阿田的設(shè)計筆記」

本文由 @Tzw_n 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由譯者提供