「设计有方」01弹：关于设计自查表的那些事

什么是交互设计自查表？

交互设计自查表，是当设计师完成一个项目的交互稿后，在提交给团队内部、外部或者客户进行评审前非常重要的一个查漏补缺的环节。用TO DO LIST的清单方式来检查每一个可能会被疏漏的环节，不仅可以避免在评审或投入到开发过程之后发现七零八落“小尴尬”的情况出现，也是一种锻炼设计师缜密逻辑思维的有效方式，既能够提升团队的整体效率，也能够交付更高质量的设计稿，博得PM和开发小哥哥的五星好评！

那在喵的日常工作中，也经常会碰到团队小伙伴抛来关于此方面的问题：1.该从什么角度入手来自查嘞？2.我想做一次全面的完整的自查，有没有模板？3.不同的项目和需求，自查又该如何进行？

刚好在去年年底大喵利用业余时间为UED团队的同学整理输出了一系列较为完整的交互设计自查表，结合最近刚啃完的《支付宝体验设计精髓》中的干货梳理，和大家把以上的问题都薅一遍。

干货预警：如果懒得看中间七七八八的理论介绍，手动滑动屏幕拉到最底部，有我整理好的成品【交互自查表下载链接】

「设计有方」01弹：关于设计自查表的那些事

1.该从什么角度入手来自查？

一.硬件特性

制定适配原则：

（1）数量不变进行同比放大适配

1.同行数量增多，图片字号大小不变

2.避免不规则背景

3. 避免不同设备适配时遮挡

（2）账户在设备上的切换

1.同一设备，不同账户切换

2.不同设备，同意账户切换，（若支持多点登录，注意内容同步，同时判断ID，避免用户刷红包）

3.横竖屏显示效果（先确定是否支持横屏，再考虑怎么设计横屏）

️二.软件特性

（1）操作系统特性

进行新产品规划初期，要确定新产品覆盖的系统及系统版本号，如iOS支持多手势操作，故iOS用户更容易接受手势操作，而Android因为硬件设备差异较大，对手势支持也有较大差异，因此较为隐藏的手势操作不适合使用。

（2）制定多平台的设计规范

比如统一的表单操作、选项卡、浮层提示、加载、刷新等。统一组控件可以提高产品优化效率、降低开发成本、保证用户体验的一致性。

️三.版本兼容

（1）版本覆盖时间

新版本上线后要确认一下版本在多久的时间范围内可以覆盖80%以上的用户。尤其当新版本的某些功能需要配合H5活动时，这个时间尤为重要。如果版本没有发布，而活动时间已经迫在眉睫，那这个活动可能面临失败。

（2）更新提示强弱

一般来说，用户可以选择不更新版本，继续使用。但当APP出现较大bug或存在安全隐患时，可通过不可取消更新进行强制升级。

（3）兼容性展示

如新红包功能等，低版本客户端的会话页面仍能收到会话消息提示，点击此消息，可以有效引导用户更新APP。

️四.网络特性

（1）快速启动

应用在启动时需要一个加载时间，为避免用户在等待时间感到枯燥、乏味，可采用以下3种方式：

1.让用户感知到应用的启动速度比较快：使用一张与应用相同的图片

2.作为一个产品品牌展示区：展示品牌slogan

3.作为广告展示区

（2）合理缓存

合理缓存可以让用户感受到应用的速度更快，不浪费流量。但缓存不能过量。一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要全页面加载，可以先展示较旧的内容然后加载出较新的内容。相比每次进入都重新加载，缓存让用户体验更好。

（3）弱网环境

1.弱网环境下加载失败

加载时间控制在8s内，并且尽可能地采用有趣的加载来降低用户等待时间。加载失败后要给予用户重试的机会，并告知加载失败的原因。

2.弱网环境下内容展示不全

可能只显示部分内容，一般是文字内容显示而图片无法加载，只出现占位图或空白图。

3.弱网无网状态下数据传输/设置生效机制

4.Facebook上传失败内容

如果网络环境不稳定或者断网，但用户需要将内容发布出去，可以支持用户本地发出去，本地可见。有网络请求时，再将内容上传到服务端，并且让其他用户可见。这样可以有效提升用户体验，让用户不受网络环境的限制。

5.中断、超时

在网络中断时，帮助用户保存当前的输入内容或者浏览内容。若超时则给用户提示，让用户停止等待，重新请求网络或退出。

五.页面状态

可以用生命周期来描述一个页面的状态

（1）页面初始化

启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行。

（2）页面刷新

通过刷新可以更新当前页面的数据。如果页面涉及数字的提醒或通知（如存款），则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新状态。

（3）页面加载

1.分步加载：为了尽快显示页面内容，可先加载文字，再加载图片。让用户在网速不够快的情况下可以尽快预览到内容。这种加载方式通常应用在用户首次进入页面时。

2.懒加载：在需要时才加载。效率低，但占内存小。一般在页面浏览过程中加载新内容时采用这种方式进行加载。

3.智能加载：分网络环境加载。WiFi下、4G下、弱网下不同。最好可以让用户点击未加载的内容后继续加载，不需重新刷新页面。

4.页面内容被限流:活动页面可能因访问量太大而遇到限流。如支付宝的春晚发红包页面。

5.页面内容为空:可以在显示上用调皮一点的文案避免空页面显得过于枯燥。

6.页面内容失效:可以将入口下掉或在用户进入后重新刷新出可用内容。

