原作者：Daniel Sauble

譯者：勵定洲 - dingzhou.co.nz

我們不可能無時無刻連接著網(wǎng)絡(luò)。相信每個人或多或少都經(jīng)歷過沒有網(wǎng)絡(luò)的尷尬。當你設(shè)計一款在斷網(wǎng)時壓根不工作的移動應(yīng)用時，你就已經(jīng)定義了這款A(yù)PP的使用情境。

然而請記?。?/p>

如果你在一架飛機上，且你不愿支付wifi的費用時；

你正在沒有移動信號的遠郊露營時；

你有需求斷網(wǎng)片刻時；

你付不起移動數(shù)據(jù)費用時；

還有很多合情合理的原因讓用戶不能接入互聯(lián)網(wǎng)。知道這些，你又會如何設(shè)計你的app呢?

“離線”是否意味著“無內(nèi)容”？

不一定。

每當你打開一個app，它都可能開始下載內(nèi)容。當你離線時，app可以加載已經(jīng)下載好的內(nèi)容來提升用戶的體驗。是的，大多數(shù)app都是這樣做的，然而有一些則做得更好。

下面讓我們一起來看看包括社交、導航和生產(chǎn)在內(nèi)的各式app，在離線時它們是如何表現(xiàn)的。

社交應(yīng)用

作為社交app，一個典型的用例便是瀏覽你的信息流、發(fā)表評論或者其它你覺得有趣的內(nèi)容、管理你的好友。下面我們打開飛行模式來看看會發(fā)生什么事。

Facebook

首先，F(xiàn)acebook：

我們可以看到絕大多數(shù)我們期望看到的：我們的信息流和一個告知我們未連接網(wǎng)絡(luò)的提示。該有的似乎都有了，干得不錯，F(xiàn)acebook。

現(xiàn)在，我們來看看Facebook的其它幾個頁面，不知道會不會有意外的驚喜或驚嚇。首先好友請求頁面：

這個體驗似乎就不那么好了。剛才的“未連接網(wǎng)絡(luò)”提示不見了，取而代之的是一個不停在那兒轉(zhuǎn)的加載圖標。這對于用戶來說真是毫無意義。還有那么多的未利用的空白區(qū)域可以好好開發(fā)一下。

下面，消息界面：

嗯，這下稍微好點了。至少我能看到一些緩存內(nèi)容，即便只有一點。不幸的是，現(xiàn)在這里出現(xiàn)了兩個加載光標= =。我完全不清楚這兩者的區(qū)別是什么，或者到底發(fā)生了什么？同樣地，這個頁面也有很多浪費的空白區(qū)域。

最后，其它頁面（就是那個把所有雜七雜八的玩意兒堆在一起的頁面）：

很明顯，那些本該在最左邊出現(xiàn)的一系列圖標（縮略圖）消失了。這可真夠奇怪的，因為那些圖標都是靜態(tài)內(nèi)容，不至于會經(jīng)常變來變?nèi)グ伞?/p>

現(xiàn)在，我們試著發(fā)布一些內(nèi)容：

顯而易見，一個提示（并非一個錯誤警告?。└嬖V我發(fā)表的內(nèi)容正在隊列中。這能讓我有機會重新提交。：）

由于我本來就沒打算完成這次發(fā)布，于是點按了右上角的“x”。

很好，這次我得到了一個彈窗來讓我再次確認是否需要在連上網(wǎng)絡(luò)后自動發(fā)布內(nèi)容，我也同時可以在想刪的時候刪掉它。Facebook在離線時提供了一個很棒的體驗。

優(yōu)點：

我們可以看到緩存的信息流

離線狀態(tài)下發(fā)布內(nèi)容可以得到明確的提示

缺點：

不那么一致的“未連接網(wǎng)絡(luò)”提示

不斷在那兒旋轉(zhuǎn)的加載圖標

加載內(nèi)容時利用率極低的界面空間

某個頁面（就是那個一堆菜單疊起來的頁面）的圖標竟然都不見了

Pinterest

