設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候量蕊，常常會(huì)忽略的一個(gè)頁(yè)面狀態(tài)就是空狀態(tài)铺罢。空狀態(tài)残炮，顧名思義就是空白的狀態(tài)韭赘，比如說(shuō)：一個(gè)新聞的列表中沒(méi)有新聞，這個(gè)時(shí)候列表就是空的势就，用戶打開之后看到的就是白慘慘的一片泉瞻。空狀態(tài)的用戶體驗(yàn)非常差苞冯，就好比千辛萬(wàn)苦經(jīng)歷九九八十一難的唐僧師徒最后取到了一堆空白的佛經(jīng)一樣袖牙，用戶在經(jīng)歷了查找，在萬(wàn)千的APP中選中了你舅锄，然后經(jīng)過(guò)漫長(zhǎng)的下載等待和安裝鞭达，最后你竟然給我一個(gè)空頁(yè)面。用戶只會(huì)想：Are you kidding me（你在逗我玩嗎）？所以隨之而來(lái)的碉怔，用戶當(dāng)然頭也不回就走了烘贴。
當(dāng)然，以上只是舉了一個(gè)例子撮胧，空狀態(tài)有可能出現(xiàn)在APP首次啟動(dòng)時(shí)，但是卻不僅僅局限于此老翘，有很多地方都有可能出現(xiàn)空狀態(tài)芹啥，一不小心就會(huì)放過(guò)這些空狀態(tài)，影響APP的用戶體驗(yàn)铺峭。APP的空白狀態(tài)可能出現(xiàn)在如下的場(chǎng)景：用戶未進(jìn)行操作墓怀、用戶操作結(jié)果和網(wǎng)絡(luò)出錯(cuò)。
1.用戶未進(jìn)行操作
在我一開始舉的例子中卫键，用戶第一次打開APP時(shí)有可能會(huì)空狀態(tài)傀履，特別是一些UGC應(yīng)用。當(dāng)然這種設(shè)計(jì)也很好理解莉炉，用戶第一次啟動(dòng)钓账，又是UGC應(yīng)用，用戶什么操作也沒(méi)有絮宁，所以當(dāng)然是空白的啦梆暮。只是，這種空白狀態(tài)看似合理绍昂，但是在合情上面卻值得商榷啦粹。而且，據(jù)我觀察窘游，空狀態(tài)的出現(xiàn)不僅于此唠椭。有些APP在每次啟動(dòng)的時(shí)候都會(huì)采用一個(gè)空白刷新的邏輯（詳細(xì)請(qǐng)看文章：無(wú)意發(fā)現(xiàn)的刷新類型區(qū)分），這時(shí)候也會(huì)出現(xiàn)一個(gè)空白的頁(yè)面忍饰。所以贪嫂，在設(shè)計(jì)應(yīng)用啟動(dòng)時(shí)，需要關(guān)注一下有可能出現(xiàn)的空狀態(tài)喘批。
2.用戶操作結(jié)果
第二種空狀態(tài)是一種用戶操作的結(jié)果撩荣。這種狀態(tài)常常出現(xiàn)在一個(gè)任務(wù)列表中的所有任務(wù)都處理完成的時(shí)候。比如垃圾郵件饶深、廣告郵件列表餐曹，有些用戶會(huì)有清空這些郵件的習(xí)慣，清空了之后自然而然就會(huì)出現(xiàn)一個(gè)空狀態(tài)敌厘。其次就是台猴，當(dāng)用戶進(jìn)行檢索或者篩選的時(shí)候，沒(méi)有符合的結(jié)果，這樣子沉陷出來(lái)就是空狀態(tài)饱狂。
與第一種情況不同的時(shí)曹步，由于用戶操作形成的空狀態(tài)是無(wú)可避免的。不可避免的意思就是說(shuō)休讳，我們只能告訴用戶這是一個(gè)空狀態(tài)讲婚，除此之外，我們沒(méi)有其他的方式俊柔。而在啟動(dòng)是出現(xiàn)的空狀態(tài)時(shí)筹麸，我們可以通過(guò)其他方式去掩蓋“這里有一個(gè)空狀態(tài)”的事實(shí)，具體我們下面再表雏婶。
3.出現(xiàn)錯(cuò)誤
最后一種空狀態(tài)出現(xiàn)在異常流的時(shí)候物赶。比如說(shuō)，當(dāng)網(wǎng)絡(luò)錯(cuò)誤的時(shí)候留晚，可能就會(huì)出現(xiàn)空白狀態(tài)酵紫。當(dāng)然，原理也很簡(jiǎn)單。本來(lái)是要從互聯(lián)網(wǎng)中加載一些東西，現(xiàn)在加載不了了棋傍，所以當(dāng)然就是空狀態(tài)咯建车。當(dāng)然，一般來(lái)說(shuō)，出現(xiàn)錯(cuò)誤的時(shí)候會(huì)有錯(cuò)誤描述。只是，如果只有兩行空洞的文體告訴你除了問(wèn)題泽示，貌似用戶感受起來(lái)也不會(huì)太舒服吧。所以蜜氨，如果只是兩三行的文字械筛，我個(gè)人覺(jué)得這跟空白其實(shí)區(qū)別也不大。
對(duì)于空狀態(tài)出現(xiàn)的情況飒炎，暫且討論到這里埋哟，下面談?wù)勅绾蜗麥邕@些空狀態(tài)，提升用戶體驗(yàn)郎汪〕嗌蓿總結(jié)一下，主要有如下的幾個(gè)措施：①使用系統(tǒng)推薦項(xiàng)煞赢；②使用操作指引抛计；③使用緩存；④情感化表達(dá)照筑；⑤提供新的任務(wù)吹截。
1.使用系統(tǒng)推薦項(xiàng)
既然空狀態(tài)如此影響用戶體驗(yàn)瘦陈，那么最直觀的想法當(dāng)然是往空白界面填充一些東西，這樣就不是空狀態(tài)了波俄。對(duì)于一些信息瀏覽頁(yè)面來(lái)說(shuō)晨逝，這的確是一個(gè)非常簡(jiǎn)便易行的方法。既然沒(méi)有東西懦铺，那么我們系統(tǒng)就推薦一些東西給用戶捉貌，這樣界面就不會(huì)空蕩蕩啦。所以說(shuō)冬念，這種方法非常適合在應(yīng)用啟動(dòng)時(shí)（并且是初次啟動(dòng)時(shí)）使用昏翰，而且，這種方法其實(shí)現(xiàn)在已經(jīng)非常流行了刘急。
比如說(shuō)：在除此打開Anyview時(shí)，系統(tǒng)在展示“書架”這個(gè)頁(yè)面浸踩，按理說(shuō)叔汁，我沒(méi)有進(jìn)行任何操作，這個(gè)界面當(dāng)然是空的啦检碗。不過(guò)既然空狀態(tài)如此不堪据块，那么Anyview就自動(dòng)塞進(jìn)去了一堆書。這樣就完美地解決了問(wèn)題折剃。不過(guò)塞什么東西進(jìn)去是有講究的另假，通常是一些熱門的東西。至于Anyview怕犁，他會(huì)先讓我回答一些問(wèn)題边篮，在獲取了一些基本數(shù)據(jù)之后，它才給我推薦了這些書籍奏甫，這樣推薦的精準(zhǔn)度也會(huì)高些「杲危現(xiàn)在的閱讀軟件基本都沿用了這種方法。
當(dāng)然阵子，在其他的瀏覽頁(yè)面思杯，比如說(shuō)lofter、花瓣等圖片社區(qū)挠进，也會(huì)采用這種方式色乾。所以，現(xiàn)在對(duì)于此類應(yīng)用领突，空白界面越來(lái)越少見了暖璧。
2.使用操作指引
在有些場(chǎng)景下，的確是可以通過(guò)系統(tǒng)推薦項(xiàng)來(lái)達(dá)到無(wú)中生有的目的攘须。比如說(shuō)：在我的關(guān)注人的狀態(tài)中漆撞，可以插入系統(tǒng)推薦的狀態(tài)來(lái)以假亂真殴泰。但是，這種方法確實(shí)不是萬(wàn)能的浮驳。舉個(gè)例子悍汛，假設(shè)有一款圖片分享類的應(yīng)用，然后有個(gè)頁(yè)面是“我的圖片”至会，如果在我從來(lái)沒(méi)有發(fā)布過(guò)圖片的時(shí)候离咐，這個(gè)頁(yè)面理所應(yīng)當(dāng)就是空的。并且在這個(gè)時(shí)候奉件，第一種方法顯然是不可行的宵蛀。當(dāng)然，空蕩蕩的界面有不好县貌，所以此時(shí)可以通過(guò)操作指引來(lái)引導(dǎo)用戶產(chǎn)生內(nèi)容术陶。
這時(shí)候的邏輯是這樣子的：界面展示用戶產(chǎn)生的內(nèi)容→用戶沒(méi)有產(chǎn)生內(nèi)容→我們來(lái)指引用戶產(chǎn)生內(nèi)容。這樣子即消滅了空頁(yè)面煤痕，又可以讓用戶產(chǎn)生內(nèi)容梧宫，一舉兩得。而且摆碉，這種方法還可以解決一種問(wèn)題：用戶不知道生產(chǎn)內(nèi)容的入口在哪塘匣。所以，這么一看巷帝，這種方法簡(jiǎn)直是一石三鳥忌卤。
操作指引有兩種方式，一種是通過(guò)浮層來(lái)引導(dǎo)操作入口楞泼，另一種是創(chuàng)建快捷入口驰徊。說(shuō)文字比較蒼白，直接看下面的配圖吧现拒。
對(duì)于這兩種方法辣垒，各有利弊吧：創(chuàng)建快捷入口的引導(dǎo)性非常強(qiáng)，用戶容易注意到印蔬，操作也簡(jiǎn)便勋桶；浮層指引的話引導(dǎo)性沒(méi)有快捷入口那么強(qiáng)，不過(guò)勝在用戶教育好侥猬，下次用戶就知道從這里產(chǎn)生內(nèi)容了例驹。相比較而言，我會(huì)更加偏向浮層指引這種方式退唠。
3.使用緩存
雖然我在無(wú)意發(fā)現(xiàn)的刷新類型區(qū)分中針對(duì)空白頁(yè)面刷新這種情況的出現(xiàn)做了一番解釋鹃锈，但是我至始至終還是覺(jué)得這種方式體驗(yàn)不太好。針對(duì)這種情況瞧预，使用緩存是一種非常直觀的方式屎债。把之前的的內(nèi)容存儲(chǔ)下來(lái)仅政，在展示頁(yè)面的時(shí)候先展示緩存的內(nèi)容，再加載新內(nèi)容盆驹，這樣就非常簡(jiǎn)單地把空狀態(tài)消滅了≡驳ぃ現(xiàn)在大多數(shù)的資訊瀏覽類的頁(yè)面都會(huì)采用這種方式，比如說(shuō)朋友圈躯喇，網(wǎng)易新聞等等辫封，以至于大家都習(xí)以為常了，反而忘了其實(shí)這也是消滅空狀態(tài)的一種方式廉丽。
4.情感化表達(dá)
當(dāng)空白界面是用戶操作的結(jié)果時(shí)倦微，我曾說(shuō)過(guò)這里其實(shí)沒(méi)有太多的方法，我們只能老老實(shí)實(shí)地跟用戶說(shuō)這里就是空白狀態(tài)正压。只是欣福，在這樣一個(gè)追求用戶體驗(yàn)的年代，大家也開始把這個(gè)提醒表達(dá)得更加生動(dòng)形象一些焦履。在這里會(huì)加入一些情感化的表達(dá)劣欢，而不僅僅只是冷冰冰的文字，比如加上俏皮的圖像裁良，或者把文案寫得更加戲劇化一些。這些配圖在讓用戶明白當(dāng)前的狀態(tài)的同時(shí)校套，往往也能引發(fā)用戶會(huì)心一笑价脾，從而彌補(bǔ)空白頁(yè)面帶來(lái)的失落感甚至可以帶給用戶一些正面的情感。如下圖：
這是一個(gè)吃藥計(jì)劃的app笛匙，設(shè)置好之后侨把，每天按照時(shí)間表來(lái)按時(shí)吃藥。當(dāng)天計(jì)劃完成的時(shí)候妹孙，列表顯示為空秋柄，但是上面有個(gè)大大的笑臉，還加了一句話“今天的用藥計(jì)劃完成咯蠢正，明天再見吧”骇笔。不得不說(shuō)，這種情感化的表達(dá)確實(shí)比空白狀態(tài)或者單純的幾句話要來(lái)的更加貼心嚣崭。
這是一個(gè)出錯(cuò)的頁(yè)面笨触，圖案是一個(gè)流落荒島的場(chǎng)景，文案是“糟糕雹舀，連接掉線了芦劣。冷靜一下，生個(gè)火然后下拉刷新一下吧”说榆。通過(guò)一種俏皮的圖案和文案虚吟，確實(shí)可以舒緩用戶掉線時(shí)的挫敗感寸认。
更多的情感化表達(dá)的例子可以參考：Empty States 。
5.提供新的任務(wù)
前面的四種方法其實(shí)說(shuō)到底串慰，都是在彌補(bǔ)當(dāng)前任務(wù)失敗造成的失落感偏塞。也就是說(shuō)，我們的落腳點(diǎn)仍舊在當(dāng)前的任務(wù)中模庐。不過(guò)烛愧，當(dāng)當(dāng)前的任務(wù)完全不可行的時(shí)候，這時(shí)候就需要考慮新的方法了掂碱。比如怜姿，提供給用戶新的任務(wù)，讓他暫時(shí)忘記當(dāng)前的任務(wù)疼燥，自然而然就不會(huì)有挫敗感了沧卢。
舉個(gè)例子吧，當(dāng)在斷網(wǎng)的情況下用戶使用chrome瀏覽器瀏覽網(wǎng)頁(yè)的時(shí)候醉者，界面會(huì)顯示一個(gè)小游戲但狭。這是一個(gè)通過(guò)空格鍵操縱小恐龍躲避障礙的游戲，游戲雖小撬即，但是趣味性十足立磁。在瀏覽網(wǎng)頁(yè)失敗的時(shí)候，提供這么一個(gè)小游戲去分散用戶的注意力剥槐。不得不說(shuō)唱歧，這確實(shí)是一個(gè)非常好的維度。
再舉個(gè)例子粒竖，當(dāng)訪問(wèn)騰訊系的網(wǎng)頁(yè)訪問(wèn)失敗的時(shí)候颅崩，網(wǎng)頁(yè)除了顯示404狀態(tài)之外，還會(huì)顯示一個(gè)尋人啟事蕊苗。把錯(cuò)誤界面和公益結(jié)合在一起沿后，不得不說(shuō)，創(chuàng)意十足朽砰。既解決了空狀態(tài)的問(wèn)題尖滚，又做了好事，一舉兩得瞧柔。而且用戶可能可能被這個(gè)公益的舉動(dòng)吸引了熔掺，然后就成功地轉(zhuǎn)移了這是一個(gè)404頁(yè)面的事實(shí)。
洋洋灑灑講了這么多非剃，最后總結(jié)一下就是以上這張圖置逻。記住空狀態(tài)可能出現(xiàn)的場(chǎng)景，當(dāng)設(shè)計(jì)走到這個(gè)場(chǎng)景的時(shí)候留多一個(gè)心眼备绽，然后按圖索驥即可券坞。
