为什么设计系统是单点故障

用于防止设计系统崩溃的工具和技术

加载
多米尼克阮
@domyen

两年前,“左键”击败了最受欢迎的网站. Left-pad是一个17行的工具,无数的软件项目都依赖它. 当它从NPM包注册表中消失时,它引发了一场雪崩 构建失败 成千上万的图书馆影响着Facebook、Netflix和Spotify的团队.

单点故障是一个系统的一部分,它可以导致整个系统停止工作,如果它失败.

设计系统依赖于使左侧辐射成为可能的相同基本原则. 作为设计师和前端开发人员, 十博体育备用网址可能会沉迷于宣传UI的一致性,以至于对十博体育备用网址面前的单点故障视而不见.

本文将讨论为什么设计系统(特别是UI组件)会崩溃,以及维护如何阻止这种情况的发生.

一把双刃剑

设计系统通过重用组件使交付一致ui的成本更低. 解锁这些好处的机制对于交付缺陷同样有效.

现代应用程序的架构看起来就像一个依赖链, 较大的复合组件(页面)依赖于较小的可重用组件(按钮, 输入, 等.). 当小组件更改时,依赖于它们的复合组件也会更改.

应用中的组件依赖关系

一个设计系统将这个模型扩展到一个组织. 它通过将通用组件集中在一个地方,使它们能够在应用程序之间共享. 因为设计系统实际上只是另一种依赖关系, 当系统组件发生变化时,相关的应用程序也会发生变化.

设计系统中的组件依赖关系

按钮中的bug会影响 每一个使用 的按钮 跨应用程序. 更重要的是,软件特有的因素会放大UI缺陷的影响:

  • 链式反应: 相互交织的依赖关系意味着小的变化会像滚雪球一样变成无数的回归.
  • 快速行动,打破一切: 持续部署加速了面向用户的更新. 当QA时间缩短时,UI回归就会出现漏洞.
  • 难以调试: 由于个性化趋势的推动,应用的复杂性急剧上升, 客户端的状态, 和响应性. 结果是延长了调试时间,增加了引入错误的机会.
在设计系统中,小的调整会导致大的错误,这些错误很快就会被部署,而且很难调试.

维护设计系统

尽管设计系统有相当大的风险,但已经没有回头路了. 大规模部署UI的价值是显而易见的. 公司目前投资 成千上万的 to 数百万美元 创建设计系统. 然而,保护这些投资的方法仍然是史前的.

缺陷通过在尺度上引入回归来破坏设计系统的基本价值. 如果bug让你的团队分心,那么它们就无法发挥效率. 维护是主动发现这些缺陷的唯一方法. 让十博体育备用网址来看看最有效的工具和技术.

测试UI组件

应用程序在外观和功能方面都比以往更加复杂. 视觉快照测试单元测试 UI组件有助于确保您的设计系统在面对不断的软件更改时是持久的.

外观的可视快照测试

可视化快照测试(a.k.a.例如,视觉回归测试)确保每次你推送代码时你的UI看起来都一样. 例如,CSS调整可能会导致意想不到的结果. 通过可视化快照测试,您可以自动识别这些后果,并在交付之前修复它们.

为了测试一个设计系统,捕获每个状态下的每个UI组件的屏幕截图,并将它们的版本与表面变化进行比较.

对于大多数团队, 视觉快照测试是对抗UI退化的高价值和低成本的第一道防线. 了解如何测试UI组件外观:

功能的单元测试

单元测试验证组件在提供一致的输入时是否返回正确的输出.

组件的功能范围从简单的按钮到复杂的日期选择器. 随着组件变得越来越复杂,仅使用可视快照测试就很难捕捉交互模式. 单元测试, 组件旁边的小测试, 帮助您确认特定的组件功能.

在设计系统维护的情况下,单元测试 补充 低成本的可视化快照测试来验证细微的功能. 了解更多:

检查更改和添加

