来自大厂杂谈公众号
Arco Design Mobile 开源啦！转自 公众号：字节前端 ByteFE
基于 Arco Design 设计系统、由字节跳动 UED & 小说前端匠心打造、经历两年多字节内部打磨的 Arco Design Mobile 移动端组件库开源虽迟但到~
Arco Design Mobile 提供了 50+ 基础组件，迄今为止已在字节内部迭代了两年，包括头条、西瓜、番茄小说、抖音、懂车帝等在内的 10+ 业务已接入，内部 npm 包周下载量已近 1 万，多个重要组件已在线上有了较成熟的迭代优化。了解到外部社区也有对移动端组件库的诉求，我们也收到了多次外部用户对于 Arco 移动端开源时间的咨询，我们决定把 Arco Design Mobile 的代码贡献到社区。随着 Arco Design Mobile 的开源，我们希望在持续获取意见和建议并进行迭代的同时鼓励社区共建，使组件更易用、功能更强大、使用者更广泛。
我们的优势？
- 简洁克制的 UI 设计 & 像素级还原
-
- Arco mobile 延续了 Arco Web 端“一致、清晰、韵律、开放”的价值观和设计风格，耦合头条、抖音、西瓜等多端业务的通用样式来搭建完成多种组件。核心设计理念是通用、普适、拓展性强，覆盖移动端的大多数通用场景，为设计师和研发提供基础能力支持，方便定制各种样式，而在研发侧也对 UI 设计进行了高度还原。
- 追求极致的手指交互效果
-
- 我们对轮播、选项卡、选择器等含有复杂交互的组件进行了多次踩坑迭代，在性能不如客户端的 H5 环境做到尽可能丝滑，使其尽力对齐客户端实现效果，其中图片预览的多指缩放效果实现已申请发明专利。
- 重要组件线上大流量验证
-
- 移动端各个机型性能良莠不齐，本组件库已应用到多个上亿级 DAU 产品的生产环境中，多个重要组件已经过全面的机型兼容测试，并对部分表现异常的机型进行了兼容。
- 细粒度且灵活的属性配置
-
- 移动端交互需求五花八门，本组件库在提供细粒度属性供快速配置的同时，也留好了定制的插槽使用户可实现自定义样式，尽力寻找易用与灵活的平衡。
- 多类使用场景支持
-
- 支持服务端渲染，在 SSR 环境有成熟应用；支持国际化，可传入自定义语言包替换组件默认文案；支持主题定制，提供上千个主题变量，不久的将来还会支持在平台直接定制；支持按需引入，Tree shaking 友好。
客户案例
Arco Design Mobile 组件库已在头条、西瓜、番茄小说等大流量 APP 中深度使用，承载了许多复杂的业务场景，大幅提升了研发人效。以下是一些典型的组件落地场景展示。
| 番茄小说 | 今日头条 |
| 1. 选项卡 Tabs2. 可滑动弹出层 PopupSwiper3. 导航栏 NavBar | 1. 轮播图 Carousel2. 下拉刷新 PullRefresh3. 选项卡 Tabs |
\
| 头条百科 | 头条百科 |
| 1. 对话框 Dialog2. 轮播图 Carousel3. 图片预览 ImagePreview | 1. 气泡卡片 Popover2. 选项卡 Tabs3. 对话框 Dialog4. 下拉选择菜单 DropdownMenu |
我们的未来？
目前 Arco Design Mobile 是基于 React 技术栈实现，Vue 版本将在当前组件库在社区有了进一步打磨后再计划推出；未来我们也将基于 Arco Design Mobile 推出移动端「风格配置平台」，完善移动端组件配套体系，敬请期待~
这些组件马上出炉：
- 图片选择器 ImagePicker
- 表单 Form
- 滑动操作 SwipeAction
- 搜索栏 SearchBar
- 步进器 Stepper
- 回到顶部 BackTop
- ……
这些特性在路上啦：
- 无障碍适配
- 复合组件
- ……