下面輪到Pinterest了：

當我第一次打開這個app時，這真的是一個再平庸不過的首屏了。沒有任何內(nèi)容可以供我瀏覽。另外，這個app也不解釋為什么這里會空無一物。沒有任何告知我處在離線狀態(tài)下的指示。

和Facebook一樣，我們一起來看看它的其它界面。首先，搜索：

說來也奇怪，這邊倒是有內(nèi)容了。我壓根就沒指望離線下的搜索還能用，但是有趣的是現(xiàn)在能看到這么個似乎完備的界面。同樣地，這個界面也沒有任何表明我處于離線狀態(tài)的提示。

試試看在輸入框里打點字，只是玩玩哈~

這個搜索結(jié)果界面和首屏一樣，完全空白有木有。它只是告訴我沒有對應(yīng)的結(jié)果，卻不告訴我是為什么。難道是我打錯字了？

添加一個新的pin看看會發(fā)生什么：

目前為止一切都好。我想pin一張照片，于是我點按了“photo”。

我可以順利地選擇一張照片，下面試試看把它加入到我的收藏板中：

噗… …Pinterest沒有緩存我建立的所有收藏板。不得已我只能自己創(chuàng)建個新的：

太糟了。Pinterest允許我做了那么多事卻在最后告訴我離線狀態(tài)下不可以Pin東西！它甚至不允許我保存草稿以供有網(wǎng)絡(luò)的時候再pin。

再看看個人主頁是什么樣的：

看起來我好像沒有任何pin和收藏板，當然這是不可能的。Pinterest也不會告訴我原因。搞笑的是，我的頭像下那些數(shù)字都是正確的，這和底下荒蕪的灰色區(qū)域自相矛盾。

如果我點按一下“47 Pins”會發(fā)生什么？

由一個矛盾的界面。右上角顯示“47”，但是底下的列表去告訴我沒有任何pins。這個離線體驗真實糟糕透頂。

優(yōu)點：

優(yōu)點就是沒有優(yōu)點，這也算特點吧？有特點也勉強算好事。

缺點：

沒有緩存內(nèi)容可以展示。（也不解釋原因）

當我要去pin一個東西的時候，整個app真是暢通無阻，直到最后才在累死累活的我面前立塊牌子：“禁入”

個人主頁里的那些數(shù)字和底下現(xiàn)實的內(nèi)容自相矛盾

Instagram

到目前為止，我們可以看到社交app還是有很大的離線體驗差別的。

來看不看Instagram的表現(xiàn)：

看起來和Facebook很相像。有不少的內(nèi)容預(yù)加載了出來，同時還有一個“未連接網(wǎng)絡(luò)”的提示。

看看其它界面。首先是“發(fā)現(xiàn)”：

不好，看不到任何內(nèi)容，但是至少我們不會看到Facebook那樣的無限加載圖標。一個提供直接刷新頁面的功能（右上角）也顯得更加聰明。

個人主頁：

和Pinterest很像，無內(nèi)容顯示。然而，在上方的狀態(tài)簡介里同樣也是空無一物，這就不至于和底下的空白自相矛盾了。同時，Instagram保留了提示沒有連接網(wǎng)絡(luò)的文字信息。

那我們可以編輯我們的個人信息嗎？

答案是不能。另外相較于“未連接網(wǎng)絡(luò)”而言，現(xiàn)在的這一長串提示信息實在是’不清不楚。同樣的，糟糕的界面空間利用。

最后，讓我們試試看直接發(fā)送私信的功能：

和“編輯個人信息”的界面一樣的空白。然而這次上方的提示文字再次無緣故地變了。

總體而言，我會把Instagram的離線體驗排于Facebook和Pinterest之間。不差，但是也不算好。

優(yōu)點：

自始至終都能看到“未連接網(wǎng)絡(luò)”的提示。

缺點：

不能編輯用戶個人信息

首屏的內(nèi)容是唯一被緩存的

低空間利用率

Twitter

再來看看下一個社交應(yīng)用：Twitter。

