产品设计中的组件化和规范化

产品设计中的组件化和规范化

1、定义

组件化是在前端设计中非常常见的方法，避免了重复造轮子，对于常用的样式，避免了前端围绕一些常用样式进行反复修改。在最开始进行产品设计的时候，就清楚了，反复造轮子这件事情是非常低效的。

2、思路

2.1 组件化含义

通常一个页面的构成，包含页头、正文、页尾三大部分，在UI设计阶段，就要将整体产品的规范定义出来。字体大小和间距，以及排出的模块大小等，
而在实施效果方面，UI交付的通常多为平面图形，而前端开发的时候，需要确定整体的动态化效果，比如是否有显隐、 是否有焦点获取、是否有选中的效果，这些效果，都会包含在组件里面，所以UI参照前端的组件库形式，使用对应的组件样式，是非常有必要的。
组件化包含了两层含义，一方面是对于反复使用的构件进行定义化，另一方面是对于整个页面的标准化。

2.2 针对哪些进行组件化

组件化的部分，可以分为两块，1、框架结构部分， 底部的tab标签栏，web导航栏模式 2、经常使用和反复出现、展示效果一致的部分 搜索框 、输入框、信息流卡片、展示楼层等，其中有些样式卡片反复出现，需要定义卡片大小和规范
至于规范化，就是定义整个页面字体大小、 结构间距、 页面间距等

3、实施

设计过程中，结合产品原型，进行标准化定义，在实施过程中也也好有更高的还原效果，如果有特殊动效，这一块需要专门去说明。
组件化的好处在于，很多类似的东西，已有现成的模板，参照这些直接拿来融入到设计中，能够做到高效。 比如切换页面、输入框点击输入状态、下拉和上划、左滑右滑的效果，这些都是可以通过提前看到组件的效果，对接开发说明的。