如何从0 到 1 建立一套品牌插画系统？来看首席设计师的实战经验！

文章作者 Yihui Liu 是一名 UI/视觉室内设计师和插画师，热爱以人为本的设计。通过在北京的学习和工作后，于德国魏玛包豪斯大学完成了她的第二个硕士学位，目前在柏林担任 Spacebase 的设计负责人。

品牌插图是建立公司视觉品牌的一种有效方式。在文章中，Yihui Liu 向我们概述了开发这个强大的品牌插画系统的过程。通过在中国及欧洲十多年的学习及获取的专业经验，作为 Spacebase 首席设计师，Yihui Liu 在她最近的工作中总结了一些经验。

如今，网络信息泛滥，企业的生存或死亡都取决于他们的品牌形象。品牌形象必须能够传递企业信息并与用户建立联系，即使远离企业网站和营销内容，用户依旧可以在不同的媒体上立即识别它。强大的品牌形象如同船锚一般，有助于确保用户依附并产生价值关联。

品牌形象通常是由不同的视觉元素所构成。例如 logo，品牌色，品牌字体。除了这些，插图作为另一个强大的视觉交流手段，对于线上 UI 的需求也越来越多。

这是为什么呢？因为插图将叙事元素引入视觉内容，通过更微妙的情感去表达，然后以更复杂的情况去展现。包括人的形象，往往以轻松或异想天开的方式使思想更加活跃，更容易被理解。插图脱离了现实主义，建立了一个品牌所看到的世界。

破。数，简洁，胆图被转独插图，途，插图综视系统，插图系统图统绪或，即使图表或，它形象息相致。

插图系统从任务需求到实际的产品支持加深了公司视觉传达的信息的范围和深度，同时也提升了品牌形象。

设计过程

如何建立一个有效的品牌插图系统？接下来我会带你看看我的设计过程，并以最近我们在 Spacebase 的设计改版为例。

1. 品牌研究

首先，了解你将要设计的品牌。听起来可能很简单，但不要低估此项工作的复杂性。即使你认为自己拥有专业知识，但这也值得你去花时间来刷新或加深你对品牌的理解。

深入了解公司及其产品或服务背后的文化，公司的核心价值观是什么？公司现有的视觉体系采取什么形式？公司未来发展的愿景是什么？

在开始的时候彻底研究这件事可以让你省去许多麻烦。

2. 了解用户需求

除了做你自己的研究外，你还需要和利益相关者谈谈。这种联系对于你的设计是否成功是至关重要的，所以要尽早让他们参与进来，并随时更新设计过程。

关于关键设计问题的答案：插图将出现在哪里？它们需要表达什么？他们可能在什么样的情况出现和带有怎样的情绪？你需要在哪些技术参数内工作？

阶，受众楚。尽此，应该仔细倾听见，并考虑企目标泛形象望。

Spacebase 的宗旨是使在线预订平台更加人性化。我对会议室和使用会议室的人之间的关系进行了深入思考。我们想加入新颖又活跃的设计，以一种平稳，便捷，积极的方式，捕捉品牌信息，打破常规工作空间，这些设计必须是友好的，现代的，简洁的。

3. 寻找灵感

情绪板对于及时捕捉你的想法和灵感是必不可少的工具。搜集该领域的竞争对手，收集与你的预期目标相似质量的图片，并整合这些资料进行分析。这是一个激发你创作灵感的源泉，它会向受众传达出你所想要达到的整体基调。对受众而言，这是一种有用的设计材料，因为情绪板让大众了解了在创建概念的工作开始之前插图选择的方向。

对于 Spacebase 的设计，Airbnb、IBM 和 Shopify 的插图让我深受启发。对我来说简单的人和空间的设计让我印象深刻，我对柔和的调色板如何强调插图，而不淹没图案元素感到尤为好奇。这类插图给人们留下来了一种平静、温暖和包容的印象。

概念设计

研究绪，始 Adobe Illustrator 绘草图。使绘，鼠标。形状创基结构，笔增细节并细基轮廓。

图形应该形统系统，独立。此，迭目插图独，并将未。始功，将含义插图相结，目遵从念。 Spacebase 插图，把案，使图视素持致。

始，先基条绘轮廓，应，及形。流条赋予轮廓，断优。避免枯燥复，轻键词。， Spacebase ，希望插图者身受。

除形象，希望独抽象，未义。展示亮、，户参空变，并暗示。，并散注。Spacebase 宗旨激众创，使空。需迭结。

草图完善后，我想到了一个配色方案。色彩是强大的，是作品的第一感觉，所以对我来说用颜色突出插图是很重要的。我想用微妙的阴影来增强和补充场景。配色方案还应体现品牌特色，并与其他视觉元素相匹配。对于 Spacebase 的配色方案来说，重要的是要摆脱单色，远离像会议室中那种单调色彩。他们的主要品牌颜色是橙色，所以我用更柔和的色调进行中和：紫色，天空蓝色，灰色和芥末黄色。

反馈

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

显然，你需要和核心用户谈谈，让他们接受你的设计。但也要尽量征求用户或同事的意见，特别是那些不从事设计工作的人。他们的回答可以作为下一步改进插图的理由。为真正的目标用户设计，而不是想象中的需求。

总的来说，我更喜欢听到人们的意见，赞扬固然是好事，但意义不大。了解用户的痛点（或一些对他们来说没有视觉意义的东西），向他表明在哪里集中注意力。即使他们不同意你的想法，受众和他们的用户也必须热爱设计。优秀的设计会受到人们关注。

我在 Spacebase 最纠结的一个插图是取消邮件的 banner。当客户取消预订或当 Spacebase 取消预定时，客户就会收到这些信息。

没有人喜欢坏消息，所以我想通过设计让用户减轻失望的感觉，并表示同情和理解。但是早期版本太繁杂了，同事们说收到过激的言论感觉就像世界末日，这需要花很长时间（和许多次迭代）才会向不同的方向发展。

最后，我们把所有的人物形象都去掉了。这是一种避免插图变得过于情绪化并给人更中性感觉的方法。最新的迭代最小化了情绪，它通过半抽象的屏幕表示来呈现问题，但也指向了一个超越取消的未来。

参考资料

建立一个含有不同元素的专用元素库对设计插图非常有帮助。从长远来看，这意味着你可以用作以后的参考，可以确保你的风格在不同插图中保持一致。保持插图连贯一致是系统整体有效性的关键。

再次声明

准备好经历这一繁杂的迭代过程。

不断迭代是设计出成功视觉标识的最重要部分。继续创建新版本，获取反馈，并起草新的迭代。一切都是原型，你必须保持开放的态度，使你的品牌尽可能贴近用户。保持受众的更新和参与，并为意想不到的转变做好准备。设计也是一段旅程，每一步都会让你更接近一个更好的结果。

只要你专注于研究和反馈，你就会朝着正确的方向前进。这是我在设计方面获取的最大收获──这一过程激励着我，当我觉得自己在不断进步时，我会为我现在所专注的事情感到开心。

欢迎关注译者的微信公众号：「彩云译设计」