和Facebook還有Instagram類似，有不少緩存內(nèi)容可以加載出來。只是不像其它應(yīng)用，Twitter并沒有可以告知你當前處于離線狀態(tài)的提示。這不算個大問題，但是我更希望app能那么做。

消息界面

顯而易見，Twitter很充分地利用了緩存。

信息界面：

這里我們可以看到一個直截了當?shù)奈淖中畔⒏嬷覀冎卦嚒Ｋ詈媚苷f明一下信息沒有加載出來的原因，不過這只是吹毛求疵。

在截屏時我其實本來就沒有什么信息在這里。之后我再查看了一下就發(fā)現(xiàn)當離線時能顯示所有的未讀信息，而且不會顯示說有加載問題。這和Twitter的首屏達成了一致性。

下面看看我的個人主頁：

和其它社交應(yīng)用一樣，我的個人信息并沒有被緩存。但是在這里有一個對應(yīng)的文字信息明確告訴我內(nèi)容沒有被加載出來。

那我能編輯我的個人信息嗎？

或許可以？暫時沒有出現(xiàn)任何錯誤信息。讓我做點改變?nèi)缓簏c按“保存”試試。

行不通。一個晦澀難懂的錯誤信息彈了出來。我覺得它最好一開始就屏蔽掉那些在離線狀態(tài)下不能使用的功能，就像“編輯個人信息”這樣的，并且解釋原因，而不是讓用戶可以去點按它們。

現(xiàn)在，我試著發(fā)布一條新的tweet：

點按“Tweet”:

然后… …毫無反應(yīng)。這讓人有點不那么有底氣，我期望出現(xiàn)的是一個提示我的Tweet會在連上網(wǎng)絡(luò)的一瞬間自動發(fā)布出去，就像Facebook做的那樣。

試試看滑動到時間軸的另一視角。先來看看“發(fā)現(xiàn)”：

很好，顯示了緩存內(nèi)容。再來看看“活動”：

一片空白。

點按一下“關(guān)注某人”的按鍵，只是試試：

沒有任何推薦用戶，這是一個很糟糕的空白界面設(shè)計。我之前已經(jīng)抱怨過那些對于空白界面空間的浪費行徑，然而這里干脆給我塞滿了毫無用處的UI，不能更糟！

優(yōu)點：

大量的緩存內(nèi)容。無疑是社交app中的典范

大多數(shù)情況下還算明晰和一致的無網(wǎng)絡(luò)連接錯誤提示

離線狀態(tài)下發(fā)布能Tweet

缺點：

整個app的緩存機制貫徹得并不徹底

看似你可以在離線狀態(tài)下編輯個人信息，直到最后才發(fā)現(xiàn)不行

荒謬的“無法編輯個人信息”的警示

當在離線狀態(tài)下發(fā)送一條tweet后沒有任何確認信息

“關(guān)注某人”的界面設(shè)計實在是糟糕透頂

總結(jié)一下，目前這些社交應(yīng)用都沒法（也不可能）在離線狀態(tài)下獲得完整或優(yōu)秀的體驗，但是其中確實有一些做的比別人好不少。說白了，還有很多提升空間。

導航應(yīng)用

針對導航應(yīng)用，一個典型的用例是指引你前往你要去的地方。這類應(yīng)用在離線狀態(tài)下無法幫你導向一個全新地址，但是我很好奇谷歌地圖和蘋果地圖是如何應(yīng)用它們的緩存的。

谷歌地圖

請記住，在離線模式下，應(yīng)用無法獲悉你的當前位置。我們來看看谷歌地圖是會如何處理這個問題：

它記憶了我上次的位置，并且設(shè)置其為起始點。我們已經(jīng)縮進得比較多了。導航應(yīng)用需要大量的數(shù)據(jù)支持，且需要對緩存信息篩選。我縮放看看谷歌地圖到底緩存了些什么：

波特蘭市區(qū)。那我們可以再縮放嗎？

整個波特蘭城市。更多呢？

