返回上一页
墨刀官方

一个拥有1328个组件的完整组件库是如何搭建和维护的

该贴发布于155天之前,功能和描述可能与目前线上版本有所出入,如果您据此无法解决问题,建议咨询在线客服

作为设计师的你,一定对「组件库」的概念并不陌生。
简单的来说,组件库就是界面设计中常用的控件与元素的组合。或许我们可以将组件库比作乐高的基础颗粒,它们看起来很简单,也没什么特别的,却可以通过设计师的巧手搭建出炫酷的城堡。
art-materials-art-supplies-blocks-1148496.jpg 288.77 KB
Photo by Sharon McCutcheon from Pexels

一个优秀的组件库可以复用在许多项目中,也可以大大减少设计师的工作量。目前市面上已经有一些开源的组件库(如:ant design、material design),然而这些组件库在我们经手的实际项目中却没有太大的意义。
这是因为不同行业、不同产品、不同项目的常用组件差异非常大,即使有了这些现成的组件库,也无法适用自己的产品,可以说每个公司所需的组件库都是非常个性化的,这也正是千米网想要搭建自己组件库的原因。
千米网是中国领先的专业电商 SaaS 平台,主要服务新零售企业,产品包含订货系统、分销系统、微商城、门店管理系统等电商解决方案。
2.jpg 73.69 KB
电商产品错综复杂,产品线之间牵连很深,让这棵盘根错节的大树在面临大版本迭代时苦不堪言。

为了保持迭代时设计风格统一、设计语言一致,并减少沟通成本,同时减轻产品经理原型设计的负担,产品架构师宋高峰协助UE组从零到一搭建一套相对完整的组件库。

在工具的选用上,几乎没花太多时间。千米一直在使用墨刀作为生产力设计工具,也已在墨刀中积累了大量的设计文件和素材。同时,墨刀的产品特性支持多人协同编辑,也方便记录交互逻辑跳转,这些特性是在组件库搭建和维护当中都不可或缺的。所以,千米UE组毫不犹豫地敲定用墨刀来完成组件库搭建。

大而全还是小而美?

组件库究竟应该小而美还是大而全?这似乎是一个两难的抉择。
如果只将核心业务模块拆解,形成小而美的组件库,那实际投入使用后,许多页面没办法用组件库而只能从零到一绘制,最后与没有组件库的时候相比也没有太好地提升效率。
然而,大而全的组件库也有一些问题
首先,大型组件库意味着维护成本高,在产品高速迭代的情况下,组件库的迭代有可能跟不上产品的迭代最后导致被弃用。
同时,以什么样的框架搭建组件库也会大大影响后期的维护与使用。
凭借对业务的深入理解和扎实的产品背景,千米UE组以技术架构为基础,结合业务特点和产品逻辑,将千米众多产品线归纳成为5个组件库:

1基础组件

基础组件如同积木的最小颗粒,按钮、下拉框、输入框等基础内容被归档在这里。
3.jpg 62.62 KB
2通用组件

通用组件就是复用性很高的一类非行业性组件,比如“登陆注册”、“找回密码“等大部分 App 都有的功能。
4.jpg 54.18 KB
3核心组件
核心组件是基于行业来提取的,比如电商常用的购物车、结算页面、订单页面。
5.jpg 42.97 KB
4聚合组件
聚合组件更像是多个导航集合的入口,比如商城的个人中心页面。    
6.jpg 49.02 KB
5个性组件
个性组件是复用性较低的部分,比如营销类活动。
7.jpg 50.4 KB

在搭建中理解业务

基础框架梳理清楚后,设计团队着手梳理业务,搭建组件库。
通过将具体产品的抽象提取,设计师们在搭建过程中更加深了对业务的理解。
UE负责人刘甜甜说:“大家都知道,业内很多的UI设计师只关注界面的美丑,而忽略页面的流程交互。我们用墨刀搭建组件库,让我们的设计小伙伴们对页面的流转更加清晰,避免了一些页面流程交互的疏漏,在交互上有了更多的提升。”
从某种程度上讲,组件库是对设计师的约束
配色、图标、按钮等一系列设计语言要素共同构成了一套标准化的设计体系,限制了基础设计方向,为后期的设计决策提供着指引。
8.jpg 39.48 KB
通过这些组件的设计积累,也避免了多业务线多款产品设计上的不统一。
从另一个角度看,组件库也是对设计师的解放
过去,在时间有限的情况下,设计师常常会优先基础层面的表层设计,而忽略了业务层面的体验优化。
有了组件库后,通过提升设计团队的业务认知,把组件省下的时间去触及业务,来更好的为设计服务,让业务和设计相辅相承

团队协同时,组件库的功用被放大到极致。
组件库搭建好后,设计团队在墨刀上与产品团队共享了这套组件库,将其提供给产品经理使用,进行原型设计搭建。

协同之间,组件库让产品和设计团队避免了表层展现不同所带来的理解误差。
“比如单选项,一般选项少时我们会用radio,选项多时会用下拉框选择,当我们定义了组件给到了说明,就相当于给到了规范,定义了规范,减少了一些不必要的沟通和解释。包括一些核心组件的信息结构布局,由专业的设计定义,产品直接使用,也提升了产品的效率。”千米UE负责人刘甜甜解释道。

维护与迭代


迭代分为两方面,一方面的迭代是基于业务,业务有变化,组件就需要跟着更新。
另一方面是设计本身需要迭代,这是出于视觉优化的迭代。
迭代可以基于需要分周期进行,旧的版本对应封版作为记录留存。       
9.jpg 48.67 KB
在搭建之初,千米UE组就考虑到了后期的维护和迭代。结构清晰的基础搭建为后期维护提供了一个条理清楚的框架。

对于日常维护,UE组为每个组件库分配了相应的责任人,让团队每个人只需要关注自己相关业务的组件库维护。而墨刀本身的多人协同属性,也让组件库的协同维护成为可能。

另外,组件不仅需要 UI 的维护,还要有前端开发的通力配合的,才能保证更好的推进和落地。

总结

组件库搭建是一个团队共同完成的大项目,为了搭建出一个真正高可用、可拓展的组件库,一定要在团队内、部门间打通沟通阻碍,完成高效配合。

开始搭建前,也需要以产品特点和技术架构确定组件库的结构,再顺着结构脉络梳理产品功能。

当然,一款优秀的工具更是不不可或缺的。上手快,功能涵盖页面设计与交互跳转,支持多人协作共同编辑,墨刀或许也可以成为你搭建组件库时的得力帮手。

评论 0