一款无惧“魔改”的设计系统开源了,已支持字节跳动4000多个项目

CSDN资讯 CSDN资讯     2023-01-23     120

关键词:

对设计师和前端开发来说,个性化设计和高效的实现往往难以兼得:

视觉上的个性化设计往往意味着开发要对设计系统的组件库进行各种魔改和封装,对程序员来说,不仅开发成本高,后期维护也比较困难。

现在,一款名为Arco Design的全新开源设计系统或将打破上述困局。

ArcoDesign的开发者、字节跳动GIP UED和前端架构技术团队介绍,个性化定制能力被列为Arco需要解决的头号问题,除此之外,Arco Design还着力解决了“二次开发+复用能力”以及“设计+开发无缝协作”两大前端开发者最为头疼的问题。目前,Arco Design已经支持了字节内部超过 4000 个项目,是字节内部使用规模最大的设计系统。

官网:https://arco.design

Github React 组件库:
https://github.com/arco-design/arco-design

Github Vue 组件库:
https://github.com/arco-design/arco-design-vue

务实而浪漫的Arco Design

Arco的名字来自于:Agreement(遵从一致)、Rhythm(韵律)、Clear(清晰)、Open(开放)。在意大利语中,Arco还意为一种优雅的音乐演奏手法。

正如其名字所蕴含的寓意,作为一款企业级设计系统,Arco Design秉承这样的底层设计原则:

一致:一致的设计产生品牌信赖感,也指开发与设计达成平衡一致

韵律:构建富有韵律的设计美感,是Bytedancer的浪漫

清晰:清晰的指向亦是效率的提升

开放:开放的平台面向更多的业务和产品提供具有生长性、包容性设计体系,适应更多复杂的业务场景

一张图读懂Arco Design

ArcoDesign拥有系统的设计规范和资源,同时依据规范提供了丰富的原子组件,覆盖了 React、Vue 两个技术栈。

在原子组件基础上,ArcoDesign也提供了丰富的定制化工具,包括风格配置平台、物料平台等,还提供资源平台包括 IconBox、Arco Pro 最佳实践等。旨在帮助设计师与开发者解放双手、提升工作效率,更高效、高质量的打造符合业务规范的中后台应用。

ArcoDesign想解决哪些问题

在过去的 3 年里,字节跳动内部中后台产品业务量的迅速增长对传统的设计与开发方式提出了很大的挑战。随着项目变大,模块和页面变多,视觉风格和交互越来越难以统一。

同一个业务平台下,不同的模块的视觉风格和前端开发框架都可能大相径庭,这对于用户体验和平台的一致性造成了巨大的困扰。

ArcoDesign的初衷就是想从源头上去解决平台的差异性和一致性问题,又快又好地提升各个平台的设计质量。

具体来看,ArcoDesign在个性化定制能力、二次开发+复用能力、设计+开发更好地协作方面有所突破。

个性化定制能力

不同的团队风格,不同的业务场景,对视觉风格会有不同的需求。

以往,不论有没有设计参与,整体的技术选型都是比较自由的,有的团队选择 React ,有的选择 Vue;有的组件库是面性设计,有的组件库是线性设计。当设计给出设计图,开发需要在项目里进行各式各样的样式魔改。

在项目变多之后,为了更小成本的维护和代码重用,一般会基于所选组件库封装一个新的组件库,这个二次开发的组件库对组件的风格样式和默认行为进行魔改,魔改需要开发花费大量的时间成本,但基本是唯一的解决方案。

然而,只要涉及到魔改,就不可避免地会遇到升级问题。只要升级底层组件库,就有可能导致样式甚至功能出现出现不可预知的改变,为了求稳,就需要锁版本,锁了版本又没办法享受版本升级带来的新特性和 bug 修复,陷入一个恶性循环的怪圈。

魔改容易造成的恶性循环

为了解决样式定制难这个痛点,Arco 从设计之初就对组件进行了细致的拆分。

