作者 / Ramprakash Ravichandran, Senior Interaction Designer, Next Billion Users

△ 插图: Next Billion Users 插画师 Kai Yee Tay

我和 Material Design 团队的内容策略师 Susanna Zaraysky 共同撰写了此文。

随着居家办公在世界各地逐渐常态化，网络带宽的使用量也越来越大，包括流媒体视频、电话会议和收发文件。越来越多的人接入网络，再加上技术基础设施问题和极端天气事件，不可避免地会导致时断时续的网络连接。过去常见于农村地区和新兴市场的网络连接问题，如今在全球范围内都屡见不鲜。网络过载会导致连接中断，时间从几秒到几小时不等，在此期间用户无法访问网络内容。许多用户因此选择放弃，或者试图在网络不那么慢的时候 (如晚上) 完成任务。还有些用户则可能因为网络覆盖范围有限，或是为了节省数据流量或电量而处于离线状态。

Wi-Fi 的使用情况则更加多样，有些人很少或从未访问过功能正常的 Wi-Fi 网络，有些人会在连接到 Wi-Fi 时下载尽可能多的文件以供离线使用。另外，即便有时候 Wi-Fi 信号看起来满格，而实际上只是个 "Lie-fi": 缓慢或断续连接，甚至干脆没有连接互联网。

• Lie-fi

  https://developers.google.cn/web/fundamentals/performance/poor-connectivity/#lie-fi

这些情况都会造成失落和困惑。

基于以下策略，我们通过示例分享说明如何设计应用才能减少糟糕的连接给用户造成的挫败感:

• 无论网络连接情况如何，都要提供愉悦的体验让用户参与其中。

• 出现网络连接问题时，不要出现界面停滞或显示空白屏幕，而是要告诉用户发生了什么，以减少用户的困惑和失落。

△ 插图: Next Billion Users 视觉设计师 Taylor Herr

逐步加载内容并提高保真度

加载图像的方式会影响感知延迟 (用户感觉需要等待的时间) 和实际延迟 (加载图像所需的实际时间)。

在加载全分辨率图像之前加载模糊图像或骨架内容，可以在不增加实际延迟的情况下减少感知延迟。这种方法比显示部分加载的图像更好，因为完整图像即便只是部分加载也可能需要额外的时间。

用灰色 "骨架" 等内容进行占位，让用户感知到即将显示的内容。

△ Google Lens 使用灰色 "骨架" 呈现正在加载的内容

• Google Lens

  https://play.google.com/store/apps/details?id=com.google.ar.lens

按优先级顺序逐步加载内容

按优先级顺序加载可以减少慢速或断续连接带来的感知延迟。一次性加载多个内容单元 (文本、视频和图像) 可能比加载单个项目要花费更多时间。先加载文本，再加载图像。按重要性顺序加载单个元素而不是一次性加载所有元素，可以减少用户等待加载内容的时间。

按照优先级顺序加载内容，而不是一次全部加载。

△ YouTube 会先加载主视频，然后加载视频标题和描述，最后加载其他相关视频的缩略图和标题

加载模拟内容

在用户等待应用加载时，显示模拟内容将减少感知延迟，并让用户了解应用的工作方式。

生成关于应用的模拟内容。

△ 左图:在用户开始上手使用前，Duo 应用会通过呈现模拟内容来阐述产品优势，增进用户对应用的了解；

右图: 在用户授予通讯录权限后，Duo 将逐步改变界面并填充实际内容，用户在通讯录中的好友随即出现

• Duo

  https://play.google.com/store/apps/details?id=com.google.android.apps.tachyon

断续连接体验

当网络强度可能在 2G 到 3G 到 4G 速度之间波动时，确保用户的体验能无缝衔接。不要阻止用户使用应用。通过将任务加入队列或在网络连接可用时进行预缓存和下载，营造应用仍在工作的迹象。

加载提示

连接在速度和可靠性上可能会有所不同。向用户显示其连接状态，尤其是在用户等待内容加载或下载的时候。

