Material design - Components– Progress & activity

Progress & activity - 进度和活动

Progress and activity indicators are visual indications of an app loading content.

【翻译】
进度和活动指示符是应用加载内容的可视指示。

A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

Determinate indicators display how long an operation will take.

Indeterminate indicators visualize an unspecified wait time.

【翻译】
应使用单个视觉指示器来表示每种类型的操作。例如,刷新操作应显示刷新栏或活动圆,但不能同时显示两者。
确定指示器显示操作将花费的时间。
不确定指标可视化未指定的等待时间。

Types - 类型

Linear
Circular

【翻译】
线性

Behavior - 行为

Loading content in phases
Loading additional content

【翻译】
分阶段加载内容
加载其他内容

Types of indicators - 指标类型

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Both linear and circular progress indicators may be either determinate or indeterminate.

【翻译】
当指示器确定时,它们指示当可检测百分比完成时操作将花费多长时间。
当指示符不确定时,它们请求用户在某事完成时等待,而不需要指示将花费多长时间。
线性和圆形进度指示符可以是确定的或不确定的。

Linear- 线性

A linear progress indicator should always fill from 0% to 100% and never decrease in value. It should be represented by bars on the edge of a header or sheet that appear and disappear.

For multiple operations happening in sequence, use the indicator to represent the progress as a whole, and not each individual operation.

【翻译】
线性进度指示器应始终从0%填充到100%,且不会减小值。它应该在标题或工作表的边缘上以条形显示和消失。
对于按顺序发生的多个操作,使用指示器表示整个进度,而不是每个单独的操作。


Linear progress indicators

【翻译】
线性进度指示器


Buffering progress indicator on a video

【翻译】
缓冲视频上的进度指示器


Query indicator on a webpage

【翻译】
网页上的查询指标

** Circular - 圆**


Circular indeterminate and determinate progress indicators

【翻译】
循环不确定和确定的进展指标

Circular with integration - 圆形与积分


A circular loader may be integrated with a floating action button.

【翻译】
圆形装载机可以与浮动动作按钮集成。


Animation of a circular loader with integration

【翻译】
集成的圆形加载器的动画

Behavior - 行为

Loading in phases

【翻译】
分阶段加载


One-phased loads
Ink (copy and images) loads within an existing, unchanging container.

【翻译】
单相负载
墨水(复制和图像)加载到现有的不变容器中。


Two-phased loads

The paper container is generated, then the ink (copy and images) load within it.

【翻译】
双向负载
生成纸容器,然后在其中加载墨水(复印件和图像)。


Loading content for the first time

【翻译】
第一次加载内容


Load and display all content at once.

【翻译】
一次载入并显示所有内容。

Loading additional content - 加载其他内容


Example 1: Card expansion

An indeterminate linear indicator is recommended for a card expanding on larger surfaces such as desktop.

【翻译】
示例1:卡扩展
对于在较大表面(如桌面)上扩展的卡,建议使用不确定的线性指示器。


Example 2: Scroll up to load more

An indeterminate circular indicator with an initial radial ink reaction is recommended when loading a list from below.

【翻译】
示例2:向上滚动以加载更多
当从下面加载列表时,推荐使用具有初始径向墨水反应的不确定的圆形指示器。

Example 3: Swipe down to refresh

An indeterminate circular indicator with a radial ink reaction is recommended when refreshing a list from above.

【翻译】
示例3:向下滑动刷新
当从上面刷新列表时,推荐使用具有径向墨水反应的不确定的圆形指示器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 本文为大地瓜原创,欢迎知识共享,转载请注明出处。虽然你不注明出处我也没什么精力和你计较。作者微信号:christg...
    大地瓜123阅读 284评论 0 0
  • 欍人_阅读 192评论 0 0
  • 今天与朋友接触了一个新的营销模式,能够将自己积压货或滞销货,通过这个渠道销售出去,前提是你的货是正品且有质量保证。...
    松竹明月阅读 138评论 0 0
  • 今天做了这什么?早晨健了会身,跑了跑步,送孩子上学,回来看手机新闻,接孩子,下午送孩子,接着看手机!晚上想了想...
    春风一缕阅读 118评论 0 0
  • 这一次看,我26岁。上一次看,好像是几年前。 几年前的自己,年少轻狂,涉世未深。记忆最深的是克里斯带儿子打篮球说的...
    凤飞翱翔于四海兮阅读 107评论 0 0