概述

　　（一）背景

　　随着银行各业务的不断发展和延伸，各项目对实施效率及用户体验提出了日益迫切的要求。

　　本文提炼了以交互设计原型驱动为核心的方法——原型法，作为驱动敏捷设计开发有效开展的重要方法之一，该方法在保证产品实施进度的同时，更加有效地平衡了业务目标和用户体验目标。

　　（二）目的

　　通过对原型在项目设计实施各环节中所发挥的作用，以及对原型作为一种工具，如何在不同情境下更加合理地加以应用所做的梳理，使相关人员对原型法的目的、要求和指导思想达成共识，以便在项目合作中更加有效地应用与协作。

　　（三）适用对象

　　项目管理、业务需求、设计、前端开发、测试等相关人员。

　　原型与原型法介绍

　　（一）定义及作用

　　1、原型

　　原型设计作为需求可视化的重要环节，在产品实际开发之前，是产品目标逐步转化为用户界面的过程，它最主要的工作产出就是界面原型。

　　2、原型法

　　当原型作为一种快速验证需求和设计的工具，在需求到设计的不同环节，各个相关人员，借此对未来的产品形态进行直观的讨论和判断，以期提前发现和验证问题并修正时，原型法就得以应用。

　　3、原型法的作用

　　开发实现之前，快速验证与迭代产品设计和界面设计方案，提前发现，并在原型上修正问题，避免后期无谓迭代造成的资源成本浪费。

　　原型法的应用是基于原型设计的基础上开展的。

　　原型设计的关键，在于需求可视化设计和（基于用户体验的）交互界面设计；

　　原型法实施的关键，在于不同阶段应用不同的原型，并以此为重要依据做出设计迭代决策。

　　（二）原型的种类及作用

　　1、高保真和低保真原型

　　低保真原型：主要体现需求功能、框架、流程和业务逻辑，一般不包括交互细节和视觉设计。低保真原型经常使用线稿图/线框图来传达产品概念。

　　高保真原型：在低保真原型基础上添加交互状态和细节，也可以根据需要增加视觉设计和交互效果。高保真原型也可以使用可交互的原型来模拟上线以后的实际的使用效果。

　　2、原型和DEMO

　　DEMO：demonstration（演示）的缩写，翻译为“示范、展示、样片、样稿”，常被用来称呼具有示范或展示功能及意味的事物。无论高保真还是低保真，只要用来演示的原型都可以称为DEMO。

　　原型和DEMO：在实际使用中也经常被通用，特别是高保真原型。通常情况下，作为Demo来演示的原型大多会增加主要的交互逻辑。

　　原型设计过程中，以原型为基础，快速制作生成阶段性的Demo，用以演示和收集意见，经常被称为快速原型法。

　　各原型概念关系：

图1 各原型概念关系

　　原型法在敏捷项目中的应用

　　（一）原型在敏捷项目中的应用场景

　　1、需求确认环节的原型应用

　　·目的：辅助需求传达

　　·该环节是需求可视化的第一步，目的是配合需求文档里的业务描述，功能流程等，来传达产品功能逻辑的设计概念，体现未来系统的大体视图和信息框架，不包括交互细节和视觉设计。

　　·原型设计：没有固定的设计方法和格式约束

　　需求可视化的原型，可以根据具体项目和人员情况，由业务需求人员或者理解需求的交互设计人员来完成。该环节的原型设计人员可以根据项目特点和自身的经验习惯，灵活选择原型的生成方式（相关原型工具、手绘草图、竞品截图注释等）。

　　讨论和迭代

　　（1）该环节原型的讨论主体是业务需求人员和交互设计人员，当然开发、测试人员在条件允许的情况下，越早加入到讨论的过程中越好。对于交互设计人员，主要是从该讨论中明确交互设计方向和设计框架，作为后续设计的出发点。

