ArcoDesign – 字节跳动团队最新开源的企业级产品设计系统,包含一套Vue3/React UI 组件库

在刚结束的2021稀土开发者大会上,头条和抖音的母公司字节跳动开源了ArcoDesign / SemiDesign 两款 UI 组件库,本文主要介绍 ArcoDesign。
ArcoDesign - 字节跳动团队最新开源的企业级产品设计系统,包含一套Vue3/React UI 组件库

关于 ArcoDesign

ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来,在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,在前两天由掘金举办的《稀土开发者大会2021》上开源了,这不仅仅是一款 UI 组件库,而是一个能力全面的企业级产品设计系统。

arco-design 官网
arco-design 官网

ArcoDesign 主要解决在打造中后台应用时,让产品设计和开发无缝连接,提高质量和效率。目前 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由 UED 设计和开发同学共同构建及维护。

ArcoDesign 的亮点

  • 提供系统且全面的设计规范和资源,覆盖产品设计、UI 设计以及后期开发
  • React 和 Vue 同步支持。同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发
  • 支持一键开启暗黑模式,无缝切换
  • 提供了最佳实践ArcoPro,整理了常见的页面场景,帮助用户快速初始化项目和使用页面模板,从 0 到 1 搭建中后台应用

上手体验和使用建议

ArcoDesign 官方介绍和文档写得很磅礴,内容超多,格局很大,容易让人眼花缭乱,对于一个设计系统或者是一套 UI 组件库,每个人的看法不一样,下面我提取一些我比较在意的点。

UI 设计观感

ArcoDesign 提供的这套组件设计风格很时尚新潮,配色鲜明,细节处理优雅,细微的交互动效让人很舒服,不需要投入太多的设计工作就可以搭建一个品质很高的应用。当然对于设计能力强的团队,ArcoDesign 也提供了很多快速且精准的样式定制工具。

arco-design 组件
arco-design 组件

如果你是一个 UI 设计师,官方详尽的设计指南不仅是一个参考手册,还是一部高水平的 UI 设计教程,非常值得去细啃。相比去看软件使用技巧、图标按钮制作教程,很多 UI 设计师更需要的是理念和设计水平的提高。

设计指南
设计指南

设计资源方面,ArcoDesign 自带一套图标库,但数量不是很多,目前正常使用很大概率会缺图标。同时也提供了 Figma / Sketch / Axure 文件格式的设计源文档来方便设计师和产品经理取用。

前端开发

ArcoDesign UI 组件库的使用文档很详尽,上手简单,代码例子充足,使用体验和 AntDesign 、Element UI 类似。

arco-design 官网
arco-design 设计/开发资源

基于 ArcoDesign 这套组件库,官方提供了中后台的最佳实践 Arco Design Pro,技术栈为 React/ES2015+/TypeScript/bizcharts/ Arco Design,估计是新上线,文档也比较简单,有兴趣可以深入研究。

从底层组件到上层平台,Arco 提供了极致的定制能力。比如样式方面,ArcoDesign 从设计之初就通过细致的拆分,将影响组件视觉的样式都抽离为上千个独立的 token 变量,并基于这些变量完成了从全局样式组件样式的全面配置。这样对开发带来的好处是,二次开发省事,复用方便,大大提高了效率。

官网还有很多特性的说明,作为一个介绍文章没法展开篇幅说明,总的来说,ArcoDesign 是一个可用性很强的中后台应用设计系统,但就是横空出世,要做的事情太多了,借用知乎果木的话:

铺得太开,要做的事情太多,从 Design System、组件库(甚至还要适配不同框架)、主题配置系统、组件上层物料、工程构建……真心太多了,长期投入一定跟不上,希望能更聚焦点,把单点能力做深做好。

开源真心不易,值得尊重。但面向社会的开源产品和面向内部是不一样的,需要投入大量的精力,目前我们看到了 ArcoDesign 的优秀和可用性,衷心希望 ArcoDesign 不要沦落为大厂秀肌肉的 kpi 项目

免费开源说明

ArcoDesign 是由字节跳动开源的产品设计系统,其中 UI 组件库源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费使用。

访问官网

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