按关键词阅读:
编辑导语:产品设计这一环节至关重要,它关乎到最终的用户使用体验。此时,若能降低设计和开发之间的沟通损耗,提升二者的协作效率,将可以有效保障产品落地后的用户体验。那么,不妨来看看文章里介绍的企业级设计系统——ArcoDesign。
文章插图
在圣经的故事里,传说曾经全人类都讲同一种语言,并计划建造一座通天的巴别塔。为了阻止巴别塔的建成,上帝打乱了人类的语言。由于在建造过程中无法沟通交流,巴别塔的建造状况百出,最后不了了之。
一款互联网产品的诞生,往往要经过需求分析、产品分析、产品规划、产品设计和产品落地五个阶段,需要产品经理、UI、前端、后端之间的密切协作。其中,产品设计直接关乎到产品落地的形态和最终的用户体验,如何消除协作中面临的沟通信息损耗,让设计和开发的协作更加容易和高效,一套统一的“语言”或将起到事倍功半的作用。
近日,一款名为ArcoDesign的企业级设计系统,在由稀土掘金技术社区主办的首届稀土开发者大会上全新开源。设计系统是一种思维,也被视作设计师与前端开发沟通的一种语言。据ArcoDesign的开发者、来自字节跳动GIP UED和前端架构技术团队介绍,让设计和开发无缝协作,专注用户体验的提升,是ArcoDesign要重点解决的问题之一。
ArcoDesign官网:https://arco.design
文章插图
一、关于ArcoDesign在正式推出并开源之前,ArcoDesign 曾经以技术中台的形式在字节跳动内部运行了三年,已经支持了字节内部超过 4000 个项目,是字节内部使用规模最大的设计系统。
ArcoDesign 拥有系统的设计规范和资源,依据此规范提供了覆盖 React、Vue、Mobile 的原子组件。基于丰富的原子组件,Arco 除了提供风格配置平台、物料平台的定制化工具外,还提供包括图标平台、品牌库、Arco Pro 最佳实践的资源平台,旨在帮助设计师与开发者解放双手、提升工作效率、高质量地打造符合业务规范的中后台应用。
文章插图
二、ArcoDesign想解决哪些问题在过去的 3 年里,字节跳动内部中后台产品业务量的迅速增长对传统的设计与开发方式提出了很大的挑战。随着项目变大,模块和页面变多,视觉风格和交互越来越难以统一。
同一个业务平台下,不同模块的视觉风格和前端开发框架都可能大相径庭,这对于用户体验和平台的一致性造成了巨大的困扰。
ArcoDesign的初衷就是想从源头上去解决平台的差异性和一致性问题,又快又好地提升各个平台的设计质量。
具体来看,ArcoDesign在个性化定制能力、二次开发+复用能力、设计+开发更好地协作方面有所突破。
文章插图
1. 个性化定制能力不同的团队风格,不同的业务场景,对视觉风格会有不同的需求。
以往,不论有没有设计参与,整体的技术选型都是比较自由的,有的团队选择 React ,有的选择 Vue;有的组件库是面性设计,有的组件库是线性设计。当设计给出设计图,开发需要在项目里进行各式各样的样式魔改。
在项目变多之后,为了更小成本的维护和代码重用,一般会基于所选组件库封装一个新的组件库,这个二次开发的组件库对组件的风格样式和默认行为进行魔改,魔改需要开发花费大量的时间成本,但基本是唯一的解决方案。
然而,只要涉及到魔改,就不可避免地会遇到升级问题。只要升级底层组件库,就有可能导致样式甚至功能出现出现不可预知的改变,为了求稳,就需要锁版本,锁了版本又没办法享受版本升级带来的新特性和 bug 修复,陷入一个恶性循环的怪圈。
文章插图
魔改容易造成的恶性循环
为了解决样式定制难这个痛点,Arco 从设计之初就对组件进行了细致的拆分。
组件是设计系统提供的最底层能力。Arco 提供了 67 个基础组件,这些基础组件足以支撑绝大多数的业务需求。
文章插图
一键切换“暗黑模式”
1)风格样式定制
ArcoDesign将影响组件视觉的样式都抽离到了 token 之中,token 是最小化描述组件样式的变量,组件库中是以 less 变量的形式存在。从全局变量到组件级变量,用 token 来解释组件,用上千个 token 变量,来保证通过配置变量,就能对样式风格进行任意定制。
稿源:(人人都是产品经理)
【傻大方】网址:http://www.shadafang.com/c/102Y354402021.html
标题:开发者|字节跳动如何实现产品体验的一致性?ArcoDesign给出了一部分答案