字节的 ArcoDesign 设计系统是什么.docx

《字节的 ArcoDesign 设计系统是什么.docx》由会员分享，可在线阅读，更多相关《字节的 ArcoDesign 设计系统是什么.docx（15页珍藏版）》请在三一办公上搜索。

1、ArcoDesign是什么？ArcoDesign由字节跳动GIPUED&架构前端团队联合打造的一款企业级设计系统。团队先后负责过多款亿万级用户产品的体验设计和新产品的孵化探索，包括今日头条、西瓜视频、火山引擎ToB平台业务等。在打磨了近3年之后，通过字节内部大量业务沉淀和验证，我们在10月27日举办的首届稀土开发者大会上，正式开源了ArcoDesign设计系统，旨在让社区听见更多的声音，同时让公司创造“最佳实践”的设计系统，为更多中小型企业及个人设计师和开发者提效，创造更多高效美观的“最佳实践”。智能设计系统连接轻盈体验箜丹的企业产品也计K1https：/arco.design/-*设计理念A

2、rcoDesign以务实浪漫，连接高效与美为愿景，遵从一致(Agreement)、韵律(Rhythm)、清晰(Clear)、开放(Open)的设计原则，帮助连接开发与设计之间的鸿沟，从开发者和设计师视角，以更系统化的思路解决业务问题，通过细致完善的设计资产，简单流畅的工具集和生态平台，快速提升工作的效率和愉悦程度。ArcoDesign有哪些亮点？灵活定制丰富的原子级组件基于Arco的设计规范和3年的业务实践经验，我们产出了67个原子级基础组件，全面覆盖布局、数据展示、数据输入、反馈等交互场景。更丰富细小的组件颗粒度和灵活的定制能力帮助用户轻松创造契合自身业务的百变主题风格。ReactVue.M

3、obiIC多套开发框架提升开发工作灵活度。ACTION.arco-btnbackground-color:#165DFFpadding:O16px;height:32px;font-size:14px;border-radius:2px;)智能连接全面的生态平台Arco提供了一套完整的生态平台，旨在让开发者和设计师能够用一种语言进行沟通，无缝连接上下游工作流。此次开源的平台包括：风格配置平台(DesignLab)和色彩配置工具(PaIette)支持在线构建并实时预览个性化主题和色板，让用户所见即所得的聚焦于设计创作与应用。物料市场(MaterialMarket)和图标平台(Iconbox)提供

4、了完善的工具和流程帮助业务团队快速构建业务定制图标、组件、模块、页面等可复用资产。中后台最佳实践(ArCoPro)整理了常见的典型页面场景，帮助用户更快速的从。到1构建项目。风格配置平台(DeSignLab)DesignUb这是一个旨在提升设计和开发效率的平台，通过可视化的流程协助用户和团队构建个性化设计风格，帮助用户更好的创建和管理自己的风格主题甚至设计系统。我们从三个维度来定义了风格配置：Level1全局样式基本能决定一个组件库的风格，全局样式配置包含色板、圆角、字体、自重、尺寸、阴影等能直观影响视觉的因素，一般通过全局样式即可配置出适用于不同业务场景的风格。Level2组件级样式一般用到

5、组件级样式配置的，都是对视觉有较大定制需求的，传统组件库对于组件样式定制，一般是靠样式覆盖来做，这样做对于团队成本最小，但是对于用户来讲成本很大，而且用户一旦样式覆盖了，在版本升级上可能遭遇各种奇怪的问题导致不敢升级。为了彻底解决这个问题，我们设计了上千个组件样式变量，并且以可视化的形式呈现在了风格配置平台，用户可以在线调配组件的任意细节，而不用写烦人的样式覆盖，使后续的维护变得更加舒心。Level3设计系统对于一些团队来讲，他们不仅希望有自己团队的风格，也希望有自己团队的品牌。基于这个，我们已经上线了组件页面的封面、每个组件页头的定制。并且新增了一个设计语言的模块，让用户维护自己的设计语言，

6、甚至可以生成自己的站点（预览模式）。物料市场(MaterialMarket)ArcoMMedaIMaterialMarket为了满足更多业务需求并提供复用能力，我们上线了物料市场，物料市场是我们用来解决自定义痛点的另一把利刃。我们也从三个维度定义了物料：业务组件/组件库：业务组件用于解决的场景包括封装团队业务逻辑的组件，开发使用频率较低或偏门的组件，开发功能增强版组件，汇总团队内业务组件的组件库等。区块：产物是代码片段，通过脚本命令下载到项目中或者通过AUX可视化工具添加到项目中，区块的特点是落地生根，改动了就无法更新区块的版本，相当于是复制了一份代码放到了项目中。区块用于解决的场景包括组件组

