怎样样的原型图才算是专业的原型图呢？文章总结了一些经历，希望对你有所协助简单来说，创业有四步：一创意、二技术、三产品、四市场。对于停留在‘创意’阶段的团队，你们的难点不在于找钱，而在于找人。”结合自身微软背景及创业经验。。

本篇（原型篇-下）次要内容：

• 原型图标注，画开发看得懂的图
• 同一个页面展现一切的交互形态
• 页面跳转关系图（不要做孤立的设计）
• 流程图，梳理业务逻辑

一、原型图标注，画开发看得懂的图

首先明白原型图标注是给谁看的，谁最关怀原型规范呢？普通而言，开发和设计最关怀原型图标注，开发最关怀的是边界条件、页面跳转关系，而设计最关怀有页面和功用脱漏，如反应形态和空页面。画出功用的一切交互形态，明晰地显性化表示交互形态是作为交互或产品的根本功。一个好的标注满足以下几个条件：

• 标注点的含义，发作的事情
• 用梳理一切对象和逻辑关系、形态
• 模块化区分和标志

定义好每个标注点的含义和事情

在做交互稿标志之前，定义标准好每个标志的含义，构成一致的标准，使得团队成员易于了解。如，我比拟喜欢用水滴表示标注的功用，用圆圈+箭头的方式来标识页面跳转关系。

用脑图梳理一切对象和逻辑关系、形态

上面的原型图标注以在饿了么商家概况页结算订单为例，先用思想脑图梳理功用形态，这样能防止脱漏一些边界条件。

模块化区分和标志

梳理好形态后再在原型图上写产品用例，每个功用做成一个模块，有利于往后的维护和迭代，例如上面是饿了么的订单结算功用

二、在同一个页面展现一切的交互形态

很多的开发和设计，很多耐烦看原型图上的各种标注，特别是工夫一长，标注就十分多。假如是做版本的迭代，一要做好标注的版本区分，让他们第一眼能看到以后版本要做的事情。假如是特别是复杂的功用，尽量在一个页面上显示出一切的交互形态，防止在看原型图时脱漏。有时分测实验收阶段的很多坑，各种形态一楼，其实是由于后期没有做好标注惹起的。上面以微信音讯列表页为例（梳理思绪用脑图是一个好习气），先用脑图画出一切的形态，补齐一切交互形态，前面再画的时分效率会高很多。

如下图，为微信音讯列表页一切交互形态的列表出现：

三、页面跳转图（不要做孤立的设计）

页面跳转图，从用户的视角，零碎化看流程的合感性。页面流程图有助于梳理页面之间的关系。交互设计师或产品经理在任务中，很容易把一个功用做成“孤岛型功用”，即这个功用跟其他功用树立联络，跟其他功用是孤立的关系。

如在“美啊教育”中要添加一个评论功用，那么评论机制应该怎样与现有零碎对象树立联络？在剖析这个成绩之前先看看评论和教程的关系，如下图：

教程中可以看到相关评论，评论零碎与教程之间已树立联络，但只是单线的关系。

我们再看看美啊这个产品中，还有什么对象是可以跟评论树立联络的？假设，为了安慰用户去评论，我们可以用积分奖励的方式，当用户评论教程后，可以获取一定的积分，即教程-积分经过评论树立了联络，跟现有的积分兑换优惠券、商品也是有联络的，仍是于是树立了用户-教程，教程-积分，用户-积分的关系，整个积分体系不再是孤立的功用。

用户-教程

• 用户去评论教程
• 教程的得分可以协助用户挑选出更优质的教程

教程-积分

• 经过评论教程可以取得积分
• 积分可以收费兑换观看教程

用户-积分

• 积分可以安慰用户去评论
• 用户用积分可以获取商品，如优惠券等

于是整个评论体系的页面关系图为（补充了局部能够存在的需求）：

四、流程图，梳理业务逻辑关系

画流程图示产品经理的根本功，产品需求，也是流程上的需求。画流程图的目的有以下几点：

• 确保产品流程的合感性
• 无效传达需求
• 检验异常分支

在画流程图进程中，切勿脱漏异常形态，产品经理普通比拟关怀次要流程，可是开发同窗在写代码时，要做条件边界判别，这个条件边界即为异常状况。测试同窗在写测试用例时，要穷尽一切的场景，包括正常场景和异常场景，否则出了成绩，是要背锅的…为了防止开发和测试同窗不时讯问你边界条件，最好在交付交互稿之前用流程图梳理出来。

常用的流程图分为单向流程图和泳道图（触及到多个角色），单向流程图普通描绘单一角色完成某个义务的全体进程，如登录注册进程、领取流程、填写材料等。

流程图包括以下内容：

• 事项：用户要完成什么义务
• 角色：辨别会有哪些人会参与到流程中
• 信息传递：信息在整个进程中是如何传递的
• 异常：有哪些异常状况，如何处置
• 如快手的登录注册流程，先来梳理思绪：
• 事项：用户要完成快手的登录注册
• 角色：普通用户
• 信息传递：在触发登录注册框时，获取用户的注册信息，检验手机验证码，关联通讯录数据，取得第三方登录数据
• 异常：最近登录过该如何处置？手机号有效该如何处置？手机号已注册该如何处置？

泳道图

除了要明白事项、角色、信息传递、异常等外容，在画复杂的泳道图之前，要明白参与角色，再梳理出不同的角色要完成的义务，各个角色之间的交接，整个流程的阶段划分。

如天猫的退货流程图作图思绪：

1.明白角色

参与角色有：买家、零碎、卖家、客服

2.各个角色要完成的义务

买家：买家收到商品不称心，可以在天猫上发起退货，填写退款请求。假如卖家赞同退货，买家可将商品寄到卖家的播种地址，寄送方式可选择自行寄件或许上门取货。假如卖家收到货后，回绝退款，买家可以请求客服介入。

卖家：处置买家退款请求；假如订单满足退货条件，将退货地址发给买家；卖家收到商品；退款给买家。

零碎：判别买家播种形态；检测买家的退款请求的缘由、金额等，生成退款记载；判别能否平台先垫付退款；将卖家地址发给买家；零碎将买家上门效劳请求发送给协作的物流公司；变卦退款形态。

客服：客服介入，判别单方责任

3.角色交接

买家将退款请求发送给零碎，零碎发送给卖家，卖家处置退款请求，卖家将退货地址发送给买家，买家寄件给卖家，卖家收货退款。如卖家回绝退款，买家请求客服介入，客服处置买家或卖家的责任。

4.阶段划分

为了方便了解整个流程，小编把流程分为5个阶段：

• 买家发起退货请求
• 零碎处置买家请求
• 买家寄件给卖家
• 处置退款

整个泳道图如下：

第五局部的“功用模块化，可复制”已退化成“交互设计标准”,下期小编献上~

本文链接: http://www.yixieshi.com/107481.html (转载请保存)