我们在创建设计系统方面的方法和经验

      我们已经为企业规模的客户和小型公司创建了设计系统——我们的方法和流程基于我们的经验和迄今为止遇到的问题。设计系统最近是一个非常热门的话题，在它们的创建和开发方面，还没有建立全球标准。

      这就是为什么我们要展示我们如何处理这个主题。

      在这篇博文中，我们想分享一些关于创建设计系统的见解。你将学到如何：

• 开始构建设计系统
• 构建设计库资产
• 结构文件

探戈需要两个（或更多）

      建立合适的团队至关重要。

      一方面，我们需要有UX 技能的人；另一方面，我们也需要一个更懂 UI 的设计师。显然，我们可以找到一个在这两个领域都有专长的独角兽，但她或他很快就会成为瓶颈，因为这些项目很复杂。

      设计系统由几个元素组成：

• 设计库——它是 UI 元素的存储库。
• 文档 - 与设计库链接。文档通常包含一些设计组件的代码片段，这与静态样式指南相比有很大的不同。

      要创建一个 设计系统，您至少需要一名设计师和一名开发人员，但是，正如我们上面提到的，这可能效率低下。这项任务将花费太多时间，而且只有两个人会感到筋疲力尽。

参与设计系统创建的人越多，结果就越好。

      根据我们已完成的项目，一个最佳规模的团队应该由五个人组成。分解这个数字，您需要四名具有不同专业知识（2x UI、2x UX）的产品设计师和一名开发人员。现在这个比例是四比一。这个数字可以扩大，因此对于更复杂的设计系统，您可以有八名设计师（例如，包括插图和动画）和两名开发人员。

      对于 高级设计系统的示例，我们可以查看 Atlassian 使用的系统。

Atlassian 设计系统

      他们涵盖了产品的各个领域：

• 颜色
• 插图
• 成分

      在这样的产品组合中拥有大量产品需要统一的指导方针。核心设计元素现在更容易访问并在整个产品中保持一致。

      我们希望您现在了解为什么企业可以从拥有设计系统中获益。

选择正确的团队模型

      确保为您的任务召集合适的人应该是您的第一步，与经验丰富的开发人员和设计师合作不仅很重要。还应该有一个设计系统协调员，负责指导和监督项目，以及一个了解品牌身份、使命和目标并可以检查其他团队成员是否将其纳入设计的人。

      即使团队成员之间的工作实践和利益冲突可能存在差异（尤其是在开发人员和设计人员之间通常采用不统一方法的情况下）——请记住，拥有多种观点可以用于富有成效的工作方式。它将使最终产品更加通用和特别适用。

      设计库团队应由用户界面、插图和动画设计等领域的专家组成。

      文档团队应该由在用户体验、研究方面具有专业知识的设计师以及擅长编写设计组件的 前端开发人员组成。

      在我们的试错期间，我们苦苦挣扎，因为我们的设计库经常因同步问题而损坏。

      我们建议选择一个负责更新主库文件的人（库所有者）。换句话说，一个设计师应该从团队的其他人那里聚合所有批准的设计组件，并将它们合并到设计库文件中。它允许团队对库进行更好的版本控制。

      让一个人负责检查所有内容——这将减少信息蠕变，因为团队的其他成员将知道存储库只有一个所有者。团队的其他成员应该将他们的需求和有关组件库的问题告知库所有者。

      我们在 Google Drive 上保留了一个主库文件，并将Sketch链接到该库。它现在对我们很有效——但当不止一位设计师被允许进行更改时，它就不行了。这种团队模式被称为“孤独”。