7、合和复杂表单等。页面：页面跟区块没有本质上的区别，只是添加了路由，它们主要是定义上的区别。不过如果结合ArcoDesignPro就不一样了，页面物料会自动处理路由、国际化、状态管理等，使其完美适配pr。页面类型的物料主要解决的场景包括特定场景类的页面以及包含复杂业务逻辑的中后台页面等。中后台最佳实践（ArcoPro）OArcoPro中后自住皿ArcoDesignPro是一个开箱即用的中后台前端解决方案，arco拥有丰富的生态，pr。给出了丰富的示例和最佳实践，旨在为用户在使用上提供参考和思路，降低用户搭建项目的成本。ArCODeSignPrO包含了丰富的场景页面，并且跟物料平台完成了深度打通，

8、支持把页面上传到物料平台，通过arco脚手架命令一键将页面下载到项目中。色彩配置工具（PaIette）AarCoetignColorPoltt.色彩是组件库的视觉的基石在色彩算法落地之后，我们上线了色彩平台，展示了ArCODeSign官方所有的颜色，也可以在线调整，让设计和开发都能方便的利用色彩算法的能力。未来我们也会支持-键同步色板到风格配置平台。无障碍色彩对比度也是很重要的一个颜色指标，我们提供了直观的页面，供设计和开发在线进行色彩对比度测试。更多开发优势React和Vue同步支持基于ArcoDesign设计规范，Arco同时提供了React和VUe两套UI组件库。VUC组件库基于Vue3

9、.。开发，提供了面向未来开发的能力，且与React组件库底层能力互通，均可完美利用Arco生态体系的各项能力。科学的暗黑模式ArCo支持-键开启暗黑模式，无缝切换，流畅体验。暗黑模式会让使用者更加专注自己的操作任务，同时避免在黑暗环境中长时间注视高亮光源导致的视觉刺激。ArCO在底层设计上，结合了LeSS和CSS变量各自的优势。LeSS变量负责编译时的色彩计算，基于主色计算亮/暗两套梯度色板，CSS变量负责页面渲染时的最终引用，从而实现了无缝切换亮/暗色风格。用户既能享受CSS变量带来的丝滑切换体验，又能享受Less变量带来配置单个主色即可生成整套色板的便捷，兼顾优雅与易用。开箱即用的体验为了

10、帮助用户更快速地从。到1搭建项目，Arco提供了最佳实践Arc。Pro,整理了常见的页面场景，帮助用户快速初始化项目和使用页面模板。在中后台项目中，页面设计模式较为单一，ArCO提取了典型的业务场景，并将其抽离为页面模板，使用户通过简单的复制和修改就能快速搭建页面。沉浸式文档体验在Arc。组件文档上，用户可以一键安装风格配置平台上的所有主题，快捷地将个人主题应用到Arco组件文档上，进行沉浸式的文档体验。二次开发和复用能力得益于Arco组件灵活的API设计以及物料平台提供的定制化组件解决方案，用户可以基于ArCo快速开发满足自身特定需求的定制组件。定制化的组件将更好地夏用业务代码，促进团队协作

11、，提升开发效率，更可与社区共享丰富的物料资源。完善的辅助开发工具链Arc。希望通过完善的生态体系，提升设计、开发全流程工作体验。 Webpack插件：帮助开发者在WebPaCk构建中方便地使用主题、实现按需加载、替换组件内置图标。 Arc。CLI脚手架工具：封装了物料操作命令，帮助用户快速创建物料项目并将其发布至Arc。物料平台。 VSCode插件：帮助用户在编辑器查阅文档、可视化操作物料等。 Figma插件：聚合了常见的设计工具，帮助设计师更方便地使用ArCo的各项能力。设计和开发更好的协作设计体系的主要用户群体还包括设计师。Arco一直在探索如何基于Arco的周边生态提升设计师的工作效率。

