业务应用的设计系统与界面一致性：从令牌到被维护的组件

许多业务应用就像由不同的人分阶段盖起来的房子。第一个页面由一个人做，下一个功能由另一个人做，月底前又有紧急的补充。结果是按钮颜色和大小各异，术语不统一，表单的行为从一个界面到另一个界面不断变化。

对用户来说，不一致带来的是疲惫。他们不得不一再猜测这个按钮是什么意思，那个菜单在哪里，以及为什么一个页面的错误提示和另一个页面不一样。对开发团队来说，不一致意味着重复劳动：每个新界面都从零开始。

设计系统就是答案。它不只是一堆漂亮的图片，而是关于整个产品所用的颜色、字体、间距、组件和行为的共同约定。本文介绍它包含什么，为什么连小企业也需要，如何在不耽误其他工作的情况下起步，以及如何维护它，使其不沦为被遗忘的文档。

摘要

• 设计系统是关于界面外观和行为的共同约定
• 好处：用户更快理解，团队更快工作，质量更有保障
• 从最常用的元素小规模开始，而不是一次建好全部
• 把它当作需要维护的产品，有负责人和变更规则
• 从一开始就考虑无障碍，让组件人人可用

设计系统究竟是什么

设计系统有若干层次。最基础的一层是称为设计令牌的视觉元素：调色板、字体族、字号比例、间距、圆角和阴影。有了令牌，像主色这样的决定只需写一次、到处使用，改动时只需改一个地方。

下一层是组件：按钮、输入框、卡片、表格、对话框、通知和导航菜单。每个组件都有变体和状态，例如正常、高亮、禁用和错误。最上层是模式：如何组合组件来完成常见任务，例如注册表单、带搜索的列表或确认流程。

最后是写作与行为指南：语气、按钮命名、如何显示错误信息，以及何时使用对话框等规则。这部分常被忽视，但恰恰是它让产品感觉像出自同一个团队之手。

为什么连小企业也需要

有种看法认为设计系统只属于拥有几十位设计师的大公司。实际上，小团队更能强烈感受到它的好处，因为每个工时都很宝贵。小团队没有时间第五次重做按钮，也没有时间争论哪种蓝色才对。

• 用户只学一次，就能顺畅使用整个应用
• 开发者用现有组件拼装新界面，而不是从零开始
• 品牌或外观的变更可以在整个应用中一次性应用
• 减少因每个人理解不同而产生的视觉缺陷
• 更容易让新团队成员或外部供应商上手
• 产品变大时质量保持稳定

它还影响成本。重复的工作就是付了两次钱的工作。设计系统把一部分界面工作从一次性项目变成可持续复用的资产。

产品已经需要它的迹象

• 有许多看起来相似但并不完全相同的按钮或标题变体
• 不同部分的表单使用不同的布局和错误信息
• 开发者反复向设计师询问细小的问题
• 一个简单的改动，比如更换主色，需要在几十处修改
• 网页应用和移动应用像是两家不同公司的产品
• 用户常因行为不一致而误点或困惑

如果出现上面两三项迹象，一个简单的设计系统很快就会收回投资。拖得越久，需要重新整理的界面就越多。

如何在不中断其他工作的情况下起步

常见的错误是一上来就做持续数月的大项目，而在此期间没有任何一个界面使用它。更健康的方式是与产品共同成长：收集现有的东西，达成一致，然后在后续工作中使用。

1. 01盘点：截取所有主要页面，并把相似的元素归类
2. 02确定基础令牌：主色、辅助色、字体、字号和标准间距
3. 03挑选十个最常用的组件，先整理它们
4. 04简要记录：何时使用、何时不用，以及使用示例
5. 05应用于新功能，再在触碰旧界面时逐步更新
6. 06指定负责人，由其决定变更并保持一致性

对于没有全职设计师的企业，以成熟的组件库为基础，再调整颜色和字体，往往比从零搭建更合理。重要的是一致性和与需求的契合，而不是每个组件的原创性。

业务应用中最常用的组件

业务应用不同于营销网站。里面充满数据、表单、表格和重复操作。因此最有价值的组件，是能高效支持这类工作的组件。

表单与输入框

表单是业务应用的核心。统一标签、辅助文字、必填项标记，以及错误的显示方式。错误信息应说明哪里不对以及如何修正，而不是仅仅说输入无效。行为一致让用户更快完成表单，也更少出错。

表格与数据列表

表格显示大量信息，并需要设计决策：哪些列可以排序，搜索和筛选如何工作，如何进行批量操作，以及在小屏幕上如何显示。一次决定，然后用于所有列表，让用户不必每次重新学习。

反馈与系统状态

用户需要知道发生了什么：加载中、保存成功、失败或为空。把这些状态设计成组件的一部分，而不是事后补充。解释下一步的空状态，比没有任何说明的空白页面有用得多。

把无障碍作为基础的一部分

设计系统最大的好处之一，是无障碍只需构建一次，就能被每个界面继承。如果按钮组件已具备足够的颜色对比度、可见的键盘焦点和合适的触控尺寸，应用中的每个按钮自动就具备这些。

