模式 离线状态

离线状态

离线状态使用户能在未连接到互联网时使用应用。

原则 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.

你的应用应指明当前是在线还是离线状态,特别是当部分功能可离线使用而部分功能必须联网时。

如果适用,还应提供管理离线文件的位置。

离线时可用


要表明某项操作可在离线状态下工作,请显示离线图钉图标和文本标签“离线”。

Material Design 中表示操作的离线图标

用户执行离线操作时会显示离线图标。

Material Design 中网站的离线图标

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

离线时不可用


离线时,不可用的功能应使用“云关闭”图标表示。仅在产品离线时显示此图标。尽可能将文本标签“无网络”与此图标配合使用。

Material Design 离线状态显示有用提示

离线状态指示以及用户在离线时可执行操作的有用提示。

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

连接到互联网时,提供下载操作以供将来离线使用。

离线位置

为用户提供一个管理离线设置的位置。如果适用,用离线图钉图标标记此位置。

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

此导航菜单中提供了离线区域。

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

下载文件

离线功能让用户能够访问之前下载的文件,例如视频和网站。要离线访问这些文件,用户必须在有互联网连接时将它们下载到设备上。

要表明文件可以下载,需要同时显示下载图标和“下载”字样。包括文件大小以帮助用户判断文件是否过大。

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

Material Design 下载操作的下载图标

推荐做法

将下载图标与“下载”字样配合使用。

Material Design:避免使用切换控件下载单个文件

不推荐做法

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

图标

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

Material Design 中可用的下载和离线图钉图标

下载离线图钉图标可在Material 图标库中找到。

动画

要表明已下载的项目可离线访问,可以显示下载图标转换为离线图钉图标的动画。详见进度与活动状态

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

移除已下载内容

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

Material Design 中用于移除已下载文件的删除图标

为已下载的文件显示带有删除图标的移除操作。

Material Design:文件空间节省可视化

显示删除文件可节省多少空间。