Arco Pro v2.0 全新上线 🎉
千呼万唤，Arco Pro 2.0 终于来啦！
Arco Design 是由字节跳动 GIP UED 团队 和 架构前端团队联合推出的企业级设计系统。
本次发布的 Arco Pro 是一套 开箱即用的中后台 前端 解决方案，Admin 中后台管理页面，支持 React 和 Vue 两套技术栈 ，支持创新的多架构方案 。
多架构开箱即用 · 设计升级更多交互
Arco Pro 主要解决的痛点
Arco Pro 最佳实践提供了基于 B 端产品典型场景抽象的常用设计模式，以及配套的开发脚手架。设计师需要从业务场景中提炼典型模板。
Pro 主要服务产品开发设计中的三个重要角色、解决的痛点问题：
- 开发同学开箱即用的 中后台应用 脚手架
- 设计同学快速上手的中后台最佳实践设计资源
- 产品/业务同学对 ****Arco 组件及页面级别交互规范示例
本次发布的主要内容
-
Arco Pro React V2 版
Github 地址
亮点
- TypeScript ****- 代码完全使用 TypeScript 书写
- Arco Design - 由 ArcoDesign React 组件库强力驱动
- Templates - 16+ 页面模版，覆盖表格、列表、表单、工作台、可视化等场景。
- Themes - 基于「风格配置平台」丰富的主题市场，让你的项目千变万化。
- Dark Theme - 一键丝滑切换暗黑风格
- Mock - 内置 api 模拟方案
- Flexible - 灵活的多架构方案，支持 next.js / vite/ cra 等开发框架
- I18n - 内置国际化多语言解决方案
- Config - 灵活配置页面配色、布局等。
Arco Pro Vue V2 版
Github 地址
亮点
- TypeScript ****- 代码完全使用 TypeScript 书写。
- Vue3 - 面向未来，拥抱 Vue3。
- Arco Design - 由 ArcoDesign Vue3 组件库强力驱动
- Templates - 16+ 页面模版，覆盖表格、列表、表单、工作台、可视化等场景。
- Themes - 基于「风格配置平台」丰富的主题市场，让你的项目千变万化。
- Dark Theme - 一键丝滑切换暗黑风格。
- Mock - 内置 api 模拟方案，代码即注释，更加仿真线上环境。
- I18n - 内置国际化多语言解决方案。
- Config - 灵活配置页面配色、布局等。
- Store - 内置更加完备的TS类型声明。
Arco Pro 2.0 中后台典型页面设计资源
Arco Pro的设计资源已经上线至figma社区，欢迎大家来体验并提出宝贵建议～
技术创新：多架构方案
本质上 Pro 项目是一套项目模版，市面上常见的中后台项目模版一般都有固定的选型和架构，这样用户如果想自己修改架构，成本会比较大。
所以 Arco Pro v2 版本设计了一套多架构方案，能够在最大化的代码重用的基础上，输出多种架构的 pro 模版。
目前支持的架构
React【3】
Vue【1】
-
如何初始化项目
$ npm i @arco-design/arco-cli@latest -g
$ arco init my-project
设计风格全面升级
设计关键词：清晰、轻量、真实、普适。
清晰 · 优化视觉层级提升信息获取效率
- 卡片：以卡片形式增加内容分区，使用4px圆角的卡片布局，能够使用户可以快速聚焦卡片内容；
- 字重：在 Arco 原有组件基础上适当增加字号和字重的区分，将更突出信息层级，快速识别重点；
- Icon： 多彩的颜色运用、icon 风格统一服务于信息层级表现；同时导航侧icon进行优化，用更大的尺寸、稳重感代替轻细小巧的风格，塑造更加清晰可辨的icon，达到快速传达信息的目的。
以 Dashboard 页面为例
轻量 · 更年轻的设计风格
近年来，B端后台设计风格逐渐C化已经成为了新的设计趋势，随着工作人群的年轻化、C端产品的快速发展，已经培养了用户对一些功能、操作、交互逻辑的底层认知。此次 Arco Pro2.0 的设计升级改版当中，也尝试了更轻量、和以往中后台页面的风格有较大差别的尝试和创新。
- 尝试新的设计风格：本次优化增加了C端流行的风格元素，引入毛玻璃材质、半透明风格等元素，在设计语言上更为时尚流行，同时强调内容视觉重心，注重内容说明。
- 使用更加多元的色彩：整体改变B端以往冷静平淡的风格，在配色的选取上进行了更加多元和大胆的尝试。在不影响功能效率和使用习惯的前提下适当追求流行化，多采用高明度色彩、冷暖色搭配、渐变色等设计细节，色彩风格活泼轻巧。
以数据可视化-多维数据分析为例
- 暗黑模式的色彩适配： 多元化的色彩与新的设计风格同样也根据arco暗黑色彩体系进行了调整和适配，构建风格化的暗色视觉层次。确保在暗黑模式下内容的清晰可读性。同时，使用暗黑模式也能缓解眼部疲劳哦～
真实 · 还原真实使用场景，增加更多交互逻辑
从团队的实际的业务出发， 在火山引擎等核心业务中提炼了较为典型、信息展示效果较全面的模块，业务信息脱敏后，搭建成为 Arco Pro 更真实的工作台数据。
B端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层和表现层中与一些C端产品在一定程度保持了一致。这种设计理念其实也很好的解决了中后台产品复杂、门槛高、难用等痛点，降低了用户的认知成本和学习成本，把高效、简单、易用的工具带到大家的日常工作中。
- 内容真实：整套pro的内容基于“内容运营&管理”这一特定场景进行填充，围绕流量管理、运营后台、内容分发等功能主题进行设计，丰富充实。
- 交互真实：本次优化增加了更多的交互反馈，操作贴近场景，互动更为真实，大家快去线上体验一下吧！～
以数据可视化-分析页为例
普适 · 兼容更多产品信息场景
- 基础组件拼搭：Pro 的页面 70% 都由 Arco Design基础组件搭建而来，期望更多开发者和设计师，通过「基础」及「默认」的组件配置就能搭建出好看又好用的中后台界面。
- 场景选取更具包容性： 从数十个业务典型页面中，抽象筛选出 Pro 的界面模型和内容结构，基于内容平台的后台管理场景，输出了包括工作台、查询表格、卡片列表、分步表单、分组表单、详情页、数据分析页、多维数据、结果页、异常页、个人中心等常用核心场景的页面。
话不多说，赶快去线上地址体验使用 Arco Pro 2.0吧~ pro.arco.design/
🎉 福利抽奖时间 🎉
关注 Arco Design 微信公众号，后台回复「a rco p ro ****cool」即可参与抽奖，
我们将在小伙伴中抽取 22位 同学，送出 10 套 Arco 限量版周边套装 ~
Arco 限量周边包括：定制T恤、保温咖啡杯、环保杜邦纸袋、Arco 限量版贴纸~
本期周边抽奖已结束，欢迎关注Arco 下次活动 ~
Arco Design
长按二维码一键关注
\
\
