创建图解准则



插图就像任何其他形式的设计一样。保持一致性至关重要。最好的方法是在我们的插图中创建指导原则

为什么需要它?

确定核心价值观和高层理由,以了解为什么需要插图,是概述你的风格的关键。有一个一致的风格,显然会创造一个总体风格,将创造和谐跨越你的插图。这意味着不同的插画家可以在同一个平台上安全地处理插图,因为他们的作品看起来是家庭的一部分。

突出关键区域,例如调色板或笔划权重,显然对在整个风格中创造团结至关重要。但是,概述信息,例如插图样式的属性值,或者您希望通过在平台上使用它们来实现什么,也同样重要。

A sample of some exploratory styles一些探索风格的示例

不要只是跳进去…

在开始任何项目之前,准确了解您或利益相关者希望从项目中实现的目标是很重要的。

我通常将其分解为以下几个问题,以使我自己和利益相关者更好地理解我们试图从项目中获得什么。

1、目标

为什么要在平台上引入插图?你认为这个项目成功了吗?

2、现有Styleguide

如果已经有了现有的样式指南,显然会有很大帮助。它不必以插图为基础。核心设计指导原则、品牌指导原则,任何融入平台整体品牌标识的东西都将有助于打造焦点。

尤其是现有的调色板,以及您希望插图在多大程度上依赖于可用的特定颜色。即使该公司有一个现有的调色板,这并不意味着插图风格应该遵循这一点。你的插图可能需要从界面上脱颖而出,使用品牌颜色可能会在一定程度上自相矛盾。

3、价值观

你认为这些插图如何适合这个平台。你觉得这些插图应该如何塑造你的品牌形象。它们会是有趣的、古怪的、柔和的、被动的、详细的、优雅的、尖锐的等等。这基本上是一个风格的概略。

甚至在你开始之前,你应该大致了解你希望插图在界面中如何工作,或者你希望如何使用它们,以教育用户,了解基本的空白状态,或者你只是想在你的项目中注入一些个性。

4、情绪板

创建一个你觉得很适合你的产品的风格模板。这总是一个很好的方式,让利益相关者可以直接指向一种风格并说“我想要那个”…。显然,他们不可能有“那一个”,但它会让插图画家真正了解利益相关者想要什么。

创建moodboard时,它们不需要完全一致。这不仅仅是概述一下你认为可能的工作方向。有各种渠道可以做这项研究,特别是Behance、Dribble、Pinterest、iStock,甚至好的谷歌老图片都可以。这一切都是关于在你走近一个画板之前收集尽可能多的信息。

Dont just jump in You have to figure out why youre doing it first不要只是跳进去。你必须先弄清楚为什么要这么做

是时候挽起袖子了

幸运的是,这是我之前准备的一个。最近加入了Globoforce,我的任务是创建一种说明性风格,用于我们的白标签平台。

我们插图的主要目的是在平台上感觉未完成的部分注入一些个性。或者在一个非常高的层次上:创建一个总体说明风格,在我们的平台上引入一致性。

探索,探索,探索

没有人说这将是一个简单、快速的过程。我们探索了各种风格,最终都被扔进了垃圾桶。这都是关于探索想法的。没有什么是真正浪费的,这一切都在找到最终解决方案方面发挥了一定作用。这只是你在到达终点线之前跳过的另一个障碍。

有些风格行得通,有些不行,所以你必须愿意放弃这些想法,这可能是好的,但只是不适合你试图为这个特定项目实现的目标。

Dont just jump in You have to figure out why youre doing it first

我们的插图语言

重要的是,当谈到术语时,每个人都在同一张纸上。你必须创造一种大家都熟悉的术语语言。人们理解的术语。它不需要太详细,只是一组特定的文字,让利益相关者和设计师能够谈论插图而不会感到困惑。

我们的图标

我们在整个网站上使用图标来突出显示,并提高界面上特定元素的可用性。它们可以从12px到64px使用。我们在UI样式指南中有更多关于如何使用图标的规则。

iconography图像

我们的现场插图

现场插图用于帮助展示小功能或解释体验。它们是轻量级的,不太繁忙,但通过将界面带入生活并取悦用户来帮助增强流量。

Spot Illustrations点插图

我们的空状态插图

空状态图用于解释特征,但不应成为组件的主要焦点。它被用来作为一种方式来解决填补空白区域的需要,但它也为我们提供了一种方式,使一个可能没有生命的区域充满活力。

Empty State Illustrations空状态图示

我们的场景插图

场景插图适用于更大的空间,并允许用户使用更详细的驱动方法解释功能或场景。

Scene Illustrations场景插图

我们的方法

插图可以使用插图使我们的界面栩栩如生。它们用于教育用户,并帮助提请用户注意跨平台的特定功能。

“用于取悦其他无生命区域的用户”

Scene Illustrations

保持简单

由于我们的产品是白色标签产品,插图将用于各种客户。因此,我们试图保持风格和概念尽可能简单和被动。

kiss

字符的使用

我们尽量避免使用字符。角色的使用会引发关于种族和性别的问题,由于我们的客户范围广泛,因此最好尽量简化。

characters

调色板

我们的调色板是出于商业考虑精心挑选的。它的被动性是为了补充我们广泛的客户。我们的目标是让我们的插图在不影响任何品牌团队的情况下取悦用户。

color-pallette

色彩平衡

我们通常避免在插图中使用过多的颜色。我们试着尽可能地依靠我们的“鬼魂白”,只引入调色板的其余部分来平衡插图。

color balance鬼白色是我们最常见的颜色选择。尝试将其用于图中的关键元素

原因:颜色不应作为主观选择。插图应该是被动的,不要太显眼。颜色可以使用,但在使用时我们需要有选择性。我们的风格是被动的,没有色彩。

do-dont

空状态插图的调色板

我们删除了空状态图示的选项。我们只使用“幽灵白”和实心笔划选项。我们允许着色,但从不使用任何其他颜色。我们在所有插图上都有50%的不透明度,以减少权重。

color balance

冲程故障

我们使用具有6px笔划的一致默认平滑笔刷。如果在狭小的空间中需要较小的细节,我们还允许使用3px笔划。我们在任何时候都使用圆角帽来配合圆角方法。

*注意:我们从不放弃使用#8A8EA0作为笔划颜色。

stroke-breakdown

笔划大写

我们在任何时候都使用圆角帽来配合圆角方法。

stroke-caps

在一天结束的时候…

当你分解它时,它是相当简单的。插图样式的主要目的是创建一致、可识别并为平台带来价值的样式。通常需要执行三个步骤才能交付:

  1. 确定为什么需要插图

来源:https://speckyboy.com/creating-illustration-guideline/

0