03 设计走查表
文/王向红
在新项目的设计过程中，交互往往是非常重要的一环，任何细节的偏差都有可能造成产品体验的缺陷。为规避设计缺陷，设计师在项目过程中可以逐步建立设计走查表。
设计走查表应该从什么维度开始建立？建立的具体内容是什么？
一般我们描述一个产品时，一定是将其放在一个场景中去描述的，用户在场景中和产品产生互动，互相影响。场景可能包含了移动App使用的软件系统、硬件载体、移动环境下的网络状态以及App实现的技术框架、版本兼容、使用时间、地点等内容。这些场景中遇到的问题是我们设计走查表里的核心骨架。如图1所示，App在各种场景下都有交互行为发生，而我们则保证它能够完善地运行，使用户产生信任和安全感。
下面我们将从用户使用移动设备的硬件特性、软件特性、网络特性，以及具体的用户界面内页面状态、页面流程完整性及消息通知，及涉及设计细节、与时间/数字相关性问题来阐述如何建立设计走查表。
图1 设计走查表相关因素
第1节 硬 件 特 性
硬件特性从制定适配原则、账户在设备上的切换、横竖屏显示效果等方面来描述，看看在设计前期我们需要注意哪些问题。
1.制定适配原则
任何产品都会涉及适配问题。首先是制订native适配方案，如显示的文字或图片的适配。
1）数量不变进行同比放大适配，如图2所示，支付宝首页适配的时候就是进行同比放大，一行数量不变。
2）同行数量增多，图片字号大小不变。
3）避免不规则背景。在图片的适配过程中，若图片底部有不规则花纹，如图3所示，因为要切一张大图，则可能会使红包增大，用户打开加载时也会增加流量的耗费。
4）不同设备适配时遮挡。通常，操作时的适配问题容易被忽略。页面显示的内容在唤起键盘时是否有遮挡的问题，怎样解决遮挡问题？如图4所示，在iPhone4/4s上，无论怎样进行适配，由于页面承载的信息过多，下面的支付渠道（用黄色框框住的地方）仍然显示不全。但在iPhone5/5s、iphone6/6plus上则可以通过调整间距使内容显示完整。
2.账户在设备上的切换
（1）同一设备，不同账户切换
切换的新账户若曾经在本设备上登录过，则帮助用户加载展示客户端存储的本地内容，并且标记用户未处理的新信息。在加载的过程中给出明确的加载状态、内容展示。
（2）不同设备，同一账户iOS切换
同一个账户在不同设备上登录时，先确定该账户是否支持多设备同时登录（多点登录）；如只支持单点登录，则在登录B设备时，A设备的账户自动被挤下线（单点登录的安全限制），并提示用户，设备是在何时何地登录的，所以退出了当前的登录状态，图5所示为支付宝账户在其他设备上登录时出现的提示。
若支持多点登录，则注意内容的同步，且内容被操作后的状态也需要同步到各个设备上。特别是同时登录时push通知下发及同步，不能让用户操作重复阅读的工作。
如果设计的产品与优惠、红包等相关，则要判断设备ID，避免用户刷优惠或红包，对产品或活动造成影响。
3.横竖屏显示效果
应用是否支持横竖屏显示先确定，如果不支持则锁定竖向或横向的单一方向。如果支持则要在设计的过程中考虑竖屏和横屏两种模式下的显示效果。图6所示为下厨房的横竖屏切换，做得比较出色。
图6 下厨房的横竖屏切换
第2节 软 件 特 性
软件系统本身是很复杂的，设计师需要掌握一些与设计相关的软件特性来帮助设计，如操作系统特性、制定多平台的设计规范、版本兼容。
1.操作系统特性
在进行新产品规划初期，需要确定新产品覆盖的系统及系统版本号。如iOS系统支持很多手势操作，故iPhone的用户更容易接受手势操作。而Android因为硬件设备的差异比较大，对手势的支持也有较大的差异，因此较为隐藏的手势操作不适合使用。
2.制定多平台的设计规范
系统是不断更新和进步的，一个产品如果是多平台设计，需要制定平台规范。比如统一的表单操作、选项卡、浮层提示、加载、刷新等，这些组控件的统一，可以有效地提高产品优化的效率，降低开发成本，同时能保证用户体验的一致性。图7所示为支付宝制定的标签统一规范。
3.版本兼容
（1）版本覆盖时间
新版本上线后要确认一下版本在多久的时间范围内可以覆盖80%以上的用户。当新版本的某些功能要配合H5活动时，这个时间显得尤为重要。如果版本没有发布，而活动的时间已经迫在眉睫，那这个活动可能将会面临失败。在跨部门合作过程中，可能因为沟通不到位产生这样的结果。因此当有大型活动进行时，需要全力去配合。
（2）更新提示强弱
一般来说，用户可以选择不去更新版本继续使用，但是当App产生较大BUG或存在安全隐患时，可通过不可取消更新进行强制升级。
（3）兼容性展示
新版本的内容是可以展示在旧版本上的。图8所示的支付宝9.0版本，用户不更新就不能使用支付宝2016年新春红包功能，但是用户在低版本客户端的会话页面仍然能收到会话消息提示，点击此消息，可以有效地引导用户更新App。更新后可查看来往的具体会话内容。
图8 内容兼容展示
第3节 网 络 特 性
网络环境对移动应用设计有较大的影响，如快速启动、合理缓存、弱网环境、中断/超时，都与网络状态密不可分。通过设计策略可以避免网络环境的各种状态对用户体验造成的影响。
1.快速启动
应用在启动时需要一个加载时间，为避免用户在等待时间感到枯燥、乏味，可采用以下3种方式。
（1）让用户感知到应用的启动速度比较快
使用一张与应用相同的图片，在用户点击应用时，这张图片就显示出来，用户会认为这个时候应用已启动，虽然用户会在启动页面停留几秒，但是会觉得应用加载速度比较快。
（2）作为一个产品品牌展示区
启动页面展示的是产品的广告语，如支付宝的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。
（3）作为一个广告展示区
启动页面可以是产品代言人或者某个时间段的活动。如手机淘宝就经常会有这样的启动页面。
2.合理缓存
页面合理缓存可以让用户感受到应用的速度更快，不浪费流量。但是缓存不能过量，不能任何页面内容都做缓存，那哪些页面需要做缓存呢？一般应用首页有比较固定的内容时需要做缓存或已有内容的页面不需要全页面加载，可以先展示较旧的内容然后加载出较新的内容。相比每次进入都重新加载，缓存会让用户有更好的体验。
3.弱网环境
（1）弱网环境下加载失败
网络环境不稳定容易导致加载失败，加载时间控制在8秒内（8秒是用户最长的等待时间，用户在等待8秒左右时开始感到不耐烦并且想离开当前页面），并且尽可能地采用有趣的加载来降低用户的等待时间，加载失败后，要给予用户重试的机会，并且告知加载失败的原因。
（2）弱网环境下内容展示不全
弱网环境下可能只能显示部分内容，经常遇到的情况是文字内容显示，而图片无法加载出来，只出现占位图或者是空白图片，图9所示为2016年新春红包出现的占位图。
（3）弱网无网状态下数据传输／设置生效机制
如果网络环境不稳定或者断网，但用户需要将内容发布出去，可以支持用户本地发出去，本地可见。当有网络请求时，再将内容上传到服务端，并且让其他用户可见。这样可以有效提升用户体验，让用户不受网络环境的限制。如美拍可以在断网的环境下缓存视频，当有网络时可以手动将视频上传上去。图10所示为Facebook自动检测网络，有网络后立即上传失败内容的设计。
图10 Facebook上传失败内容
4.中断、超时
在网络中断时，帮助用户保存当前的输入内容或者浏览内容，当重新连接到网络时用户可以继续当前的任务。若超时则给用户提示，让用户停止等待，重新请求网络或退出。
第4节 页 面 状 态
可以用生命周期来描述一个页面的状态。用户进入这个页面，首先会看到页面的初始化；阅读内容的过程中会涉及页面的刷新、加载；当同时访问页面的用户数量过多时，页面内容会被限流，用户会在不同的时间进入页面查看内容；当前页面内容可能过了某个时间节点会失效，用户不能再访问；当一个新用户进入这个页面，可能当前的页面内容为空。页面的这些状态需要设计师提前考虑并提出解决方案。
1.页面初始化
启动应用进入首页时，可以在启动过程中预加载首页内容，让用户快速进入且有内容可预览。页面初始化需要配合加载策略进行。
2.页面刷新
通过刷新可以更新当前页面的数据。一般情况下采用用户手动下拉刷新，下拉刷新不需要对整体页面进行刷新，只需要拉取最新的状态，显示出来即可。但是如果当前页面涉及一些数字的提醒或通知，则不需要刷新也可以展示给用户，当用户点击查看时触发刷新，则将页面内容更新到最新的状态。
3.页面加载
（1）分步加载
分步加载是全页面加载的一种方式，为了尽快地显示页面内容，可先加载文字内容，再加载图片等内容。让用户在网速不够快的情况下可以尽快预览到内容。这种加载方式通常应用在用户首次进入页面时。
（2）懒加载
懒加载也称为延迟加载，即在需要的时候才加载，这种加载效率低，但占用内存小。一般在页面浏览过程中加载新内容时采用这种方式进行加载。
（3）智能加载
第一种策略是在产品中增加网络判断的机制，如果在弱网环境下，提前压缩图片并显示小图片，使其能尽量展示预览出的内容，点击小图，可查看大图。最好是可以让用户点击未加载的内容后继续加载，不需要重新刷新页面（只针对客户端页面）。第二种策略是降低图片视频质量，点击后可以加载高清图片或者点击播放视频选择高清模式。而在网络环境不佳的情况下，则默认帮助用户降低质量，减少流量的耗损。
4.页面内容被限流
一般产品页面是不会遇到限流的问题的，只有在活动页面可能因为访问量太大而遇到限流。如在支付宝的春晚发红包过程中，预测到活动中人流量会比较大，我们提前设计了限流页面，让用户有较好的体验。
5.页面内容为空
一般与用户相关的页面可能为空，如我的动态、评论等。这些页面为空时不能不显示，但可以在显示上用调皮一点的文案避免空页面显得过于枯燥。
6.页面内容失效
一般固定入口不会有页面失效的状态。非固定入口的页面失效后，可以将入口下掉或者在用户进入后重新刷新出可用内容。页面内也需要考虑信息的时效性、延时、过期等问题。
第5节 页面流程完整性
除了用抽象的流程图来确保流程的完整性，设计师还可以通过快速回到首页/主要页面、让用户始终知道自己在哪儿、返回到原来的浏览位置、任务完成后跳转这几项设计原则来确保完整性上的体验。
（1）快速回到首页/主要页面
用户不管在应用的什么地方，都可以快速返回到首页/主要页面。这要求我们在搭建整体信息架构的时候，结构足够扁平。并且所有的页面流程都必须形成一个有效的闭环。
（2）让用户始终知道自己在哪儿
通过页面标题来让用户确认当前的位置。
通过页面之间跳转的转场动效让用户确认当前的位置。
用户可以沿原路返回。
（3）返回到原来的浏览位置
明确任何一个可点击的去向，且去向是可返回的。返回问题连带定位，从哪里去返回到哪里。特殊路径需要定制，可能会出现连跳几个页面的情况，在验收过程中需要重点注意。
（4）任务完成后跳转
任务成功后，页面跳转后可返回到来源页面。
任务失败后，需提示当前状态，并引导用户如何查看最新的状态。在有新结果时，通知用户。
第6节 消 息 通 知
根据消息的强弱进行消息通知的设计。
强消息通知，可以使用客户端推送，用户可以在手机屏幕或者手机的通知栏预览到内容。用户可以通过通知的新消息直达到详情页面或通知列表。用户未读的信息可以标记出未读数字，如图11中的消息push通知。
弱消息通知，可以在用户打开应用后，在内容层上统一提示，告诉共有××条新消息。点击后可查看所有消息内容，如图12中的页面消息通知。
第7节 细 节
设计细节有非常多的点，比较通用的细节有：点击状态、发送状态、输入、反馈、音效。设计师可以根据自己的需求来制定细节的走查。
1.点击状态
按钮点击状态包括开始、结束、不可点、失效、已领完、已过期等。
2.发送状态
发送状态分两种：一是发送后需要较长时间返回结果的，此时发送后直接到结果页面，结果页面上显示当前进度和最终结果及其时间；二是发送后较短时间就返回结果的，此时发送后到过渡页面，有几秒的等待时间，然后跳转到最终结果页面。
3.输入
（1）减少输入
在移动端输入的成本比较高，设计师可以通过表单、选项卡、默认填入值来减少输入。在社交会话中则可以通过更多的语音、图片、视频来减少输入，让用户沟通得更轻松。
（2）输入限制
在内容不确定多寡的输入框内，可以采用暗文或数字的方式来帮助用户确认当前的输入内容有没有超过限制。输入的内容一定要做长度限制，因为不只是在输入过程中会遇到显示的问题，在发布后也会有显示问题。
（3）中断时保存内容
移动环境不稳定，经常会出现中断退出的情况。当遇到异常情况时，可以保存用户在中断前输入的内容，待环境稳定后用户可以继续操作。
4.反馈
（1）即时反馈
当用户操作后，若有需要反馈的信息，在操作后立刻给出，反馈的区域不能距用户的操作区域太远，否则就会被忽略。如果是非阻塞式的反馈，那反馈的方式要轻，不要因反馈而干扰用户当前的任务，对用户造成困扰。
（2）反馈效果
所有的点击都要有明确的反馈状态，点击后会出现一系列的状态变化。如有的按钮只可以被点击一次，用户点击后首先按钮状态会改变，其次会产生一个与点击相关的操作结果反馈。
5.音效
应用音效需要考虑其大小，配合操作使用时是否有延迟。特别需要考虑用户当前的使用场景出现声音是否合适。
第8节 与时间、数字相关性问题
1.时间
（1）制定时间规范
根据产品设计需求，在前期根据场景规划时间显示规则，如格式是“2016-3-16”还是“2016/03/16”等。用在列表页面、详情页面还是会话页面都要提前规范好。
（2）不同场景下时间格式的选择
用户对于时间的感知根据场景的不同会有很大的差异。从我们的对话中就可以感受到，平时问“什么时候开周会”，会回答“周三”。但是如果问“什么时候提交报告”，会回答“3月20日”。从对话的场景中可以看出我们对时间维度的区分。因此在对时间进行设计时，一定是根据使用场景来进行时间的设计。图13所示为时间规则。
图13 时间规则
（3）有效／失效时间
消息、卡券、红包等都会有时效性，有的时效对用户来说是有生效期的，与生效期相对的是失效期。内容失效后需要处理，可能由清除或者其他功能来支持。有的内容是没有生效期的，但是它会变成历史内容，历史内容与现有的内容需要进行一定的区分。
2.数量
规范数量规则时，需考虑以下问题：
是否为零，为零时应该显示还是隐藏？
刷新是否影响数字变化？
数字是否会减少，当数字减少为零时是否有反馈或界面变化？
总结
本章总结的只是部分内容，在设计过程中还有很多的细节需要设计师考虑，并纳入设计走查表中。设计走查表不仅能帮助设计师本身，还可以帮助与设计师一起工作的项目伙伴，在项目进行前期，交互设计师在参与需求策划讨论时就可以与项目组的同事一起阅读设计走查表，并制定项目在执行层面的规范，可以保证多项目并行时调用相同组件的一致性；在项目结束后，设计走查表可以有效地进行设计验收。
图14～图16是3个案例，表内的内容不仅可以帮助开发梳理各种状态，还可以在后期给大家提供验收的依据，不会遗漏任何细节和状态。
