1.5 了解网站产品原型的分类

原型设计可以根据制作工具的不同进行分类，也可以从产品的完成度来分，包括低保真原型、高保真原型和交互动画原型。这三种原型设计，是一个互联网产品由开始到完成的缩影。

1.5.1 低保真原型

什么是低保真原型？其实就是让研发团队能理解的最简单的图形框架，如手绘或者用电脑做的简单线框图，如图1-45所示为低保真原型。

不论产品是何种类型，所有的低保真原型都具有监测与修复产品主要问题、构建更加容易且成本更低、得出的反馈侧重于高层次的概念而不是简单执行、易于携带和展示等优势，如图1-46所示为一些App的低保真原型。

但是低保真原型也会有其局限性，如交互细节不清楚，容易造成误解。比较常见的现象是，有时候产品经理自己对于产品的需求或者交互也是一知半解，导致研发团队在开发阶段反复地修改，从而浪费时间和精力，如图1-47所示为一款App中不同界面的低保真原型。

低保真原型有两种类型：一种是2D纸张原型，还有一种是3D线框图，如图1-48所示为两种低保真原型的展示。

1.5.2 高保真原型

在设计原型时，模块的大小，模块之间的间距、文案、图标、图例和交互动作等，都使用真实素材和最终产出保持一致，即高保真原型，如图1-49所示为高保真原型的具体展示。

高保真原型具有细节清晰和容易让用户明确产品特点的优势。并且在制作高保真原型的过程中可以让产品经理发现产品潜藏的各种问题，提前进行处理。有时，简单的线框图无法让用户想象出产品的具体效果，但高保真原型在这方面是较好的，如图1-50所示为两款App的高保真原型。

当然高保真原型也有局限性，相对低保真原型来说，高保真原型的制作周期漫长，同时也不易更改，如图1-51所示为逼真的高保真原型。

在低保真原型的基础上，高保真原型提供更多的功能细节和交互细节。高保真原型是最常用的原型类型，它的侧重点在具体的功能流程和交互效果上，且它的优缺点介于低保真原型和交互动画原型之间，如图1-52所示为一款影院App的高保真原型。

● 两种原型的具体使用场景

产品展示时到底应该使用高保真原型还是低保真原型呢？这里推荐读者都应该使用，但是需要分场合使用。

产品策划完成后，需要经过研发团队人员和上级领导的审查，此时应该对产品的关键页面进行高保真原型的制作，但不需要太多标注。

对于上级领导来说，他每天都要处理很多事情。对于任何一个新的想法，他都没有太多时间让团队利用语言来描绘。特别是一个产品在开始时，不管是领导还是团队人员，对产品还没有一个基本印象，如果不能拿出非常形象的原型，产品项目将进行不下去，如图1-53所示为产品展示时的高保真原型。

在产品策划之后的过程中，产品经理可以和设计、技术开发人员进行长期交流，所以这部分内容只需要低保真原型即可，这样做可以有效地降低低保真原型存在的风险，还可以保证效率，如图1-54所示为快速制作的低保真原型。

还需要提醒读者的是，对于初级产品经理来说，在时间充裕的情况下，还是尽可能地多画高保真原型。因为在经验不多的情况下，需要认真地梳理产品细节，高保真原型在这方面是占绝对优势的。图1-55所示为智能手表App的高保真原型。

1.5.3 交互动画原型

交互动画原型是将产品需求可视化。对于研发团队人员来说，需求不仅是文字的传递，还可以是真切的图形样式，以及操作感知。

交互动画原型可以降低团队成员对需求理解的成本，提高信息传递的效率和效果。优秀的交互动画原型不仅可以使产品变得高效、流畅、好用。还可以使用户在使用产品时能够有一个爽快和愉悦的心情。图1-56所示为一款App的交互动画原型。

在项目初期，负责交互的人员，不管是交互设计师还是产品经理都需要明白这个产品的目标用户是谁、产品的使用场景在哪、产品的关键流程是什么、用户遇到的问题是什么、产品的竞品是谁。总结一下，也就是2个“Who”、2个“What”、1个“Where”。

经历了前面的低保真原型和高保真原型，也就是已经过了竞品分析、目标用户和产品使用场景的阶段后，到了产品流程和用户问题这两个阶段，而这两个阶段显然需要人机互动来完成，交互动画原型的优势显露出来。图1-57所示为人机交互的交互动画原型。

有些页面不需要做任何交互效果，最常见的是任务流的最后一个页面。例如，用户的任务是找到收藏列表，当用户打开收藏列表页即算完成任务，所以这个收藏列表页不需要做任何交互效果，而是将收藏栏目逐一罗列。图1-58所示为某款App的收藏页面。

与可用性测试任务无关的区域也不需要做交互效果。如果用户的测试任务是登录网站，那么，除了用户名、密码的输入框和登录按钮以外，网页中其余部分都不需要做热点链接。图1-59所示为拥有部分交互效果的页面。

在原型开发过程中，设计师们常常遇到的情况是，局部的交互效果做起来相当麻烦，需要花费大量设计时间和开发时间。这时，如果换一种思路，把局部的交互做成整页的切换，往往问题就轻松解决了。图1-60所示为交互动画原型。

在原型开发过程中，如果要用“真实的”数据，需要操作数据库，这会使得设计和开发难度增加，同时也更耗时。所以，在原型设计中一般都会将页面中的数据或者链接指定固定值。图1-61所示为数据页面的原型。

为数据指定固定值后，不管从哪个列表项点击进来，都跳转到唯一的、相同的详情页。或者不管输入什么账号密码，都进行登录跳转。在原型设计中，如果不影响核心任务，尽量不要用到复杂的数据库或者后台，简简单单跳转页面就行了。图1-62所示为统一的详情页原型。