如何培养模块化思维产品设计，如何使用sketch建立高复用性模块化组件

前言

读了很多书，但没有运用那都不算是你的知识，每次阅读之后都需要形成自己的践行清单，什么是践行清单呢？从所听所看所思中真正经过深度思考，结合自身场景而得出来具体的，有指导性的行动方案。

本次阅读的是《支付宝体验设计精髓》一书，整理总结出关于如何进行模块化设计的目的方法，思路以及注意事项。

分享中的案例是阅读后，自己根据书中方法结合公司项目整理出的组件设计，更好达到学以致用。也希望你读完后，能够针对所说所描述的方法步骤，结合自己项目为他们设定组件，并持续迭代更新。

1.什么是模块化设计？

广义定义：模块化设计是指对一定范围内不同的功能或相同功能不同性质，不同规格的产品进行功能分析的基础上，划分并设计出一系列功能模块，通过模块的选择和组合构成不同的产品设计方法。

模块化设计可包含：产品流程，信息结构，交互方式，表现形式

2.使用模块化设计的意义

1.减少设计成本

2.通过模块间组合互换，满足差异化需求

3.保持良好体验延续性的同时，缩短设计周期，提高设计效率

3.三个步骤的模块化设计的方法

以产品视角从宏观到微观，再回到宏观的过程

3.1模块划分

将完成的用户路径进行拆分，并按照解决用户问题进行重新归类

怎么拆，拆多细？模块和控件有什么区别？

模块 > 控件

设计控件通常以页面基础元素为粒度，如字体，按钮，输入框等，保证视觉基本元素的一致性。

模块是一组控件的组合，也可以一页页面组合，赋予其解决某一问题，实现某个功能。

模块划分标准：

单一性：模块粒度尽可能小，一个模块以解决一个问题为主
完整性：内部流程应该是一个闭环，信息流上提供足够支持用户达到目标所需
独立性：模块之间弱耦合关系，已存关系降到最低，以便不同组件的互相利用

模块划分方式：

A:流程类产品划分：

有一个明确的目标，一系列的任务最终达到目标的产品闭环

1.分析业务需求以及用户目标
2.制定用户达成目标所需要的任务流程
3.根据任务阶段划分第一层级任务模块
4.根据模块内功能特征多少，决定是否划分子模块

以品骏达APP 寄件功能为案例

B:内容载体类产品划分：
不以某个目的为主体，而是以内容聚合为主的框架，更注重内容信息分类，排序，筛选的划分

1.对全量信内容进行列举
2.确定分类的维度，并对内容筛选，排序，形成第一层级模块
3.对信息内容较多模块进行分析，拍段是否合并或再次拆分

以 先锋达 众包APP为案例

3.2模块设计

复用性：复用性占比越高，产品稳定性越好
延展性：对统一功能模块，由于业务需求差异，设计时一定范围内容可扩展能力，兼容一定范围的差异性。包含对信息的多少，内容的参数，视觉表现等方面的宽容度
互换性：在不可复用模块时，保证和其他模块组合，不在全局信息结构发生变化，快速互换，不用调整其他构成方式

例如：在寄快递填写增值服务费用模块，根据服务产品种类不同，划分不同模块，有快运快递，需要上门接货，需要包装签单返还等区分，在不改变页面信息结构和其他模块情况下，可以实现快速互换，满足不同业务模式的差异需求

品骏达

3.3模块组合

模块划分和模块设计是播种，模块组合则是最后的收获，通过组合快速搭建出核心结构，保证核心用户体验一致性。模块组合不仅是简单将所有模块堆砌在界面上，需要他们各司其职，成为一个整体。需要遵循以下原则。

明确主次：每个页面一个主要功能，解决最迫切的问题，其他模块不影响主要模块的使用；组合使用时要考虑减少不必要模块，或降低其他模块信息强度。

避免冲突：使用多个组件时，需要互相微调，避免信息的重复，交互方式的不一致，逻辑的矛盾等

4.设计工具

参照使用sketch中的组件功能

关于sketch组件使用方法，请参考【如何构建高复用性的交互组件库】

总结

模块化设计是设计师本身在行业中所积累的一种转化。
利用已有的经验，降低设计风险，提升设计效率和质量。
因此再设计和使用模块时需要不断迭代更新，不断对模块进行验证和优化，适应用户需求的变化趋势。

产品初期：设计实例中逐渐摸索，提炼产品可复用的模块，优先满足共性需求
产品中期：样式差异化和多样性增加后，逐渐转向业务特色的精细化发展方向
模块后期：反复运用中，审视设计的合理性，不断更新，对新功能，提炼其通用性，选择性的沉淀为模块。