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