當前位置:首頁 > 新聞中心 > 互聯(lián)網(wǎng)動態(tài)
淺析app設計:空白頁的存在價值與設計方案責任編輯 :李飛    文章來源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時間 :2017-09-12    閱讀次數(shù):2681     專題 :APP制作

為什么經(jīng)常做APP產(chǎn)品設計的分析,分析與熟悉一款app產(chǎn)品,對于之后的設計邏輯能夠更加清晰,而對于產(chǎn)品邏輯也會慢慢有一個更好的認知。之后會通過 用戶需求 與 用戶體驗 繼續(xù)與大家討論,一個優(yōu)秀的設計,其背后蘊含了大量的可學習知識,感興趣的朋友可以訂閱?;貧w正題,這篇文章要為大家解析 空白頁的存在意義及設計技巧 。


一、概念

空白頁:

空白頁是什么?

空白頁指的是 當前頁面內(nèi)容為空白,或者當前頁面內(nèi)容錯誤、丟失等,與原本跳轉(zhuǎn)頁面不相符的頁面,一般以白色頁面為主,所以一般被稱之為空白頁。

有人會問,為什么不叫缺失頁、404頁,而叫做空白頁。因為空白頁不僅是白色的頁面,而且還包括了頁面中的錯誤頁、缺失頁等等,還是不理解的可以繼續(xù)往下看。


二、分類

以下就空白頁的 類別 、 產(chǎn)生原因 、 用戶使用場景 與 解決方案 為大家闡述空白頁的人性化設計。

先給大家看一張關系圖縷清他們各者之間的關系:


數(shù)據(jù)加載頁

為什么把加載頁歸結(jié)到空白頁中,其實加載頁經(jīng)常會被人所忽略,這里的加載頁是指頁面的正在加載。數(shù)據(jù)還未讀取完成,頁面肯定數(shù)據(jù)不齊全,那么一般加載頁有兩種展示方式,這里不涉及開發(fā),僅說明設計展示方式:一種是 全頁式加載 ,一種是 模塊式加載 (這里的說法可能與開發(fā)有所出入,僅為了方便設計與產(chǎn)品閱讀)。

產(chǎn)生原因:數(shù)據(jù)讀取中

使用場景:當用戶第一次打開應用時或刷新時,肯定會有一個數(shù)據(jù)加載的過程,對于用戶來說,這就是產(chǎn)品的第一印象。有時候數(shù)據(jù)加載速度非??炜梢院雎约虞d頁的存在,但是考慮有些使用場景,用戶還是會看到加載頁面,像之前體驗的一款競品,剛打開的時候除了頂部導航欄和底部標簽欄,所有東西都是空白,正好那時候是在網(wǎng)絡環(huán)境非常差的情況下,用戶心理預期肯定覺得這個產(chǎn)品不是很靠譜。


有道、簡書、貓眼電影(全屏加載)


Null頁(數(shù)據(jù)為空)

這個頁面應用較為廣泛,在產(chǎn)品中多稱為 無數(shù)據(jù)頁面 ,與以上的服務器異常頁有所區(qū)別,在上述中頁面中,服務器無法提供正常的信息數(shù)據(jù),但是在null頁里,是服務器本身就不存在相關的數(shù)據(jù),也就是 數(shù)據(jù)為空。

產(chǎn)生原因:無數(shù)據(jù)信息

使用場景:在使用產(chǎn)品時候,需要用戶創(chuàng)建與存儲信息時,應該有相關的提示引導內(nèi)容,而當頁面不存在數(shù)據(jù)時,空白頁面會讓用戶存在失落感,怎么樣引導這種失落感讓用戶創(chuàng)建與存儲信息內(nèi)容呢?

例如使用抖音時,在“我”的頁面中有個人作品、喜歡、故事等板塊,如果你沒有發(fā)布過任何作品,頁面肯定是空的,但是在點擊“作品”模塊時,其對應的“發(fā)布”按鈕上方會有個窗口提示,這對于用戶來說比簡單的問題提示來的更加淺顯易懂,但是要注意,不是所有Null頁都合適這種做法,過多的動效、圖形引導會讓用戶感到視覺疲勞,要分場合并適可而止。


例:QQ、易信、same


網(wǎng)絡異常頁


網(wǎng)絡異常情況可謂是時有發(fā)生,在使用產(chǎn)品的過程中,碰到這類情況的用戶肯定也覺得莫名其妙。但是網(wǎng)絡異常情況也就一般只有兩種:

1、斷網(wǎng)弱網(wǎng):完全沒有網(wǎng)絡環(huán)境,或者網(wǎng)絡信號弱無法上傳與加載數(shù)據(jù)

2、切換網(wǎng)絡:例如在wifi情況下看視頻突然切換為移動數(shù)據(jù)網(wǎng),就會存在。

產(chǎn)生原因:斷網(wǎng)弱網(wǎng)、切換網(wǎng)絡

