我们如何构建开源设计系统以创建新的社区徽标

UX design Mac computer with mobile and laptop

图片来源

图片由 UX Store 在 Unsplash 上拍摄

作为 Red Hat 用户体验 (UX) 设计和 Ansible 产品团队的交互设计师，我们与 Ansible 社区合作了大约六个月，构建了一个徽标家族。这个旅程甚至更早开始，当时一位项目经理向我们索要一个“快速简便”的徽标用于幻灯片演示。在收集了一些需求后，我们在几天内向利益相关者展示了一个徽标，并且几乎不需要迭代。几个月后，另一位利益相关者认为他们也将从其材料的图像中受益，因此我们重复了这个过程。

此时，我们注意到一种模式：这些徽标资源不再代表个人请求，而是代表 Ansible 项目的共同需求。在完成几个徽标请求后，我们构建了一个临时的系列，该系列在没有有意识的品牌和设计惯例的情况下，造成了 Ansible 品牌视觉不一致的潜力。随着徽标集合的增长，我们认识到这个迫在眉睫的问题以及解决它的必要性。

我们的解决方案是创建一个 Ansible 设计系统，这是一种特定于品牌的资源，用于指导未来一致的徽标设计。

什么是设计系统？

设计系统是可重用资产和指南的集合，有助于告知任何数字产品套件的视觉语言。设计系统创建模式以将独立产品组合在一起，并通过可扩展性和一致性提升品牌。

尤其是在产品组合中包含多个大型公司的产品中，如果没有标准化，扩展是不容易实现的，因为不同的团队为每个产品做出贡献。设计系统充当每个团队构建新资产的基线。通过标准化的外观和感觉，产品作为一个家族在整个产品组合中统一起来。

开始构建设计系统

在收到利益相关者的一系列请求，为开源 Ansible 社区创建徽标，例如 Ansible Builder、Ansible Runner 和 Project Receptor 之后，我们决定为我们的工作流程设计一个结构，并创建一个单一的事实来源，以便向前推进。

首先，我们对现有徽标进行了视觉审核，以确定我们需要处理的内容。Ansible 的原始徽标家族由四个主要图像组成：用于 AWX 的 Angry Spud，用于 Ansible Core/Engine 的 Ansibull，以及用于 AWX 的带翅膀的显示器。大多数徽标都通过一致的红色阴影和公牛图像联系在一起，但笔画宽度、笔画颜色、线条质量和排版却大相径庭。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

Angry Spud 使用棕褐色轮廓和手绘风格，而公牛是对称的几何矢量。AWX 显示器是离群值，其细线艺术翅膀、蓝色矢量矩形和 Old English 字体（此处未包含，但与系列的其他部分不同，系列的其他部分使用现代无衬线字体）。

建立新的设计标准

考虑到调色板、排版和图像，我们生成了一个一致的构图，其中所有核心 Ansible 产品都以 Ansibull 为特色，并具有粗线条和鲜艳的色彩。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

新的 Ansible 社区徽标设计风格指南详细介绍了 Ansible 产品徽标的调色板、排版、尺寸、间距和徽标变体。

新的风格指南介绍了一种全新的、现代的自定义字体，该字体基于 Grilli Type（一家独立的瑞士字体铸造厂）的 GT America。我们通过将每个字母的某些角变圆，为字体创建了更柔和的外观，以匹配图像的圆润度。

我们决定通过在光谱中融入更多颜色并将它们基于原色，来策划一个更生动、更饱和和更通用的调色板。新调色板的特点是浅蓝色、黄色和粉红色，每种颜色都有较浅的高光和较深的阴影。更广泛的颜色范围允许系统内更大的灵活性，并引入 3D 外观和感觉。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

我们还引入了新的图像，例如 Receptor 和 AWX 徽标中的六边形，以实现视觉连续性。最后，我们确保每个徽标在浅色和深色背景下都能工作，以实现最大的灵活性。

扩展设计组合

一旦我们建立了核心徽标家族，我们就开始为 Ansible 服务创建徽章，例如 Ansible Demo 和 Ansible Workshop。为了区分服务和产品，我们决定将服务图形封闭在一个圆圈中，该圆圈包含相同自定义排版的服务名称。新的服务徽章显示了小 Ansibull（来自 Ansible Builder 徽标）完成与每个服务相关的任务，例如指向 Ansible Demo 的白板或使用 Ansible Workshop 的构建工具。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

使用开源进行设计决策

最初的 AWX 徽标受到摇滚乐图像的影响，例如翅膀和重金属字体（此处图像中省略）。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

Ansible 社区的几位成员，包括 Red Hat 多样性和包容性小组，提请我们注意，这些元素类似于仇恨团体使用的图像。

鉴于原始徽标图像的社会影响，我们必须与 Ansible 社区快速合作，设计一个替代品。与我们最初为徽标所做的那样在孤岛中工作不同，我们扩大了项目的范围，以仔细考虑更广泛的利益相关者，包括 Ansible 社区、Red Hat 多样性和包容性小组以及 Red Hat 法律团队。

我们通过联系 Ansible 开源社区征求想法开始了头脑风暴。Ansible 工程师之一 Rebeccah Hunter 在草图阶段做出了贡献，后来成为我们设计团队的嵌入式成员。让一大群利益相关者参与其中的部分挑战是，我们对新的徽标概念有各种各样的想法，从辅助电缆到拉面碗。

我们绘制了五个社区提出的徽标草图，每个草图都具有不同的品牌视觉效果：豆芽、火箭、显示器、拉面碗和辅助电缆。

图片来源

^{(Fiona Lin 和 Taufique Rahman, CC BY-SA 4.0)}

在完成这些初始概念草图后，我们建立了一个虚拟投票机制，我们在整个迭代过程中都使用了该机制。这个投票系统使我们能够使用社区反馈将最初的五个概念缩小到三个：火箭、拉面碗和显示器。我们进一步迭代了这三个方向，并通过专门用于此工作的 Slack 频道反馈，直到我们最终确定了一个方向，即 AWX 显示器，该方向与社区的愿景相符。