关于搭建组件库的10点心得

更高效的沟通、更迅速的开发、更一致的体验……诸多优点让组件库的搭建在近几年流行起来。甚至一些大厂的组件体系已非常成熟,如Ant Design,WeUI等等。成熟的组件库对产品体验确实有肉眼可见的提升。如果你也想为团队搭建一个组件库,希望以下内容能帮到你。Enjoy~

产品、组件与设计规范

组件库简单来说就是一些积木,而产品相当于成品模型。我们可以根据业务需求,以“搭积木”的方式,让“模型”快速落地。而“搭积木”过程中并不是随心所欲,至少需要看一看“使用说明”,而这“使用说明”就是设计规范。产品、组件和规范差不多就是这样的关系。

至于为什么要搭建组件库,怎么去搭建组件库,网上已有很多澳门线上百家乐相关的文章,也有非常系统的方法,在此给大家推荐一本书《设计体系》。国内也有大神翻译过此书,翻译得很棒,推荐给大家:链接。

而近段时间,正参与一个体量较大的B端项目,负责其中财务模块的交互设计以及产品的组件库搭建。目前组件库已经基本搭建完成,能覆盖70%+的业务场景,团队效率大大提升的同时保障了产品体验的一致性。藉此机会,我想分享一下在搭建组件库这个项目中的一些心得。

1 绝不是设计师就能搞定的事

其实在这个项目之前,我也尝试过梳理出一些所负责的产品的组件和规范,以便日后有新需求时可以参考复用,不必重复造轮子。但设计规范基本很少人看,然后就一直静静地躺在文件夹里。我也曾经在Sketch上做了很多Symbol,推广团队内部用起来,从而提高画稿的效率和一致性。但交付开发同学后,不同的开发依然会对每个组件都要重新写一遍。

现在回头一想,出现这种情况,原因也很简单:以前梳理的组件没有开发落地,只是一张图纸,并不是实打实的组件。

所以搭建组件绝不是设计师就能搞定的事情。而且开发应作为核心的主力之一,我们的输出物应该是开发的代码,真正地在代码层实现拖拽组件就能搭建界面原型,而不是Sketch上的Symbol。只停留在纸面上的组件和规范,其实意义不大。

澳门线上百家乐或许搭建组件库这事情会让人兴奋不已,巴不得马上撸起袖子开干。但在此之前,是否有开发的支持、设计与开发是否达成共识、大家是否愿意并肩作战,是我们首要解决的难题。

2 要搞明白面向的对象是谁

以我的项目为例,面向的是设计师、前端开发和产品经理这三个群体,而这三个群体对组件库的需求是截然不同的。设计师希望能了解到组件库的使用规范、适用场景、拓展方案等等;产品经理希望知道新的业务需求可以拿什么组件完成,组件是否能满足业务场景等等 ;开发更关心的是组件的接口、方法、属性等等。这样一梳理下来,就可明确输出物应该包含什么内容、如何呈现、需协调哪些资源来完成。

3 不要套用模板、每个细节都值得思考

在设计之前我们会参考一下竞品如:Material Design、Ant Design、WeUI……,看看他们如何分类、如何命名、如何定义等等。为了赶进度,我们也曾套用了一些模板,为自己埋下了不少坑。比如组件的分类,一个搜索组件,有的会将其归为操作类,有的将其归为导航类、基础类、输入类等等。为了方便我们直接参考了竞品的分类方法,简单粗暴地将其归为输入类。一开始并不觉得有什么不妥,但后来发现难以应对的各种挑战也随之而来。

比如,在之后的动效库项目中,我们希望输入类组件应减少动效,避免过多的动效打扰用户。但同时又觉得搜索组件应该加上动效,能给予用户更清晰的引导。这时我们陷入了问题的漩涡中:如何解释同类的组件为什么会有截然不同的动效属性?动效的规范又如何定义?为什么搜索会被归为输入类组件?……一系列问题被引发出来。这就是我们在分类组件时思考不到位所带来的结果。

