【UXRen译#73】离线：当你的应用无法连接网络的时候
我们不可能无时无刻连接着网络。相信每个人或多或少都经历过没有网络的尴尬。当你设计一款在断网时压根不工作的移动应用时，你就已经定义了这款APP的使用情境。
然而请记住：
- 如果你在一架飞机上，且你不愿支付wifi的费用时；
- 你正在没有移动信号的远郊露营时；
- 你有需求断网片刻时；
- 你付不起移动数据费用时；
还有很多合情合理的原因让用户不能接入互联网。知道这些，你又会如何设计你的app呢?
“离线”是否意味着“无内容”？
不一定。
每当你打开一个app，它都可能开始下载内容。当你离线时，app可以加载已经下载好的内容来提升用户的体验。是的，大多数app都是这样做的，然而有一些则做得更好。
下面让我们一起来看看包括社交、导航和生产在内的各式app，在离线时它们是如何表现的。
社交应用
作为社交app，一个典型的用例便是浏览你的信息流、发表评论或者其它你觉得有趣的内容、管理你的好友。下面我们打开飞行模式来看看会发生什么事。
首先，Facebook：
我们可以看到绝大多数我们期望看到的：我们的信息流和一个告知我们未连接网络的提示。该有的似乎都有了，干得不错，Facebook。
现在，我们来看看Facebook的其它几个页面，不知道会不会有意外的惊喜或惊吓。首先好友请求页面：
这个体验似乎就不那么好了。刚才的“未连接网络”提示不见了，取而代之的是一个不停在那儿转的加载图标。这对于用户来说真是毫无意义。还有那么多的未利用的空白区域可以好好开发一下。
下面，消息界面：
嗯，这下稍微好点了。至少我能看到一些缓存内容，即便只有一点。不幸的是，现在这里出现了两个加载光标= =。我完全不清楚这两者的区别是什么，或者到底发生了什么？同样地，这个页面也有很多浪费的空白区域。
最后，其它页面（就是那个把所有杂七杂八的玩意儿堆在一起的页面）：
很明显，那些本该在最左边出现的一系列图标（缩略图）消失了。这可真够奇怪的，因为那些图标都是静态内容，不至于会经常变来变去吧。
现在，我们试着发布一些内容：
显而易见，一个提示（并非一个错误警告！）告诉我发表的内容正在队列中。这能让我有机会重新提交。：）
由于我本来就没打算完成这次发布，于是点按了右上角的“x”。
很好，这次我得到了一个弹窗来让我再次确认是否需要在连上网络后自动发布内容，我也同时可以在想删的时候删掉它。Facebook在离线时提供了一个很棒的体验。
优点：
我们可以看到缓存的信息流
离线状态下发布内容可以得到明确的提示
缺点：
不那么一致的“未连接网络”提示
不断在那儿旋转的加载图标
加载内容时利用率极低的界面空间
某个页面（就是那个一堆菜单叠起来的页面）的图标竟然都不见了
下面轮到Pinterest了：
当我第一次打开这个app时，这真的是一个再平庸不过的首屏了。没有任何内容可以供我浏览。另外，这个app也不解释为什么这里会空无一物。没有任何告知我处在离线状态下的指示。
和Facebook一样，我们一起来看看它的其它界面。首先，搜索：
说来也奇怪，这边倒是有内容了。我压根就没指望离线下的搜索还能用，但是有趣的是现在能看到这么个似乎完备的界面。同样地，这个界面也没有任何表明我处于离线状态的提示。
试试看在输入框里打点字，只是玩玩哈~
这个搜索结果界面和首屏一样，完全空白有木有。它只是告诉我没有对应的结果，却不告诉我是为什么。难道是我打错字了？
添加一个新的pin看看会发生什么：
目前为止一切都好。我想pin一张照片，于是我点按了“photo”。
我可以顺利地选择一张照片，下面试试看把它加入到我的收藏板中：
噗… …Pinterest没有缓存我建立的所有收藏板。不得已我只能自己创建个新的：
太糟了。Pinterest允许我做了那么多事却在最后告诉我离线状态下不可以Pin东西！它甚至不允许我保存草稿以供有网络的时候再pin。
再看看个人主页是什么样的：
看起来我好像没有任何pin和收藏板，当然这是不可能的。Pinterest也不会告诉我原因。搞笑的是，我的头像下那些数字都是正确的，这和底下荒芜的灰色区域自相矛盾。
如果我点按一下“47 Pins”会发生什么？
由一个矛盾的界面。右上角显示“47”，但是底下的列表去告诉我没有任何pins。这个离线体验真实糟糕透顶。
优点：
优点就是没有优点，这也算特点吧？有特点也勉强算好事。
缺点：
没有缓存内容可以展示。（也不解释原因）
当我要去pin一个东西的时候，整个app真是畅通无阻，直到最后才在累死累活的我面前立块牌子：“禁入”
个人主页里的那些数字和底下现实的内容自相矛盾
到目前为止，我们可以看到社交app还是有很大的离线体验差别的。
来看不看Instagram的表现：
看起来和Facebook很相像。有不少的内容预加载了出来，同时还有一个“未连接网络”的提示。
看看其它界面。首先是“发现”：
不好，看不到任何内容，但是至少我们不会看到Facebook那样的无限加载图标。一个提供直接刷新页面的功能（右上角）也显得更加聪明。
个人主页：
和Pinterest很像，无内容显示。然而，在上方的状态简介里同样也是空无一物，这就不至于和底下的空白自相矛盾了。同时，Instagram保留了提示没有连接网络的文字信息。
那我们可以编辑我们的个人信息吗？
答案是不能。另外相较于“未连接网络”而言，现在的这一长串提示信息实在是’不清不楚。同样的，糟糕的界面空间利用。
最后，让我们试试看直接发送私信的功能：
和“编辑个人信息”的界面一样的空白。然而这次上方的提示文字再次无缘故地变了。
总体而言，我会把Instagram的离线体验排于Facebook和Pinterest之间。不差，但是也不算好。
优点：
自始至终都能看到“未连接网络”的提示。
缺点：
不能编辑用户个人信息
首屏的内容是唯一被缓存的
低空间利用率
再来看看下一个社交应用：Twitter。
和Facebook还有Instagram类似，有不少缓存内容可以加载出来。只是不像其它应用，Twitter并没有可以告知你当前处于离线状态的提示。这不算个大问题，但是我更希望app能那么做。
消息界面
显而易见，Twitter很充分地利用了缓存。
信息界面：
这里我们可以看到一个直截了当的文字信息告知我们重试。它最好能说明一下信息没有加载出来的原因，不过这只是吹毛求疵。
在截屏时我其实本来就没有什么信息在这里。之后我再查看了一下就发现当离线时能显示所有的未读信息，而且不会显示说有加载问题。这和Twitter的首屏达成了一致性。
下面看看我的个人主页：
和其它社交应用一样，我的个人信息并没有被缓存。但是在这里有一个对应的文字信息明确告诉我内容没有被加载出来。
那我能编辑我的个人信息吗？
或许可以？暂时没有出现任何错误信息。让我做点改变然后点按“保存”试试。
行不通。一个晦涩难懂的错误信息弹了出来。我觉得它最好一开始就屏蔽掉那些在离线状态下不能使用的功能，就像“编辑个人信息”这样的，并且解释原因，而不是让用户可以去点按它们。
现在，我试着发布一条新的tweet：
点按“Tweet”:
然后… …毫无反应。这让人有点不那么有底气，我期望出现的是一个提示我的Tweet会在连上网络的一瞬间自动发布出去，就像Facebook做的那样。
试试看滑动到时间轴的另一视角。先来看看“发现”：
很好，显示了缓存内容。再来看看“活动”：
一片空白。
点按一下“关注某人”的按键，只是试试：
没有任何推荐用户，这是一个很糟糕的空白界面设计。我之前已经抱怨过那些对于空白界面空间的浪费行径，然而这里干脆给我塞满了毫无用处的UI，不能更糟！
优点：
大量的缓存内容。无疑是社交app中的典范
大多数情况下还算明晰和一致的无网络连接错误提示
离线状态下发布能Tweet
缺点：
整个app的缓存机制贯彻得并不彻底
看似你可以在离线状态下编辑个人信息，直到最后才发现不行
荒谬的“无法编辑个人信息”的警示
当在离线状态下发送一条tweet后没有任何确认信息
“关注某人”的界面设计实在是糟糕透顶
总结一下，目前这些社交应用都没法（也不可能）在离线状态下获得完整或优秀的体验，但是其中确实有一些做的比别人好不少。说白了，还有很多提升空间。
导航应用
针对导航应用，一个典型的用例是指引你前往你要去的地方。这类应用在离线状态下无法帮你导向一个全新地址，但是我很好奇谷歌地图和苹果地图是如何应用它们的缓存的。
谷歌地图
请记住，在离线模式下，应用无法获悉你的当前位置。我们来看看谷歌地图是会如何处理这个问题：
它记忆了我上次的位置，并且设置其为起始点。我们已经缩进得比较多了。导航应用需要大量的数据支持，且需要对缓存信息筛选。我缩放看看谷歌地图到底缓存了些什么：
波特兰市区。那我们可以再缩放吗？
整个波特兰城市。更多呢？
到这类就缩放不了了。还不错，很细致的考虑，虽然我不明白为什么谷歌地图不加入一个更高级别的地图，比如整个地球。
那我们在离线时能干些什么呢？
试试看切换到卫星视图：
行不通。看来只有我们的街景试图被缓存。
设置界面：
这里有很多入口。由于其中’部分一般人也不会经常去碰，我就不一一尝试了。其中有一些能在离线时用，有的就不行，而且唯一区别的方法就是每个挨个点进去试，让人略感不爽。
当我离开设置界面切换回地图模式的时候，我震惊了，地图整个消失了！如果我现在需要看地图的话岂不是悲剧了？
总而言之，还算是个接受得过去的离线体验，虽然有时会给我点惊吓。
优点：
记忆了你上次的位置
缓存地图拥有不错的细节
缺点：
强迫我去猜什么在没网的时候可以用和不可以用
地图无缘故消失，而且一去不复返
苹果地图
谷歌地图拥有还算过得去的离线体验，那么苹果地图呢？打开看看再说：
首先，苹果地图没有显示我上次的位置。而且，它也不显示我这个默认缩放级别的任何缓存的地图。
同时，一个弹窗跳出来告诉我需要关闭飞行模式才能看到我当前位置。我点按了“取消”。下面我们看看缩放地图会不会看到缓存的地图。
答案是肯定的，但是并不完整。地图上显示的只有波特兰，俄勒冈州和一些周边地区。再缩放看看：
大家看截图的左上角，奇了怪了，如果你记忆了我上次搜索的位置，那么也应该把那块地方给缓存下来吧。
试试看卫星视图：
空无一物。意料之内，毕竟谷歌地图也一样没有缓存卫星视图。总而言之，整体表现平淡无奇。
优点：
没啥优点值得一说
缺点：
缓存的地图只有一丁点
不显示你上次的位置
生产力应用：
最后我们再来看看生产力应用。对于该类应用最主要的用力就是多设备间同步文件并且你可以打开、操作这些文件。
Dropbox
Dropbox表现如何？
看起来还不错。照片呢？
嗯，也一样。当然了，这都是我期望之中的，因为这些文件本来就已经储存在我的设备里了。下面看看“收藏”的界面：
我没有任何收藏的文件，但是当我点按了“了解更多”后… …
“未连接网络”的信息蹦了出来。我不明白为什么蹦出来的不是这个应用的使用说明。尽管如此，这也算是目前为止最赏心悦目的一个错误提示。它的文字直接明白、较充分地利用了屏幕空间，同时看起来也足够聪明。
设置界面：
这里有很多选项。我不会挨个去点一遍，但是和谷歌地图一样，唯一知道哪个功能可以在离线时用的办法就是点点点。
现在我们试试上传一个文件：
我选择”添加文件”… …
然后是“照片”，从本地选择一张图片，然后… …
跳出个错误信息。这里的这条错误信息是有误导性的（稍后你就能知道为什么我这么说）。这条信息告诉我文件上传失败了，但当我关闭它后… …
Dropbox把这张图片放置进了队列以供稍后上传，就像Facebook和Twitter那样。这个结果是好的，但是刚才那条信息真的是在糊弄人。不过总体而言，算是不错的体验。
优点：
离线状态下上传的文件会进入队列
“未连接网络”的错误提示设计的不错
缺点：
帮助内容在离线时看不到
“上传失败”有误导性
好的离线设计的几个要点:
缓存！缓存！缓存！
当我打开一个app的时候，我期望看到的是足量的内容，不管我有没有连接上网络。如果你给我看到的是一片空白，我会选择另外一款在内容缓存机制上做得更好的app。
让人们和内容互动
一个依靠缓存显示信息的解决方案是提供只可读的内容，然而这并不算个好主意。当我在社交信息流里阅读其中一则帖子时，我希望在我有灵感时就能进行评论。如果你要我去等一阵，那么我就无法和这个应用进行互动。
没网的时候上传不了信息是理所当然和可以接受的。作为用户，我只是希望能记录下我的想法，因此提醒我当前处于离线状态且在有网的时候自动发布内容是个值得参考的设计。
让错误信息讲清楚并保持一致性
一个不断在那儿旋转的加载图标是毫无意义的。如果我没连上网络，而你又没缓存任何内容，那么请告知我。这不会让我生气，相反，我很乐意看到符合我预期的体验。
一开始就别让人们去做那些你明知完成不了的事
假如当我为了完成一个任务，一步步快走到最后时，冷不丁发现我压根就不能在离线状态下完成任务，我会暴怒。请在事先就告知我，不要等我开始了再放冷枪。一个值得参考的设计想法是：在离线模式下把那些不能完成的任务入口都隐藏起来。
不要出现自相矛盾的信息
如果你告诉某人他收到一条新的信息，但是当他们打开收件箱时却发现空无一物，留给他们的只有困惑。请确保应用从头到尾的一致性。
对于缓存，广度比深度更重要
如果我能浏览我的信息流，却不能看到我的个人主页，这种体验给人错乱的感觉。缓存所有内容的各一小部分远比完整缓存某几个却无视其它页面来得更好。
空白区域也需要被设计
这些区域往往容易被忽视，但是这些空白区域看起来真心很…空… 大量未利用的屏幕空间被浪费，视觉上也糟糕透顶。这些空白区域完全可以经过设计被用来取悦用户。
比一个空白屏幕更糟糕的是一个塞满了无用UI的界面。确保你的空白界面是简洁而非杂乱不堪的，这很重要。
永远别给用户看到技术语言
反例一枚：’Error: The operation couldn’t be completed. (kCFErrorDomainCFNetwork error 2.）’ 这种错误信息只会让人摸不着头脑。如果你的应用察觉到无法连接网络，那么就用最简单白话的语言告诉用户。
记住用户上次做的事
如果你的应用和定位有关，请做到让用户在打开应用的时候能看到上次的位置。这能帮助他们重获方位并知晓他们在哪。如果你重新连接上了网络，那么就帮他们更新定位到当前的位置。
不要在离线模式下随意清空缓存
我需要借助应用内的数据给我提示、安全感和对周边事物的感知。如果它突然就那么消失了，夸张地说，我也将迷失。只有等到连接上网络才能重新加载那些数据。
设计离线应用可能像是针对边缘情况，但是当你的用户在有需求时，看到你花时间给了他们需要的，愉悦的心情绝对超乎你的想象。
版权所有：UXRen翻译组
除转载文章外，本站所有文章版权归UXRen社区所有，转载请务必标明以下3条信息（来源、译者和审校者），如未标注，视为侵权，13Tech及UXRen社区保留随时追责的权利。