如何從0 到 1 建立一套品牌插畫系統(tǒng)？來看首席設(shè)計(jì)師的實(shí)戰(zhàn)經(jīng)驗(yàn)！

文章作者 Yihui Liu 是一名 UI/視覺室內(nèi)設(shè)計(jì)師和插畫師，熱愛以人為本的設(shè)計(jì)。通過在北京的學(xué)習(xí)和工作后，于德國魏瑪包豪斯大學(xué)完成了她的第二個(gè)碩士學(xué)位，目前在柏林擔(dān)任 Spacebase 的設(shè)計(jì)負(fù)責(zé)人。

品牌插圖是建立公司視覺品牌的一種有效方式。在文章中，Yihui Liu 向我們概述了開發(fā)這個(gè)強(qiáng)大的品牌插畫系統(tǒng)的過程。通過在中國及歐洲十多年的學(xué)習(xí)及獲取的專業(yè)經(jīng)驗(yàn)，作為 Spacebase 首席設(shè)計(jì)師，Yihui Liu 在她最近的工作中總結(jié)了一些經(jīng)驗(yàn)。

如今，網(wǎng)絡(luò)信息泛濫，企業(yè)的生存或死亡都取決于他們的品牌形象。品牌形象必須能夠傳遞企業(yè)信息并與用戶建立聯(lián)系，即使遠(yuǎn)離企業(yè)網(wǎng)站和營銷內(nèi)容，用戶依舊可以在不同的媒體上立即識(shí)別它。強(qiáng)大的品牌形象如同船錨一般，有助于確保用戶依附并產(chǎn)生價(jià)值關(guān)聯(lián)。

品牌形象通常是由不同的視覺元素所構(gòu)成。例如 logo，品牌色，品牌字體。除了這些，插圖作為另一個(gè)強(qiáng)大的視覺交流手段，對(duì)于線上 UI 的需求也越來越多。

這是為什么呢？因?yàn)椴鍒D將敘事元素引入視覺內(nèi)容，通過更微妙的情感去表達(dá)，然后以更復(fù)雜的情況去展現(xiàn)。包括人的形象，往往以輕松或異想天開的方式使思想更加活躍，更容易被理解。插圖脫離了現(xiàn)實(shí)主義，建立了一個(gè)品牌所看到的世界。

這是線上破局設(shè)計(jì)中的一個(gè)重要部分。數(shù)字設(shè)計(jì)，以簡潔，大膽的圖像能被很好地轉(zhuǎn)化為獨(dú)特的品牌插圖，而不是單一用途的設(shè)計(jì)，線上插圖作為綜合視覺系統(tǒng)的一部分，插圖系統(tǒng)中的圖像具有統(tǒng)一的情緒或風(fēng)格，即使圖像代表了產(chǎn)品或服務(wù)的不同方面，它們還是與品牌的形象和信息相一致。

插圖系統(tǒng)從任務(wù)需求到實(shí)際的產(chǎn)品支持加深了公司視覺傳達(dá)的信息的范圍和深度，同時(shí)也提升了品牌形象。

設(shè)計(jì)過程

如何建立一個(gè)有效的品牌插圖系統(tǒng)？接下來我會(huì)帶你看看我的設(shè)計(jì)過程，并以最近我們?cè)?Spacebase 的設(shè)計(jì)改版為例。

1. 品牌研究

首先，了解你將要設(shè)計(jì)的品牌。聽起來可能很簡單，但不要低估此項(xiàng)工作的復(fù)雜性。即使你認(rèn)為自己擁有專業(yè)知識(shí)，但這也值得你去花時(shí)間來刷新或加深你對(duì)品牌的理解。

深入了解公司及其產(chǎn)品或服務(wù)背后的文化，公司的核心價(jià)值觀是什么？公司現(xiàn)有的視覺體系采取什么形式？公司未來發(fā)展的愿景是什么？

在開始的時(shí)候徹底研究這件事可以讓你省去許多麻煩。

2. 了解用戶需求

除了做你自己的研究外，你還需要和利益相關(guān)者談?wù)?。這種聯(lián)系對(duì)于你的設(shè)計(jì)是否成功是至關(guān)重要的，所以要盡早讓他們參與進(jìn)來，并隨時(shí)更新設(shè)計(jì)過程。

