如何制作交互原型（在用户调研等前期工作完成之后）

1. 制作关键页面及其流程图

使用非常简易的页面原型，甚至可以是之后完全不会参考的布局方式来代表首页、登录/注册、我的页面等关键页面，并用箭头等表示交互方式和页面之间的关系；

关键页面一般是主导航指引到的一级页面，页面之间的关系可能是并列或者是矩阵式的，而不是上下层级或者树形结构的；

2. 制作低保真原型图

主要是在关键页面和流程图的基础上，针对关键页面进行扩展，例如首页点击进入详情页，详情页点击进入评论页等等，这里的页面和关键页面的关系可能是上下层级或者树形结构，一般做到二级到三级页面即可，这些页面之间也可能有跳转关系。

可以先在纸上画出关键页面下的二级页面的草图，初步考虑有哪些二级页面，二级页面的结构是怎样的，给这些二级页面标出重要等级，并保证每个页面的布局和结构的统一性。

同时，可以利用思维导图等工具，理清这些二级页面与关键页面、以及其他二级页面之间的关系，如何跳转等。

在跳转路径上标识出是通过点击，还是其他特殊手势实现交互。

3. 制作高保真原型图

这一步也不必要使用颜色和具体的设计元素，其目的还是在完善应用的架构、页面的布局和结构，以及各页面之间的关系。

三级到四级页面可以增加进来，原本用矩形框代表的文字和icon可以换成真实的文字，以检查会不会有文字不够放、字体风格、文字大小调整、icon风格等问题。

这一步在于进一步确认交互逻辑的完整性和统一性。并可以用此草稿作为试用和测试的草图。

4. 设计规范的确立

在用户调研和品牌风格的基础上，根据高保真交互原型制作设计规范，包括颜色、字体、icon等，保证所有页面风格的统一性。

5. 视觉设计

将高保真原型图制作成视觉设计图，这一阶段的成果接近真实页面。但是对于交互等前面步骤确立的一些东西仍然可以改动。

上述步骤不是一成不变的，列举出来只为理清自己的设计思路，有时候因为项目时间紧迫并有条件一步步实现上述步骤，但可以在纸上粗略的画出关键页面和其他页面，理清个页面之间的关系，然后直接出视觉设计图。