如何做好交互验收？

做任何事情都应该有始有终，设计工作也是如此。

设计师前期参与需求讨论、需求评审、输出设计方案、组织设计评审、完成评审后的修改，以及交付给下游同事之后的协调沟通等，以上每一个步骤都需要投入较多的精力。

同时设计师仍然要做好善后工作，设计方案的交付只是项目推进过程中在设计节点的结束，想要保证项目后期上线的效果，认真对待“设计验收”是非常重要的一个环节。

本文主要说明交互设计师进行交互验收的常规流程、交互验收的内容，以及验收注意事项。

 

一. 什么是交互验收？

是指某个项目已经完成开发，测试人员已完成功能验收，确保各个流程无异常和无阻断之后，参与项目的交互设计师从交互层面对项目的实现效果进行验收，发现交互问题并提交给开发跟进解决，之后再次复验的过程。

 

二. 交互验收的常规流程

2.1 测试完成功能验收，将代码打包提交给设计师验收

交互设计师开始验收的时间点，一般情况下是在测试人员完成1~2轮测试之后，这样设计师验收时主要的精力集中在设计相关的问题上。这里有两个需要注意的地方：

1. 个别紧急待上线的需求，交互设计师可能会在测试人员未完成功能验收时介入，只是过早参与验收，发现的问题可能会比较多，其中有些并非交互问题，会耗费设计师过多的精力与时间。
2. 实际工作过程中，交互设计师在某个时间段内可能会承担多个项目，处于并行推进的状态。需要合理安排时间，在给定时间范围内完成验收工作。

 

2.2 汇总验收问题

交互验收时可以按照不同的维度记录bug，比如按照需求的主流程与子流程经过的页面验收；按照交互稿中原型输出的顺序验收；对于一些复杂的需求，包含相对复杂的流程，需要在验收过程中结合以上两种方式。

无论如何验收，最终需要将发现的交互设计问题汇总，建议以文档的形式集中记录（或者有些公司是提交bug清单任务），之后一起交付给开发。

这样便于开发抽时间集中解决，最好不要在工作群内单个抛问题，这样既不利于交互设计师后续复验，也不利于开发查阅问题。

 

2.3 将问题提交开发解决，跟进解决的进度和结果

告知对应的开发查看和解决汇总的验收问题，最好能提前了解开发解决所需的大概时间，便于自己提前预留复验时间。

开发在解决提交问题的过程中，对于已经解决的问题会通知你再次复验，对于未能解决的问题会告知你原因，此时需要针对具体情况分析判断：比如现有条件下是否有其他合理的替代方案？

如果是因为开发技术实现难度、开发实现周期等因素，可以与产品经理沟通，对此类问题进行归类记录、并且标明未能实现的原因，站在交互设计师的角度给出合理建议。

 

2.4 上线后的验收

即使是待上线的测试版，复验没有问题之后，也无法保证发布正式版一定准确无误，当然这是小概率事件。所以交互设计师仍然需要在需求发布正式版之后，再次对线上进行验收确保无误。

 

三. 交互验收哪些内容？

• 01. 交互流程

页面逻辑判断中涉及到的关键任务路径，是否符合交互稿中设定的流程？

交互设计师在输出交互稿时，一般会对需求中涉及到的关键任务，尤其是判定条件相对较多的任务流，绘制任务流程图。

这样做的目的既有利于查看交互文档的人员明确判定流程，也有利于交互设计师验收时快速调用、提升验收的效率。

 

• 02. 交互逻辑

在各种预定的操作情境下，用户每一次操作所触发的页面状态、操作结果是否达到预期效果？尤其是特殊状态下的页面样式、提示等。

这里也需要关注“逆向操作”，即顺着正常路径执行返回操作，页面跳转逻辑是否正常。

同时避免页面跳转逻辑陷入死循环。比如在移动端帐号登录页面有注册入口，点击注册按钮进入新用户注册页面，此时有的应用会在注册页面继续放置“登录入口”，若在注册页面点击登录按钮，则默认返回上一级登录页面，并非是继续进入下一级页面，不然极端情况下这种场景会陷入死循环，用户反复点击多次，就需要回退多次。

 

