可视性原则是Jakob Nielsen进行用户界面设计的十个启发式方法之一。通过传达当前系统的状态，让用户感觉到她对这个系统有控制权，这种控制权会帮助你建立用户对这个系统的信任感。

你可以使用这四个可视化的反馈方法去传达系统的状态：

1、显示用户当前位置或进度的可视化反馈

我在哪里

没有人喜欢迷失，但这在现实和网络世界中都会发生 。让用户知道到它们在app中的位置对于创造良好的导航体验来说是必不可少的。app和网站都需要强调当前选择的导航项来帮助用户了解它们当前的位置。

谷歌底部导航样式-移动UX设计by Aurélien Salomon

完成这个需要多少步

知道完成某个操作需要多少步骤会帮助用户评估完成该过程需要的时间。

调查知识检查应用by SELECTO

2、确认用户操作的可视化反馈

为所有的交互事件提供即时反馈是至关重要的。即时的可视化反馈会确认应用程序已经接收到了用户的操作，增强直接操控感，而且可以防止用户犯错误（例如点击同一按钮两次）。

在其基本形式中，显示系统确实捕捉到了轻触和点击的行为是很重要的。

按钮悬浮和激活状态by Ali Ali 

但在某些例子中，改变按钮本身的状态也同样重要。在这些例子中，视觉反馈同样也会传达交互的结果，并且使结果可见和易于理解。下面是一些这样的例子：

• 点击“ike”按钮

传播爱，而不是病毒 by Charles Patterson 

• 打开或关闭某物。按钮颜色的改变给予用户关于对象当前状态的信号。

XLIV 开关 by Oleg Frolov 

• 为项目添加标签

书签交互[SVG 动效] by Oleg Frolov

• 添加商品进购物车。在这个例子中，视觉反馈会保证商品已经被添加进购物车中。

订购咖啡动效（星巴克） by   Nhat M. Tran 

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

显示系统现在正忙着做某事

当系统加载时间超过几秒钟时，系统需要给予用户即时的反馈。根据等待时间的长短，建议使用无限加载指示器（通常是用于那些加载时间不超过10秒的操作），

无限加载循环 by renatorena 

或者是进度条（用于那些超过10秒的操作）。

打气加载动效 by Allen Zhang 

这些指示器向用户传达了系统正在工作的信息，减少了不确定性。

对于移动应用程序来说，也可以在初始化加载的期间使用动画闪屏。一个优秀的闪屏设计会给初次使用该应用的用户留下良好的印象，并将他们的注意力从等待的事实中转移开。

logo闪屏 by Gleb Kuznetsov✈ 

内容正在加载

当需要花费一些时间去加载内容的时候，建议使用特殊类型的容器——加载占位图。这种临时内容容器被用来缓和等待的时间，一旦数据可用，就应该立即填充真实数据。

骨架加载器 by Ginny Wood 

这种容器同样适用于桌面和移动产品。

骨架加载动效 by Shane Doyle

4、触发事件

通知/指示器

有效提示的目的是将用户的注意力引导至发生的新事件上。建议在通知中使用微动效，因为动效会吸引用户的注意力——人类的眼睛天生就能很快捕捉到移动的物体。

通知动效 by Aleksei Kipin 

请求用户操作

在很多情况下，系统可能会为用户操作请求数据。例如，当用户使用无效数据填写表格时。例如的例如，用户创建了一个复杂性太低的密码，提供了一个无效的邮箱地址等等。使用合适的视觉反馈提前告知用户问题所在总是不会错的。

内联邮件验证 by Derek Reynolds 

更多的控制意味着更好的用户体验

视觉反馈在更大的设计方案中可能会被轻易地忽略掉，但它实际上将整个用户体验结合在了一起。当人们在与用户界面交互时，它们会期望更多的可预测性和控制权，这正是UI设计师应该提供视觉反馈的原因。

Powered by Froala Editor