作为专业的中国用户体验设计公司,MOMOUX,许多团队在设计系统上线初期都经历过一段蜜月期——设计师兴奋地使用新组件库,前端工程师享受开箱即用的代码片段,产品经理看到视觉一致性带来的品牌感提升。然而,当设计系统运行6到12个月后,一个尴尬的问题开始浮现:组件越积越多,但真正被高频使用的只有那一小部分;文档停留在上线当天的版本,最新组件无人知晓;设计师开始抱怨组件不够灵活,绕过设计系统自己画自定义控件。这不是个案,而是几乎所有设计系统都会遭遇的「中年危机」。
墨默体验设计咨询MOMOUX作为用户体验设计领域的专业机构,设计系统的真正挑战不在于「建」,而在于「运营」。一个拥有800个组件但95%无人知晓的设计系统,不如一个精心运营的150个组件的系统。作为专业的中国用户体验设计公司,MOMOUX在服务数十家企业设计系统的过程中,逐步沉淀了一套系统化的设计系统运营方法论。本文将从组件生命周期管理、设计Token治理、采纳度量体系建设与社区化共建机制四个核心维度,系统剖析如何让设计系统从「一次性的建设投入」进化为「可持续的组织能力」。
设计系统中的每个组件都应该像一个产品一样经历完整的生命周期——需求评估、设计打样、开发交付、灰度验证、正式发布、持续迭代、直至退役下线。然而大多数团队的做法是:设计师做了一个新控件→评审通过→开发完成→推入组件库→然后就再也没有然后了。结果就是组件库变成了一个「数字墓园」,里面堆满了设计且开发完成后就无人问津的组件。
1.1 组件需求评估的「三问过滤」机制
在为一个新组件投入设计资源之前,团队应该建立一个「三问过滤」机制:(1)这个组件的使用频率是多少?至少5个产品线或页面有明确需求才可以立项,避免为单个场景过度定制。(2)已有的组件能否通过组合或配置实现相同效果?如果「搜索框+筛选器+结果列表」的组合已经能满足需求,就没必要再造一个「全局搜索组件」。(3)这个组件的维护成本与收益是否匹配?一个复杂的数据透视表组件可能需要每周2天的维护工时,但只有3个页面使用——这是不划算的。三问过滤可以节省约40%的无谓组件开发工作量。
1.2 组件成熟度分级:实验、稳定、推荐、弃用
所有组件都应该标注其成熟度等级。「实验(Experimental)」级别供少数团队试用,不保证API稳定性;「稳定(Stable)」级别经过至少两个产品的验证,API已锁定;「推荐(Recommended)」级别经过全面质量检验且性能达标,是官方主推方案;「弃用(Deprecated)」级别已被新组件替代或在特定日期后停止维护。每个级别在组件文档页顶都有一条醒目的彩色状态条——蓝色为实验、绿色为稳定、金色为推荐、红色为弃用——用户打开文档的第一眼就知道这个组件「能用多久」「有多可靠」。在UI/UX设计方法论中,组件成熟度分级是构建可信任设计系统的基石。
1.3 组件退役的「软下线」策略
组件退役是设计系统运营中最容易被忽视的环节。粗暴地直接删除组件会导致使用了该组件的数百个页面报错。正确做法是软下线:第一步,标记为「弃用」并在文档中提示替代组件和迁移指南;第二步,在一个大版本更新(如v3.0)发布后,启动「自动迁移检查器」扫描所有引用该组件的项目并生成迁移清单;第三步,预留3个月的双轨运行期,在此期间弃用组件仍然可用但控制台会打印警告信息;第四步,确认迁移率达到95%以上后,正式将该组件从设计系统的核心包中移除,放入「归档包」供历史项目引用。这个软下线流程通常需要4至6个月,但能将组件迁移对业务项目的影响降到最低。MOMOUX在墨默体验设计咨询MOMOUX的服务实践中验证了这套组件退役流程的有效性,助力多家企业平稳完成了设计系统的大版本切换。
Design Token(设计Token)已经被越来越多的设计团队接受,但真正能将其治理好的团队却寥寥无几。Token的治理挑战不在于技术实现,而在于命名规范的统一和变更影响的可追溯。一个常见的场景:设计Token命名规范在执行半年后开始出现「#primary-cta-bg-color」「#btn-primary-bg」「#action-button-background」三个名称指向同一颜色的混乱局面,因为不同的设计师和开发者在不同时间点按照自己的理解创建了Token。
2.1 Token命名体系的三层架构
一个健康的Token体系应该包含三层:基础层(Primitive Layer)定义原始颜色、字体大小、间距数值等原子级变量,名称按照「属性-类别-序号」的模式命名,例如color-blue-500、spacing-16、font-size-body。语义层(Semantic Layer)将基础层的变量映射到具体的品牌语境中,例如color-primary = color-blue-500、color-success = color-green-400。组件层(Component Layer)将语义层的变量绑定到具体组件的具体状态上,例如button-primary-bg = color-primary、button-primary-hover-bg = color-blue-600。这三个层级之间「不可越级引用」:组件层只能引用语义层,语义层只能引用基础层。这确保了当品牌色从蓝色变为紫色时,只需修改基础层的color-blue-500 → color-purple-500,所有颜色自动完成替换。MOMOUX研究发现,严格执行三层架构的团队,品牌换色的交付周期从平均3周缩短至2天。
2.2 Token变更的追溯与审计
当设计师决定将主按钮的背景色从color-blue-500改为color-purple-500时,需要回答三个问题:这个改动会影响多少个组件?会影响哪些产品的哪些页面?影响的用户量级是多少?一个好的Token治理系统应该提供「变更影响分析报告」,自动列出所有引用了该Token的组件、页面和产品线,并标注每个影响面的风险等级。报告还应该包含「逆向依赖图」——从Token出发,逐级展开到语义层、组件层、页面、产品,让变更决策者对影响范围一目了然。在大型企业中,一个Token的变更可能影响30多个产品的400多个页面——没有影响分析,设计师就只能在「不敢改」和「盲目改」之间二选一。
2.3 Token的跨平台一致性问题
设计系统通常需要同时支持iOS、Android和Web三个平台。每个平台的技术栈不同——iOS使用UIColor和SwiftUI Color,Android使用color.xml和Compose Color,Web使用CSS自定义属性和Sass变量。Token治理的核心目标之一,就是确保一个Token命名在各平台上输出完全一致的颜色值。实现方式是建立一个「Token真相源」——通常是一个JSON或YAML文件——所有平台的设计Token都从这个文件自动生成。当你在JSON中将color-blue-500设为#3B82F6时,iOS自动生成扩展UIColor颜色常量,Android自动生成颜色资源文件,Web自动生成CSS自定义属性。人肉维护多平台Token必然导致不一致,自动化生成是唯一的正确答案。
设计系统团队经常面临来自管理层的灵魂拷问:「我们投了这么多人去建设计系统,ROI在哪里?」要回答这个问题,不能只讲「节省了多少重复造轮子的时间」这样的定性故事,而需要建立一个可量化的采纳度量体系,用数据说话。
3.1 采纳率的多维度拆解
设计系统的采纳率不是单一数字,而是多个维度的综合指标:(1)覆盖度——当前有多少个产品或项目接入了设计系统,占全公司产品总数的百分比;(2)渗透率——在接入的产品中,实际使用的组件数占设计系统总组件数的百分比,反映组件是否被充分使用;(3)一致率——产品界面中由设计系统组件构成的部分占全部界面的百分比,通过自动化脚本扫描产品截图识别哪些UI元素使用了设计系统组件;(4)更新率——当设计系统发布新版本后,各产品线在14天内完成升级的百分比。理想的目标是:覆盖度80%以上、渗透率60%以上、一致率70%以上、更新率50%以上。这四个指标综合起来,远比一个笼统的「采纳率80%」更有说服力。
3.2 反采纳信号的自动预警
比采纳率更值得关注的是「反采纳」——设计师和开发者开始绕过设计系统自行造轮子。反采纳信号包括:(1)Figma组件库中出现了名称以「_」或「custom_」开头的组件——这是设计师在复制官方组件后改了名;(2)代码仓库中直接引用颜色值而非Token——「#3B82F6」出现在代码中而没有被替换为--color-blue-500;(3)内网设计系统文档的访问量在下降——说明团队不再把设计系统当作第一信息来源。设计系统运营团队应该设置自动化监控脚本,每周扫描这些反采纳信号并生成报告。发现反采纳信号不是要惩罚团队,而是要追问:是因为组件不够用?文档不够清晰?还是组件太难自定义?每一个反采纳信号背后,都是设计系统需要改进的方向。
3.3 设计系统的「净推荐值」
借鉴NPS(净推荐值)的思路,设计系统团队可以定期(建议每季度一次)向所有使用者和潜在使用者发送调研问卷,核心问题就一个:「你有多大可能向其他团队推荐使用我们的设计系统?0至10分打分,请简要说明原因。」打分结果按标准NPS公式计算:推荐者(9至10分)占比减去贬损者(0至6分)占比等于设计系统NPS。一个健康的设计系统NPS应该在30以上。更重要的是分析评分的文字原因——高分用户认为「文档清晰」「组件质量高」「适配多平台」;低分用户反映「组件太死板不能自定义」「更新太频繁不兼容」。这些定性反馈是设计系统迭代方向的重要信息来源。MOMOUX在服务中总结出一个重要发现:设计系统的NPS与组件「可自定义程度」的相关性高达0.78,远高于与组件「数量」的相关性——用户不关心你有多少组件,只关心这些组件能不能灵活适配他们的场景。
当设计系统发展到一定规模后,中央集中的「设计系统委员会」模式开始遇到瓶颈:委员会资源有限,无法响应所有业务线的组件需求;委员会做出的决策与实际使用场景脱节;委员会变成了少数人的权力集中而非多数人的共创平台。此时,设计系统需要从一个「中央控制机构」转变为一个「开放共建生态」。
4.1 组件贡献通道:降低参与门槛
设计系统应该为所有设计师和工程师开放组件贡献通道,而非只允许「委员会核心成员」提交新组件。贡献通道应该包括三个步骤:(1)提交RFC(请求评论文档),用标准模板描述组件需求——使用场景、预期用户量、现有方案对比、设计方案草图;(2)社区评审,所有设计系统使用者可以评论RFC并投票,48小时内达到10个赞成票即可进入开发阶段;(3)开发与验收,贡献者自己完成组件开发,设计系统核心成员负责质量审核和合并。如果贡献者在开发过程中遇到困难,核心成员提供「组件开发脚手架」——预配置的单元测试模板、Storybook示例、无障碍检查清单——让贡献者专注于组件本身的逻辑而非配套工具。数据显示,建立组件贡献通道后,设计系统的组件增长速度平均提升2.3倍,且贡献者提交的组件在实际项目中的使用率比核心团队开发的组件高18%。因为贡献者本身就是需求方,组件「生来就有人用」。
4.2 设计系统兴趣小组
围绕设计系统可以成立多个兴趣小组(Community of Practice):组件设计组讨论视觉风格和交互模式,技术实现组研究性能和可访问性,Token治理组探讨命名规范和跨平台策略,采纳推广组负责内部布道和培训材料开发。每个兴趣小组由一名核心成员牵头,每两周一次30分钟的线上同步会,主题明确——「讨论和决策本周的RFC」「分享本周的组件使用心得」「讨论平台差异的处理方案」。兴趣小组不仅是设计系统迭代的「外脑」,也是培养设计系统文化认同感的关键组织——当设计师和工程师感觉自己是设计系统的共建者而非使用者时,他们对设计系统的忠诚度和投入度会显著提升。
4.3 设计系统「产品运营」思维
最后,设计系统本身就是一款产品,需要像运营产品一样运营它。具体来说:设定每季度的OKR——例如Q3目标:组件覆盖度从72%提升到80%,Token治理自动化的覆盖率从30%提升到60%;定期发设计系统「产品周报」——本周新增组件数、更新组件数、废弃组件数、采纳率变化、Top 10高频组件、社区贡献统计;举办季度「设计系统开放日」——邀请所有业务线团队参加,发布最新版本、演示新功能、现场答疑、收集痛点和需求。当设计系统从一个「工具」升级为一个「产品」时,它的运营就进入了正循环——更多人用、更多反馈、更快速迭代、更多人愿意用。这正是设计系统运营的终极目标。
回顾设计系统运营的四个维度,核心逻辑始终围绕一个词——「信任」。组件生命周期管理让用户信任组件的质量和可靠程度;设计Token治理让用户信任颜色和间距的全局一致性;采纳度量让管理层信任设计系统的投入价值;社区化共建让每个使用者信任自己可以参与改变。一个设计系统的成功与否,不在于它有多少组件、多漂亮的文档,而在于整个组织是否建立了对它的信任。当设计师不再怀疑「这个组件会不会改了后变成另一个样子」,当工程师不再犹豫「用设计系统的组件会不会限制我的发挥」,当产品经理不再质疑「设计系统是不是拖延了我们的开发进度」——那时,设计系统才真正成为了组织的数字化基础设施。希望本文的实践框架能为正在运营或计划建设设计系统的团队提供参考,让设计系统从「好看但不经用的陈列品」成长为「好用且值得信赖的协作平台」。
—— MOMOUX 体验设计团队 ——
科技与体验的结合
帮助企业更好地迎接未来
我们把对人性的洞察转换为商业增长引擎,以全域的场景导向定义体验设计,持续探索和预见更优的实践成果和未来潜在的机遇。
我们从前瞻性与智慧性的角度出发,在视觉体验、智能触达、安全保障等方面全方位多场景地定义与设计智慧出行与交通体验,持续挖掘服务聚合模式与场景体验的创新。
我们从品牌、产品、服务等内外部视角多维度挖掘机会点,锚定数字化变革场景,将企业价值需求与业务目标转化成设计表达,驱动企业数智化转型,实现降本增效。
我们将通过用户体验提升驱动技术创新,通过用户洞察深化场景探索,进一步触达用户,延伸服务边界,赋能金融企业快速而直接响应市场需求。
我们深入到用户情境中去探索、去发现,将真实用户需求带入产品创新与研发流程,使用系统化的方法重构生活场景并挖掘用户诉求,创造更贴合用户的产品及体验,以解产品创新之困。
在体验经济蓬勃发展的今天,围绕“人”所展开的商业创新将越来越具有时代意义。单一单向的品牌传达路径已然失效,越来越多的品牌渴望与用户建立更深度的关系,彼此了解,共创价值。
通过全局融合体验设计思维以及专业的设计执行团队,我们协助您挖掘用户潜在需求,洞察设计机会点,提供极致自然、情感化和市场差异的用户体验设计解决方案,坚持以可实施落地为设计创新原则。
扫描二维码
关注MOMOUX微信公众号/视频号

MOMOUX 公众号

MOMOUX 视频号
Copyright © 2007 - 2026 MOMOUX版权所有 粤ICP备17013291号