工作3年，尝试了各种原型图排版，致力于帮助设计师和程序员更好的理解需求。总结了从14年到现在自己尝试过的几种原型图样式，每一种都有其优劣势。欢迎大家一起来探讨如何更好的呈现原型图(欢迎拍砖)。接下来，按时间顺序，给大家一一详细介绍。

　　PS：本文仅是讲述原型图排版，至于一些交互细节会另写文章记录哦，欢迎关注～

　　各类原型图介绍

　　第一种：动态跳转型

　　通过事件(如点击、滑动等)实现各个元素和页面之间来回跳转。所有交互说明都写在了界面元素的注释说明中(蓝色icon)，如想查看说明，需点击后才能看到。这类跳转型原型，需配套的需求文档来描述各个元素的状态、前置条件、操作说明等。

　　这种原型图，想必很多刚刚入门的产品经理/交互设计师都尝试过。当然我也不例外，刚开始工作时，觉得用axure实现各种动效是件很好玩很酷的事情，同时也认为这种动态跳转可以帮助开发人员更好的理解页面关系。

　　但是却忽略了很重要的一点，开发不知道我们产品之前的思考逻辑，所以拿到原型时，根本不知道界面上哪些信息是可点击的，也不知道点击后会发生什么进入哪个界面。

　　优势

　　拥有交互动效，可完整体验到页面之间的跳转流程。

　　劣势

　　这类原型，劣势超多。

　　浏览原型的人需要逐一点击，才知道这个页面有哪些功能，这样很可能导致功能的遗漏。(当年也确实出现过这个问题，虽然有配套的需求文档，但是大家都懂的，需求文档可能只有产品人员自己看。这样一来，无形之中增加了沟通成本);

　　做原型时，各种动效比较浪费时间。需要各种事件、动态面板配合来实现，一定程度上降低了工作效率。

　　因为这类原型图的用户体验实在是不好，便决定把所有页面平铺展示，把交互说明环绕周围，如下…

　　第二种：信息平铺环绕型(五彩版)

　　首先，感谢开发哥哥们当年的不杀之恩。

　　现在回过头看之前的原型图，简直不忍直视。这样花里胡哨的原型图，虽然很详细的写了各种说明，但是给谁看，估计都没有耐心看完吧。

　　所有的交互说明信息都环绕在线框图周围，并使用了各种图标颜色。不同图标及颜色代表不同含义，如图中粉色箭头代表有点击事件，绿色箭头代表说明文字，点击事件均采用橙色文字。

　　优势

　　交互说明平铺展示，有效避免了功能遗漏;

　　各类信息使用不同颜色区分，清晰直观的区分不同类信息。

　　劣势

　　交互说明使用颜色过多，一眼看过去，给人感觉很杂乱;

　　线框图中使用颜色过多，分不清界面信息优先级。

　　这类原型图，解决了第一种遗漏功能的问题，也得到了开发人员的一致好评，说这种原型图清晰直观的把所有功能点都描述的很清晰。就这样持续迭代了好几个版本。后来。有一次在一个功能复杂的界面周围写了密密麻麻的注释(如上图)，在实际开发过程中，就发现很多开发来问的问题，明明在原型图上都有写。可是他们为什么忽略了这些需求呢?我就跑去和他们沟通，得到的反馈是：哦，没看到，没注意这块内容。记得那时候还是挺气愤的，自己辛辛苦苦写的需求，开发根本不认真看。后来换位思考想了想，这些枯燥的文档，再加上五颜六色的文字，给谁谁都不愿意看吧。

　　为了解决交互说明杂乱无章的问题，决定尝试把所有说明统一放到线框图下方，逐一元素说明，如下…

　　第三种：信息平铺上下型

　　把所有交互说明写在线框图下方，线框图上连接关联界面。

　　优势

　　界面看起来清爽了很多，所有交互说明集中，有效避免了功能遗漏和界面杂乱的问题;

　　劣势

　　不直观。界面元素和交互说明分离，影响查找效率。

　　出了一个版本这样的原型图，就立马收到开发哥哥们的反馈，说这样的交互说明太不直观了，每次都要看一眼图，然后再去下面找到对应的说明，很麻烦，而且还容易出现对应错的情况。就这样，放弃了这种类型的原型图。

　　那么有没有一种既清晰直观又可以有助于开发阅读查找的原型图呢?

　　于是，综合了之前各类原型的优势，得出如下版本…

　　第四种：信息平铺环绕型(边框版)