春節專題!App 設計系列之空白頁的價值與設計方案 - 優設網 - UISDC

春節專題!App 設計系列之空白頁的價值與設計方案

2018/02/15 評論區

這篇文章要為大家解析空白頁的存在意義及設計技巧,希望對你有益。

一. 概念

空白頁是什么?

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

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

二. 分類

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

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

數據加載頁

為什么把加載頁歸結到空白頁中,其實加載頁經?;岜蝗慫雎?,這里的加載頁是指頁面的正在加載。數據還未讀取完成,頁面肯定數據不齊全,那么一般加載頁有兩種展示方式,這里不涉及開發,僅說明設計展示方式:一種是全頁式加載,一種是??槭郊釉?。

產生原因:數據讀取中。

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

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

Null頁(數據為空)

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

產生原因:無數據信息。

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

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

例:QQ、易信、same。

推薦:抖音。

網絡異常頁

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

  • 斷網弱網:完全沒有網絡環境,或者網絡信號弱無法上傳與加載數據。
  • 切換網絡:例如在wifi情況下看視頻突然切換為移動數據網,就會存在。

產生原因:斷網弱網、切換網絡。

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

  • QQ:斷網弱網。
  • 優酷:斷網弱網。
  • bilibili:網絡切換。

服務器/系統異常頁

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

產生原因:服務器異常、系統異常、請求未響應。

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

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

三. 解決方案

無數據或數據異常

無數據情況下,要引導用戶行為。比如當前需要用戶創作的頁面,但是用戶作品為空時,可以適當添加「創作」按鈕或者跳轉接口,指引用戶當前頁面內容是可編輯可添加的。再比如社交中的關注標簽,當用戶還沒有關注的話題時,可以推薦話題讓用戶關注。

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

數據加載頁

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

??榧釉匾部梢雜迷謁⑿碌那榭魷?,能夠確切地告訴用戶還需要加載多少內容,在網絡較慢時,可以采用占位符進行設計,但是如資訊類,新聞類應用就不適宜使用圖案說明,頁面會顯得更加復雜。

網絡情況

網絡情況存在的問題必須強調當前發生了什么,要怎么做,這點和數據異常是相似的,遵循「用戶不會犯錯」原則,如提示文案可以為「當前網絡異?!?、「請檢查當前網絡」、「無法連接到網絡」等。

可以按需添加一個「點擊重連」的按鈕,來規避因為用戶自身當前網絡不穩定或者網絡切換導致的讀取問題。

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

四. 總結

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

作者微信號:JJ865477301

歡迎關注作者的微信公眾號:「JAYGO」

「空白頁知識匯總」

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄??裘夥炎匝縷?,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備: //hao.www.utsvcz.com.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/empty-page-value-and-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里