语言的意义

      虽然工作量应该在各个员工之间分配，但只有当有一个清晰的愿景将设计的所有特定部分统一起来时，实现的效率才会实现。真正将整个开发结合在一起的因素是贯穿整个项目的相互视觉语言——正如设计系统一书的作者所说：“语言是协作的基础。

      如果您在团队中工作，您的设计语言需要在参与产品创建的人员之间共享”[ Alla Kholomatova-'Design Systems'- Smashing Magazine ]。因此，为了传达和谐的信息，应考虑保持一致对齐的关键元素是： 颜色、版式、图像、运动和空间。

      这些组件在品牌推广方面尤为重要。因此，应该以某种方式创建设计系统，以某种方式设法在一组随时可用的系统化模型中提供反映品牌标识的定制。

如何开始

      一旦找到合适的团队来完成任务，就该启动项目了！

      由于公司之间的需求各不相同，我们假设您已经构建了至少一种数字产品。我们建议做的第一件事是列出需要包含在设计系统中的所有元素。您可以使用便利贴和白板，或使用像我们这样的工作表：

清单摘录

      然后您需要根据使用情况确定项目的优先级。

      在码堆科技，我们分配的优先级点数从 0（强制）到 3（多余）。

      您还可以使用Nathan Curtis 在 medium 上的文章中的工作表。

如何确定组件的优先级

      为了避免感到不知所措的风险，设计过程的下一阶段应该确定系统的实际类别，其中可能包括 ：视觉语言、UI 元素、组件和模式以及模板和布局。为了使事情变得更容易，您可以将它们分解成更小的颗粒，让您的团队选择他们眼中最重要的颗粒。

      应彻底检查与用户交互的每个组件。例如，我们可能有密码输入字段（需要多级验证）、标准字段、文本区域、PIN 提示等。他们每个人都应该在视觉、行为、用法和解剖学方面受到很多关注。

      这是保持组件一致并最终获得成功产品的唯一方法。 “好”和“好”的区别在于细节。

      一旦您创建了组件列表并确定了它们的优先级，您就可以将这些项目分配给相关的冲刺。就优先事项得出明确的结论应该是小组审议和谈判的最终目标。

      根据团队的规模，示例路线图可能如下所示：

      与此同时，另一位设计师可以开始构建或简单地收集产品原则或视觉语言元素，如品牌指南、颜色、排版和网格。

      让我们以网格为例——在我们看来，在开始时引入网格单元可以加快后期的设计过程。例如，在为移动设备设计时，建议 您在 8px 网格上布置设计。

      因此，我们可以假设 1 个网格单元 (gu) = 8px。它的好处之一是跨各种设备尺寸的间距一致性和可扩展性。更不用说节奏了，它是正确使用网格的额外奖励。

      理想情况下，另一位设计师可以同时开始建立用于描述元素的文档模板。该模板应包括箭头、线条、标尺、数字和标题，稍后将用于创建文档。

文档摘录：组件和布局的剖析

      随着设计系统越来越大，很容易陷入文档不一致的陷阱。拥有设计系统的主要目标之一是减少公司数字产品中的不一致，因为不一致的设计系统是无用的。

      为避免不一致，建立一个将图形和屏幕截图连同文档模板上传到文档的标准流程。

      例如 - 所有视觉示例都应以 @2x 导出，具有相同的边距，并正确命名。此外，请记住将所有资产保存在一个地方（我们使用 Google Drive），以防团队中的新成员需要访问权限。

把它们放在一起

      正如我们最初所说，设计系统是模式库和文档的组合。您应该最终拥有一个设计库，其中的所有组件都放在文件中。模式库是设计库团队完成工作的最终成果。

Shopify 的设计系统— Polaris（Sketch 文件中的设计库）

      一旦设计了组件，文档团队将能够创建必要的描述并提供组件的结构（例如边距、高度、宽度）。

      结构取决于产品的终端平台。如果产品同时提供桌面和移动设备，则还应涵盖一些断点和视口规则。

