Arco Design：字节跳动企业级设计系统

本文介绍 Arco Design，字节跳动出品的企业级设计系统，提供完整的 React 和 Vue 组件库，以及丰富的设计资源和工具。

Arco Design 简介

Arco Design 是由字节跳动（ByteDance）GIP UED & 架构前端团队推出的企业级设计系统。它提供了一套完整的设计语言、React/Vue 组件库、以及丰富的生态产品，帮助开发者快速构建高质量的中后台产品。

核心特点：

企业级设计系统
支持 React 和 Vue 双框架
丰富的组件库（60+ 组件）
完善的设计资源
强大的生态工具

设计系统

设计原则

Arco Design 遵循以下设计原则：

一致性：统一的设计语言，确保产品体验一致
效率：提供丰富的模板和最佳实践，提升开发效率
可控：灵活的配置选项，满足不同业务需求

设计规范

Arco Design 提供详细的设计规范文档：

基础：颜色、字体、图标、布局
组件：每个组件的详细设计说明
模式：常见交互模式的最佳实践
资源：Figma 设计资源、图标库

组件库

Arco Design 提供 60+ 高质量组件，分为以下类别：

通用组件

组件	说明
Button 按钮	触发操作或事件
Icon 图标	语义化的矢量图形
Link 链接	导航至另一页面
Typography 排版	文本和排版样式

布局组件

组件	说明
Grid 栅格	24 列响应式栅格系统
Layout 布局	页面整体布局框架
Space 间距	设置元素之间的间距

数据展示组件

组件	说明
Avatar 头像	用户头像展示
Badge 徽标	显示数字或状态标记
Comment 评论	评论内容展示
Descriptions 描述列表	成组展示只读字段
Empty 空状态	无数据时的占位展示
List 列表	基础列表展示
Popover 气泡卡片	点击/悬停触发的浮层
Table 表格	数据表格展示
Tabs 标签页	内容分组切换
Tooltip 文字气泡	简单的文字提示

数据输入组件

组件	说明
Cascader 级联选择	多级选项选择
Checkbox 复选框	多选控件
Input 输入框	基础文本输入
Radio 单选框	单选控件
Select 选择器	下拉选择器
Transfer 数据穿梭框	两栏数据选择
Upload 上传	文件上传

反馈组件

组件	说明
Alert 警告提示	页面警告信息
Drawer 抽屉	从边缘滑出的面板
Message 全局提示	全局消息提示
Modal 对话框	模态对话框
Notification 通知提醒	通知消息提醒
Popconfirm 气泡确认框	确认操作的气泡
Progress 进度条	展示操作进度
Skeleton 骨架屏	加载占位图

导航组件

组件	说明
Breadcrumb 面包屑	显示当前页面路径
Dropdown 下拉菜单	向下展开的菜单
Menu 菜单	导航菜单

组件示例：Dropdown 下拉菜单

以 Dropdown 组件为例，展示 Arco Design 的详细文档：

组件定义

将备选命令或菜单折叠到向下展开的浮层容器中。

组件构成

菜单项（必有）：传达用户当前选择的内容或操作
下拉项（可选）：展示其他菜单项
搜索（可选）：允许用户快捷查找备选菜单项

组件类型

按样式分类：

菜单项类型：文字型、按钮型
下拉项类型：文字下拉项、左图标下拉项、右图标下拉项

按用途分类：

基础下拉菜单
多级下拉菜单
分组下拉菜单
含搜索的下拉菜单

何时使用

导航菜单：将产品导航进行分组
工具菜单：工具栏的呈现
操作集合：表格操作区域的多项操作

何时不使用

只有两个选项时，建议使用单选框
不建议嵌套下拉列表或显示过于复杂的信息

交互行为

悬浮触发：移入展开，移出或点击其他区域关闭
点击触发：通过鼠标点击展开
弹出方向：支持 6 种方位（上、左上、右上、下、左下、右下）

生态产品

DesignLab 风格配置平台

功能：

在线定制主题风格
实时预览设计效果
一键导出主题包
访问地址：https://arco.design/themes/stores

ArcoMaterial 物料平台

功能：

丰富的业务组件物料
区块和页面模板
社区贡献的物料
访问地址：https://arco.design/material

ArcoPro 中后台最佳实践

功能：

完整的中后台解决方案
丰富的页面模板
最佳实践示例
访问地址：https://pro.arco.design/

设计资源

Figma 资源

Web 组件库 Figma 资源：完整的设计组件库
Mobile 组件库 Figma 资源：移动端设计组件
ArcoPro Figma 资源：中后台模板设计
图标 Figma 资源：Arco 图标库

开发工具

Webpack Plugin：Arco 专用 Webpack 插件
Vite Plugin：支持 Vite 构建工具
CLI 工具：命令行工具集

技术特性

双框架支持

React 组件库：完整的 React 实现
Vue 组件库：完整的 Vue 实现
统一的 API 设计
一致的视觉表现

主题定制

Design Token：完整的设计令牌系统
主题配置：灵活的主题定制选项
暗色模式：内置暗色主题支持
CSS 变量：基于 CSS 变量的主题切换

国际化

内置 60+ 语言支持
可扩展的国际化方案
RTL 布局支持

无障碍

完整的 ARIA 支持
键盘导航支持
屏幕阅读器友好

使用场景

中后台管理系统

数据管理后台
运营管理系统
配置管理平台

企业级应用

SaaS 产品
B2B 平台
内部工具

数据密集型产品

数据分析平台
报表系统
监控仪表盘

总结

Arco Design 是一个成熟的企业级设计系统，具有以下核心优势：

企业级品质：经过字节跳动内部大量产品验证
完整生态：从设计到开发的全链路解决方案
双框架支持：同时支持 React 和 Vue
丰富资源：完善的设计资源和物料生态
灵活定制：强大的主题定制能力
开源免费：完全开源，免费使用

对于需要构建中后台产品、企业级应用的团队来说，Arco Design 是一个值得信赖的选择。其完善的组件库、丰富的生态产品和详细的文档，可以显著提升开发效率和产品质量。

字节笔记本