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