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