技术领导者，例如 谷歌, IBM, Salesforce 依靠设计系统来编纂和扩展整个组织的设计工作. 但设计系统并不仅仅适用于大牌: 65%的公司 Forrester在2020年进行的一项调查显示，他们使用手机.

本质上， 设计系统 帮助跨组织团队(从设计人员到开发人员)创建一致的一组模式和实践吗, 无障碍数码产品. 有不同的 模型，但大多数由模式库组成， 设计令牌，品牌和风格指南，以及如何使用系统的文档.

设计系统的好处是双重的. 第一个, 他们加快了产品开发的每一个阶段, 从概念和设计到生产和测试. 在2019年 实验, Figma发现，有系统的设计师完成任务的速度比没有系统的设计师快34%. 第二个, 设计系统通过确保一致性来改善客户体验, 熟悉, 以及每个接触点的可访问性.

最近的另一个 用户界面设计师 我花了一个月的时间为一个领先的电子商务网站建立一个设计系统，该网站向中东各地的母亲提供婴儿用品. 利用我为这个网站和应用程序(我称之为“婴儿产品网站”或“婴儿产品应用程序”)构建设计系统的经验，我将阐述设计系统如何使团队能够改进产品并提高效率.

设计系统加快了设计和开发周期

设计系统通过编纂可大规模复制的设计决策来节省组织的时间和金钱. 让我们具体分析一下这些系统如何支持更快的设计和开发周期, 以及如何充分利用你的设计系统.

一个流线型的设计到生产工作流程

在婴儿产品网站上，在我们实施一个新的设计之前，它要经历一系列的阶段. 首先，设计师制作原型并将设计交给用户体验研究人员进行验证，或者 α测试. 接下来，我们与涉众分享原型. 然后我们将更新推送给一小部分用户，并通过a /B测试跟踪更改的结果. 这个学习周期, 也被称为beta测试, 重复，直到我们得到足够高的成功指标. 我们可以对一个设计进行五种以上的修改, 在这些阶段中放弃其中的许多，以加快找到最佳解决方案.

这些步骤对于确保我们只向所有观众推送高质量的作品至关重要. 然而，任何有多个参与者和迭代的过程都是耗时的.

设计系统简化了工作流程的各个阶段. 设计师可以在几分钟内制作屏幕原型, 而不是小时, 因为他们可以快速搜索组件和模式，然后将它们拖放到屏幕上. 不同团队的设计师可以在任何新项目中访问共享的组件和样式. 工程师可以快速组装新的功能，而不需要 视觉设计师 来布置每个屏幕. 例如，工程师可以在像 故事书, an 开源 建筑工具 UI组件 和单独的页面. 将这种效率在组织中的设计和开发团队之间相乘，可以转化为业务的实际价值.

在你的设计系统中, 将每个模式与高性能和生产就绪的代码链接起来，可以更好地促进实验和更新. 开发人员应该从一开始就参与构建设计系统，并且可以创建各种方法来将设计和模式分发给团队. 这个资源提供了一个清单 为设计师和开发人员帮助他们一起创建一个设计系统.

精简的产品开发意味着公司可以推出产品, 测试, 并且更快地迭代新功能, 这是一个巨大的竞争优势吗.

减少冗余

设计解决方案 必须制作原型, 通过用户验证, 经利益相关方批准, 翻译成代码, 并且对现有设计进行了测试，因此过程中的任何冗余都是浪费时间, 人力资源, 和金钱. 没有中央存储库来引用过去的工作, 设计师和开发人员必须反复解决相同的问题，并重新创建已经存在的解决方案.

的作者Alla Kholmatova 设计系统, 注释:“设计师总是在解决同样的问题时感到沮丧, 或者不能正确地执行他们的设计. 开发人员已经厌倦了为每个组件定制样式和处理杂乱的代码库.”

设计系统的模式库是按功能编目的. 每个功能都应该映射到一个生产就绪的模式. 在产品中出现该功能的任何地方，都可以应用该标准化模式. 标准化消除了设计人员和开发人员一遍又一遍地重新创建类似解决方案的需要, 腾出时间来专注于尚未有标准化解决方案的新问题. 我们的模式库基于 原子设计这是一种众所周知的创建设计系统的方法.