六.页面流程完整性

为了确保流程完整性上的体验，可以采用的设计方法：

（1）快速回到首页/主要页面

要求我们在搭建整体信息架构时，结构足够扁平，并且所有的页面流程都必须形成一个有效的闭环。

让用户始终知道自己在哪儿

（2）通过页面标题让用户确认当前的位置

通过页面之间跳转的转场动效让用户确认当前的位置。

（3）用户可以沿原路返回

返回到原来的浏览位置，明确任何一个可点击的去向，且去向是可返回的。返回问题与定位有关，从哪里去返回到哪里。特殊路径需要定制，可能会出现连跳几个页面的情况，在验收过程中要重点注意。

（4）任务完成后跳转

任务成功后，页面跳转后可返回到来源页面。

任务失败后，需提示当前状态，并引导用户如何查看最新的状态。在有新结果时，通知用户。

七.消息通知

根据消息的强弱进行消息通知的设计。

（1）强消息通知

可以使用客户端推送，锁屏预览消息。用户可以通过新消息直达详情页或通知列表，未读信息可以标记出未读数字。

（2）弱消息通知

可以在用户打开应用后，在内容层上统一提示，告诉共有xx条新消息，点击后可查看所有消息内容。如朋友圈“新消息”。

八.细节

设计细节有非常多的点，比较通用的细节有：点击状态、发送状态、输入、反馈、音效。

（1）点击状态

包括开始、结束、不可点、失效、已领完、已过期等。

发送状态：①对于发送后需较长时间返回结果的，发送后直接到结果页面，结果页面上显示当前进度和最终结果及其时间；②发送后较短时间就返回结果的，发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面。

（2）输入

减少输入：在移动端输入的成本较高，设计师可以通过表单、选项卡、默认填入值来减少输入。在社交会话中可通过更多的语音、图片、视频来减少输入，让用户沟通得更轻松。

输入限制：在内容不确定多寡的输入框内，可以采用暗文或数字的方式来帮助用户确定当前的输入内容有没有超过限制。（输入的内容一定要做长度限制）

中断时保存内容：移动环境不稳定，经常出现中断退出的情况。当遇到异常情况时，可以保存用户在中断前输入的内容，待环境稳定后用户可以继续操作。

（3）反馈

即时反馈：若用户操作后有反馈信息，则应立刻给出。反馈的区域不能离用户操作区域太远，否则会被忽略。如果是非阻塞式反馈，则方式要轻，不能干扰用户当前任务。

反馈效果：所有点击都要有明确的反馈状态，点击后会出现一系列的状态变化。

（4）音效

需要考虑声音大小、配合操作使用是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适。

九.与时间、数字相关性问题

和时间相关

(1)制定时间规范

根据产品设计需求，在前期根据场景规划时间显示规则。如格式是“2018-2-7”还是“2018/02/07”等。

（2）不同场景下时间格式的选择

用户对于时间的感知根据场景的不同会有很大差异。因此在对时间进行设计时，一定是根据使用场景来进行时间的设计。

（3）有效/失效时间

内容失效后需要处理，可能由清楚或者其他功能来支持。有的内容是没有生效期的，但它会变成历史内容。历史内容与现有内容需要进行一定的区分。

和数量相关

规范数量规则时，需要考虑以下问题：

1.是否为零？为零时应该显示还是隐藏？

2.刷新是否影响数字变化？

3.数字是否会减少，当数字减少为零时是否有反馈或界面变化？

运用尼尔森可用性原则设计全面性的交互自查表

除了上面所介绍的细节梳理之外，如果你面对是一次比较整体全面的走查，也可以用到下面的尼尔森启发十项准则来检测你的设计是否达满足了可用性原则(我的简书有详细介绍关于尼尔森启发式十项准则的文章，点击主页可查看)

尼尔森启发性原则1-4 尼尔森启发式评估5-10

不同的走查范畴该如何使用交互自查表

整体性基本走查 整体性基本走查 「设计有方」01弹：关于设计自查表的那些事 「设计有方」01弹：关于设计自查表的那些事 「设计有方」01弹：关于设计自查表的那些事 「设计有方」01弹：关于设计自查表的那些事 「设计有方」01弹：关于设计自查表的那些事 「设计有方」01弹：关于设计自查表的那些事

总结:“设计有方”的第一篇干货想到的就是交互自查,可能和我是一个清单控有关,嘿哈～关于清单思维为何如此重要以及它对于我们生活带来的影响都有哪些，推荐大家一本书《清单革命》，它不仅是一种高效的自我检测和提醒，通过它，我们可以不断的补充和完善实际操练时可能会遇到的问题，并及时预防、更新解决策略。它应该是每个设计师的基本功，无论是哪个职位的设计师，都应当具备这样的意识：常自省，把能被自己觉察的问题通过自己先规避，尽可能的交付更加完善的成果。

好的，谢谢你看到这里

热腾腾的交互自查表源文件自取～

1.常规自查表https://pan.baidu.com/s/1NWGnSPuv9KbTo9Ic_jTqRQ  密码:2fo8

2.通用自查表https://pan.baidu.com/s/14B1Ij1X3Cl5edEGr8gDb7w  密码:7hgt

3.工作常用自查表https://pan.baidu.com/s/14YMag51CF6eVDI-C7KG1rQ  密码:mnk3

4.全面整体自查表https://pan.baidu.com/s/1vkpiAePVJvdg5I-XuOqLSw  密码:1n47