设计模式丨加载提示:如何让用户看到任务执行进度?

2021-12-28    seo达人



What 是什么

简介:「加载提示」是用户在提交操作之后,程序响应结果前显示的动画和指示。

加载提示通常是仪表或温度计式的动画,用于显示某项耗时较长的任务的关键数据。例如,上传大型文件或图像,或者在移动设备上加载移动应用程序时的动画,表示当前的状态以及完成任务剩余的时间。

例子: 使用 Ant Design 组件-加载中 搭建的kitchen页面加载时的效果

 

Why 为什么

「加载提示」可以让用户通过一个指示器看到系统正在积极进行响应,让用户感受到当下的交互反馈是实时的,使用户有耐心保持在等待的状态,不离开当前页面。特别是当一个页面其他部分都不能操作的时候,更应该加上加载提示,这样用户在等待的时候会更有耐心。

 

When 什么时候使用

当一个耗时的操作会打断用户继续操作,或需要在背后运行,耗时超过一秒时就可以应用此模式。

原因为:

  • 不到十分之一秒时,用户会感觉他们在与界面进行“实时”交互,软件的响应让用户感觉是即时的,没有感觉到延迟。
  • 在十分之一秒到一秒之间,用户会感受到略有延迟,但他们会等待并立即继续。
  • 超过一秒时,用户可能会认为他的操作对任务推进不起作用,导致其可能放弃当前任务。此时若使用使用加载指示,用户就能明确知道系统正在工作,他可以选择继续等待或者在此期间进行其他活动。

使用条件

  • 当前的操作系统需要一秒以上时间处理
  • 为了让用户明确知道当前系统正在运行
  • 想让用户留在当前页面等待

 

How 如何使用

在页面中放置一个文字或者图形的指示器,指示当前已经完成的进度。告诉用户:

  • 当前正在做什么;
  • 已经完成了多少比例;
  • 还需要多少时间才能完成;
  • 如何停止这项任务。

有时加载提示的时间不一定十分精准,但是只需要保证出错时能很快回到准确的时间就可以了。当一个用户界面无法推断耗费时长时,可以使用加载提示告诉用户当前系统的处理状态。

 

Example 案例

案例一:Apple 音乐 APP启动页面

用户需求:选择在线音乐听歌

在用户进入APP时使用了加载提示动画,通常应用于轻微等待的场景下。目的是让用户知道“系统正在工作,请稍等”。

undefined

 

案例二:语雀和钉钉邮箱上传附件

用户需求:上传文件

在上传大文件时,等待的时间可能比较久,此时的进度条可以让用户知道当前的上传进度,用户能够预估大概还需要多久才能传完。

undefined

undefined

 

案例三:安卓端Google Play 商店

用户需求:下载软件

Google Play商店中将软件下载到用户的安卓设备上时会显示加载指示条,将文件大小,进度提示等信息都显示在上面,可以让用户知道需要多长时间,并可以等待、取消或做其他事情,稍后再回来。

undefined

 

案例四:Adobe Creative Cloud desktop manager

用户需求:下载软件

Adobe 在其macOS桌面的 Creative Cloud 应用程序中使用了加载指示。 在页面中放入了进度条,让用户知道安装进度。

undefined

 


原文地址:Ant_Design(站酷)

作者: 六六

转载请注明:学UI网》设计模式丨加载提示:如何让用户看到任务执行进度?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档