使用場景:用戶正當瀏覽信息時,突然打不開產(chǎn)品頁面,呈現(xiàn)的是空白頁面,并沒有什么征兆,在連續(xù)刷新了幾次之后還是一樣,用戶不知道問題在哪里,肯定會離開產(chǎn)品去使用另外同類的產(chǎn)品。斷網(wǎng)弱網(wǎng)并不是產(chǎn)品能夠解決的問題,但是產(chǎn)品如果不給予用戶正確的信息引導,用戶必然會把問題歸責于產(chǎn)品本身。

QQ:斷網(wǎng)弱網(wǎng)

優(yōu)酷:斷網(wǎng)弱網(wǎng)

bilibili:網(wǎng)絡切換

服務器/系統(tǒng)異常頁

是當前在瀏覽頁面時,服務器 無法提供正常的信息數(shù)據(jù) ,或者 服務器無響應 ,且不知道原因所返回的頁面。一般在APP端比較少見,但是也會存在,無論是網(wǎng)頁設計還是app設計,這個頁面的設計都是必不可少的。

產(chǎn)生原因:服務器異常、系統(tǒng)異常、請求未響應。

使用場景:對于用戶來說,時間是非常寶貴的,產(chǎn)品的目的是滿足用戶需求,當用戶無法滿足需求時,不滿的情緒便會增加,積累了不滿的情緒有可能導致用戶對產(chǎn)品失去信賴感,從而拋棄產(chǎn)品。

用戶的焦躁情緒很大部分來自于對于當前頁面的不解,正如用戶在逛街時,看到一件超級喜歡的商品,想上去詢問價格,老板不在,員工也不在,這時用戶從開始的疑惑,到離開時的煩躁,都是在沒有得到相應信息的反饋情況下產(chǎn)生的。


三、解決方案

無數(shù)據(jù)或數(shù)據(jù)異常:

無數(shù)據(jù)情況下,要引導用戶行為,比如當前需要用戶創(chuàng)作的頁面,但是用戶作品為空時,可以適當添加“創(chuàng)作”按鈕或者跳轉(zhuǎn)接口,指引用戶當前頁面內(nèi)容是可編輯可添加的。再比如社交中的關注標簽,當用戶還沒有關注的話題時,可以推薦話題讓用戶關注。

數(shù)據(jù)異常時,用戶需要知道 為什么、怎么做 ,通過圖和文來為用戶解釋當前情況,即便你把服務器存在的問題一一和用戶說明,但是用戶想知道的并不是你服務器中出現(xiàn)的詳細問題,用戶想知道是 簡單的問題與解決的方法。


數(shù)據(jù)加載頁:

上面我們說了,當app第一次打開時,可以采用全頁式加載或模塊式加載,全屏加載頁面要要注意的是,為用戶傳達頁面正在運行的信息,這時候如果有動效畫面能讓用戶有耐心停留當前頁面,而不會因枯燥乏味地等待失去產(chǎn)品信任感。

模塊加載也可以用在刷新的情況下,能夠確切地告訴用戶還需要加載多少內(nèi)容,在網(wǎng)絡較慢時,可以采用 占位符 進行設計,但是如資訊類,新聞類應用就不適宜使用圖案說明,頁面會顯得更加復雜。


網(wǎng)絡情況:

網(wǎng)絡情況存在的問題必須強調(diào)當前 發(fā)生了什么,要怎么做 ,這點和數(shù)據(jù)異常是相似的,遵循“ 用戶不會犯錯”原則 ,如提示文案可以為 “當前網(wǎng)絡異?!?、“請檢查當前網(wǎng)絡”、“無法連接到網(wǎng)絡等”。

可以按需添加一個“點擊重連”的按鈕,來規(guī)避因為用戶自身當前網(wǎng)絡不穩(wěn)定或者網(wǎng)絡切換導致的讀取問題。

可以適當添加圖案來為用戶解釋當前問題,但是有些頁面不適合添加圖案,比如視頻頁面。但是,忌諱沒有任何提示信息,這里我指下微博的,首頁在沒有網(wǎng)絡的情況下,刷下不了,但是沒有任何提示,這可能會讓用戶感到困惑,不建議這樣的處理狀況。


四、總結(jié)

針對空白頁的設計可以見仁見智,不一定是要按照特定的設計樣式去解決自己產(chǎn)品中的問題,但是空白頁的設計是必要的,它的意義在于為 用戶解釋說明,并引導用戶行為 ,可以說是非常重要,用戶需要知道自己現(xiàn)在所處的位置、所處的環(huán)境,然后來判斷接下來的行為,所以盡可能去引導用戶快捷地完成操作,減輕用戶認知負擔,才不失為一款好的產(chǎn)品。


本文轉(zhuǎn)載自網(wǎng)絡,版權歸原作者所有!


文章轉(zhuǎn)載請保留網(wǎng)址:http://16qt59sf.cn/news/industry/1885.html

掃碼添加微信
159 8667 8737
24小時電話

返回頂部