菜单导航

以网易FishDesign为例:企业级UI组件库的设计方法与实践(原创)

作者: 昌平信息网 发布时间: 2019年12月18日 16:09:36

组件库最大的价值在于提升整个团队的产研效率,使设计质量得以保障的同时提升产品整体的用户体验。

以网易FishDesign为例:企业级UI组件库的设计方法与实践(原创)

产品:这次需求很简单,对比上期只有字段和操作项的差异,把上次的稿子直接复制一下应该不用很多时间吧?

交互:上次你是不是做过高级筛选组合?我这期需求要用到,你把那部分稿子发给我用用吧。

研发:这个组件我在其他模块里看到过已有样式,这次为啥用不一样的?不然又要重复开发呀,能不能给统一下。

视觉:同一个按钮在不同的模块颜色不一样诶,这次要和哪个模块一致啊?

通过以上对话不难看出,在整个互联网产品设计到研发的过程中,最常出现在需求沟通与研发过程中由于缺少统一的规范和标准化体系来指导实践,导致实施环节各方沟通成本高,造成设计成果与实现有一定差距,影响用户体验。

通用组件和业务组件混用导致设计模式和代码复用率低,尤其是当业务发展到一定体量时,对于复杂产品的大量重复且类似的需求场景。如果没有一种高效的工具和规范来协同工作,将大大影响团队的生产及沟通效率。

一、问题

认知:产品、研发、设计师对于同一需求都有自己理解的解决方案,缺少统一规范的约束,难以达成共识。

效率:设计效率低,交互原型的维护成本及上下游团队的沟通成本高,易造成不专业的印象。

品质:认知和效率的局限性,最终导致实施落地的产品质量和用户体验难以得到保障。

二、解决

大家应该都知道乐高(LEGO)积木,它是一种可以互相嵌套组合的塑料积木,形状共有1300多种,每种形状都有12种不同的颜色,可以拼插出多种造型。其实组件库的工作方式就很像乐高,通过小元件的互相嵌套来产生多种组件或模块,多种组件模块结合生成页面结构。

我们先来梳理一个概念,组件库是什么?

企业级UI组件库的设计方法与实践 | 网易FishDesign为例

组件库是设计系统的一部分,是在我们常规界面设计过程中可以直接用来制作交互图例和搭建页面的组件集合,它可以作为单个组件独立存在,也可以通过多个组件组合而成的结构或模式来解决类似场景的设计问题。组件库是在约束条件下去构建解决方案的过程,所以组件的使用也需遵循一定的规范,按照一套标准化的体系复用于多个业务场景。

一个有效的组件库,可以帮助设计师和研发提高工作效率,提升设计专业度的同时让产品本身的体验更加一致、可学,品牌感更强,它所具备的基本特征一定是通用的、灵活的、复用的。

通用性:意味着足够基础和常见且不带业务属性,参与设计环节的每个人都应该知道这个组件的功能及目的,同时具备一定扩展性。

灵活性:是要求元件的组合需灵活,可以在不同场景下可以通过互相组合来快速搭建交互框架原型图,并根据不同页面结构的演变来适应新的业务需求。

复用性:指的是适用于多个业务或产品,在设计过程和研发过程中都可以高频复用。

那么用组件库这种标准化体系来完成设计方案时,到底能带来怎样的价值?

三、组件库的价值

保证产品体验的一致性:对于一个含有多业务系统的大型复杂产品,每个独立的业务系统虽然在功能上有一定区别,但整体的用户体验需要满足基本的一致性。比如:当我使用同一个产品中的业务系统A和业务系统B时,我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性,来感知到我使用的A、B业务系统隶属于同一个产品。

提升设计师的效率:在需求量巨大且需求来自不同的业务线时,需要逐一绘制页面及组件,造成大量重复劳动,并且在评审及需求沟通环节还可能存在不断地细节调优,所以对于设计师而言,组件的高频复用能大大提升设计效率,使设计师更多的将精力聚焦于理解和解决用户的实际问题。

提升产研团队的效率:通用场景及普通需求直接按规范进行设计和研发,减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。