Back

设计系统团队成熟度

设计系统已经从静态的设计规范指南和松散的 UI Kit 演变为部署动态、智能且具备演进能力的系统化架构。设计系统应被视为具有独立生命周期、专门维护团队、版本发布机制以及技术支持渠道的内部产品。

管理并开发这些资产的设计系统团队的成熟度非一蹴而就。行业观察与实践表明,一个健康且具有高度影响力的设计系统团队,其发展轨迹会经历三个递进的成熟度阶段。这种演进体现在底层代码结构的技术迭代上,也深刻地体现在团队的组织心理学、与业务团队的协作模式,以及对整个企业技术栈的宏观影响力上。

第一个阶段是服务期(Serve Components),核心在于为产品团队提供统一的组件以加速工作流,在设计师与工程师之间建立沟通的共识基础(Common Ground),并为极速扩张的产品提供视觉和代码的一致性 。第二个阶段是执行与规范期(Enforcement),团队的职能从被动服务转向主动治理。通过完善组件API、引入严格的代码检查(Linter)阻止代码劣化(Slop),并主动协助产品团队进行代码迁移和废弃(Migrate and Deprecate),团队在缓解系统所有权矛盾的过程中,建立起超越单一产品线的全局业务认知。第三个阶段是基础设施与体验跃升期(Elevate Global UX),在这个阶段,设计系统团队致力于探索、攻关并应用能够提升全局用户体验的新范式。通过设计系统这一广泛部署的基础设施,底层的工程与设计优化能够瞬间辐射至整个产品生态,最大化影响力。

第一阶段:服务组件(Serve Components),建立共识与标准化

在设计系统成熟度模型的最初阶段,团队的工作都围绕从无到有的构建以及随后的内部推广展开。这一时期的数字产品往往正在极速扩张,功能需求爆炸式增长,多个并行的产品团队在缺乏统一约束的情况下各自为战。因此,设计系统团队在第一阶段的首要任务,是作为提供者,向产品团队交付一套经过测试、视觉统一的标准化组件库,避免严重的视觉碎片化、交互逻辑的割裂以及庞大的技术债。

提供一致性

第一阶段的核心技术动作是对 UI 复杂性进行抽象以提供一致性。以 Uber 的 Base 设计系统为例,使用设计它的产品团队,开发速度提高了整整3倍,视觉一致性问题减少了4倍,而所需编写的UI代码量则锐减了50% 。这种加速产品工作流的能力,是第一阶段设计系统团队确立其内部价值和信任的关键筹码。

构建设计师与工程师的沟通共识

除了提升工程效率,第一阶段最深远的文化影响在于弥合了设计师和工程师之间的代沟。在传统的工作流中,设计师使用视觉工具产出静态的 UI ,而工程师则在开发环境中试图还原这些视觉意图。这种工具和工作流的错位导致了大量的沟通损耗,例如对阴影深度的误解或对动画曲线的错误实现。

设计系统团队通过构建系统,为这两个群体提供了一个共享的语言体系。当设计师在 Figma 中标记一个元素使用 bg-primary 颜色时,工程师在代码中调用完全相同的变量名称,这种精确的映射彻底消除了主观猜测,极大减少了摩擦和意外。

起源路径与采用率的增长挑战

在第一阶段,设计系统的演进轨迹在很大程度上受其起源的影响。系统通常来源于两种截然不同的力量:自上而下的管理层驱动,或自下而上的个人发起。

起源特征第一阶段的挑战增长策略
自上而下拥有管理层的行政支持、正式的预算分配、专属的团队编制 ,明确的目标和要求。需要在团队中寻找合适的合作伙伴,并迅速提供定量数据以证明系统兑现了其提升效率的承诺。避免强制推行导致的抵触情绪,通过系统提供真正的便利性,确保系统的强制性不会扼杀产品团队的 momentum。
自下而上缺乏管理层参与,缺乏资源支持,通常为工程师或设计师主动启动,但试错压力小。在没有正式授权的情况下,团队成员需要挤出时间进行开发,获取其他团队的 adoption 存在阻力。在组织内部寻找对效率有迫切需求的早期采用者(Early Adopters),通过口碑传播积累临界质量。

无论是哪种起源,第一阶段的终点都标志着设计系统团队必须像运营真实产品一样,通过宣发、文档、培训来吸引订阅者。一旦系统跨越了采用率的临界点,成为各个团队日常开发节奏中不可或缺的一部分,系统就正式度过了其婴儿期,并迎接伴随规模化而来的新机遇。

第二阶段:从服务转向执行(Enforcement),代码审查与所有权治理

当设计系统成功渗透到多个产品线时,系统便进入了“青春期阶段” 。在这个阶段,采用率不再是首要问题,取而代之的是规模化带来的混乱:产品团队开始以设计系统最初未曾设想的方式滥用组件,功能请求超出设计系统团队的 capacity,同时高强度的使用暴露出了大量深层 Bug 和初始架构问题。

为了维持系统的稳定性与代码库的健康,设计系统团队的运作模式必须发生根本性的转变:从第一阶段的被动服务组件转向主动执行规范(Enforcement)。这一转变涵盖了组件 API 的重构、组件退出与进入机制,工程自动化治理、主动介入的迁移策略,以及化解团队所有权冲突的组织架构调整。

完善与规范组件 API

在服务期,为了吸引产品团队使用,设计系统通常会提供极其灵活的组件,允许外部传入大量自定义样式覆盖和千奇百怪的逻辑。然而,随着规模的扩张,过度的灵活性成为问题。产品开发者会随意修改按钮的内部padding,或者向 input 注入非标准的交互逻辑,这不仅破坏了全局的一致性,也使得设计系统团队在未来进行任何修改时面临巨大的 regression 风险。

