如何出有理有据的原型图？

做互联网设计的，相信对原型图都不陌生，除了大公司和比较正规的公司的之外，很少有公司会对原型图特别的重视，一般都是拿到需求就直接做界面，或者说是直接抄界面设计，最后导致的结果就是，产品逻辑很垃圾，漏洞百出，经不住考验，不适合公司的长期发展，毛病是一堆一堆的，原型图背后的思考，就像是裁缝上门为客户量身定制做衣服一样，需求是产品的内脏、血液、细胞，贯穿产品的始终，原型图就是产品的骨骼，分配好产品的内脏布局（功能的层级、大小、分布），使产品的血液（逻辑）能够有始有终的循环，促使产品能够站立起来（拥有优秀的交互体验），UI界面设计就是产品的衣着（简单大方，又不失高贵优雅），它们相辅相成，缺一不可。

因此，从需求到UI界面设计，中间还隔着一扇门，就是原型图的设计，而在原型图设计的我们需要做：对信息的组织与任务的设定。

总的来说就是：需求（产品经理的产物）——信息组织/任务设定（两者可用Xmind软件做思维导图）——草图（原型图，axure软件居多，交互设计师的产物）——界面（ps、ai,UI设计师的产物）。

接下来，我们看看如何有理有据得出原型图，我们分三个步骤：

A、分解任务——B、排列任务优先级——C、组织合并相关任务

A、分解用户的任务，把任务变成操作，并且为之设置操作路径（这就是交互设计中需要的逻辑路线）：

如设计一个购买电影票WEB端网站，主要任务有：选择影片——选择电影院——选择观影时间——选择座位——输入手机号和填验证码——确认订单。

开始分解任务：

① 选择影片

分解成多个子任务：浏览影片列表——浏览票房排行——浏览优惠推荐——浏览影片简介——浏览影片详情——浏览评论详情——观看预告片——选定要观看的影片

② 选择影院

分解成多个子任务：浏览和选择观影区域——浏览和选择电影院

③ 选择观影时间

分解成多个子任务：浏览选择日期——浏览选择具体场次

④ 选择座位

分解成多个子任务：浏览和选择具体座位

⑤ 输入手机号码

分解成多个子任务：输入手机号码——填写验证码——确定

⑥ 确认订单

分解成多个子任务：点击“确认购票”按钮

至此，任务分解完成了。

B、任务优先级排列：按照使用人数、使用频率、重要程度，开始排列。（数据可以自己做一个小小的调研获得）

第一优先级：浏览影片列表、选定观看的影片、选择观影区域、电影院、日期、场次、座位、 输入手机号、点击“确认购票”按钮。

第二优先级：浏览票房排行、优惠推荐、浏览生成订单。

第三优先级：浏览影片详情、评论详情、观看预告片。

至此，优先级排列完成了。

C、组织合并相关任务（看到了吗？原型图已经浮现了，有木有觉得很神奇，很开心。）

合并之后，15项用户任务转化为8个界面模块，且被规划都了3个页面中，按照一级任务展示、二级任务展示，严格遵照自上往下，自左往右的人类行为习惯排列。

好的人机交互，要避免让用户左一下，右一下，不然很容易让用户犯迷糊，找不到操作的入口，所以原型图才如此的重要，因为它要为用户设计一套有逻辑、有良好的操作路径，有良好的引领用户的产品，用户在使用产品的时候，多半不会思考，只会跟着我们的交互设计思路走，如果你自己都梳理的不清不楚，又怎么期待用户能够很好地使用你的产品呢？

因为现在这种产品已经烂大街，很多时候我们可以不用去思考，直接就可以借鉴竞品，但是在借鉴的时候也要根据自己本身产品照着这些思路去思考，这样才可以做出自己产品的特色，做到“人有我优”的地步。

做原型图的时候，有几点值得我们去注意：

① 优秀的导航代表产品成功了一半，优秀的导航会自我介绍，没事可以看看优秀产品的导航设计。

② 导航的深度，深不过3，就是次级页面不要超过三页，主功能下的次级功能不要超过3个；广，广不过7，比如web端：首页、发现、社区、新闻资讯、关于我们。这一栏目不要超过7个。

③ 为重要的功能何常用功能设置快捷键入口，如购物车，正常情况购物车应该属于“我的”里面，但是在购物产品中，购物车需要快速找到。

④ 有任务流程比看需求文档更直接，更专业。

拥有这样的思路，可以让你做任何一个产品都能有根有据，即使从来没有做过的产品，依然能通过这种方法把原型图推导出来。

第五篇完结。

上一篇：交互设计师如何分析与筛选需求。

下一篇：出了原型之后，发现操作很复杂，那我们改怎么简化？一系列的理性分析完成之后，又如何增添感性的设计，让产品人性化？