字节跳动如何实现产品体验的一致性?ArcoDesign给出了一部分答案( 二 )


一键切换“暗黑模式”
1)风格样式定制
ArcoDesign将影响组件视觉的样式都抽离到了 token 之中,token 是最小化描述组件样式的变量,组件库中是以 less 变量的形式存在 。从全局变量到组件级变量,用 token 来解释组件,用上千个 token 变量,来保证通过配置变量,就能对样式风格进行任意定制 。
比如现在越来越多的网站会考虑支持暗色风格切换,“暗黑模式”会让使用者更加专注自己的操作任务,同时在夜间或暗光环境使用下可以减少屏幕光对眼睛的刺激,避免在黑暗环境中长时间注视高亮光源带来的视觉刺激 。ArcoDesign支持一键开启暗黑模式,无缝切换,流畅体验 。
2)默认行为定制
Arco 支持 60+ 组件默认行为的全局配置,以极大的灵活性,减小维护成本、提升开发体验 。用户只需要维护一份全局配置,就能定制每一个组件的默认交互 。
值得注意的是,除了上述能力,ArcoDesign还有助于简化传统项目上线前反复验收的繁琐流程 。
传统的情况是,当设计确定设计稿,开发通过上述提到的样式定制和默认行为定制去定制符合设计规范的基础组件,在上线之前需要反复地跟 UI 进行样式还原验收,同时从设计稿到研发再到 UI 走查验收 。
Arco 提供了样式可视化编辑的「风格配置平台」 。基于风格配置平台所见即所得的组件配置能力,用户可以对全局样式和组件样式做细粒度的调整,实现「ArcoDesign to Any Design」,大幅提升流程效率 。
在配置完成之后,用户可一键发布主题到主题市场,提供优秀的主题风格给社区 。在主题市场上,用户可以浏览所有主题,自由地进行选用 。
依托系统的 ArcoDesign 设计规范,即便是无设计师参与的平台产品,ArcoDesign也可以帮助开发者快速构建专业、一致的体验 。
2. 二次开发和复用能力得益于 Arco 组件灵活的 API 设计以及物料平台提供的定制化组件解决方案,用户可以基于 Arco 快速开发满足自身特定需求的定制组件 。定制化的组件将更好地复用业务代码,促进团队协作,提升开发效率,更可与社区共享丰富的物料资源 。
3. 设计和开发更好地协作Arco希望通过提供全流程完善的生态体系,提升设计、开发全流程工作体验 。
三、全流程完善的生态体系1. 生态平台 风格配置平台:通过协助用户构建个性化主题,帮助用户更好地管理不同风格的主题配置,提高设计和开发的协作效率 。物料平台:基于 Arco 脚手架工具快速进行定制化的业务组件开发、共享,实现业务模块的解耦与复用,提升开发效率,促进团队协作 。图标平台 IconBox:提供规范化、统一化的高质量业务图标库 。中后台最佳实践 Arco Pro:帮助用户快速的从 0 到 1 搭建项目,支持用户自由选用常见页面模版 。色彩配置工具 :帮助设计师和开发者在线调试颜色,探索 Arco 色彩算法 。2. 开发工具 Webpack 插件:帮助开发者在 Webpack 构建中方便地使用主题、实现按需加载、替换组件内置图标 。Arco CLI 脚手架工具:封装了物料操作命令,帮助用户快速创建物料项目并将其发布至 Arco 物料平台 。VSCode 插件:帮助用户在编辑器查阅文档、可视化操作物料等 。Figma 插件:聚合了常见的设计工具,帮助设计师更方便地使用 Arco 的各项能力 。3. 设计功能 为了方便设计师定位资源,Arco 提供了资源定位的 Figma 插件功能,让设计师可以一键轻松找到目标组件的设计资源以及开发资源 。为了提高设计师的配色效率,Arco 提供了色彩配置的 Figma 插件功能,可以根据指定颜色通过算法智能生成明亮以及暗黑模式下的梯度色板 。为了提高制作图标的效率,Arco 提供了一键拖拽使用 Arco 图标的 Figma 插件功能,在线颜色、线宽、尺寸调整,灵活配置,游刃有余 。为了降低设计师制作 Figma 变体的成本,提高设计师产出符合设计系统规范的设计稿的效率,Arco 探索了 Code to Design,提供了以组件为维度的 Figma 插件功能,设计师可以通过在插件里配置组件属性,自动生成对应的设计元素 。同时打通了风格配置平台,让设计稿可以轻松实现 「一键换肤」 为了方便设计师管理图标,Arco 推出了Iconbox 图标平台,旨在让设计师可以在该平台上高效地管理自己的图标 。并且提供了图标上传的 Figma 插件功能,支持设计师在 Figma 中直接选中图标一键上传至图标平台 。经过了近三年的迭代和众多产品的验证,Arco Design已经成为字节跳动内部使用量最大的设计系统,助力众多字节优秀产品打造高质量的产品体验 。未来,可视化建站平台、D2C 设计图转代码工具、C2D 代码转设计图工具、品牌库等功能将陆续上线并开放 。


以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: