系统状态的可见性是Jakob Nielsen用于用户界面设计的十种启发式方法之一。通过传达系统的当前状态，你可以让用户感觉到自己对系统的控制，这种控制感可以帮助您建立信任。

以下是四种你可以用来传达系统状态的视觉反馈方法：

 

1. 显示用户位置或进度的视觉反馈

我在那里？

没有人喜欢迷失，但它同时也发生在现实世界和数字世界中。让用户意识到他们在应用程序中的位置对于创建良好的导航体验至关重要。应用程序和网站都应突出显示当前选择的导航选项，以帮助用户了解其当前位置。

 

Google底部栏导航模式—AurélienSalomon的移动用户体验设计

完成这项工作需要多少个步骤？

了解完成某项操作需要多少步骤，将有助于用户估计完成该程序所需的时间。

 

SELECTO的调查知识检查应用程序

2.确认用户操作的视觉反馈

为所有交互事件提供即时反馈是至关重要的。即时的视觉反馈将确认该应用程序已收到用户的操作，强化了直接操作的感觉，并防止了用户出错（例如，敲击同一按钮两次）。

在它的基本形式中，重要的是要显示系统实际上捕捉到了点击。

阿里·阿里（Ali Ali）的按钮悬浮和活动状态

 

但是在某些情况下，更改按钮本身的状态也很重要。在这种情况下，视觉反馈也将沟通作用的结果，使其既可见又可理解。以下是其中一些例子：

单击“like”按钮

 

传播爱

打开/关闭某物，按钮颜色的变化为用户提供了有关对象当前状态的信号。

 

切换台XLIV by Oleg Frolov

为项目添加书签

 

书签互动，作者：Oleg Frolov

将对象添加到购物车，在这种情况下，视觉反馈将证明该商品已添加到购物车中

 

Nhat M. Tran的咖啡订购动画（星巴克）

3.显示系统状态的视觉反馈

显示系统忙于做某事

当系统需要几秒钟的时间才能加载时，它应立即为用户提供反馈。根据等待时间，建议使用两个无限加载指示符（通常用于少于10秒的操作）：

 

renatorena的无限加载循环

或进度条（用于10秒钟以上的操作）：

 

张扬的加载动画

这些加载动画还通过告诉您系统正常运行来帮助减轻用户的焦虑。

特别是对于移动应用程序，您在首次启动该应用程序时也可以使用启动屏幕。通过充分利用它，它将给初次使用的用户留下深刻的印象，并改变他们对“等待应用程序启动”的兴趣。

 

Gleb Kuznetsov✈的徽标初始屏幕

 

正在载入内容

如果加载内容需要很长时间，请尝试使用一种称为“ Skelton Screen”的特殊类型的块状容器。

此容器在加载过程中临时显示，用于减少延迟，是一种在数据已加载并可用后立即替换实际数据的方法。让我们参考下面的示例示例。

 

Ginny Wood的骨架装载机

该容器对于桌面和移动产品同样适用。

 

 

Shane Doyle的骨骼加载动画

 

4.触发事件

通知/指示

有效通知的目的是使用户注意新事件的事实。建议使用微妙的动画进行通知，因为动画效果自然会吸引用户的注意力-人眼天生就会关注移动的对象。

 

Aleksei Kipin的通知

用户操作请求

在许多情况下，系统可能会请求用户采取行动的数据。例如，当用户使用无效数据填写表单时。再如，用户创建了一个密码，它的复杂性并不好，提供了一个无效的电子邮件地址等等。使用适当的视觉反馈，提前告诉用户问题总是更好的。

 

德里克·雷诺兹（Derek Reynolds）的嵌入式电子邮件验证

更多控制权可带来更好的用户体验

在较大的设计方案中，视觉反馈很容易被忽视，但实际上它将整个体验结合在一起。当人们与UI交互时，他们期望可预测性和可控制性，这正是UI设计人员应提供视觉反馈的原因。

原作者：Jakob Nielsen