關(guān)于關(guān)鍵設(shè)計(jì)問題的答案：插圖將出現(xiàn)在哪里？它們需要表達(dá)什么？他們可能在什么樣的情況出現(xiàn)和帶有怎樣的情緒？你需要在哪些技術(shù)參數(shù)內(nèi)工作？

在這個(gè)階段，受眾可能不太清楚他們想要什么。盡管如此，你應(yīng)該仔細(xì)傾聽他們的意見，并考慮他們對(duì)企業(yè)目標(biāo)和更廣泛的品牌形象的期望。

Spacebase 的宗旨是使在線預(yù)訂平臺(tái)更加人性化。我對(duì)會(huì)議室和使用會(huì)議室的人之間的關(guān)系進(jìn)行了深入思考。我們想加入新穎又活躍的設(shè)計(jì)，以一種平穩(wěn)，便捷，積極的方式，捕捉品牌信息，打破常規(guī)工作空間，這些設(shè)計(jì)必須是友好的，現(xiàn)代的，簡潔的。

3. 尋找靈感

情緒板對(duì)于及時(shí)捕捉你的想法和靈感是必不可少的工具。搜集該領(lǐng)域的競爭對(duì)手，收集與你的預(yù)期目標(biāo)相似質(zhì)量的圖片，并整合這些資料進(jìn)行分析。這是一個(gè)激發(fā)你創(chuàng)作靈感的源泉，它會(huì)向受眾傳達(dá)出你所想要達(dá)到的整體基調(diào)。對(duì)受眾而言，這是一種有用的設(shè)計(jì)材料，因?yàn)榍榫w板讓大眾了解了在創(chuàng)建概念的工作開始之前插圖選擇的方向。

對(duì)于 Spacebase 的設(shè)計(jì)，Airbnb、IBM 和 Shopify 的插圖讓我深受啟發(fā)。對(duì)我來說簡單的人和空間的設(shè)計(jì)讓我印象深刻，我對(duì)柔和的調(diào)色板如何強(qiáng)調(diào)插圖，而不淹沒圖案元素感到尤為好奇。這類插圖給人們留下來了一種平靜、溫暖和包容的印象。

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

在研究和情緒板之后，我開始在 Adobe Illustrator 上繪制草圖。有時(shí)我會(huì)使用手繪板，但更多的時(shí)候會(huì)用鼠標(biāo)來設(shè)計(jì)。我用形狀創(chuàng)建一個(gè)基本結(jié)構(gòu)，然后用鋼筆工具增加細(xì)節(jié)并細(xì)化基本的外輪廓。

設(shè)計(jì)出的圖形應(yīng)該形成一個(gè)統(tǒng)一的系統(tǒng)，而不是獨(dú)立的場景。因此，第一次迭代目的是讓插圖具有獨(dú)特的風(fēng)格，并將其運(yùn)用到未來的不同設(shè)計(jì)之中。一開始可能不會(huì)成功，但將你的感覺與富有內(nèi)在含義的品牌插圖相結(jié)合，目的是為了遵從你的設(shè)計(jì)理念。利用 Spacebase 插圖，我們把重點(diǎn)放在人物和配色方案上，使圖像與其他視覺品牌元素保持一致。

一開始，我會(huì)先用基本線條繪制人物輪廓，體現(xiàn)他們應(yīng)有情感，以及整體的形體動(dòng)作。我想用流動(dòng)的線條賦予他們動(dòng)態(tài)的輪廓，不斷優(yōu)化。我想避免枯燥和復(fù)雜的設(shè)計(jì)，輕量和友好是關(guān)鍵詞。多樣性對(duì)我來說也很重要，因?yàn)?Spacebase 是一家國際公司，我總是希望同樣熱愛插圖設(shè)計(jì)的設(shè)計(jì)者能感同身受。

