设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 设计信息 > 不仅仅是进度条,浅析四种常用的进度指示器样式

不仅仅是进度条,浅析四种常用的进度指示器样式

mooncakest
2022-11-04
4714

“尽量不让用户等待”是交互设计的基本规则之一。

但事实是我们拼尽全力,有时仍无法对用户的请求做出即时响应。这时让用户耐心等待至关重要,而进度指示器就能将问题迎刃而解。

对于任何耗时超过一秒的操作,都应该使用进度指示器,这样能代表页面本身不是卡死或者未响应。

在本文中,小编将介绍 4 种常用的进度指示器样式,以及应该何时使用它们。

1.加载微调器

加载微调器是最基本的加载指示器类型。

只是通过屏幕上的动画让用户明白系统正在运行。

其通常使用于等待时间相对较短的页面(2-10 秒)的场景中。10 秒大约是让用户的注意力集中在特定位置上的极限,超过了建议使用线性进度条。

加载微调器

与微调器一起向用户提供额外的上下文信息。添加一条解释用户等待原因的消息。例如,您可能会显示有关系统现在正在做什么的消息。它将减少用户的不确定性。

加载带有上下文信息的微调器。

加载微调器加载网页时尽量不要使用加载微调器,尤其是在等待需要十秒或更长时间的情况下。如果用户看到加载微调器超过 10 秒没有附加信息,他们可能会放弃您的网站。

使用创意加载指示器。当应用程序在等待时为用户提供令人着迷的东西时,他们将不太关注等待本身。比如猫动画。

常用的进度指示器

2.线性进度条

线性进度条是一个确定的进度指示器,从 0% 填充到 100% 并且从不减少值。

线性进度条的使用场景:

对于需要 10 秒或更长时间,建议使用线性进度条。

线性进度条

如果一个操作需要几分钟(或几小时),那么应该给用户一个预计完成时间,以便他们可以合理安排时间。大多数时候,这个时间不太精确,总之一个近似的数值就行。

线性进度条2Apple 在软件更新对话框中显示剩余时间。告诉用户到目前为止已经做了什么。例如,如果可以将整体进度分解为一系列步骤,并告诉用户已经完成了多少步骤。


尽量避免进度条静止,任何意外引起的停止都会影响用户满意度。最糟糕的情况是进度条上升到 99% 并停滞。当用户注意到这种行为时,他们可能会认为应用程序有问题。

3.进度环

进度环是一种进度指示器,也称为环形进度条,分为不确定的或确定的。不确定指示器显示未指定的等待时间(即加载微调器),而确定指示器显示操作将花费多长时间(即进度条)。

进度环何时使用:

进度环可用于短等待时间和长等待时间。在第一种情况下,进度环不会有具体的进度,而在第二种情况下,可以看到具体的进度。

进度环1

在具体制作中也可以将两种进度环同时使用。从不确定进度环开始显示,达到剩余具体的时间后,再将其转换为确定的进度环。

切记不要将进度环和线性进度条混合使用。在加载中将进度环突然转换为进度条可能会降低用户体验的满意程度。

进度环2

进度环通常应顺时针方向移动。对于用户来说,顺时针方向比逆时针方向看起来更自然。

进度环的使用场景比线性进度条多,可以集成到按钮或任何其他可操作交互的元素中。

4.骨架屏

骨架屏幕是页面的一个框架类版本,仅仅是包含逐步加载信息的内容容器。与其他类型进度指示器将用户注意力集中在等待时间不同,骨架屏幕可以提前显示出内容的大体框架和预期。

YouTube 使用的骨架屏幕。如下图所示:

YouTube 使用的骨架屏幕骨架屏幕最适合较短的等待时间。建议将其作为网速较好网站的进度指标解决方案,因为该网页应在 3 秒内加载,超过3秒将会引起用户的烦躁感,增加跳出率。

提示:

不要一次加载所有内容。在显示内容占位符后,无需一次性用实际内容填充全部框架。加载更多内容后,再逐步填充所有的框架。

如何创建进度指示器?

下面是一个关于如何在摹客RP 中创建进度指示器的快速流程。

简化操作步骤:

1、打开摹客官网产品选择摹客RP

2、创建项目并进入

3、在项目页面的左下角组件中有线性进度条和进度环,也可以根据自己需要用别的组件一起搭配

4、添加相关的交互

5、完成并发布,可以在预览中观察是否符合设计目的,不符合可以回到项目继续修改直至完成

以上就是本文的全部内容,感兴趣小伙伴快去打开软件动手试试吧!

上一篇
初级产品经理到高级产品经理,4条经验换这1字差距

mooncakest   11/10

抠图不求人!5个一键抠图神器,设计师都在用!

mooncakest   10/26

下一篇
需要帮助?

摹客产品顾问为你服务

我是小摹,立即扫码加我吧!

帮助群:762023607

服务邮箱:service@jongde.com