基于美团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. 更多技术干货 欢迎关注“美团技术团队” 扫码查看 前端社招岗位 关注美团招聘 获取更多求职资讯

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-17 16:33
浙ICP备14020137号-1 $Map of visitor$