总之,今天不假思索套用的模板,会成为日后需要不断填的坑。越基础的东西越影响全局,牵一发而动全身。

4 事先应了解技术限制

开发在实现组件时都会基于一些现有框架,不会去重复造轮子。例如,蚂蚁的Ant Design 基于 React 框架,有赞的 Zant 基于 VUE 框架。技术选型看似对设计影响不大。但到了要落地的时候,开发同学的一句“框架不支持”,能直接将你的设计打回原形。框架不支持就需要改框架,不是开发同学不做到,是真的需要很长时间。在设计的时候提前了解到开发的限制,会让我们少走弯路。

5 沟通、沟通、沟通

我认为,沟通协调是搭建组件库中最大的挑战之一:收集各个模块的产品经理、前端开发、后端开发、视觉设计的意见和建议,建立评审机制,传达设计思路,统一设计方案……

澳门线上百家乐每个角色都会在各自立场对组件提出不同意见。例如,针对筛选组件:

  • 视觉设计师希望:“样式布局应该是清晰有规律的,否则用户难以寻找信息。”
  • 交互设计师希望:“在用户感知层面应尽快地让用户辨认出所需的筛选项,而不是每次都需要花时间寻找。”
  • 负责财务模块的产品经理希望:“时间的筛选对于财务人员来说几乎每天都需要用到,这个应该强调。”
  • 负责业务模块的产品经理希望:“业务的筛选场景非常个性化,一个固定的模式必然遭用户吐槽,最好有用户自定义的功能。”
  • 开发希望:“维护的成本太高,无论在什么场景下都应该是统一的组件,统一的逻辑。”
  • ……

涉及这么多利益相关方的讨论,不可能一次两次就可以解决。必须反复沟通,甚至能在沟通7次之后达成共识已经是不错的结果。有时候我们设计师会觉得,好不容易想出一个方案,被如此评头品足,还要推到重来,非常不爽。

仔细想想,自己的眼界往往是局限的,不可能完全了解用户在各个模块下,各个状态下的使用场景。其他角色的输出其实非常有价值。不抵触意见,接纳各种思想,抽象提炼关键设计点,才能推导出大家认可的解决方案。

6 艰难的抉择:业务独特性与组件一致性的冲突

澳门线上百家乐当组件和规范已有雏形,投入使用的时候,新的问题又来了:我们应该在什么时候放弃规范,什么时候坚持规范?

除了负责组件库项目,我还是其他产品模块的设计师。这让我陷入了两难:一方面我想保证整体产品的一致性,尽量不打破原有的规则去设计,尽量使用组件覆盖业务需求;但另一方面,在一些特殊的业务场景下,不使用组件的设计方案会有更好的体验。这样的两难困境会经常遇到,业务的特殊性和组件的一致性很难共存。

以下总结了几点小建议可以分享给大家:

澳门线上百家乐第一,影响全局的组件调整,建议遵循规范。比如,不可能因为一个特殊的业务去改变 导航结构,一旦改变,其他业务都会受到牵连,得不偿失。除非在一个大版本迭代中,全局考虑一并调整。

第二,用户感知弱的优化,建议遵循规范。比如,为了让用户能在一个页面内阅读更多信息,想去改变表格的行高 ,但调整后也就省了一行的高度。这种改变,用户的感知是很弱的,反而会增大开发维护的工作量。

第三,符合规范不是思考的起点。如果组件体系运行地还顺畅,我们就有可能产生依赖,一上来就规规矩矩地依照规范设计页面。而这往往是设计的禁区,组件和规范是效率工具,不应该成为我们创新的枷锁。我们思考的起点永远是用户、场景和目标。设计规范只是在最后帮我们扶正一下,哪些可以复用组件,哪些可以跟规范走。

澳门线上百家乐第四,不认死理,规范就应该不断迭代。如果发现我们的组件和规范能覆盖的场景非常有限,就应该去迭代它们,而不是强行地套规范来设计。

