1炎疆、什么是缺省頁
缺省頁是頁面無內容或者異常的狀態(tài)時展示的頁面。
設計缺省頁作用是設計更好的用戶體驗偶芍,即在異常狀態(tài)下的給予用戶友好提示及安撫用戶情緒纬黎。
根據(jù)異常的場景給予相關元素的缺省頁,在產(chǎn)品頁面相對應的場景特點來設計頁面內容闽晦。
2扳碍、缺省頁的運用的場景
例如在頁面無數(shù)據(jù)空白的頁面時,用戶進入后不知道是沒加載出來仙蛉,還是沒有數(shù)據(jù)笋敞,這個時候就需要缺省頁的提示啦。
缺省狀態(tài)包括:系統(tǒng)類荠瘪、信息類夯巷、空白類。
系統(tǒng)類:用戶請求服務器給予返回值失敗哀墓,并檢測到具體原因呈現(xiàn)成缺省頁趁餐,最好不要出現(xiàn)代碼的返回值。
常見的頁面有:加載失敗篮绰、服務器異常后雷、網(wǎng)絡異常 、無網(wǎng)絡、信號弱等提示臀突,一般頁面會有重新獲取等按鈕勉抓,方便用戶再次點擊,缺省頁可簡述失敗原因也可統(tǒng)一文案為網(wǎng)絡異常候学。
信息類:用戶請求服務器給予返回值成功藕筋,但數(shù)據(jù)異常情況的頁面。
數(shù)據(jù)異常時常見的頁面有 :內容已刪除梳码、商品已售空隐圾、 內容不存在、無權限等边翁。也可在列表顯示已搶完翎承、已下架等字樣。
空白類:用戶請求服務器給予返回值成功符匾,但無數(shù)據(jù)頁面叨咖,會需要缺省頁來表達。
常見的頁面有 :搜索無結果啊胶、無消息/無通知甸各、頁面無數(shù)據(jù)等;一些消費型產(chǎn)品無結果時下方可相似屬性產(chǎn)品的來引導用戶進行消費的目標焰坪。
3趣倾、缺省頁的樣式形式
根據(jù)場景特點來設計頁面內容,合理的圖案某饰、合理的提示文字信息來解決用戶的疑惑儒恋。
例如下圖,進入頁面根本不知道什么情況黔漂,無網(wǎng)絡诫尽?無數(shù)據(jù)?登錄失斁媸亍牧嫉?未加載出來?
缺省頁的表現(xiàn)形式為4種
第1種:圖形+文字信息
這種形式一般運用于系統(tǒng)性的響應或無內容的場景减途。
圖形:圖標酣藻、插畫來表達缺省鳍置;文字信息為或者“標題+描述”的結構表達缺省的原因辽剧。
如:您還沒有發(fā)表過帖子,如點到“我回復的”的模塊無內容税产,一定是“您還沒有回復帖子”怕轿。隨意原則就是標題加上描述內容即可坊夫。
第2種:圖形+文字信息+引導
一般應用于需要引導用戶操作的場景,用戶也可以在無數(shù)據(jù)等情況可以達到或提升操作的目的
如:抖音點擊無評論的視頻時撤卢,會直接進入評論的輸入頁面。
第3種:圖形+文字信息+按鈕
一般應用于引導用戶操作的場景梧兼,用戶也可以在無數(shù)據(jù)等情況提高跳出率放吩,用戶可以快速操作
如:對于一些關注或者是訂單類無數(shù)據(jù)時頁面,可以增加“去逛逛”“去看看”等按鈕羽杰。
第4種:圖形+文字信息+推薦內容
提升用戶體驗渡紫,幫助用戶在遇到困難時,更好地安撫用戶的情緒考赛。讓用戶有更多地消費空間與深度惕澎。讓用戶不跳出頁面就可以看到更多內容,增加用戶的消費時長和注意力颜骤。
例:在keep沒有活動時唧喉,下方增加推薦的課程,可以增加用戶的瀏覽及消費忍抽。
4八孝、設計高段位缺省頁的方法
(1)使用推薦內容
在無內容時增加推薦的數(shù)據(jù),最好推薦數(shù)據(jù)庫內熱門商品鸠项,根據(jù)用戶的瀏覽記錄更加準確的推薦相關內容干跛。
(2)增加緩存的方式
緩存內容代替缺省頁。適合部分的產(chǎn)品祟绊,如購物類楼入、音樂類等比較適合,不適合實時類新聞牧抽、金融等嘉熊。安撫用戶操作失敗等情況所帶來跳出率過高的風險。
(3)圖形表達準確
在缺省頁面上阎姥,簡單粗暴的就是放一個表達強烈的灰色icon记舆,凸顯當前頁面的狀態(tài)。有精力和時間的話還是多處理細節(jié)呼巴,一些精美活潑生動的插畫泽腮,讓用戶更加放松,心情愉悅衣赶。
如圖1:私信無數(shù)據(jù)時诊赊,一個空盒子配上文字“您還沒有聊天記錄”;
圖2:根據(jù)企業(yè)的企業(yè)色和吉祥物精美的畫出相關的缺省圖案府瞄。