那些熟悉却说不出的设计法则-系统可见性原理

系统可见性原理，表达的是系统应该让用户知道发生了什么，并且在适当的时间内做出适当的反馈。

你是否遇到过，在APP中，点击某个按钮，页面却没有发生任何变化，而产生疑惑，并且一直点击按钮，直到APP闪退。

你是否遇到过，在APP中，下拉列表进行刷新，但是列表却没有任何变化，而产生疑惑：是无网络没有更新？还是更新了，只是没有新的数据？还是直接下拉刷新失败？

你是否遇到过，在APP中，进行某个操作，页面却一直在加载，并且等待数十秒也没有结果，期间还不能进行其他操作？

对于设计师来说，要解决以上问题，系统可见性原理或许会有帮助。

什么是系统可见性原理

系统可见性原理，指的是系统应当将自身正在运行的状态，实时反馈给用户，让用户了解系统的运作状态。

系统可见性原理被广泛的应用在工业制造领域和互联网领域，例如汽车控制台的复杂按钮，操作后会有颜色、机械动作、声音等反馈；便携式蓝牙音箱使用时，会有声音、机械振动反馈；使用APP时，会有声音、振动、颜色变化、进度条、弹窗等反馈。优秀的软件/硬件产品都遵循着良好的系统可见性原理来满足人机交互。

遵循良好的系统可见性原理，能够提升用户的操作流畅度，增加用户的控制感，降低用户的焦虑感、挫败感，提升产品的可用性、易用性，从而提升产品的用户体验；另一方面，遵循良好的系统可见性原理，能最大化避免系统因用户误操作而执行重复命令、无效命令、超负荷命令等问题。

系统可见性原理解析

系统可见性原理，也许在相关从业者看来，已经是非常基础的认知了，并且在自己的工作中熟练运用。但是，运用的深度不同，给产品带来的用户体验也是完全不一样的。根据对系统可见性原理的分析，并结合实际案例，我将系统可见性原理解析为以下六项原则。

1、当需要长时间等待进度时，请允许用户进行其他操作

之前的文章中提到过一个案例：当用户选择一个要发布的视频，点击发布按钮，页面底部会弹出一个发布进度条，页面背景有蒙层，如左图所示。在这个页面中，APP做到了系统可见性原理，但是却产生了新的问题，用户无法在APP内进行其他操作，只能等待视频上传完成。

如右图示，为优化后的设计方案，将上传进度放置在状态栏，不阻碍用户继续其他操作，且让用户能简单的感知到上传任务在进行。

2、当长时间等待无结果时，需提供结束任务的功能

我们会遇到这样的情况，当网络环境比较差时，提交某个表单或者支付某笔订单，会在“提交中”“支付中”停留许久而没有结果。虽然系统为用户呈现了进度状态，但是并没有考虑到用户长时间的等待而产生的焦虑、烦躁。

因此，在“提交中”或者“支付中”的状态时，需要为用户提供快速结束任务的功能。例如“提交中”的弹窗增加关闭按钮，让用户长时间等待无结果时，可以关闭弹窗，重新提交；例如“支付中”的toast超过6秒，还未支付成功，就应当自动结束支付任务，并且反馈支付异常、请检查后重试的结果。

当设计师正在拼命的用PS画图时，由于某项操作太吃内存，导致PS直接无响应，无响应十几秒后，电脑就会非常“温馨的”、“友好的”弹出一个弹窗，让用户选择继续等待或者结束进程（^_^）（^_^）（^_^）。

3、错误应当尽量及时告知，而不是完成全部任务后再统一告知

相信填写过长表单的用户都会有这样的经历，耗时十几分钟填完的表单，在提交后，系统一次性的告知有多条错误，请修改后重新提交。统一验证信息正确性对系统来说，是省事、讨巧的事，但是却给用户带来了糟糕的体验，虽然做到了系统可见性，但是却损害了用户体验。

注重体验的做法，应当是在某一项输入框输完后，就立即验证信息是否正确，错误的信息需及时给出反馈结果，这样设计能保证用户完成表单后，100%成功提交表单。

4、为组件/控件提供点击态，明确点击行为是否生效

有的APP没有为组件/控件提供点击态，例如无点击态的卡片、按钮、文字链、列表、标签、下拉菜单、选择器等。这些组件在点击后，页面会发生诸如跳转、弹出、展开、收起、变色等变化，这种变化确实验证了点击行为生效了。

但是如果是因为网络、系统出错而导致点击后，程序无法响应呢？这时候，就无法判断是否点击成功了，用户在这种异常场景下，很可能会多次点击组件/控件，从而导致用户体验受挫，甚至是增加程序运行负担。因此为组件/控件增加点击态，可以最大化的避免此类问题发生。

5、条件满足时，尽量为任务添加完成比信息

当系统可以判断某个任务进度的完成比时，应当在进度中显示完成比信息，完成比信息可以减轻用户因未知性的任务量或者等待时间而产生的焦虑情绪，帮助用户明确任务进度，明确任务时间，最大化避免用户直接放弃任务。

微视APP，在下载视频素材时，会根据下载进度显示完成比，向用户明确任务进度，降低用户等待的焦虑情绪，甚至是让用户从心理上感知下载进度的顺畅和迅速。

6、当页面产生变化时，应明确告知用户

用户在使用网站或者APP时，停留的页面，如果发生变化，应该及时的告知用户。例如当网络连接失败，导致用户浏览的某页面内容为历史数据时，如果没有断网提示或者更新时间提示，用户是无法感知的。因此应该明确的告知用户网络出错，无法更新最新信息。

例如用户进入微信APP时，如果网络出错无法加载最新信息，微信采用条幅式通知的方式告知用户网络出错。

当用户使用资讯类产品时，通常会通过下拉刷新的方式更新资讯内容，用户在刷新后，通常会有3种场景：有新内容产生、无新内容产生、网络出错刷新失败。针对于这3种状态，系统应该给与明确的更新提示，否则当“无新内容产生”或者“网络出错刷新失败”两种场景发生时，用户是无法感知是否刷新成功的。

例如微博APP或者腾讯新闻APP，在用户下拉刷新内容时，会在导航栏底部告知用户当前更新多少条信息。

总结：遵循良好的系统可见性原理，能够提升用户的操作流畅度，增加用户的控制感，降低用户的焦虑感、挫败感，提升产品的可用性、易用性，从而提升产品的用户体验；另一方面，遵循良好的系统可见性原理，能最大化避免系统因用户误操作而执行重复命令、无效命令、超负荷命令等问题。

重要说明：设计法则并非绝对正确，需在理解的基础上适当的运用，切勿拘泥于设计法则。