鑽石舞台

前言

空狀態在開發上是一個 「邊界」，那在設計維度上如何呢。今日前端早讀課文章由 @唐維娟翻譯分享。

正文從這開始～～

概要：空狀態為設計師提供了傳達系統狀態、提高系統易學性並為關鍵任務提供直接途徑的機會。本文提供了為無內容容器設計空狀態對話的指南。

有時，用戶會在應用程序中遇到空狀態：內容尚不存在或無法顯示的容器、屏幕或面板。

特別是在用戶還未配置完全的複雜應用中，在載入和初始使用期間，空狀態是很常見的。當用戶在應用程序中遇到空狀態的幾種典型情況如下：

當用戶還未指定任何項目作為收藏夾或還未打開任何文件時，用於顯示收藏夾或最近查看的項目列表的容器將為空。

當一個應用程序支持警告，但用戶還未配置任何警告時，可能會有一個空窗口或對話框，這些警告最終會顯示在其中。

當一個應用程序由各種工作區和儀錶盤組成，但用戶還未在這些區域添加任何內容時，這些頁面或屏幕將為空。

當未搜索到結果時，或在使用其他的命令創建了空輸出的情況。

空白空間的默認狀態保持為空：在配置或個性化空間之前，不向用戶顯示任何內容。雖然這種方法可以節省開發時間（甚至是在產品的早期測試設計期間有意的決定，其他功能必須優先考慮），但最終會使用戶產生困惑並降低信心 —— 且錯過了提高應用程序的可用性、易學性以及關鍵功能的可發現性的寶貴機會。

有意設計的而不是事後想法的空狀態可用於：

向用戶傳達系統狀態

幫助用戶發現未使用的功能，並提高應用的可學習性

為開始關鍵任務提供直接途徑

使用空狀態傳達系統狀態

完全為空的狀態會導致用戶對系統是如何工作或是否在工作感到困惑。當用戶嘗試篩選、查詢或顯示特定內容，在界面中看到的是空白面板或屏幕時，他們可能會有很多問題：系統是否完成了對請求的處理？內容是否仍在加載？是否發生了錯誤？或者是自己設置了錯誤的篩選條件或參數嗎？

例如，下面用於顯示日誌詳細信息的對話框。當用戶指定並應用了一個沒有日誌的日期範圍時，對話框中的表格（邏輯上）不會顯示任何內容。但是，因為系統沒有提供任何反饋，用戶無法得知是真的沒有日誌，還是發生了錯誤，或者系統仍在處理請求中。用戶可能會浪費時間多次刷新查詢，然後才會有足夠的信心繼續下一操作。

當進程完成時，在內容區域顯示簡短的系統消息（如，「選定的日期範圍內沒有記錄」）會是一個簡單有效的方式，可以提高系統狀態可見性和用戶對結果的信心。

一個更糟糕但同樣常見的場景，尤其是在一個具有高信息密度和長時間處理過程的應用程序里，是當系統默認具有誤導性系統狀態消息時：先聲明沒有可顯示的項目，但在處理完成後將其替換為相應的內容。

例如，在下面的員工管理軟件中加載內容時，系統狀態信息顯示為 「無記錄」，如果真的沒有記錄時，這樣的信息將非常有用，但是，在等待幾秒後，系統加載出請求項後，再替換掉錯誤的系統狀態信息。

對於空狀態，不準確的系統狀態消息尤其有害。最好的情況是，用戶等待過程結束並發現相關內容，但對應用產生嚴重的不信任和厭惡。最壞的情況是，大多數用戶永遠看不到相關內容，無法完成他們的工作。

使用空狀態提供學習線索

用戶開始一個任務時，當他們瀏覽整個系統時，在合理的時間顯示上下文學習線索能幫助用戶理解如何使用這個應用或系統。

大多數情況下，在用戶初次使用時，這種方式比強制性的教學更有用。因為這種幫助通常會立刻被應用，並且，更多用戶幾乎沒有時間在漫長的加載內容和實際界面間建立聯繫。