除了人物形象，我希望物體和環(huán)境有一個(gè)獨(dú)特的抽象風(fēng)格，未來主義和設(shè)計(jì)的前衛(wèi)設(shè)計(jì)。我們想要展示明亮、美麗的室內(nèi)設(shè)計(jì)，讓用戶參與到空間的動(dòng)態(tài)變化中，并通過物體來暗示一個(gè)理想化的專業(yè)工作環(huán)境。同時(shí)，這并不會(huì)分散人們注意力。Spacebase 的宗旨是激發(fā)大眾創(chuàng)造力，但他們的品牌更多關(guān)于使用這些空間的人。這需要經(jīng)過多次迭代才能達(dá)到理想的結(jié)果。

草圖完善后，我想到了一個(gè)配色方案。色彩是強(qiáng)大的，是作品的第一感覺，所以對(duì)我來說用顏色突出插圖是很重要的。我想用微妙的陰影來增強(qiáng)和補(bǔ)充場景。配色方案還應(yīng)體現(xiàn)品牌特色，并與其他視覺元素相匹配。對(duì)于 Spacebase 的配色方案來說，重要的是要擺脫單色，遠(yuǎn)離像會(huì)議室中那種單調(diào)色彩。他們的主要品牌顏色是橙色，所以我用更柔和的色調(diào)進(jìn)行中和：紫色，天空藍(lán)色，灰色和芥末黃色。

反饋

在第一次迭代之后，收集所有你能得到的反饋。

顯然，你需要和核心用戶談?wù)?，讓他們接受你的設(shè)計(jì)。但也要盡量征求用戶或同事的意見，特別是那些不從事設(shè)計(jì)工作的人。他們的回答可以作為下一步改進(jìn)插圖的理由。為真正的目標(biāo)用戶設(shè)計(jì)，而不是想象中的需求。

總的來說，我更喜歡聽到人們的意見，贊揚(yáng)固然是好事，但意義不大。了解用戶的痛點(diǎn)（或一些對(duì)他們來說沒有視覺意義的東西），向他表明在哪里集中注意力。即使他們不同意你的想法，受眾和他們的用戶也必須熱愛設(shè)計(jì)。優(yōu)秀的設(shè)計(jì)會(huì)受到人們關(guān)注。

我在 Spacebase 最糾結(jié)的一個(gè)插圖是取消郵件的 banner。當(dāng)客戶取消預(yù)訂或當(dāng) Spacebase 取消預(yù)定時(shí)，客戶就會(huì)收到這些信息。

沒有人喜歡壞消息，所以我想通過設(shè)計(jì)讓用戶減輕失望的感覺，并表示同情和理解。但是早期版本太繁雜了，同事們說收到過激的言論感覺就像世界末日，這需要花很長時(shí)間（和許多次迭代）才會(huì)向不同的方向發(fā)展。

最后，我們把所有的人物形象都去掉了。這是一種避免插圖變得過于情緒化并給人更中性感覺的方法。最新的迭代最小化了情緒，它通過半抽象的屏幕表示來呈現(xiàn)問題，但也指向了一個(gè)超越取消的未來。

參考資料

建立一個(gè)含有不同元素的專用元素庫對(duì)設(shè)計(jì)插圖非常有幫助。從長遠(yuǎn)來看，這意味著你可以用作以后的參考，可以確保你的風(fēng)格在不同插圖中保持一致。保持插圖連貫一致是系統(tǒng)整體有效性的關(guān)鍵。

再次聲明

準(zhǔn)備好經(jīng)歷這一繁雜的迭代過程。

不斷迭代是設(shè)計(jì)出成功視覺標(biāo)識(shí)的最重要部分。繼續(xù)創(chuàng)建新版本，獲取反饋，并起草新的迭代。一切都是原型，你必須保持開放的態(tài)度，使你的品牌盡可能貼近用戶。保持受眾的更新和參與，并為意想不到的轉(zhuǎn)變做好準(zhǔn)備。設(shè)計(jì)也是一段旅程，每一步都會(huì)讓你更接近一個(gè)更好的結(jié)果。

只要你專注于研究和反饋，你就會(huì)朝著正確的方向前進(jìn)。這是我在設(shè)計(jì)方面獲取的最大收獲──這一過程激勵(lì)著我，當(dāng)我覺得自己在不斷進(jìn)步時(shí)，我會(huì)為我現(xiàn)在所專注的事情感到開心。

歡迎關(guān)注譯者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」