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:向下滑動刷新
當從上面刷新列表時,推薦使用具有徑向墨水反應的不確定的圓形指示器。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本文為大地瓜原創,歡迎知識共享,轉載請注明出處。雖然你不注明出處我也沒什么精力和你計較。作者微信號:christg...
    大地瓜123閱讀 298評論 0 0
  • 欍人_閱讀 272評論 0 0
  • 今天與朋友接觸了一個新的營銷模式,能夠將自己積壓貨或滯銷貨,通過這個渠道銷售出去,前提是你的貨是正品且有質量保證。...
    松竹明月閱讀 143評論 0 0
  • 今天做了這什么?早晨健了會身,跑了跑步,送孩子上學,回來看手機新聞,接孩子,下午送孩子,接著看手機!晚上想了想...
    春風一縷閱讀 125評論 0 0
  • 這一次看,我26歲。上一次看,好像是幾年前。 幾年前的自己,年少輕狂,涉世未深。記憶最深的是克里斯帶兒子打籃球說的...
    鳳飛翱翔于四海兮閱讀 114評論 0 0