维护不能只以测试结束. 测试确保UI 改变是偶然. But design systems are dynamic; UI patterns must adapt alongside user needs. 工作流程, 审查变化合作者 帮助您的设计系统发展.

综合评审工作流程

维护中存在人为因素. 运行可视化快照或单元测试只是表面上的不一致, 您仍然必须手动确定更改是有意的(更新)还是无意的(bug).

审批工作流位于自动化测试和组件库之间——充当过滤器,以确保只有好的东西进入库.

当与代码托管和持续集成工具集成时,它就成为设计系统工作流的无缝部分:

  1. 将代码推入设计系统存储库
  2. 视觉快照 & 单元测试自动处理更改(从以前的代码版本).
  3. 审查:接受或拒绝更改
  4. 接受的更改合并到设计系统中
组件评审工作流程

合作回顾

设计系统是一种内部产品,它的“用户”是其他团队. 合作是必要的,因为有如此多的利益相关者.

鼓励合作评审的方法有很多, 从每周会议到文档站点. 考虑到设计系统通常是涉及许多团队的跨学科工作, 业界的共识集中在异步协作上.

一种流行的技术使用一个活的文档站点作为真相的来源. 当设计系统发生变化时,文档站点会被更新. 团队在讨论项目管理或聊天工具的变更时引用该站点. 结帐 美国职业足球大联盟审查程序:

美国职业足球大联盟的组件工作流(节选自 kurtiskemple的奇妙的 )

分发最新的UI组件

在评审步骤中,您批准了在测试期间发现的改进和修复了错误. 现在是时候通过包管理器将这些更新分发到依赖的应用程序了. 有一些流行的方法来包装你的设计系统,我将在下面进行分解.

作为一个整体

发布设计系统最简单的方法是整体发布. 这通常采用单一版本化包的形式,该包映射到包含UI组件的单一存储库. 团队 孤独星球, , IBM设计 使用这种方法.

乐队

由于回归的风险,一次性更新整个设计系统对团队来说是不切实际的. 有些团队选择将每个组件作为单独的版本化包发布. AirbnbEngAtlassian 分发 变阻器, 日期, beautiful-dnd(拖放)像这样.

为什么不两?

使用开源工具,比如 Lerna, 维护者可以从一个库中管理设计系统,同时仍然允许应用使用精确的组件版本. 它是上述方法的综合. 开发人员在 Pluralsight, ANWB, 医疗保健.政府 使用这种方法.

没有正确的方法来打包UI组件. 正如您所看到的,即使是已建立的团队也依赖于不同的方法. 重点是对设计系统进行打包和版本化,这样相关的应用程序就可以从改进中受益(并在需要时回滚缺陷).

结论

设计系统维护归结为一种智能 测试 的策略, 审查 工具, 分布. 这种良性循环有助于防止倒退蔓延到整个系统——典型的单点故障陷阱. 您有信心发布改进,而不必担心偷运的bug.

数字缺陷在设计系统中传播得又远又快. 维护不能是事后考虑的事情,因为事故会影响到所有的用户. 事实上,维修可以让公司做到这一点 完全意识到 设计系统的优点在于减轻其缺点.


我希望这里的建议能迅速启动您的维护策略. 有大量的免费图书馆和决定可以提前做出! 如果您的团队更喜欢用于设计系统测试和检查签出的即时设置云工具 彩色 (谨此致谢).

这篇文章对你有帮助吗?

通过电子邮件向您发送免费的UI开发指南和教程.

4,423 开发人员和计数

十博体育备用网址正在招聘!

加入Storybook和colorless背后的团队. 构建被成千上万的开发人员在生产中使用的工具. Remote-first.

视图的工作

受欢迎的文章

新员工培训和绩效

彩色更新
加载
多米尼克阮
通过彩色
为专业UI开发人员提供的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,以获得免费的教程,指南,和资源的电子邮件给你.
友情链接: 1 2 3 4 5 6 7 8 9 10