如何設計交互缺省頁？我總結了這4個方面！

缺省狀態屬于交互的邊緣狀態，很容易被忽略，造成設計不完整。為了保證設計完整性，對缺省狀態進行整理很有必要，以免缺漏。

大綱：

• 缺省狀態的出現原因和分類
• 缺省狀態的組成
• 缺省狀態的視覺樣式
• 組件化與復用

缺省狀態的出現原因和分類

UI 界面上展示的信息可大致分為固定信息和動態信息兩類。所謂固定信息是指，不需要請求服務器的信息類型，例如底部標簽欄的圖標是以切片的形式存在于安裝包中，總是可見。而動態信息是會隨場景變化的，如下拉刷新操作一般都伴隨著信息的實時更新，這類信息就屬于動態信息。

以請求服務器是否成功為依據，缺省狀態主要分類兩大類：

• 請求失敗：網絡環境原因 或 設備原因
• 請求成功：數據正常且為空 或 數據異常

其中，數據正常且為空的狀態，我們習慣性稱其為空狀態。

除了空狀態之外的其他缺省狀態，可以認為是異常狀態。

缺省狀態的組成

不同場景、不同產品，缺省頁組成都可能不同。

為了便于討論，拿電商產品的搜索無結果為例進行分析。

從組成上來看，淘寶和小紅書進行了狀態說明：根據當前關鍵詞，無搜索結果，提示用戶可以嘗試更換關鍵詞。而京東將狀態提示壓縮在很小的區域范圍內，一句文案簡單表意，使用了絕大多數屏幕空間來推薦其他商品。造作除了商品推薦之外，提供了行為引導。

不同的形式有不同的目標側重，從體驗的角度上來講，淘寶和小紅書狀態更加清晰明確。而推薦商品更大程度上是為了促成交易。

產品層面，空狀態也有可以發揮的空間，主要是引導用戶行為和推薦相關內容。

行為引導，目的是讓用戶快速熟悉產品并產生使用記錄，增加粘性。

內容推薦，不論是電商推薦商品或者社交平臺推薦人，都是增加用戶和產品之間聯系的一個很好手段。

缺省狀態的視覺樣式

缺省狀態的視覺表達樣式有多種，不同的表達形式體現了不同的產品調性。

從簡約克制到豐富的情感化表達，也是逐漸增加視覺元素的過程。

組件化與復用

當業務模塊眾多時，可能涉及到的空狀態和異常狀態對應的具體頁面數量巨大，將所有情況遍歷、梳理、歸類為 n 種類型，再進行統一設計，不僅節約設計成本，更可以使產品群整體性更強，進一步突出專業性和品牌感。

以下是有道詞典的案例。

結語：盡管缺省狀態是邊緣狀態，但是很好體現了產品的質感、特性和細節，值得仔細打磨。

更多設計缺省頁的方法：

歡迎關注作者微信公眾號：Change Design