网站内容管理系统后台 设计( 什么场景下适合用数字百分比加载,你有没有考虑过呢?)

优采云 发布时间: 2022-01-25 13:18

  网站内容管理系统后台 设计(

什么场景下适合用数字百分比加载,你有没有考虑过呢?)

  

  加载是对用户的一种反馈,是用户触发和系统反应的过程。一个产品可能会涉及到各种形式的加载场景,比如入口加载、页面之间的过渡加载、本地函数的加载。

  面对如此多的加载场景,显然不适合使用相同的加载方式,因此需要针对不同的加载场景“对症下药”,最大限度地发挥体验。

  例如,常见的加载组件包括进度条和数字百分比。那么,进度条在什么场景下适合加载,哪个场景下适合数值百分比加载呢?你考虑过吗?

  一、三种加载状态

  页面加载过程会受到很多方面的影响,比如页面中图片和图标的数量,页面中是否有3D场景或模型,是列表设计还是卡片设计……

  1. 一一加载

  对于可以同时执行多个加载任务的产品,更适合应用一个一个加载,可以减少用户等待的感知。一个一个加载任务列表的过程给了用户一种秩序感。

  

  2. 已满载

  进入一个网站或者App,很多页面会一次性展示所有的内容,这个页面的全加载形式对用户来说比较熟悉。

  此外,页面的全加载形式将使用户的操作和浏览过程更加顺畅。

  

  3. 延迟加载

  懒加载是用户主动触发的操作,根据操作系统反馈相应的结果。延迟加载有三种形式。

  1)无限滚动

  当检测到用户即将到达列表或页面末尾时,以无限滚动为触发,引导用户获取更多内容。

  

  2)加载更多

  通过单击“加载更多”按钮获取更多内容,这是一个由用户主导的过程,无论是否单击。

  

  3)分页加载

  分页是在不同页面上的延迟加载。这个过程也是用户主动选择的,但与“加载更多”按钮不同的是,分页是页面之间的切换,用户可以清楚的看到具体的页数。

  

  二、五种加载模式

  加载方式需要根据场景来考虑。比如一个1秒可以加载的页面和一个5秒加载的页面,我们需要考虑使用不同的加载方式设计,做到差异化设计。

  这里我做了一个表格,整合了页面加载所需的时间和对应的加载方式。

  

  1. 0.1 秒内

  如果加载时间小于0.1秒,用户无需等待加载过程,内容可以立即呈现,有一种“还没开始就结束了”的感觉。

  0.1秒内加载不需要给页面添加任何加载状态,但是一个场景需要特别注意。如果用户刚刚完成了一系列复杂的操作,点击提交后,可以考虑为用户提供撤销机制。

  

  使用 Google Mail 发送邮件时,邮件发送成功后会弹出取消提示,允许用户在 5 秒内取消刚刚发送成功的邮件。

  2. 0.1-1 秒

  大多数产品的页面加载速度都在这个范围内,用户几乎不会注意到加载延迟。所以我们不需要添加额外的加载*敏*感*词*来填充这个加载时间,否则可能会产生多余的反效果。

  试想一下,如果在每个页面的加载过程中加入加载动作效果,不仅会分散用户的注意力,还会不断的出现在屏幕上,让人感觉很焦急。

  3. 1-2 秒

  如果加载时间超过 1 秒,用户会感知到加载过程。这个时候,我们可以考虑适当的加入加载*敏*感*词*,缓解用户等待的焦虑。

  微加载:1-2秒的加载时间,对用户来说不算太长也不算太短。轻量级的*敏*感*词*加载形式是首选,为用户提供一种进步感。

  

  在下载内容的过程中,这个轻量级的环形*敏*感*词*用来展示加载进度,简洁明了,可以作为组件复用,可以大大提高工作效率。

  骨架屏:用于整页加载,这种加载形式在产品中使用越来越频繁。骨架屏让用户在等待加载过程的同时,先了解页面的结构。

  

  在骨架屏的基础上,可以“可选”一些漂亮的效果来增加页面加载时的视觉体验:

  弱光效果:在骨架屏的基础上加入弱光效果,光感的加入可以转移用户的等待注意力,有效降低等待感。

  

  脉冲效果:效果类似于微光效果,只是脉冲效果用于单个任务或卡片列表。

  

  4. 2-10 秒

  这个加载时间对于用户来说已经很长了。对于设计师来说,需要合理有效地设计这个加载时间,提升用户体验。

  计时提示:在开发中,很难以分钟和秒为单位准确估计加载时间。

  

  如果在加载过程中,我们想给用户一个期望的时间值,告诉用户整个加载过程需要多长时间,我们可以使用“这可能需要几秒钟”的提示方法,这样不仅可以显示加载所需的时间,它也可以给用户一个预期的时间。

  进度条:最常用的加载形式,在加载过程中使用ease-in*敏*感*词*会让整个过程看起来在加速。

  

  分步提示:如果加载过程太长,您可以将整个过程分成几个不同的步骤,以帮助用户估计完成操作需要多长时间。如果系统正在处理多个项目,则逐步提示旨在让用户清楚地了解已完成的工作。

  

  5. 超过 10 秒

  百分比加载:虽然使用百分比加载不能告诉用户需要多长时间才能完成加载,但它可以提供一种过程感,让用户自己估计加载时间。圆形进度条+百分比是最常见的加载形式。

  需要注意的是,不要让进度条卡在 99% 的加载,这会让用户感到焦虑。

  

  后台加载:如果一个任务需要加载很长时间,我们不能让用户看着进度条等待,别的什么都做不了。在这种情况下,我们可以考虑将任务放在后台加载。

  

  在Google Drive上传较大的文件时,系统会第一时间反馈,将任务窗口缩放到屏幕右下角,我们可以通过这个小窗口查看上传进度和上传状态,不要耽误使用页面功能上的其他页面。

  三、终于

  将加载细分为这五种模式,可以涵盖很多使用场景。这种对症下药,既能保证用户体验,又能丰富产品,是锦上添花。

  在正确的时间和正确的情况下做正确的事情永远不会被夸大,设计也是如此。

  #专栏作家#

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线