原型图受众：开发、项目领导、UI设计、测试
开发：关心有多少功能，功能的复杂度怎么样，边界条件是什么，异常情况怎么处理
设计：元素之间的关系，排版和布局
主管：功能整体的流程、原型的易读性，以及价值观的提现
测试：对产品有需求的用户，测试用例，穷尽各种场景
要求
1.清晰的视觉层次
a.突出重要元素，弱化次要元素：通过大小，灰度，面积突出重要元素，引导用户聚集视觉焦点到重要的元素上。
21AC2AA1E2844B5382023EFC9A2DBC0D.jpeg
b.格式塔原理：通过位置，颜色，间距将相关元素组织在一起
c3897c26187d4f5390fc3c854e1ac2ed.jpeg
2.视觉流结构
指视觉焦点形成的轨迹，受限于人眼在某时刻智能产生一个焦点，使得视线运动通常表现为点到点的跳跃式扫描，而不是平滑移动。人在阅读时，通常包含4~7个跳动--定位（Jump-fixation）的动作，注视持续时间为200-600ms，因此会留下一系列的视觉焦点，这些视觉焦点的轨迹称为视觉流。
平稳的视觉流结构能帮助用户快速理解逻辑路径，减少用户的认知成本。平稳的视觉流有两个原则：视觉焦点不宜过多；视觉焦点的路径逻辑尽量简单。
b42472354e2746e5beb8f8cab5c7f178.jpeg
3.功能预见性
看到一个功能，就知道功能如何使用，减少认知负荷，功能感要强
5052b3e791534aeb8794f100b7a0c03d.jpeg
5430F030BBFD42B29284DD5E3A086AB2.jpeg
4.视觉的焦点为信息的焦点
每个页面有各自的核心功能，一般页面上颜色饱和度最高，或者功能占据区域最大的即为页面的核心功能，即信息焦点。信息焦点取决于当前主流用户的主流场景，或者功能的商业价值，使用频率等维度进行分析，一个页面的信息焦点不宜过多，过多会影响视觉流的稳定。
5.把简单留给用户
根据复杂度守恒定律，每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，固有的复杂度智能设法调整、平衡。在交互设计中，体现为把复杂留给系统，尽量把简单的界面呈现给用户。即白盒部分非常简单，黑盒部分不予展示。
BF5AF77F5841459EA56AE329B5DCEBDF.jpeg
例如
外卖软件在每次点单时，无需每次定位和选择收货地址，系统会自动检测你当前的地理位置，从而给出合适的收货地址。快递的收货就不能等同对待。
还有默认给出分类、选项、填空内容等等，由输入变为选择。显性显示用户最关心的信息
美团将送达情况直接悬浮展示，无需进入订单详情查看。
E6D3FB1811524E9291D38A6047E34060.jpeg
*方法：《简约至上》
1.删除
a.关注核心功能：增加价值始于改进核心体验。；
b.砍掉残缺功能：不完美的功能不如不；
c.删除掉可能对用户带来负担的细节，如干扰的文字、可有可无的选项；
d.排定功能优先级：产品的价值不是由功能的多寡来决定的，而是看能否满足用户的最高优先级目标；
e.删除干扰项；
f.选择聪明的默认值，减少用户选择；
g.避免视觉混乱，让用户保持专注；
2.组织
a.分类；
b.利用网格，呈现页面布局；
c.利用大小、位置、分层、色标等进行实际组织；
d.关注用户的期望路径，而不是逻辑；
3.隐藏
a.隐藏不常用但不能少的功能；
b.渐进展示：展示核心功能，隐藏扩展功能；
c.阶段展示：随着用户深入界面而展示相应功能；
d.适时出现，不打扰用户，隐藏的目的不是为了藏，而是为了更好的展示；
e.让功能方便找到，不能藏得找不到
4.转移
a.把复杂性转移给擅长的一方，如用户、后台系统、其他设备
b.创造开放式体验，降低用户受到的约束。
6.考虑边界条件
避免遗漏一些边界条件，出现遗漏的原因主要是设计功能只考虑到了主流场景，只做了主流场景下的设计，异常场景和边界条件难以考虑到。
*方法：写产品需求用例
用例包括：
a.用例名称：此产品/功能的名称
如：用户在详情页下载图片
b.用例编号：此产品用例的编号
如：wx001
c.角色：操作/执行该功能的角色
如：普通用户
d.简要说明：最简化的内容对该需求功能的描述
如：用户处在详情页下载某张图片
e.前置条件：执行该功能的前提条件
如：用户已登录状态并且拥有下载该图片的权限
f.后置条件：该功能执行完毕后的结构条件
如：用户处于作品下载页成功下载素材
g.主事件流：该功能角色所执行的主要正常过程
如：用户进入详情页--用户点击下载按钮--用户进入作品下载页
h.异常和分支事件流：该功能更角色所执行的次要异常过程。
如：用户点击作品收藏；用户下滑页面查找相关作品推荐；用户未登录状态下点击下载按钮应提示登录；用户无VIP权限下载此图片；用户被提示作品已下架无法进行下载；用户已超过当日下载次数；下载网络超时的请求状态；若用户有积分，可提示用户用积分抵扣下载次数
7.原型图标注（交互文档）
标注受众：开发和设计
开发：关心边界条件、页面跳转关系
设计：关心是否有页面和功能的遗漏，如反馈状态和空页面
画出功能的所有交互状态，清晰的显性化表示交互状态时基本，一个好的标注满足一下条件：
a.标注点的含义，发生的事件。定义规范好每个标记的含义，形成统一的规范，使得团队成员易于理解。
20A83037B86146778B7E2461F2C1FFAD.jpeg
b.用脑图梳理所有对象和逻辑关系、状态，避免遗漏一些边界条件。
745C258713BA4B7DAA238DACA352FD8B.jpeg
c.模块化区分和标记。梳理好状态后再在原型图上写产品用例，每个功能做成一个模块，有利于往后的维护和迭代。如：饿了么的订单结算功能。
2D5714670A964319A120E1C222DD6537.jpeg
A：结算订单规则
用例名：用户下单结算功能
用例编号：elme001
角色：普通用户
简要说明：略
主流事件A-0：用户处于商家详情页进行点餐，点好菜品后点击去结算
异常和分支事件流:A-1用户处于未登录，点击跳转到登录界面；A-2用户未选择任何商品，结算按钮不激活；A-3商品总价未达到起送价；A-4商品中未加入必选商品
前置条件：用户处于登录状态，已选择必选菜品且满足启送价
后置条件：点击“去结算”跳转到订单结算页面
A5A0422087774D0CB65C6BB74A47F936.jpeg
C372A0FF47434E2AAB831FD557A10093.jpeg
FE766FD1492E45A59F6FD050876C2439.jpeg
4FB1DDF3AE994C7186EE58FFEC644F70.jpeg
8.在同一个页面展示所有的交互状态
开发和设计没有耐心看原型标注，所以如果做版本迭代，一定要做标注的版本区分，让他们第一眼能看到当前版本要做的事情。如果特别复杂的功能更，尽量在一个页面上显示出所有的交互状态。以微信消息列表为例，先用脑图画出所有状态，补齐所有交互状态。
F4FFC41D209D4876B2A4B4703BACCFFC.jpeg
D254FE98BBAB4F78B70A8C8B0804ACC7.jpeg
9.页面跳转图
从用户的视角，系统化看流程的合理性，梳理页面之间的关系。避免流于各个模块功能，没有建立相互间的联系，即孤岛设计。
如在一个线上教育类app中增加一个评论功能，评论机制应该如何与现有系统对象建立联系。
image.png
教程可以看相关评论，这样评论与教程的单线关系建立起来。那么上面对象是可以跟评论建立联系的，比如为了刺激用户去评论，我们可以用积分奖励的方式，当用户评论教程后可以获取一定的积分，这样教程-积分通过评论建立了联系（新增了需求？），积分可以兑换优惠券，兑换商品，建立了用户-教程、教程-积分、用户-积分的关系，整个积分系统搭建完成。
image.png
用户-教程：用户去评论教程；教程的评分来帮助用户筛选合适的教程
教程-积分：通过评论教程可以获得积分；积分可以免费兑换观看教程
用户-积分：积分刺激用户去评论；用户用积分可以获取商品，如优惠券。
image.png
10.流程图，梳理业务逻辑关系
目的：确保产品流程的合理性；有效的传达需求；检验异常分支
常用的流程图包括：单向流程图和泳道图（涉及到多个角色）。单向流程图一般描述单一角色完成某个任务的整体过程，如登录注册过程、支付流程、填写资料等
a.流程图包含：事项（用户要完成什么任务）、角色（分别有哪些人会参与到流程中）、信息传递（信息在整个过程中如何传递的）、异常（有哪些异常情况，如何处理）
如：快手的登录注册流程，先来梳理思路：
事项：用户要完成快手app的登录注册
角色：普通用户
信息传递：在触发登录注册框时，获取用户的注册信息，检验手机验证码，关联通讯录数据，获得第三方登录数据
异常：最近登录过如何处理？手机号无效该如何处理？手机号已注册该如何处理？
FDC57FEA3757483B8AA82F38EC3A09C6.jpeg
b.泳道图包括：明确事项、角色、信息传递、异常等外，要明确参与角色，再梳理出不同的角色要完成的任务，各个角色之间的交接，整个流程阶段的划分。
如天猫的退货流程图
*明确角色：参与角色有买家、系统、卖家、客服
*各个角色要完成的任务：
买家收到商品不满意，可以在天猫上发起退货，填写退款申请。如果卖家同意退货，买家可将商品寄到卖家的收货地址，寄送方式可选择自行寄件或上门取货。如果卖家收到货后拒绝退款，买家可以申请客服介入。
卖家：处理买家的退款申请，如果订单满足退货条件，将退货地址发给买家。卖家收到商品，退款给买家。
系统：判断买家收货状态；检测买家的退款申请的原因、金额等，生成退款记录；判断是否平台先垫付退款；将卖家地址发给买家；系统将买家上门服务申请发送给合作的物流公司；变更退款状态。
客户：客服介入，判断双方责任。
*角色对接
买家将退款申请发送给系统，系统发送给卖家，卖家处理退款申请，卖家将退款地址发送给买家，买家寄件给卖家，卖家收货退款。如卖家拒绝退款，买家申请客服介入，客服处理买家或卖家的责任。
*阶段划分
买家发起退货申请、系统处理买家申请、卖家处理退货申请、买家寄件给卖家、处理退款
49239A2AB8534FFEBD13CDE00670285E.jpeg
参：http://www.uisdc.com/professional-prototype-diagram-summary-1
http://www.uisdc.com/professional-prototype-diagram-summary-2
网友评论