到這類就縮放不了了。還不錯，很細致的考慮，雖然我不明白為什么谷歌地圖不加入一個更高級別的地圖，比如整個地球。

那我們在離線時能干些什么呢？

試試看切換到衛(wèi)星視圖：

行不通。看來只有我們的街景試圖被緩存。

設(shè)置界面：

這里有很多入口。由于其中’部分一般人也不會經(jīng)常去碰，我就不一一嘗試了。其中有一些能在離線時用，有的就不行，而且唯一區(qū)別的方法就是每個挨個點進去試，讓人略感不爽。

當我離開設(shè)置界面切換回地圖模式的時候，我震驚了，地圖整個消失了！如果我現(xiàn)在需要看地圖的話豈不是悲劇了？

總而言之，還算是個接受得過去的離線體驗，雖然有時會給我點驚嚇。

優(yōu)點；

記憶了你上次的位置

緩存地圖擁有不錯的細節(jié)

缺點：

強迫我去猜什么在沒網(wǎng)的時候可以用和不可以用

地圖無緣故消失，而且一去不復(fù)返

蘋果地圖

谷歌地圖擁有還算過得去的離線體驗，那么蘋果地圖呢？打開看看再說：

首先，蘋果地圖沒有顯示我上次的位置。而且，它也不顯示我這個默認縮放級別的任何緩存的地圖。

同時，一個彈窗跳出來告訴我需要關(guān)閉飛行模式才能看到我當前位置。我點按了“取消”。下面我們看看縮放地圖會不會看到緩存的地圖。

答案是肯定的，但是并不完整。地圖上顯示的只有波特蘭，俄勒岡州和一些周邊地區(qū)。再縮放看看：

大家看截圖的左上角，奇了怪了，如果你記憶了我上次搜索的位置，那么也應(yīng)該把那塊地方給緩存下來吧。

試試看衛(wèi)星視圖：

空無一物。意料之內(nèi)，畢竟谷歌地圖也一樣沒有緩存衛(wèi)星視圖?？偠灾w表現(xiàn)平淡無奇。

優(yōu)點：

沒啥優(yōu)點值得一說

缺點：

緩存的地圖只有一丁點

不顯示你上次的位置

生產(chǎn)力應(yīng)用：

最后我們再來看看生產(chǎn)力應(yīng)用。對于該類應(yīng)用最主要的用力就是多設(shè)備間同步文件并且你可以打開、操作這些文件。

Dropbox

Dropbox表現(xiàn)如何？

看起來還不錯。照片呢？

嗯，也一樣。當然了，這都是我期望之中的，因為這些文件本來就已經(jīng)儲存在我的設(shè)備里了。下面看看“收藏”的界面：

我沒有任何收藏的文件，但是當我點按了“了解更多”后… …

“未連接網(wǎng)絡(luò)”的信息蹦了出來。我不明白為什么蹦出來的不是這個應(yīng)用的使用說明。盡管如此，這也算是目前為止最賞心悅目的一個錯誤提示。它的文字直接明白、較充分地利用了屏幕空間，同時看起來也足夠聰明。

設(shè)置界面：

這里有很多選項。我不會挨個去點一遍，但是和谷歌地圖一樣，唯一知道哪個功能可以在離線時用的辦法就是點點點。

現(xiàn)在我們試試上傳一個文件：

我選擇”添加文件”… …

然后是“照片”，從本地選擇一張圖片，然后… …

跳出個錯誤信息。這里的這條錯誤信息是有誤導性的（稍后你就能知道為什么我這么說）。這條信息告訴我文件上傳失敗了，但當我關(guān)閉它后… …

Dropbox把這張圖片放置進了隊列以供稍后上傳，就像Facebook和Twitter那樣。這個結(jié)果是好的，但是剛才那條信息真的是在糊弄人。不過總體而言，算是不錯的體驗。

優(yōu)點：

離線狀態(tài)下上傳的文件會進入隊列

“未連接網(wǎng)絡(luò)”的錯誤提示設(shè)計的不錯

缺點：