　　（2）讨论过程中，交互设计人员侧重从用户体验的角度对需求可视化原型提供建议，业务需求人员需要从业务目标的角度对原型进行补充和调整建议，需求和原型需要根据综合意见进行同步迭代和调整，以便其中确定后推进到交互设计环节。

　　示例

　　被用于验证初期想法，方便讨论和原型的重构，适合敏捷开发时快速出原型图的原型（下图为示例，实际原型需根据具体项目情况设计）。

图2 线框图示例

　　2、交互确认环节的原型应用

　　·目的：逐步确认界面交互各层次的设计表达

　　·信息结构（框架流程和交互逻辑等）、交互行为（用户任务场景、交互方式等）、交互细节（交互反馈、各交互状态、边界情况等）、视觉启示（交互设计的视觉传达考虑）。

　　·原型设计：相对固定的专业原型设计工具

　　交互设计阶段的原型设计，通常情况下都由专业的交互设计人员来完成。根据具体项目情况和设计师习惯，选择相对固定的专业设计工具（一般PC端toB的多用Axure；移动端toC的多用Sketch），必要时候用相关原型制作工具生成可交互的demo。

　　讨论和迭代

　　（1）该环节原型的讨论主体除了业务需求人员和交互设计人员以外，最主要的是开发、测试和视觉设计人员的参与，开发、测试人员主要是把控实现代价和风险，提供技术约束和异常边界等情景建议；视觉设计人员可以从视觉表现上共同参与意见，并且通过讨论提前把握视觉设计需求。

　　（2）该环节的讨论迭代是在整个原型法实施中最频繁的，次数和形式都根据实际情况随时灵活进行。

　　示例

　　（1）通过原型图进行信息结构验证，原型图诠释了整个产品的内容大纲、信息结构、用户的交互行为描述。

　　（2）在线框图的基础上添加相应的交互细节，用于检查和测试产品功能，而不是产品的视觉外观（下图为示例，实际原型需根据具体项目情况设计）。

图3 原型图示例

　　3、视觉设计确认环节的原型应用

　　·目的：确认最终的界面实际视觉效果

　　·视觉设计各要素的确认（设计风格、图标、字体、导航、动效等）。

　　·原型设计：专业设计工具

　　视觉设计阶段的原型设计，其实就是最终实际用户界面的视觉设计，都是由专业的视觉设计人员来完成。根据设计内容的类型和设计师习惯，选择固定的专业设计工具（PS、Sketch、AE等）。

　　讨论和迭代

　　（1）视觉设计的输出，作为原型进行讨论主要有两个应用场景：交互设计人员确认交互设计思路的贯彻程度；前端开发人员评估实现代价和约束，通过讨论提前把握UI开发需求。

　　（2）视觉设计在交互设计迭代确认后进行，相对来说不需要太多的设计迭代过程。该环节的讨论用相对快捷的方法与相关人员确认即可。

　　示例

　　在原有图形基础上，添加动态效果，给UI设计师指导，给开发人员指导，同部门自下而上提供方案（下图为示例，实际原型需根据具体项目情况设计）。

图4  高保真原型图示例

　　（二）原型迭代中的人员职责

图5  原型迭代中的人员职责

　　原型法在敏捷项目测试工作中的应用

　　对于较为庞大复杂的项目，测试人员在前期要做大量文字梳理工作，但是由于初期对系统不熟悉，需求反复迭代等问题，可能要对需求进行多次多版本的阅读，这中间的阅读效率、阅读中的思考效率却不一定能保证。

　　此时如果能有参考原型图的话，就可以在看图的过程中熟悉业务逻辑。将菜单层级、业务流程、信息层级、交互方式等内容用可视化的方式呈现；可以让测试人员在再次阅读的时候能有所重点，对于界面清晰呈现的部分，无需重复阅读，而可以把精力放在需求修改或之前逻辑比较模糊的部分，提升理解效率。

　　（一）原型法在测试工作中应用的前提

　　1、项目类型

　　对于测试工作来说，原型法在新建或重构类的重前台的项目中更能发挥其优势。

