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

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

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

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

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

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

　　一、三种加载状态

　　页面加载过程会受到很多方面的影响，比如页面中图片和图标的数量，页面中是否有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上传较大的文件时，系统会第一时间反馈，将任务窗口缩放到屏幕右下角，我们可以通过这个小窗口查看上传进度和上传状态，不要耽误使用页面功能上的其他页面。

　　三、终于

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

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

　　#专栏作家#