幫助內(nèi)容在離線時看不到

“上傳失敗”有誤導性

好的離線設(shè)計的幾個要點:

緩存！緩存！緩存！

當我打開一個app的時候，我期望看到的是足量的內(nèi)容，不管我有沒有連接上網(wǎng)絡(luò)。如果你給我看到的是一片空白，我會選擇另外一款在內(nèi)容緩存機制上做得更好的app。

讓人們和內(nèi)容互動

一個依靠緩存顯示信息的解決方案是提供只可讀的內(nèi)容，然而這并不算個好主意。當我在社交信息流里閱讀其中一則帖子時，我希望在我有靈感時就能進行評論。如果你要我去等一陣，那么我就無法和這個應(yīng)用進行互動。

沒網(wǎng)的時候上傳不了信息是理所當然和可以接受的。作為用戶，我只是希望能記錄下我的想法，因此提醒我當前處于離線狀態(tài)且在有網(wǎng)的時候自動發(fā)布內(nèi)容是個值得參考的設(shè)計。

讓錯誤信息講清楚并保持一致性

一個不斷在那兒旋轉(zhuǎn)的加載圖標是毫無意義的。如果我沒連上網(wǎng)絡(luò)，而你又沒緩存任何內(nèi)容，那么請告知我。這不會讓我生氣，相反，我很樂意看到符合我預(yù)期的體驗。

一開始就別讓人們?nèi)プ瞿切┠忝髦瓿刹涣说氖?/h4>

假如當我為了完成一個任務(wù)，一步步快走到最后時，冷不丁發(fā)現(xiàn)我壓根就不能在離線狀態(tài)下完成任務(wù)，我會暴怒。請在事先就告知我，不要等我開始了再放冷槍。一個值得參考的設(shè)計想法是：在離線模式下把那些不能完成的任務(wù)入口都隱藏起來。

不要出現(xiàn)自相矛盾的信息

如果你告訴某人他收到一條新的信息，但是當他們打開收件箱時卻發(fā)現(xiàn)空無一物，留給他們的只有困惑。請確保應(yīng)用從頭到尾的一致性。

對于緩存，廣度比深度更重要

如果我能瀏覽我的信息流，卻不能看到我的個人主頁，這種體驗給人錯亂的感覺。緩存所有內(nèi)容的各一小部分遠比完整緩存某幾個卻無視其它頁面來得更好。

空白區(qū)域也需要被設(shè)計

這些區(qū)域往往容易被忽視，但是這些空白區(qū)域看起來真心很…空...  大量未利用的屏幕空間被浪費，視覺上也糟糕透頂。這些空白區(qū)域完全可以經(jīng)過設(shè)計被用來取悅用戶。

比一個空白屏幕更糟糕的是一個塞滿了無用UI的界面。確保你的空白界面是簡潔而非雜亂不堪的，這很重要。

永遠別給用戶看到技術(shù)語言

反例一枚：'Error: The operation couldn’t be completed. (kCFErrorDomainCFNetwork error 2.）' 這種錯誤信息只會讓人摸不著頭腦。如果你的應(yīng)用察覺到無法連接網(wǎng)絡(luò)，那么就用最簡單白話的語言告訴用戶。

記住用戶上次做的事

如果你的應(yīng)用和定位有關(guān)，請做到讓用戶在打開應(yīng)用的時候能看到上次的位置。這能幫助他們重獲方位并知曉他們在哪。如果你重新連接上了網(wǎng)絡(luò)，那么就幫他們更新定位到當前的位置。

不要在離線模式下隨意清空緩存

我需要借助應(yīng)用內(nèi)的數(shù)據(jù)給我提示、安全感和對周邊事物的感知。如果它突然就那么消失了，夸張地說，我也將迷失。只有等到連接上網(wǎng)絡(luò)才能重新加載那些數(shù)據(jù)。

設(shè)計離線應(yīng)用可能像是針對邊緣情況，但是當你的用戶在有需求時，看到你花時間給了他們需要的，愉悅的心情絕對超乎你的想象。