组件是设计系统提供的最底层能力。Arco 提供了 67 个基础组件,这些基础组件足以支撑绝大多数的业务需求。

一键切换“暗黑模式”

风格样式定制
ArcoDesign将影响组件视觉的样式都抽离到了 token 之中,token 是最小化描述组件样式的变量,组件库中是以 less 变量的形式存在。从全局变量到组件级变量,用 token 来解释组件,用上千个 token 变量,来保证通过配置变量,就能对样式风格进行任意定制。

比如现在越来越多的网站会考虑支持暗色风格切换,“暗黑模式”会让使用者更加专注自己的操作任务,同时在夜间或暗光环境使用下可以减少屏幕光对眼睛的刺激,避免在黑暗环境中长时间注视高亮光源带来的视觉刺激。ArcoDesign支持一键开启暗黑模式,无缝切换,流畅体验。

默认行为定制
Arco 支持 60+ 组件默认行为的全局配置,以极大的灵活性,减小维护成本、提升开发体验。用户只需要维护一份全局配置,就能定制每一个组件的默认交互。

值得注意的是,Arco 同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发,提供了面向未来开发的能力,且与 React 组件库底层能力互通,均可完美利用 Arco 生态体系的各项能力。

依托系统的 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已经成为字节跳动内部使用量最大的设计系统,助力众多字节优秀产品打造高质量的产品体验。Arco Design 在字节跳动内部还做了更多方面的探索,如可视化建站平台、D2C 设计图转代码工具、C2D 代码转设计图工具、品牌库等,未来将陆续开放。

https://arco.design/ →

Arco Design 现已正式开放,欢迎使用和体验。Arco 非常重视每一位用户的意见,希望大家踊跃反馈,积极共建。

字节前端终于开源!吹爆!(代码片段)

...是鱼皮。最近,字节跳动的抖音前端技术团队开源了一款企业级应用设计系统SemiDesign 。这也是他们团队在GitHub上首次公开的项目,短短几天,就收获了3.6k个star。GitHub开源仓库老实说,看到这个开源项目的那一... 查看详情

字节跳动开源数据集成引擎bitsail的演进历程与能力解析

导读BitSail是字节跳动开源数据集成引擎,支持多种异构数据源间的数据同步,并提供离线、实时、全量、增量场景下全域数据集成解决方案,目前支撑了字节内部和火山引擎多个客户的数据集成需求。经过字节跳动各大业务线... 查看详情

字节跳动前技术总监开源分享《android架构设计权威指南》,yyds!

架构就像是一场进化史,根据不同时期的需求,演变出不同的架构,车轮滚滚,到今天,移动端框架百花齐放,让人目不暇接。但是其中的本质是磨灭不了的,换言之根本没有磨灭而是隐藏到了人们所... 查看详情

一款基于springboot的公众号管理系统,已开源,别再自己写了!

点击关注公众号,Java干货及时送达推荐一个支持公众号管理系统,支持多公众号接入。提供公众号菜单、自动回复、公众号素材、简易CMS、等管理功能,请注意本项目仅为管理后台界面,需配合后端程序wx-api一起... 查看详情

字节跳动开源最新gan压缩算法,算力消耗可减少至1/46(代码片段)

字节跳动近期开源了一项代号为OMGD的压缩技术。这是字节自研的GAN(生成对抗网络)压缩算法,在保证生成效果不变的前提下,算力消耗最低可以减少到原来的1/46,相比之前业界的最佳压缩效果提升一倍多。... 查看详情

字节跳动如何从0到1打造一个开源项目?

本文整理自51CTO开源基础软件学习季的直播公开课《字节跳动的开源实践与思考》 像很多公司一样,字节跳动接触开源也有一个从0到1、由浅入深的过程,大体经历三个阶段: 第一阶段,使用开源。为了推动业务更快发... 查看详情

字节跳动开源的一个golang微服务http框架

