Published on

从组件库到用户体验一致性保障体系

Authors
  • avatar
    Name
    hpoenixf
    Twitter

几乎每个前端团队都会用到组件库，很多团队会有自己的组件库。然而大家都在做组件库，怎么脱颖而出，让自己与众不同？不妨看看我的这篇文章。

背景

在业务快速发展过程中，我们的用户体验出现了一些不一致的情况。例如，同样的按钮在不同页面中样式和位置都不统一，对话弹出的确认按钮一下在左边一下在右边。

带来的影响

  1. 给用户带来不好的体验，可能削弱品牌形象
  2. 不一致的交互设计增加了用户的学习成本，降低了转化率
  3. 重复设计与开发不一致的产品，浪费了资源
  4. 优秀的实践难以推广，问题修复效率低下。

问题

要提升一致性，我们需要解决几个问题

  1. 怎么衡量一致性

一致性是一个有点抽象的东西，我们不能对一个设计师和研发说，你的工作一致性不高，想办法提升一下。我们有没有办法去衡量我们的一致性？就跟不知道性能数据就很难优化性能一样，如果我们不能衡量一致性，也就很难去提升一致性

  1. 怎么提高一致性

在这里，我们决定使用组件化来提高我们的一致性，我们的关键点就是怎么产出高性能，可维护，与设计风格一致，易于开发和适用的组件

  1. 找出一致性差的原因

其实研发和设计都有使用组件的概念，但是大家都是各自为政，用自己写的组件，但不同人的组件，API 和样式很容易不一样，造成看上去很相似，但实质不一致又很难发现 原因有以下几点：

  • 信息的不足：不知道该用什么组件，组件应该怎么用，组件用错了也难以意识到
  • 对一致性的恐惧：不愿意使用公用组件，怕影响业务，不愿意修改公用组件，怕影响大家
  • 懒于改变：在没有约束的情况下，人还是喜欢走捷径和按旧的用法来行动。
  1. 怎么保障一致性

这里的问题是，在我们提升一致性后，怎么保障设计师和开发者去维持我们的一致性？

解决方案

为了提升一致性，我主导了一套方案，从设计到研发、上线的全流程，全方面保障体验一致性。通过技术驱动解决这些问题，提升我们的用户体验。

设计阶段

基于我们设计师使用的 figma 平台，开发了一款设计系统插件，该插件用于检测设计稿是否规范使用了标准组件，并生成评分，便于设计师优化工作，帮助团队逐步形成组件化意识。

这里简单讲一下该插件的工作原理：

figma 平台是基于 js 的，有这么一些特点：

  1. 前端工程师可以像写 chrome 插件一样轻松的写 figma 插件
  2. 设计师使用组件来绘制设计稿，是类似编程中的类和实例概念。是从master component 中生成一个 instance 到设计稿中
  3. figma 的插件支持对 master component 添加可以被 instance 继承的属性
  4. figma 插件可以对 instance 上的属性进行分析，统计

基于以上几点，我们开发了一个插件，有这么几个功能。

  1. 给符合设计规范的 master component 添加属性，比如 tag , 在设计师使用该 maste component 生成新的 instance 后，新的 instance 就会带有对应的 tag。

  2. 对设计稿进行审查，审查的过程如下：

    a. 找出设计稿中带有tag 的全部元素，计算他们的元素数量 X

    b. 计算设计稿全部的元素的数量 Y

    c. 计算 X / Y * 100 ,得到一致性分数

一个方便理解的例子：

一个设计稿 A 有 100 个元素，只用了一个包含 20个 元素的标准组件，我们可以认为该设计稿的一致性分数为 20/100 * 100 = 20分。而有 120个元素的设计稿 B 与设计稿 A 有这类似的设计，用了三个标准组件，这些组件包含了 60个元素，一致性分数为 60 / 120 * 100 = 50, 高于 A，我们就可以认为设计稿 B 的一致性比 A 更高。

设计师在使用插件计算完一致性分数后，需要将最后的分数截图贴到设计稿中，供设计团队和研发审查

带来的好处：

  • 设计师可以更多的关注标准组件的使用
  • 设计团队的管理者和负责人，可以定期去分析设计稿的一致性分数，观察团队对于标准组件的使用情况
  • 研发可以通过审查设计稿，对于一致性分数特别低的，拒绝开发并要求设计师进行修改

研发阶段

组件库的研发

  • 搭建了按基础组件、业务组件和解决方案分层，基于 monorepo 的组件库
  • 提供包含 API 和 DEMO 的组件文档站点和交流群，供研发快速查阅与交流，解决信息不全的问题
  • 增加了 eslint、stylelint、单元测试等质量保障措施，确保组件的可用性和一致性。提升大家应用组件的信心。
  • 增加发布日志和发布文档

组件库的推广

  • 组织团队内的宣讲和培训
  • 建立体验一致性核查机制，推动测试、设计和产品共同关注用户体验一致性。

组件库的应用

  • 配置eslintd1 no-restricted-imports 规则，禁止使用不规范组件，使用不规范的组件会 eslint 报错，让页面发布失败，从而让标准组件的应用成为我们研发的必备环节
  • 通过埋点统计全局组件的使用情况

发布与监控阶段

  • 开发了 Chrome 插件，使用类似 figma 插件的原理，检测线上页面组件覆盖率，确保组件得到正确应用。
  • 使用埋点监控分析组件带来的优化效果，为后续改进提供数据支持。同时避免一致性优化脱离业务，争取产品经理和研发负责人的支持。

最终成果

  • 组件在整个团队中得到广泛使用并参与研发迭代
  • 设计插件在公司全体设计师中得到了应用
  • 提升了用户体验的一致性并提升用户转化率。
  • 降低了重复设计与开发成本，提升了团队效率。
View on GitHub