[產品設計] [用戶體驗]
轉載自：交互設計學堂
用戶在使用App時會碰到許多特殊場景：網絡異常、信息加載、頁面內容為空等。如何友好的設計這些特殊場景下的App頁面，對于用戶體驗至關重要，也是產品設計人員的基本功。
一. 網絡異常
網絡異常呈現在用戶面前有兩種情況，一種是網絡切換，即從WiFi狀態切換到3G/4G網絡；一種是網絡中斷，APP與服務器的數據傳輸中斷。
1. 網絡切換
一些需要消耗大量流量的APP，用戶一般只會在WiFi的網絡狀態下運行，如視頻APP、音樂APP及直播APP。當網絡狀態從WiFi切換到3G/4G時，為了防止用戶消耗流量，APP會采取一定的設計形式來告訴用戶，網絡狀態切換了，請小心。
上圖的QQ音樂、蝦米音樂不僅提示了用戶的網絡狀態切換了，還告訴了用戶這種情況下該怎么辦，是繼續用流量播放還是訂購免流量包。告訴用戶發生了什么，遇到了什么問題，也給用戶提供解決問題的辦法和入口，才是好的設計。
2. 網絡信號不好或網絡中斷
網絡中斷或信號不好，APP無法與服務器交換數據，這時要分兩種情況考慮：無緩存數據時和有緩存數據。
① 無緩存數據時
A. 整頁提示
當整個頁面內容都因為網絡異常導致未加載成功，采用整頁提示的方式。整頁異常的設計樣式包括三部分：icon或者插畫形式；網絡異常文案；重試或者前往WiFi設置的button（或者沒有button，直接點擊頁面空白區域）。
上圖分別是閃電購和貓眼的整頁異常設計，都采用了品牌形象的插畫形式，不僅增添了趣味性還起到了強調品牌的作用。閃電購在button下還增加了一個入口：搞不定網絡，看看小貼士。因為有部分用戶可能并不清楚當前的網絡中斷是由于什么引起的，尤其對于小白用戶來說，添加一個下貼士的入口，幫助用戶解決問題。
B. 占位符提示
此種情況多出現于采用native技術架構的頁面，頁面框架是直接呈現的，不需要聯網，APP只需要聯網獲取框架內的數據即可。所以頁面呈現出了框架，但是沒有內容的情況，這個時候會使用占位符替代未加載出來的圖片，用灰色塊替代未加載出來的文字。這種設計形式有一個最大的好處就是當網絡中斷時間很短時，用戶幾乎察覺不到網絡中斷，APP就已經恢復正常了。這就是利用設計技巧，不給用戶帶來額外操作成本和認知負擔。此外，占位符的方式也可以作為loading的解決方案。
② 有緩存數據時
A. 列表提示
當頁面有緩存數據時，可以用list的設計形式，來提示用戶，網絡異常，請前去檢查網絡設置。
B.dialog提示
除了上述list的提示形式，還有的APP采用了dialog的形式來提示用戶。
上面兩個頁面都使用了dialog來提示用戶網絡異常，采用dialog不僅僅可以提示用戶網絡異常，還能給出“設置”的入口，讓用戶直接前往WiFi界面設置網絡。如果僅僅是提示用戶網絡異常，直接用toast的會更好，因為toast不會獲得用戶焦點，并且不會中斷用戶的操作。
C.Toast提示
當網絡信號不好或網絡中斷時，用戶還在繼續操作APP，為了提示用戶，會在用戶每次觸發操作時利用toast提示用戶網絡異常。讓用戶的行為即使在網絡異常時也能得到反饋。
網絡異常的兩種情況以及五種設計形式并不是孤立的，也不是只能單獨使用，是可以配合使用的。喜馬拉雅的首頁即采用了list方式提示用戶，同時采用了dialog的形式。
二. 加載處理
大多數App都要與服務器進行數據的交換，App向服務器發出數據請求，服務器接收到請求之后向App傳輸相應數據，App接收成功后顯示數據內容，沒有接收成功則反饋數據接收失敗。在這個數據交換過程中，由于網絡原因，需要花費一定時間，也就是說用戶要等待加載完成，這個時候就要用到loading加載機制，它告訴用戶，App正在努力為您加載數據，您稍安勿躁。
1. 用戶、客戶端和服務器
作為用戶體驗設計師，不管是產品、交互還是UI，都習慣于站在人機交互的角度去思考產品設計問題，在這個過程中往往會忽略了一個重要過程：客戶端和服務器之間的數據請求和傳輸。
用戶與客戶端進行人機交互，觸發某個操作，客戶端會將用戶觸發的操作轉化為相應指令，向服務器請求數據，若網絡和服務器正常，服務器會返回數據到客戶端，用戶便能看到自己操作所引發的結果。整個過程是用戶、客戶端、服務器一起完成的，人與客戶端之間是人機交互研究的領域，而客戶端和服務器之間的數據傳輸更多的是開發人員所考慮的。例如，你去京東購物，點擊搜索欄，輸入完關鍵詞“風衣”，點擊搜索（觸發了操作），京東APP會將該操作發送給服務器，服務器將所有有關風衣的信息傳給京東APP，并通過列表的形式呈現。
數據傳輸的情況會影響到人機交互，如果數據傳輸遇到網絡不穩定或者服務器異常，就要在人機界面體現出來，不然用戶會不知所措，產生焦慮，影響用戶體驗，這就是產品設計要考慮網絡和服務器異常時的交互設計的原因。
2. 數據加載的幾種形式及對應的交互設計
① 標題loading（當前頁面）
微信、釘釘等都采用了這種形式。聊天列表頁的聊天記錄是儲存在本地的，所以頁面內容不為空。這個時候加載無需獲取用戶的視覺焦點，只要告知用戶頁面正在請求新數據，所以選擇在標題欄展示App正在加載是個不錯的選擇，加載成功則標題欄loading消失，若因為網絡錯誤未連接服務器，則在標題欄顯示未連接狀態。
② 白屏loading（當前頁面）
當頁面內容比較單一，直接一次性加載完再顯示數據。多出現在H5頁面，例如微信的文章詳情頁。內容加載完成之前界面都會停留在loading界面。很多產品都會采用無限循環的小菊花，但進度條和有趣的動畫設計，更能減輕用戶等待時的焦慮感。
除了進度條+卡通動畫+文案的形式，還有種更為高級的白屏loading樣式。左側的開眼APP，將自己的logo進行變換，仿佛一個眼睛在轉啊轉；右側的好奇心日報APP，用鉛筆和橡皮擦，將自己的品牌字母Q，進行手寫和擦除。這種形式不僅增加了loading的趣味性和設計感，同時還達到了強化品牌的效果。
③ 優先加載
當有文字和圖片時，圖片會比文字加載的慢，這個時候往往文字先加載，圖片在加載過程中使用占位符，直到圖片加載成功。當加載的頁面內容有固定的框架時，可以先加載框架，再加載框架內的內容。通過先加載頁面框架，設計占位符等形式可以減少用戶的心理等待時長，提高產品體驗。
微博采用了灰色塊作為圖片的占位符，而微信公眾號，則在灰色塊的基礎上增加了無限循環的loading，除此之外，還可以使用帶有產品logo或形象的圖片作為占位符。
④ Skeleton Screen
它是一種將未加載出來的內容區域，用灰色的色塊填充的方式。所以整個頁面在加載過程中會給用戶很連貫的感覺。國外的Facebook，國內的簡書、微博、豆瓣都采用了這種加載形式。這種形式一般用于內容框架固定的頁面（頁面出現空數據的情況不宜使用）。
如下圖的Facebook首頁，簡書的首頁和發現頁，頁面結構固定，且內容不會為空（除非網絡異常導致加載失敗），就很適合用Skeleton Screen的加載形式。配合優先加載的方式，效果會更佳。
⑤ 下拉刷新加載
Twitter當年提出下拉刷新，并被廣泛使用，讓用戶能夠手動對當前頁面進行更新，加載的loading樣式可以做進一步設計，例如QQ將loading動畫和下拉手勢結合起來，增加了趣味性；豆瓣把loading做成了笑臉，給予了產品人性化的設計。
⑥ 分段加載
當新頁面的內容有好幾百條甚至更多時，如果一次性加載所有內容，會增加設備的負擔，而且加載內容過大，加載時間會過長，同時APP自身也可以因為運算成本太高而崩潰。為了解決這個問題，產生了一種叫分段加載的形式。即：先加載最新的幾十條數據，當用戶繼續向上滑動想瀏覽更多時，再加載幾十條。分段加載要在PRD或者交互設計文檔里明確注明，一次性加載多少條內容，如果內容以圖片為主，建議加載20到30條左右，如果內容以文本為主，建議40到60條左右，今日頭條每次分段加載會加載60條新聞。
⑦ 智能加載
當網絡狀態不好時，可以考慮加載低質量的圖片，當網絡良好時，則加載高質量的圖片。同理，當檢測到用戶正在使用蜂窩數據時，則顯示占位符而不顯示圖片，當使用WiFi時則直接加載出圖片。這些設計方案都是站在用戶的角度，替用戶著想。
三. 頁面內容為空
用戶最初使用APP或者網頁的時候，許多界面都呈現出“空狀態”，所以很有必要將空狀態納入到新用戶引導流程中。在沒有內容時給予明確的指示，讓用戶更快推進到下一步，需要新用戶花費一步或者多步，去創造內容，這種情況非常適合做引導設計。
① 避免進入死胡同
最糟糕的空頁面設計是讓用戶感覺進入了死胡同。這樣容易讓用戶感到不安，在混亂中可能會導致用戶盲目的去尋找出口。以Modspot發帖界面為例，非常有效、并且巧妙地減少了用戶的疑慮，告訴了用戶開始發帖的動作入口。
② 確保界面簡潔直觀
好的空數據設計當然要保持界面的簡潔，要盡可能干凈利落的把內容傳達給用戶，減少認知干擾。在設計上，必須綜合考慮文案描述和示意圖（表意清晰，描述簡潔、容易理解），才能有好的效果。
③ 突出APP的個性與風格
給用戶留下好的第一印象不僅僅是界面的可用性，也要考慮到視覺風格。讓用戶感覺到你的APP是讓人印象深刻，使用起來又很舒服的。至少與同類產品相比，能感覺到有那么一點點與眾不同，對整個產品體驗的預期也會有一點點不同。以下圖 Khaylo Workout空數據設計來說，為整個產品的性情做了風格生的設定。
④ 鼓勵用戶采取行動
為了讓用戶再次使用的時候，不會依舊面對空數據，我們首先要做的是說服用戶盡快行動起來。我們不僅僅要在用戶與應用界面交互的時候告訴其將要獲取什么好處，更要引導用戶按其所需行動起來。
Facebook的Messenger模塊，當用戶第一次到達這個界面時，會看到Messenger這款產品的優勢-可以發送包含圖片與視頻的訊息，并且速度跟短信一樣的快。除此之外，用戶還知道有多少Facebook好友已經在使用了。一旦用戶點擊了“開始安裝”按鈕，這就意味了空狀態因此消失的可能性。安裝按鈕如此清晰明了，用戶又何樂而不為呢？
⑤ 盡可能提供個性化內容
讓自己的APP看起來更有特色，最終是為了更快向用戶傳達產品價值。在目標用戶還沒有行動之前，需要傳達與用戶需求與利益相匹配的內容。用戶會根據APP簡明扼要的描述來為空數據界面創造新內容。為新用戶提供一些有效信息，促進他們能夠以正確的或者更快捷的方式探索APP。
⑥ 展示成功狀態
通過達成成就的方式幫助用戶獲得最初的成就感。當用戶完成一個重要的任務的時候，這一時刻是創造產品和用戶之間情感聯系的重要機會，你要讓用戶知道，他們做的很好，要承認他們的進步，并且同用戶一起慶祝。MailChimp 就是個典型，他們在新用戶發布第一次郵件的過程中，不斷添加有趣的、幽默的獎勵來推動用戶完成他們的第一封郵件的發送。
趁著慶祝用戶做得很棒的同時，鼓勵用戶更深入的體驗產品。例如，Writeupp的用戶如果清理了任務列表，這當然是一個很積極主動的行為，Writeupp會告訴用戶“您做的很棒！”作為鼓勵。成功提示可以很好的愉悅用戶，并且能夠促進用戶參與下一步的行動。
