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