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

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

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

现在,一款名为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 非常重视每一位用户的意见,希望大家踊跃反馈,积极共建。

(0)

相关推荐

  • 设计师必看!如何精准还原设计稿?

    编辑导语:在一个团队里,成员之间"协同合作"是非常有必要的,比如一些岗位没办法完全理解设计师的想法,多沟通可以避免一些不必要的摩擦:在出现问题时,现在自己的环节找找问题,再进行沟通 ...

  • 大厂设计师的交付细节全公开

    5年前,我毕业进入一家业内知名的设计外包公司,正式开启了UI设计师的生涯. 在这段经历中,给我的最大感悟就是:千万不能在整个过程中只是被动地画图,然后将成品丢给甲方/程序员就觉得万事大吉.后续的&qu ...

  • UI系列干货 - 详解UI设计规范,入门必读

    作者:JIN石为KAI 01.设计规范综述 1.1 定义 作为一个B端产品,为了应对公司快速迭代开拓市场和一部分购买者的定制化需求,与此同时还要保障产品间的用户体验一致性,近年来设计规范这一解决方案不 ...

  • SaaS产品中的组件化产品设计

    编辑导语:SaaS,是近年来比较火的一个话题,不少企业都在SaaS这条赛道上展开了激烈的角逐,其中不乏有巨头们的身影.去年,腾讯更是提出要用100亿资源,帮助中小企业打造专属的SaaS产品及解决方案. ...

  • 无惧通胀,货币最紧时候或已过去 | 2021.5策略报告

    资产表现回顾 5月份新兴市场和欧洲市场整体表现较好.中国三大指数均录得不错的涨幅,盈利增速较快的创业板涨幅仍处于前列.尽管疫情严重,印度股市却表现亮眼.而美股纳斯达克指数受通胀影响小幅下跌,标普与日经 ...

  • 解放青汽JH6多款车型搭载独立空调,无惧酷暑,清凉驾驶

    一年四季当中,对于卡友而言最难熬的当属夏天.想开空调又怕费钱,满身大汗又左右为难,令无数卡友内心充满矛盾.解放青汽准确洞察卡友痛点,为多款JH6车型搭载海尔独立空调,满足安全.省电.长续航等需求,让炎 ...

  • 如何设计一款无线充TWS耳机充电盒?看完秒懂

    无线充电和TWS,是当下消费电子领域两大热门技术和行业话题.两项技术都是致力于摆脱线缆,为消费者提供更好的用户使用体验. TWS耳机充电盒是非常理想的小功率无线充电场景,支持无线充电的TWS无线蓝牙耳 ...

  • 探店丨中期改款无新意,三缸车型是主力,买领克03这几点需要注意

    百车全说 每天1分钟,买车更轻松! · 1分钟看完本文 · 1. 新款领克03最大的变化在于升级了车机系统.2.0T版本变速箱取消8AT,改为7速湿式双离合. 2. 主推1.5T劲PRO,优惠6000 ...

  • 【欣赏】几款魔改

    作者:妩娍琉菲 那啥,上次的魔改红奉先的作品放在新手村就有点炸村了,为何新手村和谐的精神明建设,这次的作品就屈就[欣赏]好了. 妩娍琉菲的作品是很符合iN的想法了,不断的通过重新组合制作出属于自己味道 ...

  • 让科技走进生活,拥有这款黑科技刷子,从此无惧清洁鞋子

    声波的清洁能力,真就这么强吗? 市面上越来越多的产品,尤其是清洁类产品,都爱带上声波的噱头. 并且一旦带上声波,售价总会往上飘一点,人们也更爱为之买单. 但带回家却发现,清洁能力并没有想象中那么强大. ...

  • 身材好无惧年龄,54岁李若彤穿17岁同款校服,让人忘记了年纪

    提到李若彤,对于年龄较大的朋友们可能会第一时间想要她所塑造的小龙女的角色,我们也会很亲切地把她叫做姑姑.但是对于年轻朋友们来讲,对于她的关注可能会集中在她对身材的管理上面.因为不知道从什么时候开始李若 ...

  • 童话式的街角的小住宅,无惧环境的恶劣,设计创造美好的生活空间

    项目信息 基地面积:约90㎡ 建筑面积:180㎡ 建筑层数:3层 房型格局:四房三厅一厨三卫 屋顶花园 项目背景 项目位于小城镇,业主夫妇原与父母一起居住,随着二孩的长大,居住空间越发显得拥挤.正好同 ...

  • 魔改步枪亮相:瑞士1957年老枪居然变成这样 还有人造出太空款

    你认识这款步枪吗? 是不是会认为它是一款全新型号,其实它是上世纪50年代服役的.它是瑞士Sturmgewehr 57(又名Stgw 57.SIG SG 510.F.ass.57)步枪的改装型,更换了全 ...