空狀態頁是鮮為人知的設計元素，在用戶體驗中起著重要作用。 最簡單的形式是，空狀態是用戶首次訪問沒有可用內容的頁面時看到的頁面布局 。

這可能包括移動應用程序 ，社交網絡，甚至是空白的博客類別。 目的是交付看起來像非空頁面的空頁面。 訪客應認識到缺乏內容是即將到來的一種手段 。

我想介紹空狀態頁的工作方式以及為什么它們如此重要。 接口設計人員應考慮這些要點，并在適當時嘗試將它們應用于空狀態。 首先，讓我們研究一個空狀態如何起作用以及如何為接口提供價值。

空國家的價值

偉大的空狀態設計之美在于簡單性。 空白頁說明一旦有內容，頁面上應該顯示什么 。 它可能是被動的（例如，收件箱為空），或者可能是主動的（例如，空的Twitter feed）在等待用戶。

空白頁面無聊，沉悶甚至令人困惑。 空狀態提供指導，以幫助用戶了解他們在看什么。 即使是空白頁，額外的上下文也有幫助。

對于沒有現有數據的新帳戶，空狀態也會給人“新鮮感”。

由Redditor Bambo_Ocha完成的測試檢查了20種不同的應用程序是否為空狀態設計。 CTA按鈕，示例數據，甚至簡短的教程演練都出現了各種設計風格。

在用戶群中蓬勃發展的應用程序應設計出空狀態，以鼓勵用戶活動 。 這項活動可能是發布內容，添加朋友，上傳照片或為應用創建的任何內容。 Tookapic下面的屏幕就是一個很好的例子。

但是，即使不需要采取任何措施，空狀態頁仍然具有價值。 這些設計主要用于提供信息。

靜態信息同樣有價值，并且擁有一個空狀態并不是一件壞事。 例如， 此頁面設計沒有顯示來自跟蹤應用程序儀表板的當前指標。 用戶可能想添加一些指標，但不要將破折號留空。

類似的靜態設計可能對空白的博客存檔或空白的郵件文件夾非常有用。 沒有消息要顯示是完全可以接受的。 但是頁面也不應該完全沒有上下文。

重要頁面元素

空狀態頁上最重要的元素是context 。 這可能以圖形，文本或兩者的形式出現。 您想通知用戶頁面為何為空以及其中可能包含哪些數據（電子郵件，推文，朋友個人資料等）。

盡管文本是網絡上的主要交流媒介，但您不能忽視圖形和圖標的價值。

DigitalOcean具有出色的儀表板，具有空狀態圖形，可以清楚地說明其觀點。 他們的公司使用富有創意的品牌和簡潔的版式，因此空白狀態頁如此具有說明性也就不足為奇了。

空狀態設計的另一個關鍵方面是號召性用語按鈕 。 盡管超鏈接也可以正常工作，但通常將其設計為按鈕。

目的是幫助用戶采取措施并清除其空狀態。 無論這是需要添加數據還是要在站點上執行操作，CTA都會引導用戶執行清除空狀態所必需的下一步。

Dropbox具有兩個CTA按鈕的出色設計 。 當Dropbox用戶沒有文件夾時，他們可以創建一個新文件夾或將示例文件夾添加到頁面上。

鼓勵用戶活動

號召性用語按鈕是激活的元素，但是請記住頁面復制解釋了用戶在做什么 。 沒有人會不知道為什么點擊按鈕。

鼓勵活動的最佳方法是在空白狀態頁上寫上精美的副本。 引導用戶通過鼓勵用戶整個應用程序活動的內容流。

圖標用于演示用戶應添加到站點的內容。 箭頭指向用戶應該單擊的按鈕以及一些鼓勵行為的文本。 這是一個精妙的空狀態設計，具有您期望的所有元素。

同樣， Gumroad空狀態提供了兩個針對不同潛在動作的選項。 用戶可以添加數字產品或物理產品來開始銷售。

頁面上的其他鏈接指向幫助指南和聯系方式。 一切都經過了令人難以置信的簡化，并且緊密地結合在一起。

網絡與移動應用

所有介質的空白狀態頁應遵循類似的設計趨勢。 但是與智能手機相比，臺式機的用戶體驗略有不同。

大屏幕上的網站有更多的空間容納更多按鈕。 網頁也可以具有較大的導航元素 ，這些元素可以將其他人吸引到網站上。

可以通過類似于Nusii在其提案頁面上的樣式來解決。 在沒有提案的情況下，將引導用戶到頂部導航欄中的“添加提案”按鈕。

移動應用程序可能有類似的問題，但屏幕要小得多。 這使得將用戶吸引到操作中變得容易得多 。

我發現最好以更少的選擇來簡化移動應用程序。 將視覺效果用作吸引人的東西，以鼓勵采取行動并指向非常特定的用戶流。

空狀態設計實例

學習空狀態設計的最佳方法也許是研究一些示例。 精采的網絡畫廊emptystat.es策劃了從各個網站到移動應用程序的空白狀態頁面。

我親自挑選了一些值得您注意的示例，這些示例可以最好地說明空狀態設計。 如果您還有其他建議，請隨時告訴我們。

DigitalOcean浮動IP

Webflow Beta

視力

比特桶

沒有固定的群組

Facebook消息

LayerVault

鍛煉挑戰

緩沖區空

Word App文件

印象筆記聊天

Beamly對于Android

有聲讀物

掌上應用

英國廣播公司我的新聞

GitHub Wiki頁面

翻板

Chrome書簽管理器

Mac Infinit應用

空的Facebook Feed

翻譯自: https://www.hongkiat.com/blog/designing-empty-state-pages/

總結

以上是生活随笔為你收集整理的移动应用程序和网页应用程序_设计网站和移动应用程序的空白状态页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。