编辑简介：产品设计非常重要，它与最终的用户体验有关。此时，如果能减少设计与开发之间的沟通损失，提高两者的合作效率，就能有效保证产品着陆后的用户体验。那么，让我们来看看文章中介绍的企业级设计系统——ArcoDesign。
在圣经的故事中，据说全人类都说同样的语言，并计划建造一座巴别塔。上帝打乱了人类的语言，以防止巴别塔的建成。由于施工过程中无法沟通，巴别塔的施工条件百出百出，最终失败。
互联网产品的诞生往往需要产品经理、UI、密切配合前端和后端。其中，产品设计直接关系到产品着陆的形式和最终的用户体验。如何消除合作中的沟通信息损失，使设计与开发的合作更加轻松高效。一套统一的语言可能会事半功倍。
最近，一个叫ArcoDesign由稀土掘金技术社区主办的首届稀土开发者大会上，企业级设计系统全新开源。设计系统是一种思维，也被视为设计师与前端开发沟通的语言。据ArcoDesign字节跳动的开发者GIP UED介绍前端架构技术团队，让设计与开发无缝合作，注重用户体验的提升ArcoDesign重点解决的问题之一。
ArcoDesign官网：https://arco.design
在正式推出并开源之前，ArcoDesign 以技术中心的形式在字节跳动内运行了三年，支持字节内部超过 4000 该项目是字节内最大的设计系统。
ArcoDesign 根据本规范，拥有系统的设计规范和资源，提供覆盖范围 React、Vue、Mobile 原子组件。基于丰富的原子组件，Arco 除了提供定制的风格配置平台和材料平台工具外，还提供图标平台、品牌库Arco Pro 最佳实践资源平台旨在帮助设计师和开发者解放双手，提高工作效率，打造符合业务规范的中后台应用。
在过去的 3 多年来，字节跳动内部中后台产品业务量的快速增长对传统的设计和开发式提出了巨大的挑战。随着项目的扩加，模块和页面的增加，视觉风格和交互越来越难以统一。
在同一业务平台下，不同模块的视觉风格可能与前端开发框架非常不同，这给用户体验和平台的一致性带来了巨大的麻烦。
ArcoDesign初衷是从源头上解决平台的差异性和一致性问题，快速、良好地提高各平台的设计质量。
具体来看，ArcoDesign在个性化定制能力、二次开发 复用能力，设计 在更好的合作方面取得了突破。
不同的团队风格，不同的商业场景，对视觉风格有不同的需求。
过去，无论是否有设计参与，整体技术选择都相对自由，一些团队选择 React ，有的选择 Vue；有些组件库是面性设计，有些组件库是线性设计。当设计给出设计图纸时，开发需要对项目中的各种风格进行魔法改造。
项目增加后，为了降低成本维护和代码重用，一般会根据选定的组件库包装一个新的组件库。这个二次开发的组件库魔法改变了组件的风格和默认行为。魔法改变需要花费大量的时间和成本，但它基本上是唯一的解决方案。
但是，只要涉及魔改，升级问题必然会遇到。只要底部组件库升级，风格甚至功能都可能发生不可预测的变化。为了寻求稳定性，您需要锁定版本。锁定版本不能享受版本升级带来的新特性和 bug 修复，陷入恶性循环的怪圈。
恶性循环容易引起恶性循环
为了解决样式定制难这个痛点，Arco 组件从设计开始就被仔细拆分。
组件是设计系统提供的底层能力。Arco 提供了 67 这些基本组件足以支持绝大多数的业务需求。
一键切换暗黑模式
1)风格定制
ArcoDesign将影响组件视觉的样式抽离到 token 之中，token 对组件样式的变量进行最小化描述，在组件库中 less 变量的形式存在。从全局变量到组件级变量，使用 token 用数千个组件来解释组件 token 通过配置变量，可以随意定制风格。
购买抖音播放量网站,Qq名片赞0元购买网站 - qq空间秒赞平台网站
例如，越来越多的网站会考虑支持深色风格的切换。黑暗模式将使用户更加关注自己的操作任务。同时，在夜间或暗光环境下，可以减少屏幕光对眼睛的刺激，避免在黑暗环境中长时间观察亮光源带来的视觉刺激。ArcoDesign一键开启暗黑模式，无缝切换，体验流畅。
2)默认行为定制
Arco 支持 60 以极大的灵活性，降低维护成本，提高开发体验，构件默认行为的全局配置。用户可以定制每个组件的默认交互，只需要维护一个全局配置。
除上述能力外，值得注意的是，ArcoDesign也有助于简化传统项目上线前反复验收的繁琐流程。
传统情况下，当设计确定设计草案时，开发符合设计规范的基本组件是通过上述风格定制和默认行为定制的，在上线前需要反复跟进 UI 样式还原验收，同时从设计稿到研发再到 UI 走查验收。
Arco 提供样式可视化编辑「风格配置平台」。用户可以根据风格配置平台组件配置能力，用户可以调整整体风格和组件风格，实现「ArcoDesign to Any Design」，大大提高了流程效率。
配置完成后，用户可以一键向主题市场发布主题，为社区提供优秀的主题风格。在主题市场上，用户可以浏览所有主题市场。
依托系统的 ArcoDesign 设计规范，即使是没有设计师参与的平台产品，ArcoDesign还可以帮助开发者快速构建专业一致的体验。
得益于 Arco 组件灵活的 API 设计以及物料平台提供的定制化组件解决方案，用户可以基于 Arco 快速开发满足自身特定需求的定制组件。定制组件将更好地重用业务代码，促进团队合作，提高开发效率，与社区共享丰富的材料资源。
Arco希望通过提供完善的全过程生态系统，提升设计和开发全过程工作体验。
风格配置平台：帮助用户构建个性化主题，帮助用户更好地管理不同风格的主题配置，提高设计与开发的合作效率。材料平台：基础 Arco 脚手架工具快速开发和共享定制的业务组件，实现业务模块的解耦和再利用，提高开发效率，促进团队合作。图标平台 IconBox：提供标准化、统一的优质商业图标库。中后台最佳实践 Arco Pro：帮助用户快速服从 0 到 1 建设项目，支持用户自由选择常见的页面模板。配色工具 ：帮助设计师和开发者在线调试颜色 Arco 色彩算法。
Webpack 插件：帮助开发者 Webpack 构建中方便使用主题，按需加载，更换组件内置图标。Arco CLI 脚手架工具：包装材料操作命令，帮助用户快速创建材料项目并发布到 Arco 物料平台。VSCode 插件：帮助用户在编辑器中查阅文档、可视化操作材料等。Figma 插件：聚合常见的设计工具，帮助设计师更方便地使用 Arco 各种能力。
为方便设计师定位资源，Arco 提供资源定位 Figma 插件功能，让设计师一键轻松找到目标组件的设计资源和开发资源。为提高设计师的配色效率，Arco 提供色彩配置 Figma 插件功能，可以根据指定颜色通过算法智能生成明亮以及暗黑模式下的梯度色板。为提高制作图标的效率，Arco 提供一键拖拉使用 Arco 图标的 Figma 插件功能，在线颜色，线宽，尺寸调整，配置灵活，方便。为减少设计师的制作 Figma 变体成本，提高设计师生产符合设计系统规范的设计稿的效率，Arco 探索了 Code to Design，以组件为维度维度的维度 Figma 设计师可以在插件中配置组件属性，自动生成相应的设计元素。同时，开辟了风格配置平台，使设计草轻松实现 「一键换肤」为方便设计师管理图标，Arco 推出了Iconbox 图标平台旨在让设计师在平台上有效地管理图标。并提供上传图标的图标 Figma 支持设计师的插件功能 Figma 一键上传到图标平台。经过近三年的迭代和众多产品的验证，Arco Design它已成为字节跳动内部使用多的设计系统，帮助许多优秀的字节产品创造高质量的产品体验。未来可视化建站平台，D2C 设计图转换代码工具，C2D 代码转设计图工具、品牌库等功能将陆续上线开放。
正如 「Arco」 同名，遵循【Agreement / 一致】、【Rhythm / 韵律】、【Clear / 清晰】、【Open / 开放的概念，Arco 希望能帮助更多用户提高工作效率和愉悦度，打造更好的产品。
Arco Design 欢迎使用和体验。Arco 非常重视每个用户的意见，希望大家积极反馈，积极共建。
Github React 组件库：
https://github.com/arco-design/arco-design
Github Vue 组件库：
https://github.com/arco-design/arco-design-vue
本文由 @Cindy 每个人都是产品经理。禁止未经许可转载。
题图来自 Unsplash，基于CC0协议
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。
标签：
评论