2B 产品的插画规范：来自协同办公产品头部公司 Atlassian
作为协同办公产品，GUI 往往是严肃认真、一丝不苟、冷静克制，但 Atlassian 的设计规范关键词却是大胆、乐观、务实却不失幽默。
2019年10月23日， 2019《财富》未来50强榜单公布，Atlassian排名第6。
你可能不知道 Atlassian，但很可能使用过 Confluence、Jira 这些文档、协同合作工具。如果你设计过同类产品，竞品分析的列表中它的产品必定要排在前列。
但这样一个行业内的头部公司，设计规范却非常简单和“跳脱”。这里分享一下它的插画规范翻译稿，你只要花 5 分钟就可以全部了解。
我们通过插画来直接与人沟通，告诉他们现在在哪里、可以去哪里。插画应该始终有目标、对用户有意义、深思熟虑地传达信息，同时考虑到用户要完成的任务、所处的场景和情感状态。从大小场景到产品概念的呈现，我们的插画始终保持实用、乐观和友好的原则，并通过形状、颜色和线条来实现充满吸引力、令人愉快的体验。
插画的作用
插画是品牌系统的一个重要组成元素，特性如下：
• 使复杂的想法/概念更容易理解。
• 以高效、清晰的方式代表品牌的风格和调性。
• 可以根据要完成的操作和用户的情绪状态，采用合适的“语气”直接与用户“沟通”。
• 随着Atlassian的发展和产品、营销信息的不断迭代，插画系列可以持续发展进化。
• 如同文字一样，插画的使用是为了充分地讲述故事和传达思想——它们不应仅仅被用作装饰或不经思考的运用。
插画&市场营销
我们跨营销触点（marketing touch points）地运用插画，来表达连贯、清晰、统一的故事。插画的作用是辅助表达、吸引注意力，而不是转移用户对于关键信息的注意力。源于讲故事的能力，相比在产品界面中，插画在市场营销中发挥的价值更加突出。最常用的场景如下：
• 官网、登陆页、活动页、服务网站
• 电子邮件、社交媒体、信息图表、企业PPT模板
• 线下市场营销物料
插画规范
如何通过插图被受众所感知? 我们想要…
大胆
大胆味着承担巨大的目标、充满力量、并相信这些目标可以实现。大胆不等于大声、喧嚣或出格，它是关于设定一个目标，承认完成任务的内在复杂性。我们使用干净的形状、大面积的留白、平衡的颜色比例，以确保场景丰富而不混乱。
乐观
我们的插画以未来叙事为特色，围绕着通过团队合作来改善世界这一主题。Atlassian插画风格反映了我们的信念，即一个团队有能力处理任何任务，无论这个任务有多么艰巨或复杂。在风格上，明亮的色彩和低重力的场景增添了一种轻量感和活力感，这些都指向核心思想：当我们一起工作时，任何目标都可以实现。
务实，又不失幽默
虽然我们的插图风格有点异想天开，但绝不应该显得不切实际或天真懵懂。我们通过视角和深度来强化团队合作的现实本质。同时，我们通过对人和事的维度进行细微的调整来幽默俏皮的元素。我们选择适当的场景有效地使用隐喻(例如独角兽)和现实生活中的概念，以确保画面能够带给人灵感和力量。
插画类型
Atlassian的插画可以分为以下几类：
大场景类型
此类插画旨在讲述复杂的故事，这使得它们在本质上更具隐喻性和幻想性。观众应该从中感受到团队合作、冒险、成就和乐观精神。在大多数情况下，画面展现的是一个核心的、放大的物体被一个团队所围绕，这些团队人物们在进行着构建、修复和组装的工作。此类插画通常包含3个以上的人物，其复杂程度应根据预期的图片大小而有所不同。
大场景类型插画
小场景类型
此类插画在视觉上和隐喻上都是人物类型的简化版，用于在有限的空间内展现信息。通常通过此类插画来赋予单个概念更为丰富生动的视觉表达。尽管进行了简化，画面中仍然要展现一个小型的团队围绕着一个放大的物体进行工作的场面。
小场景类型插画
概念类型
此类插画是某个概念最简单、最字面的表达。因为它们经常在产品界面中作为空状态使用，或者在与其它同类插图组合使用，所以面积小、画面简洁。这些插画通常不包括任何人物，但偶尔包括一些烘托气氛的背景元素—— 取决于设计。
概念类型插画
人物插画
人物插画本身是一个特殊的插画类别，分为高保真风格和低保真风格两种。人物插画可以单独使用，但通常与其它插图元素结合使用。
全尺寸人物
当我们谈论“小明”、“客户”、“我的团队”或“我”时，我们需要比一个模糊的概念更能立刻引起共鸣的东西。基于这个原因，具有生动细节的全尺寸人物插画更人性化，通常用来代表某些具体的人物，或某个角色。
全尺寸人物插画
简化版人物
当展示空间紧张，或者画面元素复杂时，使用简化版人物形象，通过低保真风格来展示人物和团队。
简化版人物插画
人物场景
有时，我们需要在故事场景和具体环境中展现人物。这种情况下，可以使用高保真的人物场景插画。这些场景将人物形象置于具体的环境场景中，非常适合呈现个人交互。
人物场景插画
最佳实践
在创建插图组合时，请遵循这些基本原则：
✅使用虚线、箭头和小端文本表示操作流程、进度和关系。
❎不要为了表示动作和关系而把插图元素叠放在一起。
✅按推荐的尺寸使用插画。
❎不要将插画元素缩小到图标大小或超过规定的大小。
✅保持画面简洁清晰，并在画画周围保证足够的留白。
❎不要让图片与其他内容的尺寸比例悬殊，不要用插画做背景。
