认识达内从这里开始

随着互联网的不断发展，UI设计师的设计方法也在不断的变化，今天我们就通过案例分析来了解一下，组件化设计的流程与原因分析。

一、组件化设计的流程?

设计规范和Uikit是我们管理一个或多个App统一性和设计效率的工具，同时探索如何更有效的提升设计效率。像滴滴等AntDesign设计系统，他们的产品体验非常好，用户使用产品时能够有效的满足其需求，良好的用户体验背后都有着一套好的产品设计系统在运作。

系统性的组件化设计思维的好处是：

1.产品设计迭代优化时，版本和版本之间的差异性就可以得到很好的解决。

2.界面设计之间的设计风格和设计样式就会统一。

3.界面设计的效率和质量会稳定输出。

在我们所经常使用的App产品中，如苹果、Airbnb、自如、AntDesign等，用户体验都非常好，用户使用产品时能够快速的解决需求，优质的用户体验背后都有着一套强大的专业设计系统所帮助。

二、我们为什么需要组件化设计?

1.统一产品设计体验

以京东金融为例，在京东金融近更新的版本中，我们看到财富界面和生活界面，同样的模块可以复用，对于复用性高的内容，应该提炼为通用组件，提高设计效率。

对于会员专区或者热门活动是金融类产品中为常见的产品形式，在京东金融的页出现，布局往往是左右结构，或者上下结构;因为这类产品具有较强的引导属性，所以会把右侧的运营的插画设计相对突出，以吸引用户的注意力。会员专区的卡片化设计，具有较强的复用性，可以列为通用组件，这样就可以保证两个产品界面的卡片化的设计风格和样式上的一致性原则。

2.提高团队协作效率

面对相同的设计需求时，可直接调用相关组件，节省重复性的设计工作，提升沟通效率。

借助组件化设计，可以快速开展工作，达到高效复用的价值。

通过设计语言可以完成一个界面设计，在下面案例中，主要的元素由文字、栅格线、Icon等组成界面结构，确定好排版布局和图标的设计风格后，完成产品的界面设计。

3.降低开发成本

在实际工作中，如果每次制作一个新页面都设计不同的组件，开发就要写新代码，增加开发时间成本。

如果我们常用的模块作成组件库，开发遇到相同的组件时，可直接调用组件，复用相关代码，这样可以降低开发成本。

组件化设计流程，经过实际工作的锻炼和思考，具体可以拆分为3个方面：

一.明确组件化设计的内容

我们需要整体思考，明确可以复用的的内容、组件，以热销理财场景为例，金融产品都会需要用户进行选择理财产品，可定义为理财产品的卡片化设计组件，适合组件化设计的模块。产品已有组件的优化，设计师要具体分析，分析组件体验现状，发现问题然后针对性解决问题。

使用产品的场景设计、交互体验、设计风格三方面都要思考，推出更好的产品设计的解决方案。以京东金融的财富和页的界面设计为例，应用的都是卡片化设计的理财模块。在开发新项目的时候，同样可以调用同一个理财产品的模块化组件，不仅能保证产品上体验的一致性，也能降低团队的设计成本。

二.场景设计走查

1.全面体验走查线上的移动端产品设计,对用户的交互行为链路有一个清晰的理解，思考当前线上的产品体验。

2.线上产品功能的迭代一般业务方都会有一个周期性安排，因此在走查时要及时和业务方沟通，在这个基础上再进行组件化的方案设计。

三.组件化设计验证效果

组件化的设计方案完成对接开发上线后，我们需要从两个方面来验证组件优化后的效果：

1.组件化设计是否可以满足各业务方的需求和场景化的设计。

2.通过定性数据追踪功能是否能促进业务的关键的设计指标的提升，这些数据可以是转化率等数据指标，用户的反馈也是一个很好的辅助验证方法。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。