字节出设计系统了！打磨了近3年，正式开源！
转⾃：今⽇头条UED
ArcoDesign 是什么？
ArcoDesign 由字节跳动 GIP UED & 架构前端团队联合打造的⼀款企业级设计系统。团队先后负责过多款亿万级⽤户产品的体验设计和新产品的孵化探索，包括今⽇头条、西⽠视频、⽕⼭引擎ToB 平台业务等。
在打磨了近 3 年之后，通过字节内部⼤量业务沉淀和验证，我们在 10 ⽉ 27 ⽇举办的⾸届稀⼟开发者⼤会上，正式开源了 ArcoDesign 设计系统，旨在让社区听见更多的声⾳，同时让公司创造“最佳实践”的设计系统，为更多中⼩型企业及个⼈设计师和开发者提效，创造更多⾼效美观的 “最佳实践”。
设计理念
ArcoDesign 以务实浪漫，连接⾼效与美为愿景，遵从⼀致（Agreement）、韵律（Rhythm）、清晰（Clear）、开放（Open）的设计原则，帮助连接开发与设计之间的鸿沟，从开发者和设计师视⾓，以更系统化的思路解决业务问题，通过细致完善的设计资产，简单流畅的⼯具集和⽣态平台，快速提升⼯作的效率和愉悦程度。
ArcoDesign 有哪些亮点？
灵活定制 · 丰富的原⼦级组件
基于 Arco 的设计规范和 3 年的业务实践经验，我们产出了67 个原⼦级基础组件，全⾯覆盖布局、数据展⽰、数据输⼊、反馈等交互场景。更丰富细⼩的组件颗粒度和灵活的定制能⼒帮助⽤户轻松创造契合⾃⾝业务的百变主题风格。React、Vue、Mobile 多套开发框架提升开发⼯作灵活度。
智能连接 · 全⾯的⽣态平台
Arco 提供了⼀套完整的⽣态平台，旨在让开发者和设计师能够⽤⼀种语⾔进⾏沟通，⽆缝连接上下游⼯作流。此次开源的平台包括：风格配置平台（Design Lab）和⾊彩配置⼯具（Palette）⽀持在线构建并实时预览个性化主题和⾊板，让⽤户所见即所得的聚焦于设计创作与应⽤。物料市场（Material Market）和图标平台（Iconbox）提供了完善的⼯具和流程帮助业务团队快速构建业务定制图标、组件、模块、页⾯等可复⽤资产。中后台最佳实践（ArcoPro）整理了常见的典型页⾯场景，帮助⽤户更快速的从0到1构建项⽬。
风格配置平台（Design Lab）
这是⼀个旨在提升设计和开发效率的平台，通过可视化的流程协助⽤户和团队构建个性化设计风格，
帮助⽤户更好的创建和管理⾃⼰的风格主题甚⾄设计系统。我们从三个维度来定义了风格配置：
Level 1 全局样式
基本能决定⼀个组件库的风格，全局样式配置包含⾊板、圆⾓、字体、⾃重、尺⼨、阴影等能直观影响视觉的因素，⼀般通过全局样式即可配置出适⽤于不同业务场景的风格。
Level 2 组件级样式
⼀般⽤到组件级样式配置的，都是对视觉有较⼤定制需求的，传统组件库对于组件样式定制，⼀般是靠样式覆盖来做，这样做对于团队成本最⼩，但是对于⽤户来讲成本很⼤，⽽且⽤户⼀旦样式覆盖了，在版本升级上可能遭遇各种奇怪的问题导致不敢升级。为了彻底解决这个问题，我们设计了上千个组件样式变量，并且以可视化的形式呈现在了风格配置平台，⽤户可以在线调配组件的任意细节，⽽不⽤写烦⼈的样式覆盖，使后续的维护变得更加舒⼼。
Level 3 设计系统
对于⼀些团队来讲，他们不仅希望有⾃⼰团队的风格，也希望有⾃⼰团队的品牌。基于这个，我们已经上线了组件页⾯的封⾯、每个组件页头的定制。并且新增了⼀个设计语⾔的模块，让⽤户维护⾃⼰的设计语⾔，甚⾄可以⽣成⾃⼰的站点（预览模式）。
物料市场（Material Market）
为了满⾜更多业务需求并提供复⽤能⼒，我们上线了物料市场，物料市场是我们⽤来解决⾃定义痛点的另⼀把利刃。我们也从三个维度定义了物料：react开发框架
业务组件/组件库：业务组件⽤于解决的场景包括封装团队业务逻辑的组件，开发使⽤频率较低或偏门的组件，开发功能增强版组件，汇总团队内业务组件的组件库等。
区块：产物是代码⽚段，通过脚本命令下载到项⽬中或者通过 AUX 可视化⼯具添加到项⽬中，区块的特点是落地⽣根，改动了就⽆法更新区块的版本，相当于是复制了⼀份代码放到了项⽬中。区块⽤于解决的场景包括组件组合和复杂表单等。
页⾯：页⾯跟区块没有本质上的区别，只是添加了路由，它们主要是定义上的区别。不过如果结合 ArcoDesign Pro 就不⼀样了，页⾯物料会⾃动处理路由、国际化、状态管理等，使其完美适配 pro。页⾯类型的物料主要解决的场景包括特定场景类的页⾯以及包含复杂业务逻辑的中后台页⾯等。
中后台最佳实践（Arco Pro）
ArcoDesignPro是⼀个开箱即⽤的中后台前端解决⽅案，arco 拥有丰富的⽣态，pro 给出了丰富的⽰例和最佳实践，旨在为⽤户在使⽤上提供参考和思路，降低⽤户搭建项⽬的成本。ArcoDesign Pro 包含
了丰富的场景页⾯，并且跟物料平台完成了深度打通，⽀持把页⾯上传到物料平台，通过 arco 脚⼿架命令⼀键将页⾯下载到项⽬中。
⾊彩配置⼯具（Palette）
⾊彩是组件库的视觉的基⽯在⾊彩算法落地之后，我们上线了⾊彩平台，展⽰了 ArcoDesign 官⽅所有的颜⾊，也可以在线调整，让设计和开发都能⽅便的利⽤⾊彩算法的能⼒。未来我们也会⽀持⼀键同步⾊板到风格配置平台。⽆障碍⾊彩对⽐度也是很重要的⼀个颜⾊指标，我们提供了直观的页⾯，供设计和开发在线进⾏⾊彩对⽐度测试。
更多开发优势
React 和 Vue同步⽀持
基于 Arco Design 设计规范，Arco 同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发，提供了⾯向未来开发的能⼒，且与 React 组件库底层能⼒互通，均可完美利⽤ Arco ⽣态体系的各项能⼒。
科学的暗⿊模式
Arco ⽀持⼀键开启暗⿊模式，⽆缝切换，流畅体验。
暗⿊模式会让使⽤者更加专注⾃⼰的操作任务，同时避免在⿊暗环境中长时间注视⾼亮光源导致的视觉刺激。
Arco 在底层设计上，结合了 Less 和 CSS 变量各⾃的优势。Less 变量负责编译时的⾊彩计算，基于主⾊计算亮 / 暗两套梯度⾊板，CSS 变量负责页⾯渲染时的最终引⽤，从⽽实现了⽆缝切换亮 / 暗⾊风格。⽤户既能享受 CSS 变量带来的丝滑切换体验，⼜能享受 Less 变量带来配置单个主⾊即可⽣成整套⾊板的便捷，兼顾优雅与易⽤。
开箱即⽤的体验
为了帮助⽤户更快速地从 0 到 1 搭建项⽬，Arco 提供了最佳实践 ArcoPro，整理了常见的页⾯场景，帮助⽤户快速初始化项⽬和使⽤页⾯模板。
在中后台项⽬中，页⾯设计模式较为单⼀，Arco 提取了典型的业务场景，并将其抽离为页⾯模板，使⽤户通过简单的复制和修改就能快速搭建页⾯。
沉浸式⽂档体验
在 Arco 组件⽂档上，⽤户可以⼀键安装风格配置平台上的所有主题，快捷地将个⼈主题应⽤到 Arco 组件⽂档上，进⾏沉浸式的⽂档体验。
⼆次开发和复⽤能⼒
得益于 Arco 组件灵活的 API 设计以及物料平台提供的定制化组件解决⽅案，⽤户可以基于 Arco 快速开发满⾜⾃⾝特定需求的定制组件。定制化的组件将更好地复⽤业务代码，促进团队协作，提升开发效率，更可与社区共享丰富的物料资源。
完善的辅助开发⼯具链
Arco 希望通过完善的⽣态体系，提升设计、开发全流程⼯作体验。
•
Webpack 插件：帮助开发者在 Webpack 构建中⽅便地使⽤主题、实现按需加载、替换组件内置图标。
•
Arco CLI 脚⼿架⼯具：封装了物料操作命令，帮助⽤户快速创建物料项⽬并将其发布⾄ Arco 物料平台。
•
VSCode 插件：帮助⽤户在编辑器查阅⽂档、可视化操作物料等。
•
Figma 插件：聚合了常见的设计⼯具，帮助设计师更⽅便地使⽤ Arco 的各项能⼒。
设计和开发更好的协作
设计体系的主要⽤户体还包括设计师。Arco ⼀直在探索如何基于 Arco 的周边⽣态提升设计师的⼯作效率。基于公司内主流的设计交付⼯具 Figma 的设计⼯具集 Toolbox 提供了⼀键轻松到⽬标组件的设计资源以及开发资源、配⾊⼯具、图标资源上传及托管、以及提⾼设计师产出效率，输出符合设计系统规范的设计稿的效率的 Code to Design 等⼯具插件。
未来有哪些展望？
设计系统的未来不只组件库
除了以上此次开源的⽣态产品外，在未来，我们会陆续开放更多⽣态平台，包括图表可视化平台 Chartspace、Figma设计⼯具集Toolbox、品牌资源库 BrandStore、字体库Fontmall 等，通过设计⼯程化（DesignOps）的思路，将开箱即⽤的资源和⽣态平台更智能地连接起来，⾃动化、⼯具化实现打通设计师与前端⼯程师的⼯作流，提升设计开发效率。
我们服务哪些⽤户？
Arco 致⼒于探索更优质的设计体系，以解决复杂的业务以及冗余的沟通带来的体验问题，彻底解放开发及设计师的双⼿。在字节内部，我们服务了4000+ 项⽬实现⾼效⾼质的产品搭建流程。是从实践中孵化⽽来，也⼴泛服务于内部业务的产品。
的产品。
ArcoDesign 最佳实践
⽕⼭引擎- 复杂控制台场景体验设计
通过Arco组件库、风格配置平台和图标平台，智能⽣成适合多种业务需求的个性化主题包，助⼒⽕⼭引擎提升各产品线体验⼀致性，使其更好的为企业提供系统化全链路解决⽅案服务。⽬前⽕⼭引擎控制台超过60%产品使⽤ Arco 组件库进⾏搭建。
头条MP-创作者后台搭建
使⽤arco灵活丰富的组件资源，今⽇头条快速搭建⾃媒体平台头条号，为创作者提供创作发布、数据分析、收益分析等多场景实⽤功能。
BytedEffects - 移动端场景
使⽤arco mobile的定制组件与开发框架，BytedEffects开发了对智能图像创作能⼒进⾏展⽰的移动端应⽤，⽅便为客户提供沉浸式的功能预演和能⼒试⽤。
⽕⼭翻译官⽹ - 风格化landing page 搭建
使⽤Arco⾃有的图标及品牌资源，⽕⼭翻译在短时间内完成了官⽹落地页的设计⼯作，多样的视觉内容帮助聚焦⽤户关注，引流平台提供的多语⾔翻译服务。
星夜Starry - 复杂交互的设计⼯具
基于Arco组件的强交互能⼒，帮助星夜智能建站平台实现更加灵活智能的建站能⼒，在活动搭建、中后台搭建、垂直搭建等多种场景中提效。
⽕⼭同传-设计赋能AI场景
基于Arco轻量化的开发框架，⽕⼭同传实现AI实时同声传译客户端软件的快速上线，⾯向线上直播、线下⼤会等场景提供的⼀站式智能同传解决⽅案。
链接地址
我看了⼀下官⽹，挺不错的，感觉⽐ Ant.Design 还⾼⼤上些，有很多动效。点击下⾯的链接可以查看。
ArcoDesign 官⽹：
Github React 组件库：
Github Vue 组件库：
Figma UIKit ：
B端表单设计常见撕逼问题，就这么怼过去
原来下拉除了刷新，还有这么多玩法
韩国国民外卖APP-外卖的民族
你「在看」是最好的肯定与⿎励

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。