美文网首页产品经理@IT·互联网@产品
Material Design 设计语言(十二)进度指示器

Material Design 设计语言(十二)进度指示器

作者: 宛苏 | 来源:发表于2019-08-02 09:00 被阅读2次

    进度指示器(Progress indicators)

    进度指示器指示正在进行的进程的状态,例如APP加载、提交表单或保存更新。它们传达APP的状态并指示页面可用的操作,例如用户是否可以离开当前屏幕。

    原则

    1、信息化

    显示进度指示器或者制作进度动画,是为了反映流程状态。它绝不仅仅是为了装饰或好看。

    2、动画

    进度指示器使用动画捕捉注意力并告知用户活动的进度。

    3、统一

    进度指示器应以一致的格式(线性或循环)应用于正在进行的流程(例如加载)

    类型

    Material Design 提供两种视觉上不同类型的进度指示器:线性和圆形进度指示器。只需要一种类型将代表APP的页面进程。

    例如,如果刷新操作在一个屏幕上显示圆形指示器,则不同页面的相同操作不应该出现线性指示器。

    1、线性进度指示器

    线性进度指示器支持固定时间和不固定时间的两种操作。

    时间确定的进度条宽度从轨道的0到100%增加,与流程/任务的进度同步。

    时间不确定的进度条宽度在轨道上不断增长和缩小,直到流程/任务完成。

    2、圆形进度指示器

    圆形进度指示器通过沿顺时针方向沿不可见圆形轨道循环旋转来显示进度。它们可以直接应用于元素上,例如按钮或卡片。

    在Android上,“滑动到刷新”手势会默认显示一个圆形进度指示器,指示正在刷新UI。

    圆形进度指示器支持固定时间和不固定时间的两种操作。

    当指示器从0度移动到360度时,固定时间的圆形指示器用颜色逐渐填充不可见的圆形轨道。

    时间不确定的圆形指示器在沿着看不见的轨道移动时会变大和缩小。

    相关文章

      网友评论

        本文标题:Material Design 设计语言(十二)进度指示器

        本文链接:https://www.haomeiwen.com/subject/cfsarctx.html