在UI中传达系统可见性的4种方法

在UI中传达系统可见性的4种方法系统状态的可见性是 Jakob Nielsen 用于用户界面设计的十种启发式方法之一 通过传达系统的当前状态 你可以让用户感觉到自己控制着系统 这种控制感可以帮助您建立信任 你可以使用以下四种视觉反馈方法来传达系统状态 1

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

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

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

在UI中传达系统可见性的4种方法

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



欢迎大家来到IT世界,在知识的湖畔探索吧!

完成此步骤需要多少步骤

知道完成某个操作需要多少步骤,将有助于用户估计完成该过程所需的时间。

在UI中传达系统可见性的4种方法

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

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

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

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

在UI中传达系统可见性的4种方法

Ali Ali 的按钮悬停和激活状态

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

  • 单击“喜欢”按钮。
在UI中传达系统可见性的4种方法

  • 打开/关闭某物,按钮颜色的变化为用户提供了有关对象当前状态的信号。
在UI中传达系统可见性的4种方法

切换台XLIV by Oleg Frolov

  • 为项目添加书签。
在UI中传达系统可见性的4种方法

书签互动[SVG动画],作者:Oleg Frolov

  • 将对象添加到购物车,在这种情况下,视觉反馈将证明该商品已添加到购物车中。
在UI中传达系统可见性的4种方法

Nhat M. Tran的咖啡订购动画(星巴克)

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

显示系统忙于做某事

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

在UI中传达系统可见性的4种方法

renatorena的无限加载循环

或进度条(用于10秒钟以上的操作):

在UI中传达系统可见性的4种方法

张扬的加载动画

这些指标表明系统正在运行,并降低了不确定性水平。

对于移动应用程序,还可以在初始加载期间使用动画启动屏幕。一个设计良好的启动画面会给初次使用者留下积极的印象,并将他们的注意力从等待中转移出来。

在UI中传达系统可见性的4种方法

GlebKuznetsov✈的徽标闪屏

内容正在加载

当加载内容需要一些时间时,建议使用一种特殊类型的容器—框架屏幕。这个临时内容容器用于减少等待时间,一旦数据可用,就应该用实际数据填充它。

在UI中传达系统可见性的4种方法

Ginny Wood的骨架装载机

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

在UI中传达系统可见性的4种方法

Shane Doyle的骨骼加载动画

4.触发事件

通知/指示

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

在UI中传达系统可见性的4种方法

Aleksei Kipin的通知

用户操作请求

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

在UI中传达系统可见性的4种方法

内联电子邮件验证(作者:Derek Reynolds)

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

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

文中所用图片来自网络,如侵权,请联系删除

想要了解汽车更多内容,就留言联系我们吧!

来源:Nick Babich:4 Ways To Communicate the Visibility of System Status in UI

– 服务内容 –

在UI中传达系统可见性的4种方法

在UI中传达系统可见性的4种方法

在UI中传达系统可见性的4种方法

在UI中传达系统可见性的4种方法

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/105046.html

(0)
上一篇 1小时前
下一篇 1小时前

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信