不显示进度的加载提示表明加载过程，而显示加载进度则能表明内容加载了多少。如果可能，两者都应显示。

使用进度条或占位符内容向用户表明内容正在加载。如果可能，同时提供带进度和不带进度的加载提示。显示下载所需时长可增加透明度。

考虑所有类型的连接情况

针对所有可能的连接情况进行设计: 成功、部分加载、无限期等待和完全失败。比如下图中的 YouTube 示例:

△ 左图: 成功加载 (显示视频缩略图)；

中图: 当连接中断或断续时，屏幕中央显示圆形加载提示；

右图: 加载完全失败状态，提供了重试选项

其他缓慢或断续连接选项

并不是所有用户都知道查看状态栏中的飞行模式、Wi-Fi 信号和移动数据关闭图标来确认是否在线。对于一些用户来说，这些图标太小了。要让用户更直接地获取连接信息，可以考虑在应用界面中明确显示连接状态。

连接状态消息

如果应用功能由于网络连接而发生意外变化，用户可能会感到沮丧或疑惑。对于依赖网络的应用，可以显示一条信息，告知用户当前的连接状态或连接状态的重要变化。

告知用户会影响应用功能的重要连接状态，如打开了飞行模式或移动数据被关闭。

△ 左图: Google Go 应用在飞行模式下会显示用户处于离线状态，在信息提示控件中同时显示飞行模式图标和文字标签；

右图: Google Go 应用在应用内的信息提示控件中显示移动数据关闭的文字标签和蜂窝信号关闭图标

• Google Go 应用

  https://play.google.com/store/apps/details?id=com.google.android.apps.searchlite&hl=en_US

• 飞行模式图标

  https://material.io/resources/icons/?search=airplane%20&icon=airplanemode_active&style=baseline

• 蜂窝信号关闭图标

  https://material.io/resources/icons/?search=data&icon=signal_cellular_off&style=baseline

当连接状态出现波动时，在界面中显示最新的状态信息。

△ 左图: 当 Chat 应用离线时，顶部进度条将显示状态，"发送" 按钮将被禁用；

右图: 当 Chat 应用联网后，进度条消失，"发送" 按钮被激活，允许用户继续发送消息

• Chat 应用

  https://play.google.com/store/apps/details?id=com.google.android.apps.dynamite

如果您的应用正在等待连接完成任务，可以在界面中指明这一状态。

△ 文档上有代表其状态的图标。

左图: 显示等待状态；右图: 显示同步状态

延迟操作

在某个任务流程中，如果不需要用户输入，可以考虑提供一个选项，即在重新建立连接时让应用在后台完成任务 (例如网页搜索)，并在任务完成后通知用户。

△ 左图: 当用户在 Google 应用中进行搜索时，如果没有连接到互联网，应用会在结果就绪时再主动通知用户；

中图: 在设备连接到互联网后，应用就会自动尝试获取搜索结果；

右图: 如果用户没有打开 Google 应用，应用会在搜索结果就绪时发送通知

• Google 应用

  https://play.google.com/store/apps/details?id=com.google.android.googlequicksearchbox

给出选项

为用户提供可以在慢速连接环境下工作的选项。

△ 左图: YouTube 的自适应比特率流式传输允许视频分辨率自动适应网络条件；

右图: 这一视频应用示例检测到缓慢的网络连接，并建议切换到音频，以便实现无中断的对话

连接问题在人们开始大规模居家办公之前就已经存在了，并且将继续存在。为各种连接场景设计替代方案，可以在一定程度上提升用户的生活品质。

* 本文中的屏幕截图由 Duo、Google Lens、GPay India、Google 应用、Google Go、Google Docs、GSuite Chat 和 YouTube 团队提供。

您的应用有针对不同的网络连接条件进行设计吗？欢迎在评论区和我们分享您的经验和想法。

推荐阅读

 点击屏末 | 阅读原文 | 即刻通过 Google Play 开启成功出海之旅