UI界面设计

Adobe公司的统一形象的插画设计

3044

插画正在成为用户体验的重要组成部分，因为它们有助于将品牌直接表达到产品中。在Adobe，我们围绕统一品牌插图风格的这一目标进行了很多必要的讨论。随着我们的产品不断发展，我们希望确保与用户建立更好的品牌认知度，并在用户和产品之间建立更深层次的联系。

也许您看过我的团队成员过去的文章（例如Sonja Hernandez的《品牌系统条款》和Anny Chen的《文件类型图标案例研究》），要知道到像我们这么大的产品格局，需要考虑很多因素。 Adobe包括一百多种产品、服务和社区，从创意工具到沟通和营销工具。我们如何提供一种富有创意且有趣的插画风格还可以扩展到像Adobe公司这样的产品阵容？

Adobe产品插画简史

在我们开始在产品中探索色彩插画之前，我们的图标团队已经在2016年建立了一种更线性的插画风格，这种风格在我们的产品中仍然广泛使用。这些线性插图通常用于提供信息的上下文，如空白状态和用户登录流程。

欢迎来到创意云资产。（设计：Marco Muller）

最初，我们想将图标设计师Marco Mueller创造的这种线性风格与我们的新品牌插画系统结合起来，使这两个领域之间尽可能无缝过渡。我尝试着添加与线性元素交互的图形来创建故事。这些原始图形的风格实际上是受到了2001年acrobat5.0包装上使用的插图的启发。

早期插画风格实验（左）Adobe Acrobat 5.0套装插图画（右）

Adobe Capture登录插画

创意云库插画

在首次发布之后，我们就这种风格进行了几次内部讨论 – Adobe的主要设计师Khoi Vinh提出了一些关于视觉识别的问题。无论其有趣的历史渊源如何，这种方法都使用了矢量形状和人体图形的组合，这种图形已广泛应用于科技行业。所以我们的团队决定重新审视这个项目并探索其他方向。

“我们有必要回顾一下我们的产品使用插图的方式，并试图理解为什么我们都选择了这种特殊的方法。”

——《两种截然不同的插画》Khoi Vinh

我很荣幸能与Adobe公司出色的插画家兼艺术家Kyle Webster合作完成这个项目。这一次，我们为插图风格设定了几个目标:我们希望通过创造性和趣味性来展示Adobe对世界级插图的承诺。说明性语言需要允许风格内的多样性，以便随着时间的推移，它可以跨产品和消息传递系统进行扩展，并允许其他插画家参与进来。我们还希望它是能让Adobe区别于其他公司的独有风格。

首先，Kyle想看看我们是否可以添加更多视觉元素来突出插画风格。正如你所看到的，他通过肤色，服装风格细节和阴影来为人物增添更多个性，为角色带来更多内涵。

“虽然很有趣,但这和原来的方案有没有很大不同 , 同时人物画风也还很传统, 很明显，这个方向不会像我们所希望的那样灵活新颖，也不会给我们真正发挥和实验的空间。我很高兴我们改变了方向，Emma做了一个奇妙彻底的探索，使我们在正确的道路上发展一个独特的和适应性强的视觉语言。

——Kyle Webster

正如Kyle所说，这最初的探索仍然非常接近原始风格，经过几次头脑风暴会议之后，我们决定进一步改变传统画风，探索更抽象的视觉语言。

是时候放弃老套的画风了

Adobe Spectrum包含banner设计

我们所处的软件环境中，插画正变得越来越统一，类似。通常情况下，插画家在他们的插画中去除了个人的创意想法，以获得大多数人的喜爱。他们非常注重数据，而不太注重如何更个性地表达自己的想法。

在Meg Robichaud鼓舞人心的文章《华丽的人物造型并不代表其多元化》中，她讨论了产品插图的包容性问题。我想把焦点从试图在每一张插图中表现人物多样性上转移开，这样为通过抽象形状表达相同的用户概念开辟了新的可能。

原则的建立及探索

插画是一种直观且主观的艺术形式，将其翻译成一种跨平台、跨产品的系统语言具有一定的挑战性。

为了尝试和定义一种新的风格，我着重关注了四个方面来探索:

1, 人物形态与视角

2, 质感

3, 图形

4, 色彩

我将在这里花一些时间讨论每一个方面，并通过一些例子引导您。

人物形态与视角

包含人物的插画能让用户产生代入感，但人物的抽象程度和用户有效识别的最大公约数是多少呢？我们需要有个充分完整的数据吗？包括透视细节、阴影和尺寸？

古埃及草纸画《称量心脏》：《亡灵书》中的第125法。画中表现了死神阿努比斯称量哈尼佛的心脏。这个法术最先发现于Hatshepsut and Tuthmose三世统治时期，即公元前1475年。——《超越象形文字：古埃及的艺术与建筑》

侧面轮廓的探索

受古埃及艺术风格的启发，我尝试了一系列侧面轮廓和手臂/手的组合，它们可以以不同的方式组合在一起来讲述故事

肌理质感

Kyle对质感肌理的探索

质感是另一种使这些图形生动的好方法，并赋予它们人性化的触感，增添了个性和独具特色的风格。Kyle制作了一系列笔刷，可以在插图中产生微妙且有趣的纹理。我们使用了上述研究中概述的一系列纹理样式和组合。最终，我们更喜欢“Option A”在构图方面的开放性和透气感，还有“Option E”中的画笔笔触效果以及它与图形的整合。至此，我们决定结合这两种风格并继续探索。

图形

Alexander Rodchenko和Varvara Stepanova的著名招贴设计（1924）采用简单的几何形状和颜色来传达信息从而推动工人教育运动，形象来自设计运动简单指南：建构主义

图形在我们的设计原则中扮演着重要的角色，它们还有助于将这种新风格与早期开发的更丰富的插图联系起来。我的背景是平面设计，我想尝试将几何元素融入我们的风格，创造出一个简约和现代的外观。我一直受到至上主义和建构主义这两个平面设计中重要的艺术运动和哲学的启发。这两个艺术运动都注重使用基本的几何形式和构图，以创造一个有影响力的视觉设计。

我在插画中使用的图形

色彩

颜色可以加强插图和产品之间的联系，所以我们根据产品的主色调制作了调色板，然后加入了补充主色的额外颜色。我们想要在颜色组合上有更大的灵活性，因此额外的颜色可以由设计师自己选择对每个插图来说最有意义的颜色。我们提供的关于颜色的唯一准则是它们是如何分层的，深色只用于线条和数字。其他颜色则用于填充色和背景色。