用收纳思维，做UI模块化整合
用生活中常见的收纳思维，分析UI模块化整合设计，愿能帮助你打开设计思维！
为什么要谈模块整合？
一张原型页面上有各种各样的信息元素。模块化整合，就是在现有的元素中，提取共性，分门别类，再排排好。从阅读的角度来看，让相似内容聚集、易找；从视觉感知角度来看，让页面元素不散，耐看。所以，不光是交互上，还是视觉上，让页面信息有模块感，是UI高手进阶过程中的一个必备技能。
用收纳思维做UI模块整合
收纳的本质是把现有的东西分门别类进行整理，让居住空间舒适、美观、不杂乱。
由《速战速决的快乐收纳术》 [日]饭田久惠，收纳5步法获得灵感，提炼出以下“UI模块整合思路”流程。
1.认识 - 对原型内容有认知
拿到原型，我们需要弄清楚每一个元素存在的目的意图，并与需求方明确以下要点：
a. 信息层级 沟通确认此页面，最重要、次要的信息，依次类推。便于整合模块信息过程中兼顾视觉表达。
b. 文字信息和字符最大长度 每个文字信息的最大长度是？什么文字可以省略，什么不能？如果没有明确，可以根据视觉显示效果再具体给到需求方建议。
c. 按钮 明确是否有引导点击转化的需求，按钮强调的强弱等。
d. 页面预期 部分原型提供者会对页面有自己的构想和预期。思考是否可以执行，成本大小。如果不可以，需要提前沟通并和对方达成一致的认知。（tips：用参考图例来沟通，避免语言造成的理解不一致情况）
2.整理 - 核对斟酌每一个元素的必要性，归纳、合并；
不是每一个原型的完成，都是成熟且不可辩驳的。“学会质疑”，我们可以结合改版目的，开始独立思考。其实设计师很容易把自己转化成用户小白的角度看待问题。用以下3点来思考整理页面信息与元素：
a. 认识斟酌 核对每一个元素的必要性，如果没有必要，那么借用知识点佐证自己想法与需求方提出建议并讨论；
b. 归纳分类 全局审视，把同类别的东西，归纳整理为一个整体；
c. 层级思考 部分按钮、入口或者模块，要注意是否有从属关系、层级关系；
3.构思 - 快速构建可能性的结构与布局
完成前期准备工作后，就要开动小脑筋啦！根据以上2步得到的要点，用笔在纸上绘制可行性方案，手稿可以快速直观的了解页面结构与布局、信息展示位置、交互元素等。
在构思布局过程中，还需要考虑UI延展性问题。如果下个版本增加字段或者功能，UI布局要大改，这样的布局方案最好再重新思考。
4.执行 - 采用可行性方案兼顾思考视觉表达
审视绘制的所有方案，然后选出1到2个可行性方案，开始执行。在输出高保真交互原型过程中，需要兼顾思考视觉的表达形式，按钮是用线框？用填充？卡片用投影？还是用底色？这样的布局，如果多颜色使用，画面是否会乱？等一系列的思考，选择最合适的一个方案来输出。
5.复盘 - 检查输出物是否与需求点契合
有的时候，路径长了，时间久了，会偏离初心。阶段性的回顾与自我思辨，才能让设计输出物更贴合需求目的。
整个设计完成后，总结与回顾，也很必须。优秀的模块设计可以提炼出可复用性样式，方便APP全局一致化处理。不好的地方则改之，不断修正以至切合需求目的。
总结
纵观优秀的平面设计、UI设计，模块感的整合都是必不可少的存在。它让信息更易读，也让视觉更美观。你学到了吗？
- END -
原创文章，如需转载，请注明公众号名称，谢谢！
如果觉得还不错，那么，给我点个赞吧：）
