預設頁指頁面的資訊內容為空或資訊響應異常的狀態；設計預設狀態的作用不僅是引導使用者在異常邊界狀態的操作提示，同時也是安撫使用者體驗情緒的重要場景；更重要的是為邊界場景營造出良好使用者體驗。通過分析預設狀態產生的原理，從而更為準確地把握互動預設頁的設計原則。

哪些狀態需要預設頁

談到預設頁面可能是設計師最容易忽略輸出的範圍，可能直到對接的開發同學提出來，「這個頁面，如果沒有資料的時候，該怎麼顯示啊？」。為了更好地把控設計預設頁互動狀態，首先要了解預設頁出現的原理。App 頁面內容（包括圖片、文字、資料欄位等等）都是請求伺服器資料，順利返回後，正常顯示到客戶端頁面。在了解清楚基礎實現邏輯後，就可以開始梳理、整理預設狀態的設計思路。

△ 圖1 預設狀態的場景梳理圖

預設狀態包括：系統層、資訊層、空白層。

系統層：指當用戶請求伺服器時，返回提示請求提交失敗，並檢測到失敗原因時呈現的頁面；例如：載入失敗、伺服器異常、無網路等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述，也可節約成本使用網路異常的統一文案。

資訊層：請求伺服器資料成功，但返回的資料異常的頁面；例如：內容已刪除、內容已下架、內容不存在；文案內容以提示資料型別的缺失為主。顯示形式除了常有的全屏預設圖，還會出現在資料列表下單一內容缺失的預設模組化的情況，例如：單一作品在書架上顯示已下架。

空白層：請求伺服器資料成功，但顯示無資料；內容頁在無資料時需要預設狀態進行表達；例如：頁面空資料、搜尋無結果等。空白頁面屬於正常網路顯示場景，所以一般會在預設頁附帶有相似屬性模組的使用者引導，爭取使用者重複消費的目標，滿足使用者的操作的訴求。

最後根據每個不同的預設狀態，梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那預設頁的設計有哪些表現形式呢？

預設頁的表現形式

沒有用心設計的預設也無法給使用者帶來良好使用者體驗，並可能給使用者帶來困擾，如下圖：某小眾直播平臺的拉新邀請頁面，無邀請記錄狀態下沒有任何有效反饋資訊，使用者不能明確得知到底是網路問題還是賬號同步出錯，亦或者是沒有一次邀請。正確的預設頁設計內容理應明確表達出符合使用者心理預期的視覺場景表達（圖形）；和使用易理解和語法恰當地表達當前的異常狀態（標題）甚至於引導使用者解決問題的文案描述。

超多幹貨！什麼樣的空狀態設計才能留住使用者？

空狀態，或稱零資料狀態，很多時候不太招設計師的待見。我們基本都是在主要流程介面的設計工作完成之後才會回過頭來考慮完善一下，因為從表現上來看，空狀態給人的感覺就是臨時性的...

閱讀文章 >>

△ 圖5 預設頁的錯誤示範

1. 視覺圖案+文案

此類預設設計形式一般應用於表達系統性無響應或初始空白態的預設場景。視覺圖案一般使用 app 吉祥物或主色調延展出的 icon 或插畫來表示預設狀態；文字：通常為「標題」或「標題+描述」結構；標題通常是表達出現預設的原因；描述文案則說明結束預設狀態的解決辦法，如「請檢查網路是否順暢」 等等。

2. 視覺圖案+文案+引導

此類預設設計形式一般運用於需要使用者引導操作來達到業務目標的預設場景。在視覺圖案+文案的基礎上加入引導模組，主要作用於避免使用者在資料邊界的狀態下，會因為無法達到操作目的而提高的跳出率。引導模組的內容包括：相似屬性內容，相似行為目標按鈕或解決預設狀態操作按鈕，加入引導，使用者進行某項行為或者感知某些資訊，對於功能的教學和使用頻率的提升有著重要作用。引導模組的形式也是日新月異，逐漸變成新使用者業務引導的作用，不僅限於頁面平鋪，也可以做成固定氣泡微動效，例如：抖音的釋出預設頁。

