文章内容
2022/10/10 9:44:57,作 者: 黄兵
无论速度快慢，都可以连接
为缓慢和间歇的离线连接而设计，以减少用户焦躁感。
插图：Kai Yee Tay，下一个10亿用户的插图作者
我和Susanna Zaraysky一起写了这个故事，她是Material Design团队的一名内容策略师。
随着世界各地许多人在家工作，越来越多的人通过流媒体视频、电话会议和发送/接收文件来消费高带宽内容。住宅中对互联网和共享带宽的高需求，加上技术基础设施问题和极端天气事件，意味着连接往往是间歇性的。过去在农村地区和新兴市场普遍存在的连接挑战，现在在全球范围内--城市和农村地区都有。过载的网络导致连接中断，使用户在数秒至数小时内无法访问。许多用户放弃了任务，或者试图在网络不那么慢的时候完成任务，比如在晚上。还有一些人由于网络覆盖范围有限，或为了节省移动数据或电池的费用而离线。
对Wi-Fi的访问范围很广，有些人很少或从未访问过功能性的Wi-Fi网络，而其他人则最大限度地利用Wi-Fi下载尽可能多的文件供离线使用。Wi-Fi信号图标可能显示有一个强大的连接，但不幸的是，用户有lie-fi：一个缓慢或间歇性的连接或没有连接（离线）。
所有这些情况都会造成挫折和混乱。
我们将分享一些例子，说明如何通过这些策略来设计应用程序，以尽量减少因连接而造成的用户挫折感。
无论网络连接情况如何，通过提供愉快的体验来保持用户的参与。
当处于连接障碍时，向用户展示正在发生的事情，以减少困惑和挫败感--而不是冻结或显示空白屏幕。
插图：Taylor Herr, Next Billion Users视觉设计师
逐步加载内容并提高保真度
加载图像的方式可以影响感知延迟（用户感觉他们必须等待多长时间）和实际延迟（加载图像的技术时间）。
通过在全分辨率图像之前加载一个模糊的图像或骨架内容，力求在不增加实际延迟的情况下减少感知延迟。这种方法比显示部分加载的图像要好，因为加载部分图像可能需要额外的时间。
通过显示占位符内容，如灰色的 "骨架 "内容，让用户感觉到将要发生的事情。
Google Lens显示了一个灰色的 "骨架 "UI，表明正在加载的内容。
按优先顺序逐步加载内容
按优先顺序加载可以减少慢速或间歇性连接上的感知延迟。加载多个单元的内容（文本、视频和图像）可能比加载一个项目需要更多的时间。先加载文本，再加载图像。减少用户等待加载内容的时间，按其重要性顺序加载单个元素，而不是一次全部加载。
按优先顺序加载内容，而不是一次全部加载。
YouTube首先加载主要视频，然后是视频标题和描述，最后是其他相关视频的缩略图和标题。
加载模拟内容
当用户在等待应用程序加载时，显示模拟内容以减少感知延迟，并让用户了解应用程序如何工作。
生成关于应用程序的模拟内容。
(1) 在用户完成入职培训之前，Duo应用以产品优势的形式展示模拟内容，帮助他们了解预期的内容。(2) 在用户授予联系人权限后，Duo逐步改变用户界面，并填充真实内容。用户的联系人中的朋友会出现。
间歇性的连接体验
当互联网强度可能在2G到3G再到4G的速度之间波动时，要让用户有无缝的体验。不要阻止用户使用你的应用程序。通过排队任务或预先缓存，并在互联网连接可用时下载，创造应用程序仍在工作的印象。
加载进度指示器
连接的速度和可靠性会有所不同。向用户展示他们的连接状态，特别是在他们等待内容加载或下载时。
不确定的加载指标显示正在进行加载。确定的加载指标显示多少内容被加载。如果可能的话，两者都显示。
通过使用进度条或占位符内容向用户显示内容正在加载。如果可能的话，同时提供确定的和不确定的状态。显示下载所需的时间可以增加透明度。
(1) 在谷歌的GPay印度应用程序中，在添加银行账户时使用的加载指标结合了一个确定的预期（固定的超时倒计时）和一个不确定的进度（围绕时间倒计时的圆形指标）。(2) 下载通知显示下载大型游戏文件还剩多少时间。
对所有类型的连接情况进行核算
为所有类型的可能连接情况进行设计：成功、部分加载、无限期等待和完全失败。请看这些来自YouTube应用程序的例子。
(1) 成功加载（视频缩略图出现）。(2) 屏幕中央的圆形进度显示当连接中断或间歇时的部分加载。(3) 完全失败状态，有重试的选项。
其他缓慢或间歇性的连接选项
并非所有的用户都知道要看状态栏上的飞行模式、Wi-Fi信号和移动数据关闭图标，以了解他们是否在线。对于一些用户来说，这些图标太小了。为了让用户明白，可以考虑在应用程序用户界面中明确说明连接状态。
连接状态信息
如果应用程序的功能由于连接性而意外改变，用户可能会感到沮丧或不理解。对于依赖互联网的应用程序，显示一条消息，告知用户当前的连接状态或连接状态的重要变化。
告知影响应用程序功能的重要连接状态，例如当飞行模式被启用或移动数据被关闭。
(1) Google Go应用程序显示用户在 "飞机模式 "下处于离线状态，并在工具栏中显示飞机模式图标和文字标签。(2) Google Go应用程序显示移动数据关闭的文本标签，并在应用程序的工具栏中显示信号蜂窝关闭图标。
当连接状态出现波动时，在用户界面内显示最新的状态信息。
(1) 聊天软件离线时，顶部的进度条显示状态，发送按钮被禁用。(2) 当聊天软件连接后，进度条消失，发送按钮激活，允许用户继续发送消息。
如果你的应用程序正在等待连接以完成一项任务，请在用户界面中表明这一状态。
文件上有一个代表其状态的图标。左边的图片（1）显示等待状态，而（2）显示同步状态。
延迟行动
在一个任务流程中，如果不需要用户输入，可以考虑添加一个选项，让应用程序在重新建立连接时在后台完成任务，如网络搜索。一旦任务完成就通知用户。
(1) 当用户在谷歌应用程序中进行搜索查询，而没有互联网连接时，该应用程序提出在结果准备好时通知用户。(2) 一旦设备连接到互联网，该应用程序就会自动尝试获取搜索结果。(3) 如果用户没有打开谷歌应用程序，当搜索结果准备好时，该应用程序会发出通知。
提供选项
为用户提供可以在缓慢的连接环境下工作的选项。
(1) YouTube的自适应比特率流允许视频分辨率自动适应网络条件。(2) 这个视频应用的例子可以检测到缓慢的网络连接，并建议切换到音频，以便进行无中断的对话。
在大量的人开始在家工作之前，连接问题就已经存在，并将继续存在。为各种连接情况设计替代方案将使你的用户的生活更轻松一些。
截图由Duo、Google Lens、GPay India、Google App、Google Go、Google Docs、GSuite Chat和YouTube团队提供。
评论列表