它们是简化团队设计方法的关键，也是赋予设计师将品牌的全部精髓带入生活的关键一半的设计专业人士比如说他们的公司已经在使用一种设计系统。

设计系统可以为产品和网页设计带来新的一致性和可扩展性，但前提是团队完全一致，他们是什么，为什么他们很重要，以及他们应该如何构建。欧宝体育在线首页

什么是设计系统?

设计系统是不断发展的可重用组件、原则和指导方针的集合，为设计师和工程师提供了一致的产品和网页设计的共享语言。欧宝体育在线首页

将设计系统等同于模式库或样式指南是一种常见的误解。这些元素当然是整个系统的重要组成部分，但它们只是一个更健壮的整体的关键部分。设计系统的真正价值在于，它能够为设计师和工程师提供创造更流畅的用户体验和数字产品所需的指导。欧宝体育在线首页优秀的设计系统可以帮助设计师理解制作什么以及如何制作，但它们也提供了设计背后的基本原理和动机。

设计系统中应该包含什么

设计系统中没有标准的组件列表，但最有效的设计系统往往具有以下共同的元素:

• 设计原则或者是驱动你的设计团队的规则和价值观。例如，当Quartz在2014年重新设计其网站时，他们的团队基于设计原则，如“远离用户”，“让故事发光发亮”，“确保它适用于手机平台”。设计原则因公司而异，它们很可能反映品牌的核心价值。
• 设计模式库或者是已批准的常用模式的中央存储库。根据交互设计基础在美国，模式是“多个设计元素相互协调工作的重复”。这些元素可以是形状、线条、颜色等。
• UI工具包/组件库或者一组以ui为中心的组件，如按钮、小部件等。这些资产允许团队更快地创建一致的、ui友好的设计。
• 设计过程指南，帮助设计师在执行任务时解释设计原则。
• 易访问性元素和指南或关键规则和建议，帮助团队创建更易于所有用户访问的设计，并符合网页内容无障碍指引．

设计系统的好处

建立一个有价值的设计系统有三个主要的好处:

1. 它为产品和网页设计带来了一致性。欧宝体育在线首页一致的方法不仅让你的团队更容易工作，而且还有助于建立品牌认知度，为客户创造更好的体验。24.5%的受访者在a2019年Lucidpress调查报告“不一致的品牌会在市场上造成混乱”，18.6%的人表示，不一致可能会损害品牌的声誉。通过一致的设计减少混乱，提高你的品牌声誉。
2. 它支持跨职能协作。一个好的设计系统可以帮助你告别操作孤岛。通过全面的设计和执行方法，您的设计和产品团队可以在每个新项目上从头到尾紧密协作。欧宝体育在线首页
3. 它提高了设计的速度和可伸缩性。设计系统可以减少重复工作——比如重复创造相同的元素和概念——所以你的团队可以更快地行动，并伸展他们的创造性肌肉。

建立设计系统的4个基本步骤

当您准备为您的组织构建设计系统时，需要遵循四个基本步骤。

1.审核现有产品欧宝体育在线首页

仔细检查你的产品，检查所有前端设欧宝体育在线首页计元素。在此基础上，您可以构建UI组件和视觉元素的目录，它们将构成设计系统的基础。此外，您可以识别可能出现的任何不一致，并为将来做出适当的设计决策。

2.定义你的设计语言

就如何看待你的产品建立清晰的原则，并制定如何将这些原则付诸实践的指导方针。欧宝体育在线首页设计原则为你的产品布局品牌愿景，包括你希望客户在使用它时的感觉。欧宝体育在线首页你想让顾客感到平静吗?兴奋?好奇吗?你想让你的品牌给人友好的感觉吗?古怪吗?脑吗?你的设计系统应该展示你如何让客户对你的设计有你想要的感觉。

您为整体设计系统选择的视觉设计语言包括调色板、排版、图标和图像的指导方针。这些元素一起工作，创造你的品牌的感觉-并灌输给你的客户想要的情感。

