ArcoDesign:字节跳动企业设计系统实践与思考

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
1. ArcoDesign:字节跳动企业 设计系统实践与思考 姚 立 | arco.design 字节跳动 架构前端平台架构 团队负责人
2. 在此键入姓名 在此键入Tittle
3. 大纲 一. 背景与起源 二. 发展与挑战 三. 未来与思考
4. 什么是 ArcoDesign A. Agreement 一致 “ Arco Design 是由字节跳动「GIP UED 团队」和「架构前端 团队」联合推出的 企业级设计系统。ArcoDesign 拥有系统 R. Rhythm 韵律 的设计规范和资源,同时依据规范提供了丰富的原子组件, C. Clear 清晰 组件基础上也提供了丰富的定制化工具,包括⻛格配置平 O. Open 开放 覆盖了 React、Vue、Mobile、Chart 等框架和方向。在原子 台、物料平台等,也提供了资源平台包括 IconBox、品牌 库、Arco Pro 最佳实践等。旨在帮助设计师与开发者解放双 手、提升工作效率,更高效、高质量的打造符合业务规范的 中后台应用。 2021-08
5. —— 字节跳动 GIP UED & 架构前端 C U S T OM IZA T ION A BI LI TY Arco design 是什么?
6. ArcoDesign —— 字节跳动 GIP UED & 架构前端 B ACK GR OU ND & OR IGIN 背景与起源 InfoQ
7. 业务发展与困境 —— 字节跳动 GIP UED & 架构前端 B USI NES S C HALLE NGE 业务发展快 技术栈不同 二次开发与复用 使用第三方 组件库 生态不健全 业务场景不一致 InfoQ
8. 设计系统痛点 —— 字节跳动 GIP UED & 架构前端 OT HER S DE S IG N SYSTEM W EAKN ESS 基于业务定制⻛格成本很高 一致性 差 设计⻛格单一,中后台产品千篇一律 8 交互体验不好 效率 低 全局配置和二次开发难,后续难以维护 公司内部物料积累困难 灵活性 弱 设计稿到开发反复 UI 走查 InfoQ
9. 项目起源 —— 字节跳动 GIP UED & 架构前端 PR OJE C T OR I GI N 字节文化 业务痛点 新员工入职后需要「新人串讲」 ByteDesign 正式成为团队项目 业务落地 正向反馈 团队基建 团队内统一设计标准,快速扩大 视频云 团队内部项目试水 业务落地 集团基建 集团内部推广,100+部⻔使用 品牌升级 ArcoDesign 技术升级,构建Arco生态,覆盖280+部⻔ InfoQ
10. ArcoDesign —— 字节跳动 GIP UED & 架构前端 DE VELOP MENT & CH AL LEN GE 发展与挑战 InfoQ
11. 挑战与机遇 —— 字节跳动 GIP UED & 架构前端 DE SI GN LANG UAG E 定位的变化 核心竞争力 品牌升级 同类产品众多 业务推广 开源 InfoQ
12. 定位变化 —— 字节跳动 GIP UED & 架构前端 C UST OM IZ AT ION ABI LIT Y 组件库 升级 设计系统 InfoQ
13.
14. 设计系统 01 设计系统是可复用的组件的集合,通过 明确的标准引导,用来高效的构建⻚面 和应用的系统。当然,设计系统不仅包 含组件库,还包含以组件为基础,覆盖 设计到开发的一系列标准、工具和产 品,包括但不限于设计语言(规范)、 组件库、设计工具、设计插件、主题配 置器、物料、品牌、图标、字体、文档 等等。 图片来自网络 InfoQ
15. 核心竞争力 —— 字节跳动 GIP UED & 架构前端 C OR E C OM PETE NCE 极致的定制能力 从⻛格样式到默认行为的灵活定制,使你的组件千变万化 InfoQ
16. 样式 token 设计 02 最小化用于描述和构成组件样式的 变量,在组件库中以 less 变量和 css 变量的形式存在。 组件库的 token 有数千个,主要分 为两块: 1. 全局变量 2. 组件级变量 InfoQ
17. 样式 token 设计 02 ⻛格配置平台底层基于 token,提供全面的 UI 配置。 全局配置 InfoQ
18. 样式 token 设计 02 ⻛格配置平台底层基于 token,提供全面的 UI 配置。 组件级配置 InfoQ
19. 主题商店 02 ⻛格配置平台提供丰富的主题商店 InfoQ
20. 「子主主题」设计 02 支持父主题修改后同步至子主题。 InfoQ
21. 产品生态体系 —— 字节跳动 GIP UED & 架构前端 PR OD UC T I NT RODUC TIO N Arco 产品生态体系 InfoQ
22. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox InfoQ
23. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox Webpack 插件,帮助用户更方便的在 Webpack 中使用主题、按需加载
24. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox 脚手架 Arco-cli,封装了物料操作等命令,用来帮助用户快速创建项目并将其发布至 Arco 物料平台
25. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 VSCode 插件,帮助用户在编辑器查阅文档、可视化操作物料。 Figma Toolbox
26. 辅助开发工具链 —— 字节跳动 GIP UED & 架构前端 PR OD UC T C APAB IL IT Y IN TRODU CT ION Arco 辅助开发工具链 Webpack 插件 Arco CLI 脚手架 VSCode 插件 Figma Toolbox Fimga Toolbox 插件,聚合了常⻅的设计工具,帮助设计师更方便地使用 arco 的各项能力
27. 品牌升级 —— 字节跳动 GIP UED & 架构前端 B R AND UPGR ADE ByteDesign 品牌升级 技术升级 ArcoDesign InfoQ
28. 如何从同类产品中脱颖而出 —— 字节跳动 GIP UED & 架构前端 ST ANDI NG OU T 极致的服务意识,自动化 Oncall 快速落地 + 标杆项目 + 口碑建设 站在设计师的视⻆思考 「好看的产品」 == 成功了一半 定制化及强大生态能力 官网建设、文档建设 对大型业务团队的能力支持 持续的技术创新和产品创新 InfoQ
29. 如何业务推广 —— 字节跳动 GIP UED & 架构前端 B USI NES S DEVE LOPMENT 与业务团队合作 快速落地 与技术平台合作 二次放大价值 业务 深度绑定 深度定制 符合技术演进路线 跨团队共建 得与失,海纳百川 InfoQ
30. 开源 —— 字节跳动 GIP UED & 架构前端 OPE N SO UR C E 后「开源」时代 主动寻求变化 未知领域 X InfoQ
31. 业务数据 03 InfoQ
32. 业务数据 03 物料平台 70+ 个团队发布了 x00+ 个物料,累积下载量超 过 x,x00,000 共有 - 数据截止到 2022-08 ⻛格配置平台 140+ 个团队在⻛格平台上创建主题,共创 建 x000+ 个主题,其中有效发布主题 x000+ 个。 目前已经有 - 数据截止到 2022-08 InfoQ
33. 业务数据 —— GIP UED & 架构前端 B USI NES S DATA 4000 + x,000 K + 服务平台数 下载量 服务平台数 InfoQ
34. ArcoDesign —— 字节跳动 GIP UED & 架构前端 未来与思考 InfoQ
35. ArcoDesign Roadmap 更多生态工具 A R COD E SI GN R OAD MAP 资源库 打造智能化设计生态 D2C 平台打通,工作流打通 实现设计工程化 BrandStore Chart Space ToolBox ArcoSite 创意点生产 ArcoDesign Pro ⻛格配置平台 Arco Material 开源 Figma 插件、资源库智能化 回馈社区,最大化产品价值 ArcoDesign组件 完善阶段 ArcoDesign 补⻬设计规范,完善生态平台 InfoQ
36. ArcoDesign —— 字节跳动 GIP UED & 架构前端 最新进展 InfoQ
37.
38.
39. 未来挑战 —— 字节跳动 GIP UED & 架构前端 FUT UR E C HALLENGE 社区影响力 进一步构建生态 护城河与技术创新 产品服务质量 InfoQ
40. 生态平台 A R COD E SI GN V I SI ON GIP UED & 架构前端 资源库 生态互联 理论基石 InfoQ
41. —— 字节跳动 GIP UED & 架构前端 InfoQ
42. 在此键入姓名 在此键入Tittle
43.

Accueil - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-15 05:59
浙ICP备14020137号-1 $Carte des visiteurs$