有一次我们为婴儿产品应用程序设计了一个系统, 我可以专注于更有影响力的设计问题, 比如创建新的用例, 进行 用户测试，以及重新访问或创建新的用户场景.

从代码到用户的共享语言

当你让设计人员和开发人员在组织中同时从事产品开发时, 用于引用设计的共享语言对于促进协作至关重要. 共享语言由术语组成, 短语, 命名规范有助于跨职能团队谈论公司的产品并简化设计决策. 的 术语表 谷歌的材料设计 3是一个很好的例子，它是一种易于团队访问和理解的共享语言.

简单地创造一种语言并将其强加给团队是不可能成功的. 相反，最好从所有利益相关者那里获得意见. 当贡献来自整个组织时，共享语言是最有效的. 例如，我们严重依赖产品设计师的意见， UI设计人员, 前端开发人员, 后端开发人员, 内容设计师, 质量工程师, 可访问性专家, 和其他人.

你可以通过一些创造性的方式鼓励对设计系统的贡献. Atlassian的 设计原则和开源贡献模型提供了这样做的有效示例. 例如, 它的原则之一是通过优先考虑包容性来促进团队之间的协作, 可访问性, 以及产品的开放性. 一个健壮的设计系统应该包含并建立基于公司特定需求的原则. 想要获得灵感，看看这些 195个原则例子 来自知名品牌.

设计系统促进更高质量的产品和更好的用户体验

构建设计系统的过程允许您考虑每个模式和实践如何帮助实现产品的目标. 为了支持 电子商务用户体验 在婴儿用品网站和应用程序, 设计系统的每个元素都旨在减少多任务妈妈的认知负荷, 让玩家尽可能容易地找到并购买道具, 并确保可供购买的产品是可访问的，并根据用户的位置进行个性化.

天衣无缝，令人愉悦 用户体验 帮助建立客户信任，提高他们在网站或应用程序上向他人推荐产品的可能性. 这些都是一些设计系统的好处，你可以带给你自己的客户, 以我自己在婴儿用品网站上的工作为例.

一个熟悉和直观的UI

在创建设计系统之前, 婴儿电子商务网站和应用程序缺乏每个功能的标准化模式和行为. 这意味着用户每次想要做同样的事情时都必须学习(或重新学习)一种新的模式, 例如在选择类别筛选器时.

以下是不同婴儿产品类别(如“婴儿车”)的过滤选项示例,”“户外,和“护理”)在应用程序和移动网站上. 每个过滤器选项的外观和工作方式都略有不同, 创造一个脱节, 这些渠道的感觉不一致. 例如, 一些过滤屏幕包括用户按下的按钮, 其他的则是可以切换的选项卡. 有些有图像来表示产品类别，而另一些只有文本. 用于分类的术语也各不相同(例如“护理”与“护理”). “母乳喂养必需品”). 对于用户来说，学习新模式的行为是一种认知负担, 导致令人沮丧的经历.

我们根据谷歌原始版本中的UI标准重新设计了模式库 材料设计 和IBM的 碳设计系统. 我们选择Material和Carbon 设计，因为它们反映了我们的目标，即向用户展示一个简单而无缝的界面来完成他们的任务.

这种方法允许我们用全局公认的标准来标准化每个组件的行为 用户界面标准 在核心. 除了创建整个站点的一致性之外, 实现以用户已经熟悉的方式运行的设计模式可以减少他们的认知负荷. 结果是, 当用户第一次访问时, 这个网站给人一种可预测的感觉, 熟悉, 并且易于使用.

为了创造这种直观的UI体验，避免重复发明轮子. 虽然这种标准化乍一看似乎很有限, 正是这些组件的组合和样式提供了竞争优势.

提高产品品质

在我们开发设计系统之前, 婴儿用品网站有184种独特的颜色和299种背景颜色. 这创造了混合的视觉信息和分散的品牌感觉, 哪些会降低产品的感知质量. 尼尔森诺曼集团 笔记“对设计的某些方面的负面情绪反应会降低网站的感知价值，并使人们在几秒钟内放弃网站.”