• 03. 页面元素的交互细节

页面元素的交互细节与交互稿中元素的交互说明是有对应关系的，主要包括：

1. 页面元素位置、可点触区域、默认状态、触摸/悬浮状态、点击后的结果等是否符合预期。
   
2. 元素的限定极限值（最小或最大值）、交互动作（点击/滑动/长按等）、页面切换方式（其中PC端判定新窗口打开还是当前窗口刷新，移动端涉及到页面滑入滑出方式）。
   
3. 页面元素不同场景下的不同状态：比如电商详情页“立即抢购”按钮，当商品的库存不足时，该按钮置灰不可点，并在页面给出相应的提示说明）。
   

 

• 04. 交互动效

如果交互设计师在输出交互稿时，有相应的动效设计或文字说明（一般简单的微动效可以通过文字表述，复杂一些的动效通过专业软件输出动效demo），验收时同样需要查看动效的还原度。

 

• 05. 不同屏幕尺寸的适配问题

PC端网页设计中，通常会依据网页重要性对页面进行不同屏幕宽度的自适应，比较常见的是大部分网站首页会依据不同宽度节点进行自适应。因此在交互设计阶段就需要考虑到自适应布局，验收时自然也不能忘了。

移动端界面设计，由于近年来大屏手机的出现，其中最典型的是iPhone的刘海屏，尽管目前输出交互稿仍然是以iPhone 6的一半尺寸为标准，但是由于各种类型大屏手机的出现，导致我们不得不在设计初期、以及验收阶段考虑大屏手机的适配问题。

举例：比如iPhone X去掉实体Home键之后，将返回主页/调起多任务窗口的操作按钮至于屏幕底部，并且为了避免交互手势冲突，苹果官方标明了针对此类机型进行界面设计的安全区。所以在设计底部导航栏时，就需要将底部导航栏放置于安全区的底部，而不是屏幕的底部，不然会引发手势冲突。

 

• 06. 操作的易用性与使用体验

实际工作过程中，经常会遇到一种情况：原本按照交互稿的方案，可以确保页面操作的易用性，但实际开发过程中基于开发技术实现的复杂度、开发时间有限等因素，可能无法实现交互稿的方案。

此时综合各种影响因素，给出合理的替代方案，那么验收时也需要特别注意替代方案的易用性与使用体验。

 

• 07. 验收到非本次需求的其他问题

此时需要评估问题的复杂程度，必要时与部门同事沟通商量。
一般根据问题的复杂程度决定：
能解决的有关用户体验的小问题可随即提出解决；
若问题牵扯较多、调整相对复杂耗时，可以先记录后续改进。

 

• 08. 移动端项目分别验收iOS与Android端

iOS系统与Android系统有不同的交互设计规范，界面相关元素的排版布局与交互方式存在差异，也对应着不同终端的开发。

特别注意：输出交互稿时最好考虑到两端的差异，给出明确的差异说明或图例示意，这样便于开发明确，同时降低了交互设计师后期的沟通成本。因此验收时需要针对两端分别走查。

 

四. 交互验收注意事项

4.1 对项目验收复盘思考

验收过程中有没有遇到什么问题，如果有，是否有更好的解决办法？沟通过程中是否有不顺畅的地方，是不是自己对基础技术不够了解？

哪些问题是自己应该坚持不妥协的，哪些问题没有必要耗费过多精力争执等等。
每一次复盘都是为了之后项目的验收更加顺畅高效。

 

4.2 对验收汇总未能解决的问题，分类记录

目的是避免记录的问题过于零散，不利于上下游同事查看分析。分类记录便于明确定位属于哪里的问题、问题的多少、问题的性质，也有利于团队后续的复盘。

 

总结

目前有大量的专业书籍和文章详细介绍如何输出高质量的交互稿，对于交互设计师而言，这只是承接需求的一部分，不仅要重视前期定义需求、产出交互文档，更要做好收尾工作，认真对待需求的交互设计验收。

 

原文地址：Viksea的设计思考（公众号）

作者： Viksea