反之，如果把无障碍留给每位开发者，结果参差不齐。对照常见需求检查基础组件：文字对比度、键盘导航、屏幕阅读器标签，以及放大后仍可阅读的文本。在组件层面修复，比在数百处修复便宜得多。

网页与移动端使用同一种设计语言

如果你的企业既有网页应用又有移动应用，设计系统可以让两者感觉像一家人。相同的令牌，如颜色和字体，可以在两个平台间共享。组件在技术上不必完全相同，但其行为应当可预测。

也要尊重平台的习惯。安卓和 iOS 用户对导航有不同的期待，把一种模式强加给所有平台，往往让应用显得陌生。好的设计系统会区分必须相同的部分，即身份与逻辑，和可以适应的部分，即平台原生的交互模式。

设计师与开发者的协作

好的设计系统源于双向合作。设计师考虑体验和一致性，开发者考虑技术可行性和易维护性。如果只由一方来制定，结果往往好看却难以实现，或者容易实现却用起来别扭。

确保设计工具中画出的组件与代码中的组件一致，名称和变体相互对应。如果术语不同，每次沟通都得先从翻译开始。约定共同的词汇，例如什么叫卡片、面板或页签，让讨论变得高效。

养成在新界面开工前做简短评审的习惯。几分钟内，设计师和开发者就可以确认将使用哪些组件、需要补充什么，以及是否遗漏了某些状态，比如空数据或错误。事前评审远比全部做完之后再修改便宜。

一个真实的例子：业务应用中的订单表单

设想一个应用有采购订单表单、收货表单和请假申请表单。没有设计系统时，这三者由不同的人在不同时间制作。一个把保存按钮放在左上角，另一个放在右下角，第三个用的是没有文字的图标。错误信息在一个表单中以弹窗出现，在另一个表单中则是红色文字。

有了设计系统，三者都由相同的组件拼装而成：标签和帮助统一的输入框、位置相同的操作按钮组，以及相同的错误模式。习惯了一个表单的用户，立刻就能看懂另外两个。开发者只需处理每个表单真正特有的部分，即内容和规则。

影响也体现在培训上。新员工学会一种模式，就能在整个应用中使用。培训材料变得更短，对客服的提问也减少。这就是看似技术性的设计投入，如何为企业运营带来直接好处的一个例子。

维护设计系统，使其保持鲜活

不维护的文档很快就会变成回忆。健康的设计系统有明确的负责人、提出新组件的途径，以及检查是否有界面偏离的习惯。否则，团队会因为觉得系统跟不上自己的需求而自行想办法。

• 确定谁有权批准新组件或变更
• 建立轻量的提议途径，让团队不会回避它
• 记录变更及其原因，避免旧的决定被重新争论
• 定期审视很少使用或变体很多的组件
• 衡量使用情况：有多少新界面是由系统组件构建的

对重大变更要谨慎。修改一个被数百处使用的组件，可能会意外破坏外观。要逐步应用变更，在有代表性的界面上测试，并在实施前通知团队。

多大的投入才算合理

投入的大小应与产品规模相称。只有十个界面的应用，不需要像一百个界面的产品那样大的组件库。对小产品，一套令牌、十几个核心组件和一页指南就够了。对成长中的产品，投入可以随着团队和复杂性的增长而增加。

决定之前先问两件事。第一，团队多久制作一次新界面或新功能。第二，有多少人参与制作。越频繁、人越多，设计系统的好处就越大。如果产品很少变动且由一个人负责，轻量的做法就足够了。

也要避免为尚不明确的未来需求去构建过于通用的系统的诱惑。为从不会发生的场景构建的组件，只会增加维护负担。构建现在需要的，让系统在需求真正出现时再成长。

常见错误

• 在没有真实需求之前构建过多组件
• 把设计系统当作已完成的项目，而不是持续成长的产品
• 只为设计师而做，导致开发者不使用
• 没有负责人，每个人各自添加变体
• 忽视边界情况，如长文本、空数据和小屏幕
• 追求惊艳的外观，却牺牲了可读性和速度

切实衡量其收益

设计系统的收益往往难以用单一数字表达，但有一些可以观察的指标。留意制作新界面所需的时间、评审时的视觉修正数量、开发者向设计师提出的小问题数量，以及用户对界面困惑的抱怨。

在几个相似的功能上做前后对比。如果相似的功能现在完成得更快、修改更少，这就是实在的证据。不要等待完美的数字，观察趋势，然后调整你的投入。

本周就能开始的第一步

1. 01截取十个最常用的页面，并标出不一致的元素
2. 02共同确定一种主色、一种字体族和一套间距比例
3. 03选择按钮、输入框和错误信息作为首批统一的三个组件
4. 04用一页纸写一份简短指南，说明何时使用
5. 05指定一位一致性的守护者，并每月回顾结果

结语

设计系统并不是为了让应用更漂亮，而是让它更易用、开发更快、更能适应增长。一致性是对用户的尊重：他们不必因为我们的团队更换而重新学习。

从小处和最常用的部分开始，纪律严明地维护，让它随产品一起成长。几个月后你会感到，做一个新界面变成了拼装工作，而不是从零搭建。