[產(chǎn)品設(shè)計] [用戶體驗]
轉(zhuǎn)載自：交互設(shè)計學(xué)堂
用戶在使用App時會碰到許多特殊場景：網(wǎng)絡(luò)異常宙彪、信息加載、頁面內(nèi)容為空等有巧。如何友好的設(shè)計這些特殊場景下的App頁面释漆，對于用戶體驗至關(guān)重要，也是產(chǎn)品設(shè)計人員的基本功篮迎。
一. 網(wǎng)絡(luò)異常
網(wǎng)絡(luò)異常呈現(xiàn)在用戶面前有兩種情況男图，一種是網(wǎng)絡(luò)切換，即從WiFi狀態(tài)切換到3G/4G網(wǎng)絡(luò)甜橱；一種是網(wǎng)絡(luò)中斷逊笆，APP與服務(wù)器的數(shù)據(jù)傳輸中斷。
1. 網(wǎng)絡(luò)切換
一些需要消耗大量流量的APP岂傲，用戶一般只會在WiFi的網(wǎng)絡(luò)狀態(tài)下運行难裆，如視頻APP、音樂APP及直播APP镊掖。當(dāng)網(wǎng)絡(luò)狀態(tài)從WiFi切換到3G/4G時差牛，為了防止用戶消耗流量，APP會采取一定的設(shè)計形式來告訴用戶堰乔，網(wǎng)絡(luò)狀態(tài)切換了偏化，請小心。
上圖的QQ音樂镐侯、蝦米音樂不僅提示了用戶的網(wǎng)絡(luò)狀態(tài)切換了侦讨，還告訴了用戶這種情況下該怎么辦，是繼續(xù)用流量播放還是訂購免流量包苟翻。告訴用戶發(fā)生了什么韵卤，遇到了什么問題，也給用戶提供解決問題的辦法和入口崇猫，才是好的設(shè)計沈条。
2. 網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷
網(wǎng)絡(luò)中斷或信號不好，APP無法與服務(wù)器交換數(shù)據(jù)诅炉，這時要分兩種情況考慮：無緩存數(shù)據(jù)時和有緩存數(shù)據(jù)蜡歹。
① 無緩存數(shù)據(jù)時
A. 整頁提示
當(dāng)整個頁面內(nèi)容都因為網(wǎng)絡(luò)異常導(dǎo)致未加載成功，采用整頁提示的方式涕烧。整頁異常的設(shè)計樣式包括三部分：icon或者插畫形式月而；網(wǎng)絡(luò)異常文案；重試或者前往WiFi設(shè)置的button（或者沒有button议纯，直接點擊頁面空白區(qū)域）父款。
上圖分別是閃電購和貓眼的整頁異常設(shè)計，都采用了品牌形象的插畫形式，不僅增添了趣味性還起到了強調(diào)品牌的作用憨攒。閃電購在button下還增加了一個入口：搞不定網(wǎng)絡(luò)世杀，看看小貼士。因為有部分用戶可能并不清楚當(dāng)前的網(wǎng)絡(luò)中斷是由于什么引起的肝集，尤其對于小白用戶來說玫坛，添加一個下貼士的入口，幫助用戶解決問題包晰。
B. 占位符提示
此種情況多出現(xiàn)于采用native技術(shù)架構(gòu)的頁面湿镀，頁面框架是直接呈現(xiàn)的，不需要聯(lián)網(wǎng)伐憾，APP只需要聯(lián)網(wǎng)獲取框架內(nèi)的數(shù)據(jù)即可勉痴。所以頁面呈現(xiàn)出了框架，但是沒有內(nèi)容的情況树肃，這個時候會使用占位符替代未加載出來的圖片蒸矛，用灰色塊替代未加載出來的文字。這種設(shè)計形式有一個最大的好處就是當(dāng)網(wǎng)絡(luò)中斷時間很短時胸嘴，用戶幾乎察覺不到網(wǎng)絡(luò)中斷雏掠，APP就已經(jīng)恢復(fù)正常了。這就是利用設(shè)計技巧劣像，不給用戶帶來額外操作成本和認知負擔(dān)乡话。此外，占位符的方式也可以作為loading的解決方案耳奕。
② 有緩存數(shù)據(jù)時
A. 列表提示
當(dāng)頁面有緩存數(shù)據(jù)時绑青，可以用list的設(shè)計形式，來提示用戶屋群，網(wǎng)絡(luò)異常闸婴，請前去檢查網(wǎng)絡(luò)設(shè)置。
B.dialog提示
除了上述list的提示形式芍躏，還有的APP采用了dialog的形式來提示用戶邪乍。
上面兩個頁面都使用了dialog來提示用戶網(wǎng)絡(luò)異常，采用dialog不僅僅可以提示用戶網(wǎng)絡(luò)異常对竣，還能給出“設(shè)置”的入口庇楞，讓用戶直接前往WiFi界面設(shè)置網(wǎng)絡(luò)。如果僅僅是提示用戶網(wǎng)絡(luò)異常柏肪，直接用toast的會更好姐刁，因為toast不會獲得用戶焦點，并且不會中斷用戶的操作烦味。
C.Toast提示
當(dāng)網(wǎng)絡(luò)信號不好或網(wǎng)絡(luò)中斷時，用戶還在繼續(xù)操作APP，為了提示用戶谬俄，會在用戶每次觸發(fā)操作時利用toast提示用戶網(wǎng)絡(luò)異常柏靶。讓用戶的行為即使在網(wǎng)絡(luò)異常時也能得到反饋。
網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計形式并不是孤立的溃论，也不是只能單獨使用屎蜓，是可以配合使用的。喜馬拉雅的首頁即采用了list方式提示用戶钥勋，同時采用了dialog的形式炬转。
二. 加載處理
大多數(shù)App都要與服務(wù)器進行數(shù)據(jù)的交換，App向服務(wù)器發(fā)出數(shù)據(jù)請求算灸，服務(wù)器接收到請求之后向App傳輸相應(yīng)數(shù)據(jù)扼劈，App接收成功后顯示數(shù)據(jù)內(nèi)容，沒有接收成功則反饋數(shù)據(jù)接收失敗菲驴。在這個數(shù)據(jù)交換過程中荐吵，由于網(wǎng)絡(luò)原因，需要花費一定時間赊瞬，也就是說用戶要等待加載完成先煎，這個時候就要用到loading加載機制，它告訴用戶巧涧，App正在努力為您加載數(shù)據(jù)薯蝎，您稍安勿躁。
1. 用戶谤绳、客戶端和服務(wù)器
作為用戶體驗設(shè)計師良风，不管是產(chǎn)品、交互還是UI闷供，都習(xí)慣于站在人機交互的角度去思考產(chǎn)品設(shè)計問題烟央，在這個過程中往往會忽略了一個重要過程：客戶端和服務(wù)器之間的數(shù)據(jù)請求和傳輸。
用戶與客戶端進行人機交互，觸發(fā)某個操作婿失，客戶端會將用戶觸發(fā)的操作轉(zhuǎn)化為相應(yīng)指令钞艇，向服務(wù)器請求數(shù)據(jù)，若網(wǎng)絡(luò)和服務(wù)器正常豪硅，服務(wù)器會返回數(shù)據(jù)到客戶端哩照，用戶便能看到自己操作所引發(fā)的結(jié)果。整個過程是用戶懒浮、客戶端飘弧、服務(wù)器一起完成的识藤，人與客戶端之間是人機交互研究的領(lǐng)域，而客戶端和服務(wù)器之間的數(shù)據(jù)傳輸更多的是開發(fā)人員所考慮的次伶。例如痴昧，你去京東購物，點擊搜索欄冠王，輸入完關(guān)鍵詞“風(fēng)衣”赶撰，點擊搜索（觸發(fā)了操作），京東APP會將該操作發(fā)送給服務(wù)器柱彻，服務(wù)器將所有有關(guān)風(fēng)衣的信息傳給京東APP豪娜，并通過列表的形式呈現(xiàn)。
數(shù)據(jù)傳輸?shù)那闆r會影響到人機交互哟楷，如果數(shù)據(jù)傳輸遇到網(wǎng)絡(luò)不穩(wěn)定或者服務(wù)器異常瘤载，就要在人機界面體現(xiàn)出來，不然用戶會不知所措吓蘑，產(chǎn)生焦慮惕虑，影響用戶體驗，這就是產(chǎn)品設(shè)計要考慮網(wǎng)絡(luò)和服務(wù)器異常時的交互設(shè)計的原因磨镶。
2. 數(shù)據(jù)加載的幾種形式及對應(yīng)的交互設(shè)計
① 標(biāo)題loading（當(dāng)前頁面）
微信溃蔫、釘釘?shù)榷疾捎昧诉@種形式。聊天列表頁的聊天記錄是儲存在本地的琳猫，所以頁面內(nèi)容不為空伟叛。這個時候加載無需獲取用戶的視覺焦點，只要告知用戶頁面正在請求新數(shù)據(jù)脐嫂，所以選擇在標(biāo)題欄展示App正在加載是個不錯的選擇统刮，加載成功則標(biāo)題欄loading消失，若因為網(wǎng)絡(luò)錯誤未連接服務(wù)器账千，則在標(biāo)題欄顯示未連接狀態(tài)侥蒙。
② 白屏loading（當(dāng)前頁面）
當(dāng)頁面內(nèi)容比較單一匀奏，直接一次性加載完再顯示數(shù)據(jù)鞭衩。多出現(xiàn)在H5頁面，例如微信的文章詳情頁娃善。內(nèi)容加載完成之前界面都會停留在loading界面论衍。很多產(chǎn)品都會采用無限循環(huán)的小菊花，但進度條和有趣的動畫設(shè)計聚磺，更能減輕用戶等待時的焦慮感坯台。
除了進度條+卡通動畫+文案的形式，還有種更為高級的白屏loading樣式瘫寝。左側(cè)的開眼APP蜒蕾，將自己的logo進行變換稠炬，仿佛一個眼睛在轉(zhuǎn)啊轉(zhuǎn)；右側(cè)的好奇心日報APP滥搭，用鉛筆和橡皮擦酸纲，將自己的品牌字母Q捣鲸，進行手寫和擦除瑟匆。這種形式不僅增加了loading的趣味性和設(shè)計感，同時還達到了強化品牌的效果栽惶。
③ 優(yōu)先加載
當(dāng)有文字和圖片時愁溜，圖片會比文字加載的慢，這個時候往往文字先加載外厂，圖片在加載過程中使用占位符冕象，直到圖片加載成功。當(dāng)加載的頁面內(nèi)容有固定的框架時汁蝶，可以先加載框架渐扮，再加載框架內(nèi)的內(nèi)容。通過先加載頁面框架掖棉，設(shè)計占位符等形式可以減少用戶的心理等待時長墓律，提高產(chǎn)品體驗。
微博采用了灰色塊作為圖片的占位符幔亥，而微信公眾號耻讽，則在灰色塊的基礎(chǔ)上增加了無限循環(huán)的loading，除此之外帕棉，還可以使用帶有產(chǎn)品logo或形象的圖片作為占位符针肥。
④ Skeleton Screen
它是一種將未加載出來的內(nèi)容區(qū)域，用灰色的色塊填充的方式香伴。所以整個頁面在加載過程中會給用戶很連貫的感覺慰枕。國外的Facebook，國內(nèi)的簡書即纲、微博具帮、豆瓣都采用了這種加載形式。這種形式一般用于內(nèi)容框架固定的頁面（頁面出現(xiàn)空數(shù)據(jù)的情況不宜使用）崇裁。
如下圖的Facebook首頁匕坯，簡書的首頁和發(fā)現(xiàn)頁，頁面結(jié)構(gòu)固定拔稳，且內(nèi)容不會為空（除非網(wǎng)絡(luò)異常導(dǎo)致加載失敻鹁），就很適合用Skeleton Screen的加載形式巴比。配合優(yōu)先加載的方式术奖，效果會更佳礁遵。
⑤ 下拉刷新加載
Twitter當(dāng)年提出下拉刷新，并被廣泛使用采记，讓用戶能夠手動對當(dāng)前頁面進行更新佣耐，加載的loading樣式可以做進一步設(shè)計，例如QQ將loading動畫和下拉手勢結(jié)合起來唧龄，增加了趣味性兼砖；豆瓣把loading做成了笑臉，給予了產(chǎn)品人性化的設(shè)計既棺。
⑥ 分段加載
當(dāng)新頁面的內(nèi)容有好幾百條甚至更多時讽挟，如果一次性加載所有內(nèi)容，會增加設(shè)備的負擔(dān)丸冕，而且加載內(nèi)容過大耽梅，加載時間會過長，同時APP自身也可以因為運算成本太高而崩潰胖烛。為了解決這個問題眼姐，產(chǎn)生了一種叫分段加載的形式。即：先加載最新的幾十條數(shù)據(jù)佩番，當(dāng)用戶繼續(xù)向上滑動想瀏覽更多時众旗，再加載幾十條。分段加載要在PRD或者交互設(shè)計文檔里明確注明答捕，一次性加載多少條內(nèi)容逝钥，如果內(nèi)容以圖片為主，建議加載20到30條左右拱镐，如果內(nèi)容以文本為主艘款，建議40到60條左右，今日頭條每次分段加載會加載60條新聞沃琅。
⑦ 智能加載
當(dāng)網(wǎng)絡(luò)狀態(tài)不好時哗咆，可以考慮加載低質(zhì)量的圖片，當(dāng)網(wǎng)絡(luò)良好時益眉，則加載高質(zhì)量的圖片晌柬。同理，當(dāng)檢測到用戶正在使用蜂窩數(shù)據(jù)時郭脂，則顯示占位符而不顯示圖片年碘，當(dāng)使用WiFi時則直接加載出圖片。這些設(shè)計方案都是站在用戶的角度展鸡，替用戶著想屿衅。
三. 頁面內(nèi)容為空
用戶最初使用APP或者網(wǎng)頁的時候，許多界面都呈現(xiàn)出“空狀態(tài)”莹弊，所以很有必要將空狀態(tài)納入到新用戶引導(dǎo)流程中涤久。在沒有內(nèi)容時給予明確的指示涡尘，讓用戶更快推進到下一步，需要新用戶花費一步或者多步响迂，去創(chuàng)造內(nèi)容考抄，這種情況非常適合做引導(dǎo)設(shè)計。
① 避免進入死胡同
最糟糕的空頁面設(shè)計是讓用戶感覺進入了死胡同蔗彤。這樣容易讓用戶感到不安川梅，在混亂中可能會導(dǎo)致用戶盲目的去尋找出口。以Modspot發(fā)帖界面為例幕与，非常有效挑势、并且巧妙地減少了用戶的疑慮镇防，告訴了用戶開始發(fā)帖的動作入口啦鸣。
② 確保界面簡潔直觀
好的空數(shù)據(jù)設(shè)計當(dāng)然要保持界面的簡潔，要盡可能干凈利落的把內(nèi)容傳達給用戶来氧，減少認知干擾诫给。在設(shè)計上，必須綜合考慮文案描述和示意圖（表意清晰啦扬，描述簡潔中狂、容易理解），才能有好的效果扑毡。
③ 突出APP的個性與風(fēng)格
給用戶留下好的第一印象不僅僅是界面的可用性胃榕，也要考慮到視覺風(fēng)格。讓用戶感覺到你的APP是讓人印象深刻瞄摊，使用起來又很舒服的勋又。至少與同類產(chǎn)品相比，能感覺到有那么一點點與眾不同换帜，對整個產(chǎn)品體驗的預(yù)期也會有一點點不同楔壤。以下圖 Khaylo Workout空數(shù)據(jù)設(shè)計來說，為整個產(chǎn)品的性情做了風(fēng)格生的設(shè)定惯驼。
④ 鼓勵用戶采取行動
為了讓用戶再次使用的時候蹲嚣，不會依舊面對空數(shù)據(jù)，我們首先要做的是說服用戶盡快行動起來祟牲。我們不僅僅要在用戶與應(yīng)用界面交互的時候告訴其將要獲取什么好處隙畜，更要引導(dǎo)用戶按其所需行動起來。
Facebook的Messenger模塊说贝，當(dāng)用戶第一次到達這個界面時议惰，會看到Messenger這款產(chǎn)品的優(yōu)勢-可以發(fā)送包含圖片與視頻的訊息，并且速度跟短信一樣的快狂丝。除此之外换淆，用戶還知道有多少Facebook好友已經(jīng)在使用了哗总。一旦用戶點擊了“開始安裝”按鈕，這就意味了空狀態(tài)因此消失的可能性倍试。安裝按鈕如此清晰明了讯屈，用戶又何樂而不為呢？
⑤ 盡可能提供個性化內(nèi)容
讓自己的APP看起來更有特色县习，最終是為了更快向用戶傳達產(chǎn)品價值涮母。在目標(biāo)用戶還沒有行動之前，需要傳達與用戶需求與利益相匹配的內(nèi)容躁愿。用戶會根據(jù)APP簡明扼要的描述來為空數(shù)據(jù)界面創(chuàng)造新內(nèi)容叛本。為新用戶提供一些有效信息，促進他們能夠以正確的或者更快捷的方式探索APP彤钟。
⑥ 展示成功狀態(tài)
通過達成成就的方式幫助用戶獲得最初的成就感逸雹。當(dāng)用戶完成一個重要的任務(wù)的時候营搅，這一時刻是創(chuàng)造產(chǎn)品和用戶之間情感聯(lián)系的重要機會，你要讓用戶知道梆砸，他們做的很好转质，要承認他們的進步，并且同用戶一起慶祝帖世。MailChimp 就是個典型休蟹，他們在新用戶發(fā)布第一次郵件的過程中，不斷添加有趣的日矫、幽默的獎勵來推動用戶完成他們的第一封郵件的發(fā)送赂弓。
趁著慶祝用戶做得很棒的同時，鼓勵用戶更深入的體驗產(chǎn)品搬男。例如拣展，Writeupp的用戶如果清理了任務(wù)列表，這當(dāng)然是一個很積極主動的行為缔逛，Writeupp會告訴用戶“您做的很棒备埃！”作為鼓勵。成功提示可以很好的愉悅用戶褐奴，并且能夠促進用戶參與下一步的行動按脚。