預設頁的設計技巧

預設頁除了常規的提示型設計方法，還有許多其他的設計技巧，幫助使用者在遇到困難，更好地安撫使用者的情緒。這些設計技巧有些是替代原來的預設內容，讓使用者有更多的消費空間與深度。有些是拓展預設狀態的補充內容，讓使用者不容易跳出頁面，增加使用者的消費時長。具體如下：

互動乾貨！幫你消滅「空狀態介面」的5個常用方法

@Yeah秋強 ：在做設計的時候，常常會忽略的一個頁面狀態就是空狀態，如何消滅這個影響使用者體驗的頁面？今天這篇好文，總結了存在空狀態介面的3個地方，以及消滅空狀態的5個方法，都是...

閱讀文章 >>

1. 使用推薦內容

預設狀態中的空白層非常影響邊界情況的使用者體驗，提出一種假設，是否可以刻意推薦相同屬性的內容呢？這樣的介面既不會顯得蒼白無力又可以留住使用者的注意力。相似性的內容也可以解決使用者目標的迫切性。所以說，這種方法非常適合內容型產品中使用。例如：新使用者在開啟電商產品的購物車時候，理應是空白無消費行為的操作記錄。那麼平臺方通過使用者畫像與熱門排行演算法推薦了一個商品流。這樣可以解決使用者無目標性挑選的訴求，增加消費時長。至於產品如果確定使用者畫像的推薦演算法，可以通過獲取第三方登入的個人基本資料之後，才給我推薦了資料庫內相對應標籤的熱門商品，這樣推薦的精準度也會高些。

2. 使用快取

是否使用快取內容代替預設狀態？根據產品特性來判斷，工具類、金融類等同型別產品不適合使用快取；因為使用者互動操作的資料必須保持實時性與真實性。而內容型、電商類等型別產品適合使用快取來代替預設狀態；理由：使用者消費內容的轉化路徑是先消費後轉化的行為特點，不存在系統操作門檻，且快取內容可以代替產品的預設狀態，安撫使用者操作失敗所帶來跳出率過高的風險。

3. 情感化表達

當預設頁給到使用者時，通常省時省力的做法就是老老實實告訴使用者當前的狀態，最多配上一個具有通識性的灰色 icon。但是，秉持著以使用者體驗為己任的時代，我們其實可以把預設內容表達得更加生動形象一些。在這裡會加入一些情感化的表達，而不是僅僅只是做到準確的目標而已，比如加上活潑的插圖故事，或者把文案寫得更加擬人化、戲劇化一些。這些配圖在讓使用者明白當前的狀態的同時，往往也能引發使用者會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給使用者一些正面的情感。如下圖：

4. 提供新任務

通常預設頁的引導模組都著眼於解決當前任務。如果碰到沒有解決方案的情況（例如：404，伺服器崩潰等）可以提供給使用者具有情感共情的新任務，讓他們暫時忘記無法達到目標的挫敗感，又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如：訪問騰訊網時訪問失敗的時候，網頁除了顯示 404 狀態之外，還會顯示騰訊「寶貝回家」的公益尋人計劃。將預設頁與公益內容相結合，不僅改善到使用者預設狀態。也貫徹騰訊價值觀「使用者為本，科技向善」的輸出。一個好的預設頁也可以承擔社會責任，讓公益傳播到每個角落。

△ 圖10 騰訊網404公益任務預設頁

結語：作為設計師有時會聽到需求方表述「這種極少出現的情況，我們可以暫且不管它。」但是細節見真章，所有優秀的體驗設計都必須照顧到方方面面的預設情況。讓每個使用者的流量價值發揮到最大，產生相互信任的良好的品牌關係。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。