中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

當遇到數據為空或異常狀態(tài)的時候，產品則會出現空白頁面，那么這個時候，空白頁面中需要設計些什么內容呢？又有什么設計要點呢？

• 在什么場景下會碰到空白頁面？
• 空白頁面有通用的設計模式嗎？
• 你在過往項目中是否有對空白設計進行經驗總結？
• … …

你是否有以上疑問，下文將為你一一解答。

01 空白頁面為什么要設計？

對空白狀態(tài)的設計，主要有以下幾種原因：

• 用戶可以知道本頁面將放置什么內容
• 安撫用戶疑惑或焦慮的情緒，解決用戶的困惑
• 可以刺激用戶創(chuàng)造內容或提高點擊轉化

02 什么場景下會碰到空白頁面？

1.?數據為空

a 『用戶無權限』

指用戶無權限訪問當前頁面，但當前頁面又不能對用戶進行隱藏的場景。

b 『搜索無結果』

指搜索情況下無結果的場景。

c 『篩選無結果』

指篩選情況下無結果的場景。

d 『頁面無數據』

指當前頁面無數據，該場景很常見，對于需要用戶操作、系統產生，隨著時間積累逐漸產生數據的頁面在App中比比皆是。

這些頁面在初次訪問時都是無數據狀態(tài)，比如：系統通知列表、我的優(yōu)惠券頁面、我的賬單頁面等等。

還有一種情況就是若以上頁面支持用戶清空數據，那么清空之后也是恢復到了無數據的狀態(tài)。

2.?異常狀態(tài)

a 『網絡異常』

指因為網絡連接權限未開啟、網絡連接狀態(tài)較差等原因導致網絡異常而無法正常訪問頁面內容的場景。

b 『服務器異?！?/p>

指因為服務器異常（服務器中斷、服務器過載等）導致數據加載失敗無法正常傳輸到前端展示的場景。

c 『加載失敗』

在數據加載過程中，導致異常的原因可能是：

• 網絡異常導致加載失敗
• 服務器請求數據失敗導致加載失敗

所以該場景的對應設計策略視導致加載失敗的原因而定，不用單獨將『加載失敗』當作一個獨立的場景來設計相應的空白頁面。

03 空白頁面設計模式

1.?圖案(可選)+文案

適用場景：『用戶無權限』、『搜索無結果』、『篩選無結果』、『頁面無數據』

指通過缺省頁占位空白區(qū)域，缺省頁包含的元素有圖案及文案，文案必選，圖案則根據需要看是否設計。

舉例1：普通員工訪問企業(yè)App的管理頁面，提示『用戶無權限』。

舉例2：去哪兒酒店『搜索無結果』。

舉例3-1：滴答清單安排任務流程，對已有清單進行篩選，『篩選無結果』顯示如下：

舉例3-2：去哪兒對某旅游地的游玩攻略進行篩選，『篩選無結果』顯示如下：

舉例4：去哪兒我的點評『頁面無數據』。

2.?圖案(可選)+文案+引導操作

主要通過“創(chuàng)建操作、功能說明、點擊重試、反饋操作”等幾種方式來引導用戶操作。

a 創(chuàng)建操作

常用場景：『搜索無結果』、『頁面無數據』

缺省頁中除了圖案(可選)和文案元素，還附上添加/創(chuàng)建數據的功能入口，用戶點擊后去到可以“創(chuàng)建”數據的頁面，比如瀏覽商品添加到購物車，比如去書城將喜歡的書加入書架等。

舉例1：去哪兒某城市搜索某地點『搜索無結果』，為用戶提供創(chuàng)建地點的操作入口，可借助用戶已知的信息豐富地點庫。

舉例2-1：Booking未登錄狀態(tài)進入“我的訂單”列表，因無法讀取用戶信息，故此時『頁面無數據』，頁面中提供登錄或導入訂單按鈕用戶操作以讀取相關的訂單信息。

舉例2-2：Booking進入消息列表頁面，消息列表『頁面無數據』展示如下，同時附上了預定酒店的按鈕，用戶點擊后即跳轉到酒店預定頁面。

b 功能說明

常用場景：『頁面無數據』

缺省頁中除了圖案(可選)和文案元素，通過附上功能說明的形式告知用戶如何去“創(chuàng)造”數據，在缺省頁中無法加功能入口的情況下，可以選擇該設計模式。

舉例：滴答清單某日任務『頁面無數據』狀態(tài)提示用戶點擊+按鈕添加。

c 點擊重試

