如何开发组件库(如何快速定义一款B端的组件规范)

编辑导语:组件库的搭建在一定程度上可以提高产品开发效率,减少业务流程中的疑惑产生。那么,应该如何设计组件、快速定义B端的组件规范?本篇文章里,作者结合自身撰写、升级组件库的经验,从阶段出发,对如何定义B端组件规范做了总结,一起来看一下。

如何开发组件库(如何快速定义一款B端的组件规范)(1)

各大设计团队为了释放设计人力,会根据业务情况封装组件库,后续开发成代码,方便前端同学进行组件调取,也同时节省了开发成本。

写这篇文章是根据自己撰写并升级了原有组件库的经验,让大家大概了解设计组件背后需要做哪些工作,日后制定组件规范可以直接套用。

一、写组件的目的

在工作中做一件事情首先要思考做了之后要达到什么样的效果。写组件的目的就是要让每一个场景下的操作都具有合理性,让产品变得好用、易用、可用。让各个业务在遇到类似的业务需求时,不要产生:

  1. 应该使用哪个组件?
  2. 组件操作应该包含哪些状态反馈给用户?
  3. 不同业务,同一品牌下如何保证交互一致性?
  4. 组件不能满足应该怎么办?
  5. ……

一系列模棱两可的疑问。

二、写组件的前期准备:组件结构层梳理

从层级上排列:产品——应用——页面——模块——组件。组件在页面中属于原子级的元素。

首先对团队业务组件进行盘点、同时对比行业内竞品组件,比如Ant Design、飞冰 Iceworks、Element、SUI、iView、Admui、Zent。

第一步:根据组件的作用进行分类,梳理组件清单,比如:组件分为通用类、导航类、数据输入类、数据展示类、反馈类等。

第二步:梳理完成后划分组件设计优先级,参考维度:

  • 『我们』有 行业内有(p0)、『我们』有 行业没有(p1)、『我们』没有 行业有(p2)。
  • 『我们』有 行业内有(p0):代表了这类组件是解决行业内产品问题高频应用的刚需组件,比如搜索、按钮等。
  • 『我们』有 行业没有(p1):代表这类组件多为业务类型组件,是业务的特殊性产生了这类组件,比如:卡片、折叠面板等。
  • 『我们』没有 行业有(p2):代表了这类组件可能是行业内潜在有某种业务形态,列在『我们』范围内以免以后遇到类似的,无规范可查。

第三步:对组件进行结构层、行为层和表现层元素进行拆解,参考标准为是否常变动。

如何开发组件库(如何快速定义一款B端的组件规范)(2)

三、写组件前期准备:行为场景梳理

其实结构层分为组件种类(导航类、按钮类、提示类……)和组件类别(下拉菜单、顶部tab、走马灯……)分析到现在应该得到的是原子级的组件类别,接下来就需要根据场景继续细分组件的形态,从而得到组件形态的分类定义。

如何开发组件库(如何快速定义一款B端的组件规范)(3)

组件最难的是如何定义和区分组件行为层的类别,不断在定义标准,目的是保证撰写组件时,状态不会模棱两可,难以取舍。通过写组件经验分享一下我们从应用、差异化、组件构成是通过以下角度确立的标准:

  • 组件应用标准:通过组件使用规律给组件下定义。
  • 组件差异化:通过限定场景突出功能特点,让用户感知到信息操作的差异,赋予业务场景特定交互特色。
  • 组件分区:通过前面梳理的,组件有哪些是常变动、哪些是不常变动的,去定义,基础必备元素构成写死(不可调整),基础元素以外的内容,可以写成活代码(可调整)。
四、写组件设计阶段:体验分析

规范的成立是根据多角度、多业务验证才确定,所以需要时刻思考组件设计的边界。在写组件时可以思考以下6个问题:

如何开发组件库(如何快速定义一款B端的组件规范)(4)

如何开发组件库(如何快速定义一款B端的组件规范)(5)

五、写组件设计阶段:撰写组件

通常直接浏览的角色是:UE设计师、UI设计师、前端程序员、间接浏览角色:产品经理、售前、后端程序员等。根据角色确定撰写内容包含哪些结构和信息。

从输出文档角度举例,可以从组件的结构层、行为层和表现层依次撰写。

如何开发组件库(如何快速定义一款B端的组件规范)(6)

从组件业务角度举例如:下拉菜单。

菜单内容大多是预置、后台调取、后续手动添加,所以根据业务属性会产生多种形态。确定组件类别后,同时应要对每一个组件的类别确定必有的基础组件状态,比如:默认、悬停、点击、禁用四种是每个组件都必有的状态,其他会根据组件属性增加。

基础菜单:满足菜单基本功能,单选、多选。

如何开发组件库(如何快速定义一款B端的组件规范)(7)

分组菜单:指菜单内容需要展示分类标题和内容时。

如何开发组件库(如何快速定义一款B端的组件规范)(8)

多层级菜单:指根据目标层级选择一个或多个的选项。

如何开发组件库(如何快速定义一款B端的组件规范)(9)

以上内容仅此举例,希望能给大家在写组件时带来更多的思路。

本文由@石果果 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页