一、 定义
在加载数据和内容的进程中,表示不明确或明确时长的等待状态。
二、 作用
告知用户进程正在运行,没有停止响应。
三、 类型
I. iOS Human Interface Guidelines
1. 活动指示器Activity Indicators
执行时间不可量化的任务(例如加载或同步复杂数据)时,活动指示器持续旋转,任务完成时消失,不可进行交互。
设计原则:
- 优先选择进度条而非活动指示器。以便用户更好地衡量等待时长。
- 活动指示器应该保持顺畅地旋转。
- 在等待任务完成时,可以在活动指示器旁加上标签以提供额外的上下文信息。
2. 进度条Progress Bars
轨迹从左到右被填满,显示持续时间已知的任务进程。不可进行交互,虽然会搭配一些取消相应操作的按钮。
设计原则:
- 始终精准报告进度,进度信息不精准则使用进度指示器。
- 只对确定时限的任务使用进度条,传达任务完成需要的时间。
- 隐藏导航栏和工具栏中进度条轨迹的未填充部分。
II. Material design
1. 进度条指示器(Linear progress indicator)
由两部分组成:轨迹条(track)和进度指示 (indicator)
精确指示器(Determinate indicators)与不精确指示器(Indeterminate indicators)
精确指示器显示过程需要的时长,完成率可被预测时使用。
不精确指示器表示进度时长不可预知,当进度不可预测或者不必要明确知道时使用。
进度条指示器支持精确和不精确两种方式:
- 确定操作的指示器会从0增长到100%,与进程的进度同步。
- 不确定的操作的指示器会沿着轨迹条不断循环,直到过程完成。
进度条指示器放置的位置可以指示出特定元素正在加载内容,以吸引用户注意新内容即将呈现的位置。
比如在屏幕中指示加载屏幕全部内容(如下图)
在卡片下边缘放置,则表示对应加载卡片内限定的内容(如下图)
2. 进度环指示器(Circular indicator)
进度环指示器通过顺时针沿着不可见的圆形转动,来显示进程的进度。
刷新(swipe to refresh)手势会显示一个进度环指示器,表示界面正在加载。
支持精确和不精确两种方式:
- 确定进度环的指示器会从0移动到360度,用颜色填充不可见的圆形轨道。
- 不确定进度环的指示器会沿着不可见的圆形轨道一直循环旋转,直到过程完成。
进度环指示器作用:
- 利用呈现位置作引导
当居中屏幕时,指示空白状态的初始加载;当放置在现有内容上下方时,引导用户新内容出现的位置。 -
可与操作进行整合
集成到按钮或可操作的图标中,可以表示与特定项目之间的交互状态。适用于短期的(2-5秒之间),不确定时长的指示,以吸引用户注意。
设计原则:
-
不要将进度指示器应用到所有按钮。
应用于一个程序的指示器应保持样式一致。
如果多进程作为一组状态,指示器代表整体进度而不是每个活动的进度。
进度条的外观(颜色等)可以调整,以匹配应用程序的设计风格。
参考来源:
https://material.io/design/components/progress-indicators.html
https://developer.apple.com/design/human-interface-guidelines/ios/controls/progress-indicators/