　　这类项目初期通常没有可以参考的成熟界面，测试人员学习业务需求需要一定成本。而原型图则可以让测试人员在开发之前，更早地接触界面，提前进行测试数据的预估及案例设计等相关工作。

　　2、测试人员技能

　　原型法需要测试人员掌握原型软件（Axure或Sketch）的基本操作方法。测试人员虽不需像设计人员一样绘制出整个界面，但出于记录及沟通需要，测试人员至少在产品经理或交互设计师交付的原型图的基础上可以进行下列操作：

　　·调整页面顺序

　　·调整页面要素

　　·进行页面标注

　　（二）原型法在测试工作中应用的方法及优势

　　1、交易及页面信息框架梳理及应用

　　交互设计师在绘制原型图时并不是直接奔赴细节，而是在厘清业务目标、用户目标的基础上，从信息架构的梳理开始。测试人员在了解需求进行测试工作的过程中，也要遵循从框架到细节，迭代渐进的原则。

　　交易框架信息

　　当拿到一份设计好的原型图时，测试人员首先应该关注原型图的页面架构（如下图6）。架构的层级关系可以帮助测试人员更快的理解交易间的关系、厘清页面的先后顺序。

　　如果测试人员发现原型图在信息架构上与业务需求中的相关描述有所出入，应适时提示产品经理及设计人员，以促进文档的迭代一致。

　　当明确了交易框架信息后，测试人员就可以给测试案例搭建一个最粗粒度的骨架，确定案例大概的模块，并初步构思案例编写的模块命名规则。

图6 交易框架信息

图7  页面框架信息

　　页面框架信息

　　当交易框架信息梳理完毕后，测试人员就可以开始关注页面框架信息（如图7）了，即重点交易中的页面，特别是复杂页面，包含了哪些标题，可能跳转到哪些组件等信息。这个阶段测试人员无需了解页面中的每一个录入项，但是应该对交易的目标、录入顺序以及哪些跳转是可以复用的组件有了较深入的了解。

　　在掌握了页面框架信息后，测试人员就可以更清晰的了解哪些交易将花费更多的时间进行案例编写及测试实施，从而对人员及进度掌控有更合理的安排。

　　2、页面要素信息梳理及应用

　　表单要素

　　表单页即用于信息添加、录入的页面类型。用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。

　　对于测试人员来说，当其开始关注表单要素时，案例的编写就可以进入最细粒度了。测试人员在这个维度上就可以参照原型图，关注到如下内容并进行相应案例编写：

　　（1）页面录入要素的完整性、必输性（是否在界面绘制星号等）；

　　（2）字段录入的边界值（是否在界面绘制提示语等）；

　　（3）页面按钮要素的闭环性，即是否做到了增删改查的相关要求（按钮是否配套出现等）；

　　（4）主子页面跳转的准确性（步骤条、锚点定位等要素）

　　……

　　列表要素

　　列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、增删改查、分析、下钻至条目完整详情页等操作，非常适合统计查询类的相关交易。

　　而对于这类查询、登记簿类的交易，开发在设计数据库的时候不一定和业务实时同步，作为测试人员，如果在查看相关原型时能同时关注页面要素和数据库字段是否一致，可以帮助产品经理、开发确认业务字段、要素的完整性。

　　注意事项

　　需求、原型图甚至是UI设计图在这个阶段迭代修改的代价远小于开发出来再修改的代价。测试人员在这个阶段编写的案例需要注重版本保存，不能盲目覆盖，防止反复。

　　3、控制规则梳理及场景联想

　　测试人员是对边界值、条件控制等内容较为敏感的人员，有时需求中或原型图中并没有体现的一些控制关系（或者程序中可以由后台控制提到前台控制的部分内容）、异常场景，或者讨论过程中衍生出来的需求中没有的规则，测试人员可以在参考原型图设计案例时，更敏锐地识别出来。

　　同时在原型图旁边进行标注，并在讨论后转换为案例分析或案例本身，减少遗漏的同时，也帮助产品经理、设计人员补全了文档。

