原型制作四字诀：整、拆、合、移

原型制作是一个老生常谈的问题，笔者分享了自己独有的原型制作的经验，将其归纳为“整”“拆”“合”“移”，并且给出了实际案例，非常具有参考性。

前言：大家好，本文主要通过介绍原型制作的四字法则：“整”“拆”“合”“移”，希望大家能够有所得，更好地应用到自己实际的工作中去，提高自己的工作效率。

本次与前几次的分享略有不同，我们不讲如何构建组件的框架，这个知识点在前两篇的分享文章中已经介绍的非常详细了，要是新的观众不太了解的可以回看前两篇关于组件库打造的相关文章。

《技巧分享：Axure后台组件制作的全过程》

《打造高品质Axure组件库，就是这么简单！》

关于新组件MobileKit的彩蛋在此处放出，希望大家能够喜欢。

MobileKit预览效果：https://uedart.com/demo

本次将着重介绍原型制作的方法体系以及如何将制作与方法体系相结合，快速帮助大家进行手机交互组件的落地制作。

通过浏览MobileKit组件库的预览效果，大家不难发现，本次的组件库的体量是以往PC端组件库的2倍之多，之所以有这么大的体量是因为手机交互的多样性。面对如此丰富的手机交互形式，我们在制作的过程中一定要有支撑自己思路的方法体系，才能让我们的制作更有方法。

这套思路体系不仅仅适用于Axure组件的制作，对于工作中的一些事务处理也是不可或缺的“利器”。

一、方法体系起源

你们一定很疑惑，我的制作方法体系从何而来？

说起起源，这要感谢一本书《超级整理术》。这是一件很有意思的小事，因参与了当当网的满减凑单意外地收获了佐藤可士和的这本书，也正是这本书，让我改变了很多我做事的方式与想法。

佐藤可士和在书中介绍的方法，能够很好的应用到学习、生活、工作中的场景中使用，帮助我们更好的进行知识整理，希望大家可以从中获得一些信息整理的启发。

进行用户调研与需求收集——收集信息；

对用户反馈的需求进行需求分析——简化信息；

进行信息结构与产品结构图分析——分类信息；

按版本计划将需求分配到不同版本中实现——信息优先级；

按流程进行信息的梳理整合——信息重组。

在后续的产品工作中我逐步优化简化形成了一套制作原型的方法：“整”“拆”“合”“移”。

其实就像我们平时接触到的很多产品一样， 产品页面本身都是由组件、元素构成的，这并不复杂。复杂的是我们要理清这些页面背后的用户需求、业务流程、逻辑走向，这才是页面的核心要点。

有很多人问我如何快速画原型，他们会在“画”上下很多功夫，这就已经走上了一条错误的道路，我们应该花更多的时间与精力去提升自己的“思考力”，找准每件事的核心要点，比纯粹的制作更为重要。

这也是我们为什么制作组件的出发点，减少重复工作量，将制作组件化、模块化，形成自己的组合思维，将更多有效的时间花在思考上，减少在原型上的试错成本，达成快速制作原型的目标。

在此我将毫无保留地分析给大家，希望大家能够有所收获。

二、“整”字诀 “整”字诀介绍

何为“整”？——对所做进行信息的整理分析，明确目标与思路。

我们在制作原型时可以从以下三方面进行整理分析：

信息整理——信息的整理，理明确目标、整理需求、流程、信息；

布局构建——布局的整理，搭建大体结构，按信息整理的分析结果进行布局；

细节处理——细节处理方式的整理，各个环节进行细节调整，完善整体原型、

这就像一个“金字塔”，每一层的推进都是重要的，从底层开始到最后顶尖层，每一个环节都搭建的很好，才可以构建一个稳固的金字塔。

示例1：首页特色卡片打造

从小的卡片组件打造来讲：

要做什么：这里我们要做的是一个特色卡片，目的是像用户传达相应活动的信息，以及做为活动的入口展示给用户，达成首页分流的目的。

如何去做：清晰了这一目的，我们在制作此类卡片上的目标就十分明确。

信息整理——信息的整理，明确目标后，卡片信息的整理；

布局构建——布局的整理，优先级区分，卡片布局结构的搭建；

细节处理——细节处理方式的整理，规范、字体、图标、间距、颜色、点缀、透明度的处理。

示例2：MobileKit组件库打造

从大的组件库打造来讲：

要做什么：我们此次要做的一件事是打造一个优秀的手机组件库帮助大家快速完成原型制作。

如何去做：在明确要做什么的基础上，我们要按序推进这个MobileKit的原型制作。

信息整理——进行内容结构的梳理；

布局构建——构建组件整体展示框架；

细节处理——各个分类组件的细节打造处理。