為什么經(jīng)常做APP產(chǎn)品設(shè)計(jì)的分析，分析與熟悉一款app產(chǎn)品，對(duì)于之后的設(shè)計(jì)邏輯能夠更加清晰，而對(duì)于產(chǎn)品邏輯也會(huì)慢慢有一個(gè)更好的認(rèn)知。之后會(huì)通過(guò) 用戶需求 與 用戶體驗(yàn) 繼續(xù)與大家討論，一個(gè)優(yōu)秀的設(shè)計(jì)，其背后蘊(yùn)含了大量的可學(xué)習(xí)知識(shí)，感興趣的朋友可以訂閱?；貧w正題，這篇文章要為大家解析 空白頁(yè)的存在意義及設(shè)計(jì)技巧 。
一、概念
空白頁(yè)：
空白頁(yè)是什么？
空白頁(yè)指的是 當(dāng)前頁(yè)面內(nèi)容為空白，或者當(dāng)前頁(yè)面內(nèi)容錯(cuò)誤、丟失等，與原本跳轉(zhuǎn)頁(yè)面不相符的頁(yè)面，一般以白色頁(yè)面為主，所以一般被稱之為空白頁(yè)。
有人會(huì)問(wèn)，為什么不叫缺失頁(yè)、404頁(yè)，而叫做空白頁(yè)。因?yàn)榭瞻醉?yè)不僅是白色的頁(yè)面，而且還包括了頁(yè)面中的錯(cuò)誤頁(yè)、缺失頁(yè)等等，還是不理解的可以繼續(xù)往下看。
二、分類
以下就空白頁(yè)的 類別 、 產(chǎn)生原因 、 用戶使用場(chǎng)景 與 解決方案 為大家闡述空白頁(yè)的人性化設(shè)計(jì)。
先給大家看一張關(guān)系圖縷清他們各者之間的關(guān)系：
數(shù)據(jù)加載頁(yè)
為什么把加載頁(yè)歸結(jié)到空白頁(yè)中，其實(shí)加載頁(yè)經(jīng)常會(huì)被人所忽略，這里的加載頁(yè)是指頁(yè)面的正在加載。數(shù)據(jù)還未讀取完成，頁(yè)面肯定數(shù)據(jù)不齊全，那么一般加載頁(yè)有兩種展示方式，這里不涉及開(kāi)發(fā)，僅說(shuō)明設(shè)計(jì)展示方式：一種是 全頁(yè)式加載 ，一種是 模塊式加載 （這里的說(shuō)法可能與開(kāi)發(fā)有所出入，僅為了方便設(shè)計(jì)與產(chǎn)品閱讀）。
產(chǎn)生原因：數(shù)據(jù)讀取中
使用場(chǎng)景：當(dāng)用戶第一次打開(kāi)應(yīng)用時(shí)或刷新時(shí)，肯定會(huì)有一個(gè)數(shù)據(jù)加載的過(guò)程，對(duì)于用戶來(lái)說(shuō)，這就是產(chǎn)品的第一印象。有時(shí)候數(shù)據(jù)加載速度非常快可以忽略加載頁(yè)的存在，但是考慮有些使用場(chǎng)景，用戶還是會(huì)看到加載頁(yè)面，像之前體驗(yàn)的一款競(jìng)品，剛打開(kāi)的時(shí)候除了頂部導(dǎo)航欄和底部標(biāo)簽欄，所有東西都是空白，正好那時(shí)候是在網(wǎng)絡(luò)環(huán)境非常差的情況下，用戶心理預(yù)期肯定覺(jué)得這個(gè)產(chǎn)品不是很靠譜。
有道、簡(jiǎn)書(shū)、貓眼電影（全屏加載）
Null頁(yè)（數(shù)據(jù)為空）
這個(gè)頁(yè)面應(yīng)用較為廣泛，在產(chǎn)品中多稱為 無(wú)數(shù)據(jù)頁(yè)面 ，與以上的服務(wù)器異常頁(yè)有所區(qū)別，在上述中頁(yè)面中，服務(wù)器無(wú)法提供正常的信息數(shù)據(jù)，但是在null頁(yè)里，是服務(wù)器本身就不存在相關(guān)的數(shù)據(jù)，也就是 數(shù)據(jù)為空。
產(chǎn)生原因：無(wú)數(shù)據(jù)信息
使用場(chǎng)景：在使用產(chǎn)品時(shí)候，需要用戶創(chuàng)建與存儲(chǔ)信息時(shí)，應(yīng)該有相關(guān)的提示引導(dǎo)內(nèi)容，而當(dāng)頁(yè)面不存在數(shù)據(jù)時(shí)，空白頁(yè)面會(huì)讓用戶存在失落感，怎么樣引導(dǎo)這種失落感讓用戶創(chuàng)建與存儲(chǔ)信息內(nèi)容呢？
例如使用抖音時(shí)，在“我”的頁(yè)面中有個(gè)人作品、喜歡、故事等板塊，如果你沒(méi)有發(fā)布過(guò)任何作品，頁(yè)面肯定是空的，但是在點(diǎn)擊“作品”模塊時(shí)，其對(duì)應(yīng)的“發(fā)布”按鈕上方會(huì)有個(gè)窗口提示，這對(duì)于用戶來(lái)說(shuō)比簡(jiǎn)單的問(wèn)題提示來(lái)的更加淺顯易懂，但是要注意，不是所有Null頁(yè)都合適這種做法，過(guò)多的動(dòng)效、圖形引導(dǎo)會(huì)讓用戶感到視覺(jué)疲勞，要分場(chǎng)合并適可而止。
例：QQ、易信、same
網(wǎng)絡(luò)異常頁(yè)
網(wǎng)絡(luò)異常情況可謂是時(shí)有發(fā)生，在使用產(chǎn)品的過(guò)程中，碰到這類情況的用戶肯定也覺(jué)得莫名其妙。但是網(wǎng)絡(luò)異常情況也就一般只有兩種：
1、斷網(wǎng)弱網(wǎng)：完全沒(méi)有網(wǎng)絡(luò)環(huán)境，或者網(wǎng)絡(luò)信號(hào)弱無(wú)法上傳與加載數(shù)據(jù)
2、切換網(wǎng)絡(luò)：例如在wifi情況下看視頻突然切換為移動(dòng)數(shù)據(jù)網(wǎng)，就會(huì)存在。
產(chǎn)生原因：斷網(wǎng)弱網(wǎng)、切換網(wǎng)絡(luò)
使用場(chǎng)景：用戶正當(dāng)瀏覽信息時(shí)，突然打不開(kāi)產(chǎn)品頁(yè)面，呈現(xiàn)的是空白頁(yè)面，并沒(méi)有什么征兆，在連續(xù)刷新了幾次之后還是一樣，用戶不知道問(wèn)題在哪里，肯定會(huì)離開(kāi)產(chǎn)品去使用另外同類的產(chǎn)品。斷網(wǎng)弱網(wǎng)并不是產(chǎn)品能夠解決的問(wèn)題，但是產(chǎn)品如果不給予用戶正確的信息引導(dǎo)，用戶必然會(huì)把問(wèn)題歸責(zé)于產(chǎn)品本身。
QQ：斷網(wǎng)弱網(wǎng)
優(yōu)酷：斷網(wǎng)弱網(wǎng)
bilibili：網(wǎng)絡(luò)切換
服務(wù)器/系統(tǒng)異常頁(yè)
是當(dāng)前在瀏覽頁(yè)面時(shí)，服務(wù)器 無(wú)法提供正常的信息數(shù)據(jù) ，或者 服務(wù)器無(wú)響應(yīng) ，且不知道原因所返回的頁(yè)面。一般在APP端比較少見(jiàn)，但是也會(huì)存在，無(wú)論是網(wǎng)頁(yè)設(shè)計(jì)還是app設(shè)計(jì)，這個(gè)頁(yè)面的設(shè)計(jì)都是必不可少的。
產(chǎn)生原因：服務(wù)器異常、系統(tǒng)異常、請(qǐng)求未響應(yīng)。
使用場(chǎng)景：對(duì)于用戶來(lái)說(shuō)，時(shí)間是非常寶貴的，產(chǎn)品的目的是滿足用戶需求，當(dāng)用戶無(wú)法滿足需求時(shí)，不滿的情緒便會(huì)增加，積累了不滿的情緒有可能導(dǎo)致用戶對(duì)產(chǎn)品失去信賴感，從而拋棄產(chǎn)品。
用戶的焦躁情緒很大部分來(lái)自于對(duì)于當(dāng)前頁(yè)面的不解，正如用戶在逛街時(shí)，看到一件超級(jí)喜歡的商品，想上去詢問(wèn)價(jià)格，老板不在，員工也不在，這時(shí)用戶從開(kāi)始的疑惑，到離開(kāi)時(shí)的煩躁，都是在沒(méi)有得到相應(yīng)信息的反饋情況下產(chǎn)生的。
三、解決方案
無(wú)數(shù)據(jù)或數(shù)據(jù)異常：
無(wú)數(shù)據(jù)情況下，要引導(dǎo)用戶行為，比如當(dāng)前需要用戶創(chuàng)作的頁(yè)面，但是用戶作品為空時(shí)，可以適當(dāng)添加“創(chuàng)作”按鈕或者跳轉(zhuǎn)接口，指引用戶當(dāng)前頁(yè)面內(nèi)容是可編輯可添加的。再比如社交中的關(guān)注標(biāo)簽，當(dāng)用戶還沒(méi)有關(guān)注的話題時(shí)，可以推薦話題讓用戶關(guān)注。
數(shù)據(jù)異常時(shí)，用戶需要知道 為什么、怎么做 ，通過(guò)圖和文來(lái)為用戶解釋當(dāng)前情況，即便你把服務(wù)器存在的問(wèn)題一一和用戶說(shuō)明，但是用戶想知道的并不是你服務(wù)器中出現(xiàn)的詳細(xì)問(wèn)題，用戶想知道是 簡(jiǎn)單的問(wèn)題與解決的方法。
數(shù)據(jù)加載頁(yè)：
上面我們說(shuō)了，當(dāng)app第一次打開(kāi)時(shí)，可以采用全頁(yè)式加載或模塊式加載，全屏加載頁(yè)面要要注意的是，為用戶傳達(dá)頁(yè)面正在運(yùn)行的信息，這時(shí)候如果有動(dòng)效畫(huà)面能讓用戶有耐心停留當(dāng)前頁(yè)面，而不會(huì)因枯燥乏味地等待失去產(chǎn)品信任感。
模塊加載也可以用在刷新的情況下，能夠確切地告訴用戶還需要加載多少內(nèi)容，在網(wǎng)絡(luò)較慢時(shí)，可以采用 占位符 進(jìn)行設(shè)計(jì)，但是如資訊類，新聞?lì)悜?yīng)用就不適宜使用圖案說(shuō)明，頁(yè)面會(huì)顯得更加復(fù)雜。
網(wǎng)絡(luò)情況：
網(wǎng)絡(luò)情況存在的問(wèn)題必須強(qiáng)調(diào)當(dāng)前 發(fā)生了什么，要怎么做 ，這點(diǎn)和數(shù)據(jù)異常是相似的，遵循“ 用戶不會(huì)犯錯(cuò)”原則 ，如提示文案可以為 “當(dāng)前網(wǎng)絡(luò)異?！薄ⅰ罢?qǐng)檢查當(dāng)前網(wǎng)絡(luò)”、“無(wú)法連接到網(wǎng)絡(luò)等”。
可以按需添加一個(gè)“點(diǎn)擊重連”的按鈕，來(lái)規(guī)避因?yàn)橛脩糇陨懋?dāng)前網(wǎng)絡(luò)不穩(wěn)定或者網(wǎng)絡(luò)切換導(dǎo)致的讀取問(wèn)題。
可以適當(dāng)添加圖案來(lái)為用戶解釋當(dāng)前問(wèn)題，但是有些頁(yè)面不適合添加圖案，比如視頻頁(yè)面。但是，忌諱沒(méi)有任何提示信息，這里我指下微博的，首頁(yè)在沒(méi)有網(wǎng)絡(luò)的情況下，刷下不了，但是沒(méi)有任何提示，這可能會(huì)讓用戶感到困惑，不建議這樣的處理狀況。
四、總結(jié)
針對(duì)空白頁(yè)的設(shè)計(jì)可以見(jiàn)仁見(jiàn)智，不一定是要按照特定的設(shè)計(jì)樣式去解決自己產(chǎn)品中的問(wèn)題，但是空白頁(yè)的設(shè)計(jì)是必要的，它的意義在于為 用戶解釋說(shuō)明，并引導(dǎo)用戶行為 ，可以說(shuō)是非常重要，用戶需要知道自己現(xiàn)在所處的位置、所處的環(huán)境，然后來(lái)判斷接下來(lái)的行為，所以盡可能去引導(dǎo)用戶快捷地完成操作，減輕用戶認(rèn)知負(fù)擔(dān)，才不失為一款好的產(chǎn)品。
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://www.wedoyun.com/news/industry/1885.html