12、基于公司内主流的设计交付工具Figma的设计工具集Toolbox提供了一键轻松找到目标组件的设计资源以及开发资源、配色工具、图标资源上传及托管、以及提高设计师产出效率，输出符合设计系统规范的设计稿的效率的CodetoDesign等工具插件。未来有哪些展望？设计系统的未来不只组件库除了以上此次开源的生态产品外，在未来，我们会陆续开放更多生态平台，包括图表可视化平台ChartSpace、Figrna设计工具集ToOIbOx、品牌资源库BrandStore、字体库FOntnlall等，通过设计工程化(DesignOps)的思路，将开箱即用的资源和生态平台更智能地连接起来，自动化、工具化实现打通设计师

13、与前端工程师的工作流，提升设计开发效率。生态平台制料力熔MaterialMcet设计资源+开发工只风格配甲台OesigrOb殳务件TOOtXMIe传责与系蜕基础ArooCLlB4ArooProRMIoUr09 .*bpcNHlVSCode食用凌化阴袤奇ChertSpMD2C理论戛石Jrco.designarco.design我们服务哪些用户？Arco致力于探索更优质的设计体系，以解决复杂的业务以及冗余的沟通带来的体验问题，彻底解放开发及设计师的双手。在字节内部，我们服务了Arc。DeSign全景图4000+项目实现高效高质的产品搭建流程。是从实践中孵化而来，也广泛服务于内部业务的产品。来自众多

14、优秀产品的信任国SSTAPP。西瓜视频参大力En今日头条血番茄小说行轻服务A火山引擎N重车冷头条号丛火山解悍，VolcLive黄飞连ArcoDesign最佳实践火山引擎-复杂控制台场景体验设计通过Arco组件库、风格配置平台和图标平台，智能生成适合多种业务需求的个性化主题包，助力火山引擎提升各产品线体验一致性，使其更好的为企业提供系统化全链路解决方案服务。目前火山引擎控制台超过60%产品使用Arco组件库进行搭建。火山引擎通过“8风格配平台和IConBOX明标平台.F抵生成适合多料业务需求的 个性化主题色,助力火山引家提升各 产品线体舲一致性，使其更好的为企 业援供系统化全铅28解决方事服务.

15、ODesignLab-头条MP-创作者后台搭建使用arc。灵活丰富的组件资源，今日头条快速搭建自媒体平台头条号，为创作者提供创作发布、数据分析、收益分析等多场景实用功能。1条号使用ar8灵活丰富的组件史源.今日头条快速搭建自媒体平台头条号,为 创作者提供创作发布、数据分析、收 U分析等多场景实用功能.BytedEffects-移动端场景使用arcomobile的定制组件与开发框架，BytedEfTects开发了对智能图像创作能力进行展示的移动端应用，方便为客户提供沉浸式的功能预演和能力试用。ABytedEffects使用ar8 mobile的定制物件与开发他 架，BytedEffeCtS开发了

16、对智能图像创 作能力进行展示的移动0应用，方便 为它户攫供沉浸式的功雄预演和能力 试用.火山翻译官网-风格化landingpage搭建使用Arco自有的图标及品牌资源，火山翻译在短时间内完成了官网落地页的设计工作，多样的视觉内容帮助聚焦用户关注，引流平台提供的多语言翻译服务。於火山翻屋使用ar8自有的图标及品牌资源，火山M淳在JS时间内完成了官网落地负 的设it工作.多棒的视觉内容帮助聚 照用户关注,引漉平台提供的多语言 M逢眼务.星夜Starry-复杂交互的设计工具基于Arc。组件的强交互能力，帮助星夜智能建站平台实现更加灵活智能的建站能力，在活动搭建、中后台搭建、垂直搭建等多种场景中提效。

17、QSTARRY基于ar8组件的强交互能力.愣助星夜智能建站平台实现更加灵活智罐的修站能力，在活动搭建、中后台搭给直搭建等多种场景中槎效.火山同传-设计赋能Al场景基于Arco轻量化的开发框架，火山同传实现AI实时同声传译客户端软件的快速上线，面向线上直播、线下大会等场景提供的一站式智能同传解决方案。M中的文字并律.QBJUUI实写的直,XMSn.你可IX在文精中了IlS弊Wti格式偏e识别中的文字并礴.电可以是实时的Hflra.(Me.YoucnundenUndtheIn9ugendllwvoccanbarA-ttmdataMrmOf*axofWe.YoucanMndemndtheLM9uendTh*voicecnbear*tgandTvoicecbaZUmdMastreamoranJUdqftSMmarS*udioWe.SUIonnMtMcE-GH