基于美团UI的协同提效

1. 基于美团UI的协同提效王晨宇 / 史克秋

2. 主讲人介绍王晨宇 2018年加入美团，负责美团UI组件库及生态工具建设。在前端协同提效工具上有较丰富的经验。史克秋 2019 年加入美团，负责美团设计平台和设计插件相关工具及工程能力建设。在设计工具建设、设计研发协同方面有较丰富的经验。

3. 背景介绍目录美团 UI 建设设计前端协同实践未来规划

4. 背景介绍美团内组件库的痛点有哪些？ • 基础设计规范多，业务呈现各不一致 • 公司内前端项目技术栈多 • 前端开发模式正在⻜速变化，包含：低代码、无代码、Design2Code、AIGC 等美团 UI 的目标 • 提升美团整体的 UI 一致性 • 提升前端界面交付效率

5. 美团 UI 整体思路介绍建设标准化的基础物料，统一业务物料标准建设标准化工具，统一产研工具的入料标准基础设计规范基础 UI 组件一套基础规范多技术栈实现产研工具集规范定制物料协议

6. 美团 UI 全景图 IDE 插件 D2C 低代码平台研发资产平台设计工具设计资产平台美团 UI 基础组件库美团 UI 设计规范业务规范优势： • 统一的基础物料 • 规范化业务研发资产，统一对接上层工具 • 设计资产线上化管理，设计、研发物料智能识别

7. 背景介绍目录美团 UI 建设设计前端协同实践未来规划

8. 美团 UI 建设基础组件如何建设？业务组件如何定制？如何串联已有工具？

9. 美团 UI 建设服务全公司，覆盖主流技术栈桌面端 React Vue Angular 移动端小程序 RN H5(Vue/React) 8 套组件库形成统一品牌，⻓得一样是关键 Flutter

10. 美团 UI 建设：多端 UI 一致性 Design Token：设计规范中的基础元素，它是一种可重复的设计元素，例如：颜色、字体、阴影等。 Button 组件 Token • • 在组件库中 Design Token 往往对应着 scss、less 等变量，不同技术栈中 Token 的形式可以不一样合理的拆分 Design Token 可以保障设计规范的灵活性 Input 组件 Token Form 组件 Token Table 组件 Token 全局 Token (色彩、圆⻆、间距等) 移动端 Design Token 桌面端 Design Token 美团 UI 设计规范 … …

11. 美团 UI 建设：多端 UI 一致性不同技术栈下 Token 实现方式不同，但全局 Token 一致

12. 美团 UI 建设：基础规范定制基础规范定制业务规范 / 基础组件业务组件生成业务组件业务模版

13. 美团 UI 建设：基础规范定制设计组件 Sketch 插件研发组件 NPM 系统业务规范全流程可无需研发参与

14. 美团 UI 建设：基础规范定制主题定制工具 Sketch 资源

15. 美团 UI 建设：多技术栈实现定制桌面端（React / Vue）移动端（H5） Token 文件注释规范

16. 美团 UI 建设基础组件如何建设？业务组件如何定制？如何串联已有工具？

17. 美团 UI 建设：业务组件定制研发资产平台提供的能力：组件生产组件使用组件运营 • 文档站建设 • 构建输出 • 用户使用反馈 • 质量保障 • 按需加载 • 版本升级

18. 美团 UI 建设：业务组件定制业务组件的发布流程 NPM 脚手架 CI/CD 流水线研发资产平台 CDN 文档解析测试卡控构建工具性能卡控支持 4 种技术栈本地包发布封禁

19. 美团 UI 建设：业务组件托管组件运维和分发低代码平台依赖收集设计工具业务项目 CI/CD 研发资产平台 IDE 插件升级管控 AIGC

20. 美团 UI 建设基础组件如何建设？业务组件如何定制？如何串联已有工具？

21. 美团 UI 建设：物料协议物料协议：一套用于描述美团内部工具应该如何使用物料的 Schema ProCode IDE 插件物料协议低代码平台 LowCode 设计工具 2套协议，设计协议是基于低代码协议扩展

22. 美团 UI 建设：C2D 物料 C2D 物料：Code To Design，将前端物料转为设计师可用的设计物料。C2D 物料具备动态化的能力。 C2D物料完整流程组件库在线编辑物料协议 AST 解析协议包配置存储到研发资产平台可组合多组件库物料 React / Vue AST 解析流程入口文件解析 Import 语句 AST 解析是否为组件收集组件信息生成描述文件物料协议

23. 美团 UI 建设：建设成果 8 套组件库 40+ 有效主题套 2000+ 业务组件个

24. 背景介绍目录美团 UI 建设设计前端协同实践未来规划

25. 设计前端协同回顾阶段一早期的Web应用以图文信息展示为主布局简单，对体验追求不高设计：集设计前端于一身的职能，无协同过程

26. 设计前端协同回顾阶段一阶段二早期的Web应用以图文信息展示为主⻔户、电商等站点的出现，布局简单，对体验追求不高对Web应用的体验有了新的要求设计：集设计前端于一身的职能，无协同过程设计：需要更专业的界面设计界面也变得更加复杂前端：需要更复杂的交互实现

