1.1.2 认识界面原型

界面原型是一种可以模拟真实产品的模型，把抽象的想法通过可视化的页面和交互动作更直观地表达出来，体现了软件产品的设计理念、业务逻辑和功能模块。

1.界面原型的保真度

从视觉样式和交互动作两个方面，按照与真实产品的相似程度，界面原型可以分为低保真原型和高保真原型。原型的保真度越高，越接近真实产品。

低保真原型又被称为线框图。在视觉样式方面，线框图只需把页面上的各种文本、按钮和表单等组件进行粗略的排版即可，不要过度关注组件之间的距离、尺寸和颜色等样式，以免干扰对业务和功能逻辑的思考，限制UI设计师的思路。可以使用不同深度的灰色表示页面元素的层级关系，使用某种高亮颜色区分重要元素和次要元素。在交互动作方面，一般只需做出页面跳转链接、弹出层等基础效果即可。对于移动端原型，也可以使用箭头把原型缩览图连接起来，表示页面的跳转关系，如图1-1所示。

图1-1

高保真原型会尽可能贴近真实产品的视觉样式和交互动作。在视觉样式方面，界面原型与视觉设计稿保持高度一致，如图1-2所示。在交互动作方面，要制作出详细的交互效果，例如，不同状态下显示的内容、动画切换方式和异常流程的处理等。

图1-2

界面原型的保真度没有明确的界限，也不是每个项目都需要制作高保真原型，要视情况灵活掌握。下面就几种典型的场景做简要说明。

2.界面原型的使用场景

场景一：记录和讨论最原始的想法。

多适用于新产品的需求讨论阶段，此时没有必要对界面原型精雕细琢，只需要低保真原型即可，甚至可以不使用软件工具，直接使用纸笔绘制。

场景二：确认需求。

通过对市场调研、运营数据的分析，产品经理会得出一些新需求，此为内部需求。除此之外，用户在使用产品后提出的反馈意见，市场运营人员为解决工作中遇到的产品问题而提出的要求，一些定制开发的项目要满足的客户需求，这些都被称为外部需求。面对外部需求，要通过界面原型与提出需求的人进行确认，既要保证产品经理理解的需求和对方提出的需求是一致的，也要保证设计的原型方案能够解决遇到的问题，确认无误后再进入开发排期。

要根据面对的对象制作不同保真度的原型。对于产品的终端用户，如有必要，使用高保真原型进行用户测试；对于市场运营等内部人员，无须关注原型的视觉样式，交互效果的制作程度可视情况而定，只要能够清晰表达功能逻辑即可；对于为项目买单的客户，如有条件，最好也使用高保真原型，这样能更好地体现团队的专业性，提升团队形象。

提示

制作界面原型相对于软件研发来说是很简单的，先通过原型进行需求确认，再进行软件研发，可以显著降低成本。

场景三：产品需求评审。

正式开发之前，要在团队内部进行需求评审。使用界面原型和产品需求文档（PRD，后面会讲解）向研发团队讲解产品功能，通过团队的力量检查设计的功能是否可行、逻辑是否有漏洞，此时使用低保真原型即可满足要求。

评审通过后，开发工程师进行编程，测试工程师编写测试用例，设计师设计效果图。

场景四：产品演示、培训。

有时需要给投资人演示产品，或者给用户做产品培训，但真实产品还没有开发完成，没有稳定版本可用。此时可以使用高保真原型代替真实产品。因为比起开发工作，完善原型的保真度时间成本要小得多，可以解燃眉之急。

提示

对于互联网产品，易用性是一个重要的指标，易用性好表现在用户几乎不需要学习成本就可以轻松使用产品的各项功能。但对于某些行业软件来说，由于其业务流程本身的复杂性，有时需要对用户进行使用培训。

3.界面原型贯穿项目研发过程

界面原型贯穿了整个项目的研发过程。图1-3所示是项目研发的流程图，图中的每一个环节都离不开界面原型。

◎ 分析需求后，使用界面原型把需求转化成具体的功能。

◎ PRD是对界面原型的补充说明。

◎ 界面原型+PRD是进行需求评审的手段。

◎ 视觉设计需要以低保真原型为基础。

◎ 软件研发、编写测试用例需要以界面原型和PRD为依据。

◎ 软件测试需要以界面原型和PRD为标准。

图1-3

可以看到，界面原型是一个“标尺”，是产品设计能够实施下去的基础，是各方人员沟通的桥梁。作为产品经理，掌握好原型设计的专业技能，才能在工作中更加得心应手。