1.2 界面原型的保真程度及应用

通常把界面原型按照保真度划分为低保真原型和高保真原型。所谓“保真度”，就是原型在业务逻辑、交互逻辑和视觉逻辑上与真实产品的相似程度。业务逻辑指原型体现出来的实际业务流程，交互逻辑指原型中详细的操作步骤、用户反馈和异常流程处理等交互动作，视觉逻辑指原型的样式。项目所处的阶段不同，使用界面原型的用途不同，所需的界面原型保真程度也不同。

1.2.1 “画”糙理不糙——低保真原型

1.低保真原型简介

低保真原型有时也称为线框图，通常只把页面上的文本、按钮、图标、图片和文本框等基础元件大致排布一下，无须关心元件的样式、尺寸和元件之间的距离；如果有些细节部分还没有想好，甚至可以使用占位符临时代替，如图1-1所示。

图1-1

线框图一般做成黑白稿，按照元素的级别梯度使用不同深度的灰色，级别越高、重要性越高的元素颜色越深。注意千万不要在设计原型时就开始配色、调整元件尺寸，因为这些都是UI设计师的工作，这些工作对UI设计师来说才是专业的。否则看似帮了UI设计师的忙，也看似缩短了项目周期，但实际上从专业的角度看可能并不合格，而且会限制UI设计师的思路，给后续的工作带来很多不便。当然，对于超链接、当前状态等页面中需要特殊强调的元素，是可以加上颜色的，所谓“万灰丛中一点红”，加了颜色以后，UI设计师便会更加注意这些内容，只是效果图上不一定使用这种颜色。

在交互方面，可以不做交互效果，而使用箭头来表示元件和其他页面的跳转关系，如单击某个按钮跳转到某个新页面，就把这个按钮和目标页用箭头连起来，如图1-2所示。当然也可以做成交互稿，但一般只加入页面跳转链接和少数典型的交互动作。

图1-2

2.应用场景

如果你是一个创业团队的负责人，或者项目刚刚启动，当产品还没有成型，甚至连雏形都没有，只是在最初的需求讨论阶段时，那么就只需要使用低保真原型。因为这个阶段的需求、想法、创意都还很不确定，原型制作得过于细致会增加很多不必要的成本（只是相对而言，因为原型本身就是低成本表达想法的工具），可能今天确定的东西第2天就有变化，并且此时你只要把想法向其他团队成员介绍清楚即可，人们更关注的是产品宏观上的逻辑——能否解决用户的问题，有没有业务上的漏洞等。并不是页面好不好看，是什么色彩风格的，用户头像是圆的还是方的，按一个按钮会有什么反应，如果用户操作错误会有什么反馈等，这些细节的东西一般都在业务逻辑基本确定后才进行详细设计，在需求前期并不需要过多纠结。

1.2.2 交流高格调——高保真原型

1.高保真原型简介

高保真原型，是在低保真原型的基础上，在视觉逻辑和交互逻辑方面加以完善后得到的与真实产品相似程度更高的原型，如图1-3所示。读者可能有疑问，既然低保真线框图已经能说明产品的功能业务了，UI设计师根据原型设计页面，开发工程师根据原型进行编码就可以了，为什么还要继续完善原型呢？

图1-3

首先，低保真原型几乎没有或只有极少的交互动作，有些细节上的设计并没有表达出来，也没有被验证过，更不能让团队的其他成员靠自己的想象完成工作，这样做出来的产品有可能会偏离预期。其次，低保真原型都是黑白稿，是比较难看的，如果要给客户、投资人做汇报、演示，他们几乎都是非专业人士，用黑白稿会让人觉得很突兀，可能会被认为不专业，加入UI元素后会让人专注于产品本身，不会被不必要的想法所影响，对团队是非常有利的。

针对以上两大类情况，一确定产品细节，二满足非专业人士要求，笔者习惯把高保真原型分为两种，第一种是加入了更多交互动作但没有UI元素的原型，第二种是既有交互动作又有UI元素的原型。接下来把这两大类情况展开，在不同的应用场景下分别介绍。

2.应用场景

很多软件公司的业务都是做定制开发项目的，比如车辆管理系统、图书馆借阅系统等。这类产品往往有明确的客户、特定的用户群体，并且需求功能点也基本确定，产品要达到什么目的都很明朗。此时产品原型更多的关注点要放到“业务逻辑”和“交互逻辑”。可能要更多地关注需要设计多少个页面，每个页面对应的是哪些功能点，是采取下拉框还是单选按钮等。

这类产品的业务流程往往比较复杂，所以原型中还要加上逻辑判断和异常流程等内容，防止产品在设计阶段就出现业务漏洞。在设计完这些之后，一般会给客户演示原型，以检验产品是否符合需要，我们的理解和客户的需求是否相同。这个过程中用户可能会提出修改意见，一般会有多次修改，那么就会有多次演示，直至客户签字确认进入产品开发阶段。这种情况下，也不需要考虑UI元素，因为只有在需求确定的情况下，才能做UI设计。交互效果的复杂程度也可以视情况而定，只要能清晰地表达出产品的各种功能逻辑即可。

上面这种情况依然是在项目前期的需求阶段使用界面原型。其实在整个项目周期中，界面原型都起着十分重要的作用。例如在项目中、后期，如果要给市场和运营人员培训，在没有稳定的产品版本的情况下，可以用高保真原型来模拟，此时项目处于开发阶段，UI设计师一定已经设计好了效果图并切图完毕，所以原型中就能够加入UI元素了。另外，市场和运营人员需要了解完整的产品逻辑和使用流程等内容，所以原型的交互动作也要尽可能和真实产品保持一致。

对于非专业人士，除了上面提到的客户、投资人外，如果要对用户做易用性测试，也可以采取高保真原型。易用性测试可以放在开发阶段之前，因为开发的成本相对于界面原型来说是比较高的，在开发前就找到一些可以优化的功能点，对项目整体的进度来说是有好处的。当然，易用性测试所使用的高保真原型也包括视觉逻辑和交互逻辑。