27. 设计前端协同回顾阶段一阶段二阶段三早期的Web应用以图文信息展示为主⻔户、电商等站点的出现，移动互联网的发展和大型应用的诞布局简单，对体验追求不高对Web应用的体验有了新的要求生，对体验和交付效率有了更多要求设计：集设计前端于一身的职能，无协同过程设计：需要更专业的界面设计设计：界面设计、设计规范维护… 前端：需要更复杂的交互实现前端：业务开发、组件库建设… 界面也变得更加复杂

28. 设计前端协同回顾职能流程阶段一设计阶段二业务UI、业务前端阶段三规范UI、业务UI、组件前端、业务前端自闭环 UI设计 UI交付设计规范 UI设计前端实现视觉验收组件库实现 UI交付前端实现视觉验收

29. 协同问题的引入问题现状 1、设计生产阶段设计规范 UI设计组件库实现 UI交付前端实现有价值资产未被有效感知使用视觉验收跨部⻔协作上手成本高 2、视觉还原阶段相似组件重复开发设计研发内部的资产沉淀，解决了各自部分团队内部的生产效率问题设计意图传递信息损耗 3、视觉验收阶段设计需要细致的反复验收前端需要频繁的细节优化

30. 分析问题相似的中后台系统搭建多端适配体验一致性验收效率设计效率周期性品牌更新跨部⻔设计、研发协作研发效率

31. 分析问题相似的中后台系统搭建设计研发资产⻓期各自迭代，缺乏横向感知能力多端适配体验一致性周期性品牌更新设计规范缺乏动态更新能力，规范更新成本高验收效率跨部⻔设计、研发协作设计研发资产数据源不一致，流转过程存在损耗设计效率研发效率

32. 解决方案协作流程上的问题，需要一套完整的工具链来解决设计系统管理和分发设计资产的消费标注生成和信息呈现 DSM 设计插件设计画板美团设计插件

33. 设计系统原子设计理论所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物设计系统设计原则将此理论运用在界面设计中，形成一套设计系统，包含5 个层面：原子、分子、组织、模板、⻚面色原子字版设计⻛格质形模式库/组件库组件分子

34. 组件协同项目初始化阶段项目快速发展期最终的协作场景资产对⻬资产分化资产劣化基础组件好像不太够用，走组件库建设流程太耗时我在设计稿里先增加个新的组件有哪些设计组件可以用？哪些组件用了，可以减少研发成本？这部分布局好像可以复用，我封装个组件用哪个组件实现，实现成什么样子？这个组件和之前的很像，但又不太一样？按照统一的设计规范，完成一套基础组件库建设，保障规范统一，还能节省设计研发成本

35. 组件协同业务下所有可用的组件，设计侧都应该有效感知所有与前端侧相关的组件，都应该携带上有价值的研发信息 DSM组件管理 DSM 组件样式化组件在线设计组件 Sketch 设计组件代码化组件基础组件库样式化组件设计师通过设计工具中各种带样式的图层组装成的组件代码化组件通过C2D能力，将前端组件转为设计师所用的组件业务组件库

36. 组件协同代码化组件：通过C2D能力，将前端组件转为设计师所用的组件设计源文件组件 DSL 代码组件渲染器代码化组件配置化能力

37. 组件协同拖拽组件降低信息传递损耗、快速实现视觉还原组件配置研发消费

38. 变量协同把主题色从 A 改成 B 修改组件、验收、再调整设计规范使用如何更加高效？内部协同设计规范迭代了，怎么快速同步给其他设计师？跨部⻔合作如何快速了解运用规范？设计规范变更，怎么快速实现资产更新？如何更快完成规范变更的验收过程？外部协同业务A 设计规范变更如何准确传达给研发？业务B 业务C 部⻔规范业务D 业务E 项目A 项目B 项目项目组件库组件库组件库组件库 PC 移动端 PC 移动端业务 A 业务 B

39. 变量协同设计变量的分层管理，让设计原子规范变更的效率更高、变更传递更简单准确性原子颜色字体尺寸边框圆⻆阴影

40. 变量协同各业务线在继承部⻔共性规范的基础上，同时需要满足业务线的特性规范 DSM通过设计部⻔视⻆统一管理产品规范，并输出Token DSL，实现与研发侧的样式的对接业务 Token DSL 业务 Token 部⻔规范 Token PC 组件库移动端组件库 Token NPM

41. 变量协同流程设计消费规范检查前端消费

42. 业务落地效果 300+ 个 400+ 个 4w+ 个业务需求使用次数 20 % 15 % 30 % 代码化组件设计生产效率视觉还原效率视觉验收阶段

43. 未来规划基于资产的D2C 一码多端对接DevOps 基于AIGC的提效 DesignOps 在线设计

44. Q&A

45. 更多技术干货欢迎关注“美团技术团队” 扫码查看前端社招岗位关注美团招聘获取更多求职资讯