因此,第二阶段的核心技术动作是收紧和规范组件 API。成熟的设计系统团队会构建多层抽象(Multiple Layers of Abstraction),以在灵活性(自由度与速度)和约束程度(内聚性与可维护性)之间取得精妙的平衡。以 Spotify 的 Encore 设计系统为例,团队构建了三个抽象层:

抽象层级API设计机制适用场景与系统影响
配置层 (Config - 最高抽象)组件仅接收预设的选项,完全接管内部渲染逻辑和结构。适用于高度标准化的用例,应用最广泛。系统团队保留最大的控制权,系统层面的升级都会瞬间生效,无需外部团队介入。
插槽层 (Slots - 中等抽象)组件暴露出特定的区域作为插槽,允许产品团队将预设的或自定义的子组件注入其中。在保持整体布局和行为由系统控制的前提下,允许局部的个性化修改(如在标题前添加特定图标),防止容器组件为了灵活性接收过多参数而变得臃肿。
定制层 (Custom - 最低抽象)提供无样式的 headless Primitives,仅封装复杂的无障碍状态管理和键盘导航逻辑。专门为边缘和复杂产品需求设计。产品团队可以构建独一无二的 UI ,但仍能继承设计系统的标准化底层规范,避免了重复造轮子。

系统性阻止代码劣化(Slop)

在这个阶段,单纯依靠文档来维持系统规范是不现实的。人为审查容易出现疏漏,会引发主观情绪对立,而且也更慢。在第二阶段,设计系统团队开始将规范准则集成到 CI/CD 和本地开发环境中。

团队通过严格的 linting、build time、runtime 规则,建立起自动化的护栏。比如当一个应该显示内容的容器并没有接收到自组件,代码编辑器会报错,产品运行时会报错,代码提交和合并也会被阻止。

这种自动化治理将违规操作扼杀在摇篮中,保证设计系统的影响力和可维护性。

同时,这也是一种被动的教育机制,工程师在不断修正 lint 报错的过程中,潜移默化地学习并掌握了设计系统的最佳实践。

为产品团队 Migrate 和 Deprecate

设计系统是一个活的生命体,它不可避免地会经历代际更迭。无论是由于全局视觉语言升级,还是底层组件的大幅度更新,或者是旧版冗余 API 的 deprecation,系统都会产生 breaking changes。

绝不能将系统升级的工程成本全部转嫁给产品团队。否则,发布破坏性变更通常意味着向所有产品团队发送各种 communication,要求他们在接下来的抽空处理大量报错或没报错但也要做的改动。这种模式必然导致迁移进度无限期拖延,产品团队怨声载道,最终整个公司同时运行着好几个不同版本的设计系统。

设计系统团队应主动介入,手动迁移产品团队的 UI,如有必要可以请产品团队 code review。也可以通过 codemods自动化迁移。在 Sourcegraph 团队的一项 design system 迁移案例中,codemods 自动处理了 95% 的工作量。

缓解所有权矛盾

随着设计系统的影响边界不断扩张,ownership 和 delivery 之间的矛盾开始出现。设计系统团队希望维持严谨和统一,而产品团队则面临着激烈的市场竞争,需要快速试错和定制化设计。当系统团队过度集权时,产品团队的需求会堆积如山。周期的延长导致产品团队失去耐心,绕过系统,私自构建自己的组件库。

为了缓解这种 ownership 矛盾,设计系统团队的工作方式有了改进,他们开始与产品团队更多更主动的沟通协作,完善自动化测试,来强化信任。

全局认知

随着互信的形成,设计系统团队经常担当内部顾问,发现设计系统在特定业务场景下的痛点,并为产品团队提供关于如何最佳利用组件的指导。这种双向交流机制产生了组织收益:

  1. 消除孤岛心态:产品团队感受到自己是设计系统的共建者而非被动的执行者,从而培养了对系统的所有权归属感,更积极地提出问题和建议。
  2. 建立跨领域的全局认知:由于和不同产品团队的协作,他们建立起了远远超出特定产品团队的宏观认知。这种全局视野使他们能够识别出不同团队之间相似的需求,将局部的痛点抽象为系统性解决方案。

第三阶段:成为辐射全局的基础设施

当设计系统化解了治理期的所有权矛盾,建立起强大的自动化检查机制,并与所有业务小队形成了良好的关系后,系统就进入了最终的成熟阶段。在这个阶段,设计系统超越组件库的范畴,不仅是提升开发效率的工具,也成为了支撑整个产品生态的核心基础设施。

第三阶段的核心标志是影响力的瞬间辐射。设计系统团队在日常的组件维护之外还有很大余力,专注于探索、攻关和应用能够大幅提升全局用户体验的新技术与新范式。由于设计系统已经被极其广泛地部署于代码库的最底层,团队在系统核心所做出的设计改进和工程优化都瞬间像涟漪一样扩散至整个产品生态,实现价值的最大化。

比如,在复杂的全球化产品中,底层的色彩与对比度直接决定了产品的无障碍访问体验。GitHub 的 Primer 设计系统团队在面临大规模系统重构时,实施了全新的亮色与暗色主题色彩对比度策略。新的 tokens 直接解决了整个 GitHub 平台上超过 1000 处的数百个无障碍对比度问题。而 Atlassian 团队在推进全局视觉品牌重塑时,依托其成熟的设计系统将全新的定制品牌字体平滑部署到了超过 18 款核心产品应用中。

Back
By Ricky Zhang