图8  控制规则在原型图中的标注

　　4、用户体验相关测试

　　用户体验也越来越多地成为了测试人员关注的指标。这里我们有两类人员的测试：

　　实际用户基于原型的测试

　　用户原型测试，是用来收集真实用户对原型的实际体验反馈。一般由用研人员、交互人员来提出测试任务，邀请真实用户完成任务，观察用户在操作过程中的表现，从而产生测试结论，并与相关人员同步测试结果，作为下一轮迭代的参考依据。

　　这里我们要关注用户是否能在不受到提示的情况下，独立完成任务，如果没有，他们在哪里停顿了、选错了，从而可在观察后分析，是哪些体验不好的因素造成的，在设计上需要做哪些调整。

　　在敏捷设计与开发中，用户原型测试比起专门的可用性测试，具有更灵活、更轻量级的特点。

　　专业测试人员基于原型的测试

　　专业的测试人员由于前期跟进了需求、设计等内容，对原型图中提升用户体验部分的设计也会更加熟悉。因此在实际系统测试时，测试人员能更好的关注到用户体验的内容。

　　如第一次登陆系统时，是否添加了动效指引？有没有按照原型设置“回到顶部”等快捷按钮？页面主按钮的颜色是否与辅助按钮不同，从而达到突出的效果等等。

　　测试人员在这里测试的不仅是“开发内容”同时也是“设计内容”。通过这样的测试，可以更好的提升系统的用户体验，做到让系统可用、易用、好用。

　　5、复用资产及交流工具

　　原型图不仅对于交互设计师是可复用的资产，对于测试人员来说也是可复用的资产。

　　当某些小的优化项目不具备交互设计师资源但有以前项目的原型文档时，由于原型图除了展示界面，还体现了规则注释、变更过程等内容，原功能的原型图文档会成为测试人员很好的学习资料。

　　对于一些功能、界面相似的交易（如一些公共平台的审查、审批流程），测试人员也可以参照相似界面提前展开需求分析、案例编写的工作。

　　在敏捷项目中，永远不是准备完备再开始，而是尽早开始，迭代修改，持续交付，而原型为这一理念提供了可能。

　　最后，随着项目的进行，测试的团队也有可能进行扩充或更迭。除了案例的交接和培训，原型图的交接和培训也非常重要。

　　由于人天生更容易接受图像的信息，因此参照原型图进行案例、需求的交接或培训的效果往往会比让相关人员重头消化需求说明书或案例的效果更有质量也更有效率。

　　（三）原型法在测试工作中应用的局限

　　由于原型法是基于界面的分析、测试方法，因此它不适用于后台导出的数据表对比或者一些批量类的没有前台界面的测试。

　　对于财务类等强后台账务逻辑的系统，在原型图中是较难体现的，还需要测试人员通过自己理解分录、学习接口关系等方法推进测试工作的深化。

　　此外，对于本系统与外系统间的关系，原型图有时不能更清晰的展示，测试人员可能需要搭配流程图、系统间关系图等进行综合理解。

　　原型法应用注意事项

　　1、不同项目类型

　　通常情况下，原型法作为一种指导思想意义上方法论，适用于各类系统和各种项目，该文档强调在敏捷设计和开发中的应用，在各环节的实施中更注重灵活性和快速迭代的过程。

　　在专项的体验优化项目中，更强调原型法在全流程中的实施，以及用户研究人员和实际用户对于原型迭代的参与过程。

　　2、不同项目阶段

　　原型法的主要思想，在于重视提前验证和迭代，所以，原型发挥作用的关键在于从需求开始尽早介入、持续迭代。

　　对于一些由于现实情况，从中间开始加入用户体验目标的项目，可以根据项目时间约束等，选取关键的用户任务，从需求开始重新验证和进行原型优化，相对垂直地进行原型法的实施。

作者：董婕婷   

来源：51Testing软件测试网原创