我們平常可能不太會注意到，ajax 網頁、APP 裡的每一個頁面，其實不是單一靜態的，而是伴隨著多種不同狀態。

想想看當我們在用 Line 傳訊息的時候，網路突然斷掉，此時畫面是不是會有網路連線不穩的提示讓使用者知道？在使用 Facebook 觀看自己首頁牆時，若向下拉，是不是也會有轉圈的小動圖，提示我們現在正在讀取新的資料中？

這些其實都是在同一個頁面上，但需多種狀態的表現。由於它就像在同一個頁面上不斷堆疊多個狀態，所以設計師們又把它稱做 UI Stack。

UI stack

在畫 Wireflow 的時候，我們都需要注意每個 Wireframe 頁面，都會需要考量到基本至少六種狀態應該如何呈現，這個階段就先規劃好，在之後 GUI 設計時才能有所依據。

這六種基本狀態分別是：

(1) 理想狀態 (Ideal State)

• 充滿八、九成資料，一般情況下的狀態
• 在做個別 Wireframe 設計最一開始時，最容易想到的畫面

(2) 空白狀態 (Empty State)

• 使用者第一次進入，尚無資料時。例如：相簿第一次使用，沒有任何照片時
• 使用者自己將所有資料都刪除之後
• 查詢或搜尋不到相關資料的時候。例如：用 Linkin 查無此人時。

(3) 極限狀態 (Max/Min State)

• 資料極多的時候，超過之後版面如何呈現。例如 google 查的關鍵字，當回傳結果太多時。
• 資料最大值/最小值的時候，畫面如何呈現。例如部落格每篇文章的標題字數太多時，會以 "…" 取代最後面的字。

(4) 錯誤狀態 (Error State)

• 任何事件導致出錯時的狀態如何呈現。例如 Youtube 影片版權有問題的黑屏。
• 要怎麼翻譯成使用者懂的概念回應讓他知道現在發生什麼事，有什麼他能做的事？例如當帳號密碼連續輸入錯誤時，提示使用者可以使用「忘記密碼」功能。

(5) 讀取中狀態 (Loading State)

• 當讀取比較花時間的時候，不讓使用者以為故障了的系統回饋設計。
• 當讀取時間太久時，降低使用者不耐煩的呈現手法

(6) 局部資料狀態 (Partial State)

• 資料只有一、二成時的狀態
• 優雅引導使用者讓他知道如何讓資料更充足。例如 有趣簡單的插圖式引導。
• 誘發動機讓使用者有欲望補足資料。例如不經易地暗示理想狀態畫面的樣子

繪製各種狀態的 Wireframe 例子供大家參考如下：

特定媒介的額外狀態描述

除了上述六種狀態外，特定的載體媒介，可能還會有它自己額外專屬的互動狀態。比如網頁媒介的懸停 (Hover)、智慧音箱的聲音狀態 、VR 機器的凝視 (gaze) 等等。當要設計的 Wireflow 不是行動裝置的時候，要特別注意這些額外的狀態該如何呈現，應該也需要一起規劃至 Wireflow 中。

Wireflow 的重要性

Wireflow 是產品的關鍵藍圖，一般以單純的線框及基本形狀來繪製。有了它，就算沒有美美的精稿 GUI 設計，也足以向利害關係人表達產品是怎麼讓使用者操作、如何與使用者互動的。在極端情況下，甚至工程師也已經可以使用原生元件，直接透過 Wireflow 搭建出產品雛型，進行 MVP 開發了呢！不過一般正常情況下，還是會往下一個設計階段走，也就是 GUI (Graphic User Interface)。