本页面提供了一些设计指南，指导如何在网速较慢和离线状态下打造出色的用户体验。
网络连接质量可能会受到多种因素的影响，例如：
- 网络提供商的网络覆盖率较低。
- 极端天气状况。
- 停电。
- 进入永久性的“死区”，例如进入墙壁会阻挡网络连接的建筑物。
- 进入临时“死区”，例如乘坐火车穿过隧道时。
- 有时间限制的互联网连接，例如机场或酒店中的连接。
- 在特定时间或特定日期需要限制或禁止使用互联网的文化习俗。
作为开发者，您的目标是提供良好的体验，以减少网络连接变化的影响。
决定在网络连接不佳时向用户显示的内容
首先要问的问题是，网络连接成功和失败对应用而言分别是什么样子。成功连接是指应用的正常在线体验。连接故障包括应用在离线状态和网络延迟情况下的行为方式。
如需确定如何处理连接失败，请问自己以下重要用户体验问题：
- 您等待多长时间来确定连接是否成功？
- 在系统确定成功或失败期间，您可以执行哪些操作？
- 如果连接失败，该怎么办？
- 您如何告知用户发生了什么情况？
告知用户其当前状态和状态变化
告知用户应用的状态以及在网络故障时他们仍可执行的操作。例如，通知可能会显示以下内容：
您的网络连接似乎不佳。别担心！系统会在网络恢复后发送邮件。
在网络连接改善或恢复时通知用户
如何告知用户其网络连接已改善取决于您的应用。优先显示当前信息的应用（例如天气或股市跟踪器）应尽快自动更新并告知用户。
我们建议您使用 Material Design 通知 Toast 元素等视觉提示，让用户知道您的 Web 应用已“在后台”更新。这涉及检测服务工件是否存在以及其所管理的内容是否有更新。您可以点击此处查看此函数的运作方式代码示例。
Chrome 平台状态就是一个例子，该扩展程序会在应用更新时向用户发送一条备注。
某些应用始终可以显示上次更新时间。例如，这对于货币换算器应用尤其有用。
新闻应用可以显示简单的“点按即可更新”通知，告知用户有新内容。自动更新文章会导致用户迷失在阅读内容中。
更新界面以反映当前的情境状态
每个界面元素都可以有自己的上下文和行为，这些上下文和行为会因是否需要成功连接而发生变化。例如，某个电子商务网站可在离线状态下浏览，但在重新建立连接之前会停用价格和“购买”按钮。
其他形式的上下文状态可以包含数据。例如，金融应用 Robinhood 使用颜色和图形来告知用户股市开盘时间。整个界面会变为白色，然后在市场关闭时变为灰色。当股票的价格上涨或下跌时，每个单独的股票微件都会根据其状态变为绿色或红色。
指导用户，让他们了解离线模型
大多数用户习惯于始终保持网络连接。您需要告知用户，当他们没有连接时，应用会发生哪些变化。告知他们大量数据的存储位置，并提供用于更改默认行为的设置。结合使用多个界面设计组件（例如信息性语言、图标、通知、颜色和图像）来传达这些想法，而不是依赖于单一设计选择（例如单独的图标）来讲述整个故事。
默认提供离线体验
如果您的应用不需要太多数据，则默认缓存这些数据。如果用户只能在有网络连接的情况下访问其数据，他们可能会越来越沮丧。
尽量让体验尽可能稳定。连接不稳定会让用户觉得您的应用不可信。能够减少网络故障影响的应用会让用户满意。
新闻网站可以通过自动下载和自动保存最新新闻来获益，或许可以通过仅下载文字来节省数据，以便用户在没有连接的情况下阅读当天的新闻。您可以优先下载用户查看次数最多的新闻类别，以便根据用户的行为调整此行为。
在应用准备好供离线使用时通知用户
在 Web 应用首次加载时，必须向用户指明该应用是否已准备好离线使用。为此，您可以使用通过屏幕底部的消息提供与操作相关的简短反馈的 widget，例如在某个版块已同步或某个文件已下载时。
确保您使用的语言适合您的受众群体，并在所有适用的情况下使用相同的措辞。非技术受众群体通常会误解“离线”一词，因此请改用受众群体能够理解的基于操作的语言。
在界面中明确显示“保存到离线观看列表”
如果应用使用大量数据，请确保提供开关或固定功能，以便用户添加要离线使用的项。仅当用户通过设置菜单明确要求自动下载文件时，才自动下载文件。确保用户能清楚地看到固定或下载界面，且该界面不会被其他界面元素遮挡。
例如，需要大型文件的音乐播放器。用户知道相关数据流量费用，但可能也希望在离线状态下使用播放器。下载音乐以供日后使用需要用户提前规划，因此您可能需要在新手入门流程中向用户介绍这一点。
明确哪些内容可离线使用
明确说明您提供的选项。您可能需要显示“离线库”或内容索引的标签页或设置，以便用户查看自己在设备上存储的内容以及需要保存的内容。确保设置简洁明了，并明确说明数据的存储位置和有权访问数据的人员。
显示操作的实际费用
许多用户将离线功能等同于“下载”。在网络连接经常失败或不可用的国家/地区，用户通常会与其他用户分享内容，或者在有网络连接时保存内容以供离线使用。
使用流量套餐的用户有时会担心费用而避免下载大型文件，因此您可能还需要显示相关费用，以便用户对特定文件或任务进行积极比较。例如，上述音乐应用可以检测用户是否使用的是流量套餐，并显示文件大小，以便用户查看文件的费用。
帮助防范遭到入侵的体验
用户通常会在不知情的情况下破解体验。例如，在基于云的文件共享 Web 应用出现之前，用户通常会保存大型文件并将其附加到电子邮件中，以便他们能够从其他设备继续修改这些文件。良好的界面可以解决用户尝试解决的问题，而不会将用户拉入被入侵的体验。例如，提供跨设备共享大型文件的方法，而不是让用户更方便地将大型文件附加到电子邮件中。
让体验可从一台设备转移到另一台设备
在针对不稳定的网络构建时，请在连接改善后尽快同步，以便转移体验。例如，假设一款旅行应用在预订过程中丢失了网络连接。重新建立连接后，应用会与用户的账号同步，让用户能够在桌面设备上继续预订，从而获得顺畅的体验。
告知用户其数据所处的状态。例如，您可以显示应用是否已同步。尽可能向他们提供相关信息，但不要向他们发送过多消息。
打造包容性的设计体验
在设计用户体验时，应力求包容性，提供有意义的设计设备、简单的语言、标准的图标和有意义的图像，引导用户完成操作或任务，而不会造成干扰。
使用简单明了的语言
良好的用户体验不仅仅是界面设计。其中包括用户在应用中所采取的路径，以及他们在此过程中遇到的所有内容，包括应用用于描述该历程的语言。在说明界面组件或应用状态时，请避免使用技术术语。“离线”一词通常不够清楚，无法让用户了解您的应用正在执行哪些操作。
使用多种设计设备打造无障碍用户体验
使用语言、颜色和视觉组件来显示状态或状态变化。仅使用颜色来显示状态可能会让用户难以察觉，甚至对视障用户完全不可用。此外，由于 Web 设计通常会为停用元素使用灰色，因此使用灰显界面来表明应用处于离线状态可能会导致用户对应用在离线状态下可以执行的操作感到困惑，尤其是在您仅使用颜色来显示状态时。
为避免误解，请通过多种方式向用户表达应用状态，例如使用颜色、标签和界面组件。
使用能传达含义的图标
请务必在图标旁边使用有意义的文本标签。仅使用图标可能会造成混淆，尤其是因为网络上的“离线”概念相对较新。其他容易造成混淆的图标包括使用软盘来表示“保存”，这对从未见过软盘的年轻用户来说可能毫无意义，以及“汉堡包”菜单图标。
在引入离线图标时，请遵循行业标准视觉效果（如果有），并提供文本标签和说明。例如，您可以使用下载图标表示保存到离线状态，使用同步图标表示涉及同步的操作。使用图标来表示状态时，请务必小心，因为图标可能会被误解为保存或下载操作。
如需更多灵感，请参阅 Material Design 图标集。
使用骨架布局和其他反馈机制
在应用加载内容时，向用户显示正在加载，以免他们认为应用已损坏。实现此目的的一种方法是使用框架布局，即在内容加载期间显示的应用的线框版本。您还可以考虑使用预加载器界面，并在其中添加文本标签来告知用户应用正在加载，或者为线框添加轻柔的脉动动画，让用户感觉线框是活跃的，并且正在加载。这有助于让用户确信系统正在处理，并防止重新提交或不必要的刷新。
通过提供反馈来显示操作的状态。例如，如果用户在离线状态下修改文档，不妨考虑更改反馈设计，使其与用户在线状态下的反馈明显不同，但仍显示其文件已“保存”，并会在用户连接到网络后进行同步。这有助于用户了解应用的运作方式，并让他们确信其任务或操作已存储，从而更放心地使用您的应用。
不屏蔽内容
在某些应用中，用户可能会触发某项操作，例如创建新文档。某些应用会尝试连接到服务器以同步新文档，为了演示这一点，它们会显示一个覆盖整个屏幕的侵扰性加载模态对话框。如果用户的网络连接稳定，这种方法可能会奏效，但如果网络不稳定，用户将无法退出此操作，因此界面会阻止他们执行任何其他操作。
避免发出会屏蔽内容的网络请求。让用户继续浏览您的应用，并将任务加入队列，以便在连接状况改善后执行和同步。
为未来的十亿新用户打造应用
在许多地区，低端设备很常见，网络连接不可靠，对于许多用户来说，流量费用非常高昂。确保公开透明并谨慎使用数据，从而赢得用户信任。考虑如何帮助网络连接不佳的用户，并简化界面以加快任务完成速度。请务必在下载大量数据的内容之前征求用户同意。
为连接缓慢的用户提供低带宽选项。在网络连接速度较慢时提供较小的资源，或提供选择高质量或低质量资源的选项。
总结
由于用户不熟悉离线体验，因此教育是离线体验的关键。为了帮助他们学习，请尝试与熟悉的概念建立联系，例如解释下载以供日后使用与离线数据相同。
在针对不稳定的网络连接进行设计时，请牢记以下准则：
- 针对网络连接的成功、失败和不稳定情况进行设计。
- 数据费用可能很高，因此请为用户着想。
- 对于全球大多数用户来说，技术环境几乎完全是移动设备。
- 低端设备很常见，存储空间、内存和处理能力有限，显示屏较小，触摸屏质量较低。确保将性能纳入设计流程。
- 允许用户在离线状态下浏览您的应用。
- 告知用户其当前状态以及状态变化。
- 如果您的应用不需要太多数据，请尝试默认提供离线模式。
- 如果应用需要大量数据，请向用户说明如何下载以供离线使用。
- 让体验能够在设备之间转移。
- 将语言、图标、图像、排版和颜色搭配使用，向用户传达想法。
- 提供安心保障和反馈，帮助用户。