模式 离线状态

离线状态

离线状态可以让没有连接到互联网的用户使用应用。

原则 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material Design 中的适应不同网络状态的功能展示

适应不同的网络状态

当用户的网络缓慢、网络时常中断、或者没有连接到互联网时,你的应用的功能要怎么展现。

Material Design 中的离线状态使用说明

功能说明

使用一个精心设计的元素来解释离线状态下如何使用。

Material Design 中的受限状态内容提示

显示可用的内容

显示一些东西比什么都不显示要好,同时也可以解释当前互联网连接处于受限状态。

状态和设置 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

你的应用应该指明当前是在线状态还是离线状态,特别是应用的某些功能可以离线使用,而有些功能必须联网才能使用时。

如果可以的话,应用还应该提供一个管理离线文件的地方。

离线时可用


显示一个脱机图标和 “Offline” 文本,以表明当前操作正处于离线状态。

Material Design 中的脱机操作图标

用户执行一项离线操作时,会显示脱机图标。

Material Design 中的脱机图标

当网站离线访问时,网址旁边会显示脱机图标。

离线时不可用


离线时,不可用的功能应使用 “cloud off” 图标。产品离线时,仅显示此图标。有可能的话,使用带此图标的文本 “No internet”。

Material Design 中的离线状态提示与用户操作建议

使用对用户有用的提示表示离线状态,告诉用户离线时,用户可以做什么。

Material Design 中的下载操作按钮,用于离线使用

当联网时,提供一个下载操作按钮,以供将来离线使用。

离线位置

为用户提供一个管理离线设置的地方。如果适用的话,使用脱机图标标记此位置。

Material Design 中的离线区域导航菜单

此导航菜单中提供了 Offline areas。

离线交互 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

下载文件

离线功能可以让用户使用预先下载的文件,例如视频和网站。要离线访问这些文件,用户必须在联网时把文件下载到设备上。

要指明文件可以下载,需要同时显示下载图标和文本 “download”。包括文件大小,以帮助用户决定文件是否太大。

离线时,允许用户选择在联网后需要下载的文件。

Material Design 下载图标与文本 “Download” 结合使用

正确示例

下载图标和文本 “Download” 配合使用。

Material Design 中不使用切换控件进行文件下载

错误示例

不要使用切换控件来下载单个文件。切换控件表示的是状态 “on” 或 “off”,而不是一次性的下载。

图像

文件下载完毕后,显示一个脱机图标,表示可以离线使用。

动画

要表明已下载的文档可以离线访问,需要把下载图标使用动画转换为脱机图标。详见进度 & 活动状态

进度指示器在两个图标之间切换。

移除下载的内容

为了腾出存储空间,用户可能会删除设备上的文件。你的应用应该允许用户删除任何已下载的文件。

Material Design 中的下载文件操作按钮带删除图标

对于已下载的文件,显示一个含删除图标的操作按钮。

Material Design 显示删除文件可腾出的空间

显示通过删除文件可以腾出多少空间。