简析插画

插画就像是冰淇淋上的可可粉，它不是一定要存在于一个界面中，但它的存在绝对会为整个界面增色不少。

所以如何学好插画，如何应用插画，并将它的功效发挥到最大，这也是一门学问。

When I think about forms, I remember the ones that gave me shudders more than the ones that were a cakewalk. And one major difference between the two which I can recall is that the easy ones talked to me in a human language, while the difficult ones looked like I was filling out a form for buying land on Mars.

你喜欢插画，或者你希望在你的产品中能有更多的插画。我懂你。我知道在团队中插画并不能作为优先且看着它逐渐消退到只剩美好回忆的挣扎。

Well, it is somewhat difficult to begin a discussion on Product Illustration without discussing the term first.

那么，如果不先行讨论术语，就很难去展开对于产品插画的讨论。

On one side,productis any service, software, hardware or good provided by a company. And on the other side,illustrationsare the visuals, drawings or work of art that explain, clarify, illuminate, visually represent, or merely decorate a written text

一方面，产品是指公司的提供的任何服务、软件、硬件或产品。另一方面，插画是诠释、澄清、说明、视觉表现、或仅仅是对文本的修饰的图形部分、绘画或艺术作品。

Having cleared that out, let’s start by analysing some of the visuals below. All of these are illustrations from some of the most well-known design-lead companies.

了解过这些以后，让我们从分析下方的视觉图形开始吧。这些都是出自于有名的设计领导公司的插画。

出自于Airbnb, Atlassian, Uber and InVision

You probably recognised them at once. There is a reason these companies have invested so many resources in their illustrations, essentially it is all part of their brand identity. A brand’s identity and values can not only be expressed through words, logos, colour and typography;lately illustration has become a great ally to the brand promise.

你可能立马能认出他们。这些公司在他们的插画上投入如此之多的资源是有原因的，本质上来说，这是他们品牌标识的一部分。一个品牌的身份和价值不能仅通过文字、标志、色彩和排版来表达；最近插画已经成为了品牌承诺的重要盟友。

Illustration is a powerful storyteller- it can communicate message, tone and personality in a way words cannot accomplish.

插画是一个强大的说书人 - 它能以文字无法完成的方式来交流信息、语气与个性。

It’s all about the communication一切都在于交流

Illustration in your product

在你的产品中加入插画

A successful illustration system is both a good communicator and a key player in the user experience (it is UX after all!). There are some defining moments in which illustration can really help in the communication with the user:

一个成功的插画系统既是一个优秀的沟通者，也是在用户体验中的一个关键角色（毕竟是UX！）。在某些特定瞬间，插画能确实帮助到与用户的交流：

1. Frustration moments😣

   1.挫折瞬间

With the right tone of voice, any situation can be lightened.

通过正确的语调、任何情况都能变得轻松。

Credits to Mailchimp出自 Mailchimp

2. Missed feature 👋

    2.被错过功能

Promoting features, explaining their benefits or simply giving attention to them.

推广功能，解释他们的好处，或者简单的给他们一些关注。

Credits to Headspace出自 Headspace

3. Compensating complex text 🤓

   3.补偿复杂文本

Support difficult to explain or lengthy copy.

支持难以解释或者冗长的文案。

Credits to Atlassian出自Atlassian

4. Rewarding moments 🎁

   4.奖励时刻

Offer little messages of encouragement or recognise achievements.

提供一些鼓励或认可成就的信息。

Credits to inVision出自inVision

What to consider when doing Product Illustration

在制作产品插画的时候要考虑什么

Well, having discussed some background information and general considerations it is now time to get more practical!

那么，在讨论了一些背景信息和基本考虑事宜之后，现在是时候更实际些了！

There’s not a unique solution, just some considerations that in my experience will make the lives of all marketers, illustrators, designers, copywriters easier when working with product illustration. Communication in product is a responsibility of many team members and that should also go for illustration.

并没有独特唯一的解决方案，只是利用我经验中的一些考虑，来使所有营销人员、插画师、设计师、文案更容易与产品插画工作。产品沟通是大部分团队成员的责任，同样也应该考虑到插画。

1. Tone of voice 💬

    1.语调

It’s important to stay true to your brand, especially when there’s a moment in the flow that requires some emphasis. In these situations, you can really show the brand’s personality, and spice up the storytelling.

忠于你的品牌是非常重要的，特别是在流程中有一个需要强调的时刻。在这种情况下，你可以真正的展现品牌的个性，并且为故事添彩。

Credits to Revolut出自 Revolut

2. Be useful 🤓

    2.实用性

Illustration in context can add richness to your story. Don’t always consider it decoration or only aesthetically relevant. Illustration can add clarity, lead to the next step or add context. Think of the essence, the core message of the story and portray this through illustration.

内容里包含插画能为你的故事增添丰富性。不要总是认为它是装饰或仅仅为了提高审美。插画能够增添声明，引导去下一步或添加文本。思考故事的本质，核心信息并且通过插画来表达这点。

Credits to Google Calendar出自 Google Calendar

3. Be consistent 📐

   3.一致性

Consistency between styles, shadows or even source light are important. Pay attention to those details and don’t allow old styles to continue in the system if they’re outdated. Also, avoid creating unnecessary exceptions to ensure a consistent style is maintained; empowering your brand image.

在样式、阴影甚至是光源之间保持一致性是很重要的。注意这些细节，不允许已经过时的老旧样式在系统中继续被使用。此外，避免出现不必要的异常，确保维护一致性风格；增强你的品牌图像。

Credits to Trello出自 Trello

4. Be emphatic 🤗

   4.强调性

As you design for different scenarios, you will often encounter some ‘X cases’. These are the unhappy flows, where things don’t necessarily go as the user expects. It is important to use the appropriate tone of voice then, mirroring the gravity of the task and user’s state of mind -funny jokes aside.

当你为不同场景进行设计时，你将经常遇到一些‘X案例’。这些是不开心的流程，在这些流程中，事情并不一定如用户所期望的那样发展。因此，使用合适的语调是很重要的，它反映了任务的严重性和用户的心理状态 — 除了有趣的笑话。

Credits to Dropbox出自 Dropbox

5. Use of metaphor 🎭

   5.隐喻的用法

Metaphor is figure of speech in which a word or phrase is applied to an object or action to which it is not literally applicable.

隐喻是一种将一个词或短语应用到一个对象或语境上的修辞手法，此时它不再是它字面上的意思。

Credits to Mailchimp出自 Mailchimp

It is particularly interesting in illustration. Since your main goal is to visualise complex ideas, metaphors also allow you to amplify these ideas and reference them with a familiar context. People will understand better the problem when they can relate it to well known situations. For this reason, it is important to keep them simple and limiting the core message to a single idea. Too many icons, a messy background or multiple objects can overcomplicate the illustration.

在插画中尤其有趣。当你的主要目标是去将复杂想法具像化，隐喻也能够让你将这些想法放大，并在熟悉的环境中去引用它们。当人们能把问题与众所周知的情况联系在一起时，他们就能更好地理解问题。因此，保持它们的简单并将核心信息限制在一个想法上是很重要的。过多图标、混乱的背景或多个对象会让插画过分复杂化。

Credits to inVision出自 inVision

嗯嗯，让我们一起进步吧！