7 走查:将理念传达出去

保证产品体验的一致性是我们的目标之一,但只完成组件库无法完全保证产品的一致性。因为相同的功能可以由不同的组件满足,相同的组件在页面上也可以有不同的布局。所以,将组件库搭建出来后还远未结束,我们需要一致性走查。

一致性走查,能规范现有页面的同时,也能在上下游对接中传达一致性的理念。比如,在开发修改的时候,我们可向他们传达:主要按钮次要按钮的用法是怎样的、什么时候应该用复选框、什么时候应该用开关等等。因为他们未必有时间去查看设计规范,面对面的传达更加有效。

另外,B端产品体量太大,不可能每个页面都有设计资源支持。不少页面并没有经过设计就直接开发。所以走查的目的不仅是把问题改好,而是将一致性的理念和设计规范传达出去。如此一来,在面对新的业务需求时,大家才会更快得把事情做好。

8 验证与迭代

对组件所做的每一个优化,都是基于用户和场景的假设,可能正中用户下怀,也有可能是一厢情愿。我们的优化需要经得起用户和市场的验证,于是对组件库进行了多次可用性测试。而每一次测试都会有意外发现。比如一些我们理所应当的操作,用户根本理解不了。又或是我们精心打磨的细节,用户其实毫不在意。所以验证-迭代是组件库不可或缺的环节,同时也是一个反复而漫长的过程。

9 创新总在矛盾中产生

组件库的难点在于需要解决各种矛盾:业务特殊性与组件通用性的矛盾、易用性与复杂度的矛盾、设计设想与开发实现的矛盾、各产品线间的需求矛盾等等。有时会陷入这些矛盾中无法绕出来,甚至矛盾是无解的,只能折中方案。

但机会与困境总是并存的,在我们的项目中,几乎所有的创新点都在矛盾中产生,有的还申请了专利。所以,拥抱矛盾,机会一直在我们眼前。

10 要为产品负责

组件库虽然是从出业务层抽离出来的东西,但其宗旨依然是服务业务。我们很容易迷失在一个个组件中,忘记业务的真实场景是什么、真实用户是谁,很容易一味地追求组件和规范本身的逻辑自洽,却忽略用户的实际感知。比如,我们严格区分了按钮和链接的区别,按钮适用于某个功能的触发,而链接隐喻着页面跳转。但用户是否会这样理解?有这样的感知?还是对于他们来说都是可点击的东西而已?组件和规范不应限死所有逻辑,我们的目的不是自圆其说,而是真切地对产品有帮助,对用户有帮助。

写在最后

通篇看下来之后,你可能会觉得,这不就跟平时的产品设计思路差不多嘛。是的,组件库就是一个产品。每个产品都值得我们细心经营、用心打磨。Thanks~

#专栏作家#

Genrry,公众号:设计师阿余,人人都是产品经理专栏作家。关注用户体验,擅长多端交互设计、界面设计。曾负责大型B端产品及VR游戏产品体验设计,制定设计规范,打磨细节体验,探索创新交互体验。

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

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 很棒,谢谢阿余。

    回复
  2. Zant还是Vant呀

    回复
    1. 是Vant,感谢指正~

      回复
    2. 澳门线上百家乐也谢谢你啦 让我开始了解一个新的组件库

      回复
  3. 很专业,基本把推进组件化的坑都提出来了。能够感受到难度之大,一旦有规范化的执行,对团队效率肯定是大大的提升。

    回复
圈子
  • 产品经理群
  • 运营交流群
  • 营销增长群
  • 文案交流群
  • Axure学习群
关注微信公众号
大家都在问
在线玩百家乐 pk10官网 澳门百家乐玩法大全 百家乐在线网站大全 网上百家乐网站 网上百家乐网站 澳门网上百家乐 澳门百家乐网站官网 澳门在线百家乐 百家乐在线网站大全