...项目是「Hertz」,是一个Golang微服务HTTP框架,在设计之初参考了其他开源框架fasthttp、gin、echo的优势,并结合字节跳动内部的需求,使其具有高易用性、高性能、高扩展性等特点,目前在字节跳动内部已广泛... 查看详情

高性能rpc框架cloudwego-kitex内外统一的开源实践

...节跳动技术沙龙圆满落幕,本期沙龙以《字节高性能开源微服务框架:CloudWeGo》为主题。在沙龙中,字节跳动字节跳动基础架构服务框架资深研发工程师杨芮,跟大家分享了《高性能RPC框架Kitex内外统一的开源实... 查看详情

字节跳动开源的,运行在macos上,专注于移动端研发的工具链应用

大家好,我是周刊菌。加入「码农周刊VIP会员」,一起牛起来!以下内容选自「码农周刊VIP会员」圈子,每日更新,精彩不断。码农周刊是什么?码农周刊是一份专为广大程序员、编程爱好者们打造的IT技术周刊。每周发送。2013... 查看详情

编程实践系列:字节跳动面试题

...(每轮一题)项目经验架构+业务做了什么核心设计优化解决了什么难题体现思考业务理解架构设计能力项目需求设计demo:如何设计一个微信点赞系统?秒杀系统?大促领券场景设计?计算机基础java:jvm... 查看详情

好用的国产操作系统都有哪些?

...更多,真正有自己内核的,几乎没有!! 参考技术B开发一款操作系统难度并不大,难就难在没有丰富的应用。现在不管国内和国外基于Linux开源内核开发的系统非常多,Linux并不是属于哪个国家的,任何公司或者是个人都可以使... 查看详情

字节跳动开源隐私合规检测工具appshark

...发质量等原因,App中或多或少的会存在安全漏洞或因开发设计不谨慎引入的违规收集个人信息等合规风险,带着漏洞运行的App将严重威胁着网络及用户安全,合规问题则可能受到监管通报甚至存在下架处罚风险。因此,企业也在... 查看详情

浅析starrocks(dorisdb)

...联网企业被适用于核心业务实时数据分析。DorisDB的架构设计融合了MPP数据库,以及分布式系统的设计思想,具有以下特性:架构简单DorisDB集群的正常运行不需要依赖任何其他系统,易部署,易维护.极简的架构设计,降低了DorisD... 查看详情

牛逼,字节跳动又一开源大作!程序员的福音!

...有位读者私信,说能不能推荐一些大厂使用的安卓类开源项目,想了下,读者中也有不少搞安卓开发的,所以今天给大家推荐一个大厂出品的安卓开源项目。这个项目是「ByteHook」,目前在GitHub收获了670Starÿ... 查看详情

字节跳动+京东+美团+腾讯面试总结,逆袭面经分享

高并发架构消息队列搜索引擎缓存分库分表读写分离设计高并发系统高并发架构部分内容缓存:Redis高可用:高并发系统设计:分布式系统分布式业务系统,就是把原来用Java开发的一个大块系统,给拆分成多... 查看详情

flutter字节跳动穿山甲广告插件发布-flutterads(代码片段)

...也比较多,或是停止维护了,于是决定自己开发一款优质广告插件。广告平台分析广告平台是否支持FlutterGoogle(AdMob)✅是腾讯(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百... 查看详情

flutter字节跳动穿山甲广告插件发布-flutterads(代码片段)

...也比较多,或是停止维护了,于是决定自己开发一款优质广告插件。广告平台分析广告平台是否支持FlutterGoogle(AdMob)✅是腾讯(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百... 查看详情

字节跳动开源序列推理引擎lightseq(代码片段)

背景介绍2017年Google提出了Transformer[1]模型,之后在它基础上诞生了许多优秀的预训练语言模型和机器翻译模型,如BERT[2]、GPT系列[13]等,不断刷新着众多自然语言处理任务的能力水平。与此同时,这些模型的参数... 查看详情