3.构建公共设计元素的模式库

您的模式库是一个可重用UI组件的集合，它将简化未来的设计。

有两种主要类型的模式——功能模式和感知模式——它们共同构成设计的构建模块。根据通过工作室“功能模式定义了你的设计结构，比如后端布局，而感知模式定义了版式、间距、交互等视觉效果。”这些模式共同形成了一个结构合理的库，能唤起适当的情感和品牌美学。

4.关于如何以及何时使用设计元素的文档指南

如果没有关于如何以及何时使用设计元素的明确指导方针，就没有真正的设计系统——相反，您只有元素和库的集合。在创建设计系统时，一定要记录团队如何有效地使用和维护它的共享实践。需要纳入文档的关键指导方针包括以下说明:

• 团队成员如何为设计系统做出贡献
• 如何报告设计系统的问题
• 团队计划如何解决持续的维护问题
• 您将如何管理设计端和生产代码端之间的一致性欧宝体育在线首页

明确的指导方针和建议可以让团队更快更有效地工作。

构建设计系统时常见的挑战

构建一个设计系统并不容易，有一些常见的挑战会导致许多计划失败:

选择起点

设计系统计划的范围可能是压倒性的，并且很难知道从哪里开始。如果你没有一个明确的攻击计划，领导者可能不会接受这个过程。这就是为什么它有助于概述你的方法，并在开始之前知道你计划从哪里开始。

组织团队

在早期阶段，你需要组建合适的设计师和工程师组合来支持计划并推动它向前发展。不要邀请太多厨师进入你的厨房——从一个你信任的核心团队开始，他们的工作将倡导设计系统。

管理文档

关于如何使用设计系统的各种元素的清晰文档可以节省团队时间并确保一致性。然而，管理文档可能是一个挑战。在开始时，请确保不要将代码库与文档分离，因为这可能导致重复工作和不一致，从而破坏整个设计系统。

弥合从设计到开发的差距

您的设计系统可能看起来和感觉起来很漂亮，但它也必须易于工程师实现。从UI设计师到工程师的交接是暴露设计系统缺陷的一个常见摩擦点。在构建系统时，一定要把最终用户(包括工程师和客户)放在首位。您可以将设计系统构建为工作流的一部分没有代码环境。例如，当你在Webflow的样式管理器中改变一个按钮的颜色时，这种改变会在后台波及整个CSS，也会改变其他具有相同类的按钮——这是你的设计系统在起作用。

为灵感设计系统示例

从概念正确的例子中获取设计系统的灵感。

Atlassian

Atlassian的设计系统经常被引用为范例，并且有充分的理由:它包含了设计团队可能需要的一切，从组件和模式库到对Atlassian品牌、风格基础和内容的深入洞察。

Salesforce

Salesforce的防雷设计系统把公司的设计原则放在前面和中心。该系统易于搜索，并提供了所有必要的资产和组件，以及文章、下载和常见问题解答，因此设计人员可以高效地工作。

GOV.UK

Webflow团队的最爱GOV.UK设计系统清晰、简洁、全面。该系统强调其社区焦点，并鼓励新组件和模式的贡献。这反过来又有助于设计过程的民主化。

谷歌

Webflow团队的另一个最爱，材料设计，使事情简单明了。该系统分为三个主要部分:原则、组件和主题，帮助谷歌产品的设计师了解其设计背后的思维过程，了解何时使用各种组件，并学习如何适当地定制设计。欧宝体育在线首页

Shopify

Shopify北极星提供实用指南，帮助设计师开始为Shopify设计所需的一系列任务。该系统还包括内容和设计指南，以及创建shopify特定体验的组件库和指南。

最好的设计系统总是在不断进化

好的设计系统是动态的实体，可以无缝地适应公司的增长和变化。设计系统的真正魔力在于最大限度地减少为产品带来活力的设计师和工程师的重复工作。欧宝体育在线首页这就是为什么设计系统的未来在于无代码——一个融合了设计师和工程师角色的环境，消除了传统切换的摩擦。