空狀態提供了一個機會，為用戶任務提供相關的上下文幫助。這些幫助信息有時被稱為 pull revelations，因為只有在用戶和相關的 UI 元素交互時，它們才會顯示，而且，這些消息不會以任何突兀或中斷的方式被 「推送」。

例如，下面這個企業資源規劃 (ERR) 軟件的警告面板。當警告面板中有警告時，如何與內容交互就非常明顯。（面板的這種狀態可能是元素被模擬和測試的方式）但是，當警告面板為空時，就出現了前面討論的問題：用戶可能會困惑是否發生了錯誤，或者他們是否準確地創建了觸發警告的必要參數。（正如前面的例子，此處使用簡短的系統狀態信息指出沒有警告，這將會很有用）

此外，警告面板的這種完全空狀態會錯過向用戶介紹警告功能的機會。簡短的消息能提供關於警告是什麼以及如何開始使用它們的信息。

相反地，一個名為 DataDog 的數據監控應用，在空狀態中使用了上下文幫助內容。當用戶沒有收藏任何項目來創建收藏夾時，內容區域會顯示 "為您的收藏項加注星標以在此處列出" 的信息。

另一個相似的例子，當 Microsoft Power BI 中沒有最近查看的項目時，空狀態畫面會顯示一條簡短的系統信息，描述如何添加內容在這裡。

使用空狀態為關鍵任務提供直接途徑

除了提醒用戶系統狀態並通過推送提示提高系統可學習性外，空狀態還可以在用戶開始關鍵任務或完成最近工作流的相關步驟時提供直接途徑。

例如，在一個應用開發軟件中，當任務期間沒有任何記錄可顯示時，會遇到下面的這樣的空狀態系統信息 「無記錄；請發送一條請求以查看工作區的詳細信息」。雖然這條信息確實提供了有關用戶如何查看記錄的信息（例如，它表示 發送一條請求以查看工作區的詳細信息），但它沒有告訴用戶如何完成該任務，或者在系統的什麼地方能找到必要的功能。

一個更好的方式是提供簡短而明確的指示，或者最好是直接鏈接到完成任務完成與填充空狀態相關的任務所需採取的步驟。（此處，「發送一條請求」 的文本可能直接就鏈接到信息中心或啟動消息對話框）

例如，下面這個應用就在空狀態下提供了直接鏈接 —— 一個允許用戶創建報警的按鈕；對於可能需要更多信息來理解報警為什麼有用以及如何使用報警的用戶，一個 「了解更多」 的鏈接還直接指向了相關文檔。

這種空狀態設計對於開始使用複雜應用程序功能的用戶是非常有用的。例如，當用戶還未將日誌數據添加到基於雲的日誌管理應用程序 Loggly 中的賬戶時，空狀態包含 2 條進入工作流的直接途徑：添加外部日誌源或將演示數據填充到應用程序中以用於安全探索。

總結

不要讓空狀態設計在你的應用中成為事後的想法。有意地設計空狀態有助於增強用戶的信心、提高系統的可學習性以及幫助用戶開始進行關鍵任務。

總結幾個要點：

不要默認完全為空的狀態。這樣會讓用戶產生困惑，他們可能會疑惑系統是否仍在加載信息或是否發生了錯誤。

當屏幕、頁面或面板中還沒有內容時，使用空狀態來提供學習線索。告訴用戶可以顯示什麼，以及如何填充這個區域。

提供直接途徑（如鏈接）來開始與填充空狀態相關的關鍵任務。

程序運行時，使用進度指示提供系統狀態的可見性。

如果進程完成後沒有相關的數據要顯示，在該空白空間裡，使用空狀態提供系統狀態信息，簡要說明沒有可用的內容。

關於本文譯者：@唐維娟譯文：https://tangweijuan.com/blog/empty-state-interface-design作者：@ Kate Kaplan原文：https://www.nngroup.com/articles/empty-state-interface-design/