进一步保养

      为了跟踪我们的进度，我们使用看板并在双周冲刺中工作。

      其余的与敏捷方法保持一致：我们每天都会进行状态通话，我们会互相告知前一天做了什么、我们今天的计划是什么以及潜在的障碍是什么。

      我们每两周进行一次彻底审查，并逐一检查所有新的和修订的组件。整个团队都出席了这些电话会议，因为每个人都以某种方式做出了贡献——创建的路线图充当指南。某些元素可能处于第二次甚至第三次迭代中，因为在开发过程中会出现新问题。这很正常！产品设计过程永远不会结束。

      由于设计系统是有生命的“存在”，因此它们永远不会真正“完成”。

不要忘记内容

      如果我们都同意设计系统应该是一个可重用的框架，可以满足多样化的需求，那么在构建这些系统的过程中，我们应该考虑到它们最终会充满内容，并且需要毫不费力地使用它们尽管内容多样化。

      尽管内容的特征及其信息在主题差异和类型（短文本、长文章、照片、视频等）方面发生了变化，但给定安排的实用性不应受到影响。同时，它应该提供对上述所有类别的适当曝光。

      总之，由于设计系统是一种非常有价值、方便且高度实用的工具，它以标准化和自动化的方式构建在线界面，具有众多无可争辩的优势，因此应该确保其生产过程的质量尽可能高一个重要的目标。这一点尤其重要，因为通过应用模块化来加快工作量来利用它们可以增加运营能力并加速商机，从而直接影响盈利能力。

关于人民

      一些专家相信，可以使用原子设计方法来处理设计系统，在这种方法中，我们仅将它们视为各种规模和级别的构建块——这似乎是一个非常有吸引力和简化的愿景。

      其他人则声称设计系统不仅是剪裁出来的现成模块，您无需 进一步分析就可以自动将其应用于任何网页。尽管创建它们是为了扩展、轻松应用和调整，但归根结底，参与其中的人应该始终是关注的焦点。这包括潜在的网站所有者——他们的目标、期望和需求，以及明显假设的用户以及他们的动机、目标和预测的行为。

      回答那些紧迫的问题可以顺利地引导我们设计系统的方式——哪些组件是不可协商的，它们的层次结构、位置和安排应该是什么。此外，通过预测用户需要参与的潜在路径和步骤，并通过创建理论设置和场景，我们可以清楚地了解系统组织和特征。

要点

• 设计系统由两个部分组成：设计元素库和文档。
• 首先列出需要包含在设计系统中的所有元素。
• 按用途确定元素的优先级，并为第一个冲刺分配项目。
• 从视觉语言开始：颜色、排版和网格。
• 引入网格单元（例如，在为移动设备设计时 8px = 1gu）。
• 创建将描述元素（箭头、线条、标尺、数字、标题）的模板。
• 设置一个标准流程来上传文档的图形和屏幕截图。
• 将文档中的图形和屏幕截图的源文件提供给所有人。
• 选择一个负责更新主库文件的人（设计库所有者）。
• 团队的其他成员可以为图书馆做出贡献，但他们需要先联系图书馆所有者。
• 团队的其他成员应该将他们的需求和有关组件库的问题告知库所有者。
• 将主库文件保存在 Google Drive 上，并将该库与 Sketch 链接起来。
• 进行备份并跟踪文件版本。
• 使用 Google 表格、Jira 或其他跟踪软件跟踪进度。
• 召开每日会议，相互更新前一天做了什么、将要做什么以及潜在的障碍是什么。
• 创建文档结构。
• 保留主库的变更日志。
• 经常与利益相关者沟通，让每个人都参与项目。
• 在 Slack 频道上创建一个包含所有重要信息和链接（到库、UI 等）的注释。

      设计系统可能是一项极具挑战性的工作，需要经验丰富的人员才能交付高质量和可用的输出。

目标是拥有一个遵循明确标准的可重用组件库，以便设计人员和开发人员能够构建连贯的数字产品。

      请记住—— 您的设计系统将不断发展、变化并需要更新，但这仍然比从头到尾向新人解释整个事情要快。

      作为公司中每个人都可以获得的单一事实来源，设计系统允许员工在同一页面上并保持在循环中。