常用場景：『網絡異?！?、『服務器異?！?、『加載失敗』

缺省頁中除了圖案(可選)和文案元素，因為該空白狀態(tài)是“暫時”的，所以給用戶提供點擊重試的按鈕。

舉例1：去哪兒機票查詢因『網絡異?！粚е虏樵兪?。

舉例2：小米金融貸，進入貸款頁面『服務器異?！?。

d 反饋操作

常用場景：『搜索無結果』

缺省頁中除了圖案(可選)和文案元素，還附上用戶反饋的功能入口，基于用戶反饋數據，在優(yōu)化搜索的同時也提供了用戶反饋訴求的入口。

舉例：微信讀書『搜索無結果』頁面的底部提供一個入口讓用戶填寫書籍名稱和作者，基于用戶的反饋數據，微信讀書在后續(xù)書城書目的收錄工作中，就可以優(yōu)先收錄用戶反饋率較高的書籍了。

3.?圖案(可選)+文案+推薦內容

常用場景：『搜索無結果』、『頁面無數據』

舉例1-1：Booking酒店某旅游景點關鍵詞『搜索無結果』場景下，會推薦其他景點的相關搜索結果。

舉例1-2：微信讀書書架搜索某關鍵詞『搜索無結果』，為用戶推薦書城中的搜索結果。

舉例2-1：去哪兒我的作品模塊關注的人『頁面無數據』的話，會為我推薦一些大v用戶。

舉例2-2：去哪兒我的作品模塊喜歡的作品『頁面無數據』的話，會為我推薦一些廣受好評的作品。

4.?預置內容

預置內容指事先準備好一批真實案例的數據，而不是以缺省頁的形式呈現給用戶。

常用場景：工具型App的『頁面無數據』

舉例：滴答清單初次使用者，還沒有自己創(chuàng)建的數據，進入App看到的是示例數據，同時結合使用說明在示例清單中呈現出來，用戶既知道真實數據是這樣的，也能夠按教程快速上手。

04 空白頁面設計策略

從設計模式來看，除了“預置內容”模式，另外3種設計模式均包含圖案和文案元素，不管是圖案設計還是文案設計，均有一定的設計策略可循。

1.?圖案篇

在空白頁面設計中，圖案的重要性最低，可以選擇沒有，有的話也可以錦上添花，起到向用戶傳達情緒或增強App視覺特色的作用。

若選擇有，圖案的設計要和文案傳達的意思保持一致，不能圖案表達的是一種意思，文案表達的是另外一種意思。

圖案可以Icon化，同時也可以結合App品牌形象進行插畫設計。

2.?文案篇

文案是必選項，不同空白場景下的文案設計有所不同。

a 數據為空

『用戶無權限』要告知用戶無權限訪問的原因和解決方案，比如B端產品常用的解決方案就是聯系管理員添加權限。

『搜索無結果』告知用戶搜索無數據的結果，如有必要可推薦相關內容，或為用戶提供創(chuàng)建或反饋數據的入口。

『篩選無結果』一般直接告知篩選無結果。

『頁面無數據』文案設計有幾個方向：

• 告訴用戶這里將會存放什么數據
• 給用戶一個主動創(chuàng)造數據的理由，比如通過話術引起用戶心理共鳴
• 若頁面無數據會給用戶造成困惑，則可以說明原因打消用戶的困惑

b 異常狀態(tài)

『網絡異常』指出當前狀態(tài)為網絡異常，并給出解決方案，注意這里不需要詳細告知因為什么具體原因導致網絡異常的，原因的告知對用戶無太大意義，甚至可能給用戶造成困惑。

『服務器異?！恢赋霎斍盃顟B(tài)為服務器異常，并給出解決方案，同理，無需描述詳細的原因。

『加載失敗』加載失敗主要會由網絡異?；蚍掌鳟惓Ｔ斐?，所以文案設計可依以下而定：

• 由網絡異常引起加載失敗，同『網絡異?！晃陌冈O計策略
• 由服務器異常引起加載失敗，同『服務器異?！晃陌冈O計策略

總結

以上，我在空白頁面設計中會先將碰到的場景進行對應，然后結合“設計策略”選擇適合的“設計模式”，不要完全照搬（不要誤以為某設計模式只適用于上文中提到的空白場景），可以根據功能和業(yè)務需求進行調整或創(chuàng)新。

相關閱讀

《關于異常狀態(tài)的設計總結》

作者：辛小仲；一名正在成長的交互設計師，公眾號：辛小仲。

本文由 @辛小仲 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Pexels，基于CC0協議