设计系统可以帮助产品团队定义和标准化视觉元素，比如颜色, 排版, 间距, 和图像. 这些元素表达了你品牌的核心和灵魂，形成了一种视觉语言. 良好定义的视觉语言可以提高产品的感知质量.

我们对婴儿产品网站的目标是让它对忙碌的妈妈们有吸引力和易于使用, 我们建立了一个感觉优雅的调色板, 新鲜的, 受到大自然的启发. 创建我们的设计系统使我们能够选择颜色来塑造客户对产品的可靠感知, 可伸缩的方式. 当然, 指导如何以及何时使用调色板中的颜色以及如何不使用它们是必不可少的. 这 例子 牛津大学的数字风格指南展示了该指南可以提供的细节水平.

良好定义的视觉语言也可以提高产品的实际质量, 通过速度和性能来衡量. 我亲眼看到了这一点:旧婴儿用品网站上的数百种独特颜色中的每一种都代表了浏览器必须加载的一段代码. 每一个都引入了bug或错误的可能性. 加载时间和bug影响了网站的速度和性能. 在实施了新的设计系统之后, 我们的结帐页面加载速度从4到6秒变成了2秒.8秒. 当一种设计及其相应的代码被标准化时，这可以导致更轻， 执行网站更不用说代码中的bug和中断了.

同样，设计系统也能提高产品的质量 交互元素. 在系统之外设计交互使得它很难在产品的其他地方复制. 在设计系统中, 然而, 这些交互(以及它们对应的动画和属性)被定义并分配给主组件. 因此，无论您在产品中使用特定的组件或交互，它的行为都是相同的. 这样，开发人员和产品经理就可以在迭代过程中看到交互是如何工作的. 您不需要花时间向他们解释每个用例的交互.

这一点特别有用，因为一些组件的大小取决于它们在模板中的位置以及它们在模式中的行为. 设计系统允许您轻松地查看相同组件在不同模式下的行为和外观.

从一开始就优先考虑可访问性

据估计, 全世界15%的人 有残疾. 甚至更多的经验 暂时的残疾或情境限制比如在明亮的阳光下看不见屏幕. 全球产品可访问性的另一部分是本地化——确保内容适合本地上下文, 包括但不限于语言翻译. 设计系统允许产品团队将易访问设计和本地化集成到每个模式中.

首先了解你的用户以及他们在使用你的产品时可能面临的具体挑战是有益的. 对于我们的妈妈们，我们知道95%的用户通过手机浏览和购物. 他们经常在晚上9点或10点购物，那时他们的孩子已经睡着了, 手机的亮度也会降低. 这就是为什么我们在设计系统中加入了高色彩对比等易访问性功能.

设计系统也帮助我们从一开始就进行本土化. 我们使用 国际化最佳实践 确保真正的跨文化体验, 包括灵活的设计，不同的语言长度和字体大小, 从右到左的语言支持, 以及对当地货币的支持, 单位, 日期, 时间和地址格式. 我们的用户体验编写者通过高质量的翻译确保我们在每种语言中都有一致的声音. 除了, 我们一致认为，每个团队都应该为支持本地化做出贡献, 我们把它嵌入到所有新功能的发布中.

在构建设计系统时，应该将模式坚持到 网页内容易读性指引 确保所有设计从一开始就优先考虑可访问性. 例如，测试以确保您的产品与 辅助技术. 我的团队从 易趣思维模式，其中提供了构建可访问组件的指导方针 电子商务 网站.

设计系统的持久效益

设计系统通过编纂可大规模复制的设计决策来节省组织的时间和金钱. 这些系统的一个关键目标是防止工作重复，从而导致 以高效率的速度进行高质量的工作. 效率的提高创造了令人满意的工作体验 设计师 对开发人员来说，因为他们可以专注于克服重大的设计挑战，而不是重复地解决相同的问题. 设计系统还通过确保一致性来改善客户体验, 熟悉, 以及每个接触点的可访问性.

根据我的经验，创建电子商务设计系统非常值得花费时间和精力. 有了这个应用程序, 我们看到了切实的好处——更快的设计和开发周期, 页面加载时间, 结账速度——强调了它的持久价值.