文件這回事我一直有種「永遠寫不完」的感覺，尤其是 Wireframe，把 Wireframe 當成幾個框框幾個圈圈加幾條線就搞定的文件，這樣的難度和隨手畫個井字遊戲有什麼不同？只要會畫圈圈叉叉直線橫線就能畫 Wireframe？

[翻譯] 如何修正壞 UI 一文中有提到 5 種狀態。事實上我覺得 Z 大提出的第 6 種狀態也該被納入考量。

• 理想狀態（Ideal State）
• 空白狀態（Empty State）
• 極限狀態（Maximum State）«« 第 6 種狀態
• 錯誤狀態（Error State）
• 局部資料狀態（Partial State）
• 載入中狀態（Loading State）

每個頁面在 Wireframe 階段都必須考慮這 6 種狀態，好，那狀態考慮完了也設計好了，要怎麼和專案成員溝通，確保他們都知道該頁面在各種狀態下的變化？

（其它 5 種狀態詳細介紹請去看 [翻譯] 如何修正壞 UI 。）

極限狀態（Maximum State）

數據最大值、最小值時，頁面怎麼顯示。

「狀態」指的不是一個頁面，而是「事物或對象因時間所變化的性質或處境」。所以同一個頁面裡只要能被「觸發」的都必需考慮「狀態」。觸發又分手動觸發、系統觸發，詳細介紹可以看「微互動」一書。（數值不是只有數字。）

例 1

最容易理解的例子比如「未讀訊息」的數值，這個數值為「系統觸發」。

如果 1 筆未讀也沒有，可以當成是「空白狀態」，當未讀訊息超過 999 筆時，提示未讀的數字要如何顯示？不能無限位數下去吧？

（圖片出處：http://minkara.carview.co.jp/userid/1352267/blog/33741244/ ）

例 2

文章列表屬於系統觸發，需要考慮極限值。可以想做是「標題幾行」、「內文幾字」，超過多少數值後要變「…」？需要考慮所有欄位如時間、標題、作者名稱、作者照片、回應等都逼到極大值、和所有的欄位字數都是最小值時，版面如何呈現。

比如 BBC News 的頁面，可以看得出來中間那篇文如果再多幾個字會十分接近這個區塊可容納的內容上限。

文章列表類的最小值可能是「1 個字的標題」，不過目前考慮到點擊率，標題有越來越長的流行趨勢。

例 3

列表頁也是，沒有半個項目就是空白狀態，但如果有幾百幾千條項目呢？不可能在一個頁面裡全部列出來吧？

像是 Google 查詢，不可能一頁讀入 11,180,000,000 項結果。

所以在一定筆數（超過極限值）後換下一頁。

那個「極限值」由誰決定？UI？RD？PM？

例 4

同樣是列表頁，Dribbble 不再使用分頁的作法。改版後，列表畫面的讀取狀態分為 2 種，一種是「自動載入」、另一種是「手動載入」。

當使用者持續捲動列表時，Dribbble 會自動載入作品資訊。（感謝 Agatha 協助，我實在截不到這顆 Loading more 的 icon。）

現在很流行在列表頁做上「自動載入」的功能，我非常討厭這種作法，這會導致使用者怎麼捲捲捲捲捲，永遠看不到 Footer 的資訊。如果沒有處理好，使用者點擊列表頁進入詳細資料頁，再 Back 回前頁時，就不知道清單看到哪個部份了。

比如 PChome線上購物 ，就是捲捲捲捲捲捲捲捲捲捲捲捲也捲不到 Footer 的例子。

同樣是無限自動載入 9gag.com 乾脆把 Footer 做到側邊欄去了。

可能因為自動載入永遠看不到 Footer 的關係，Dribbble 當列表頁呈現 96 幅作品後，就會出現這顆按鈕，手動點擊讀取更多作品。使用者一直往下捲捲捲，捲個幾次還是有機會看到 Footer 的資訊。

如何告訴 RD 頁面的各種狀態？

問題來了，「自動載入」和「手動載入」的觸發條件是什麼？規則是什麼？由誰定義這個規則？

這也是平面設計和介面設計最大的差別：觸發。

使用者可以戳戳看手機 APP 介面，看有什麼反應，戳了會動耶～
使用者可以戳戳看貼在牆上的海報，看有什麼反應，戳了有洞耶～

（再把 UI 設計當成平面設計試試，我會叫你去戳海報。）

點擊什麼元件、觸發什麼功能、系統怎麼回應、最後畫面如何呈現？這是 UI 設計師的工作。如果你有完整看完 [翻譯] 如何修正壞 UI 這篇文，就會發現 Prototype 沒有辦法完整告訴 RD 「狀態」這件事。

如果一個頁面有 6 種（視狀況或多或少）狀態，扔可操作的 Prototype 給 RD 叫他照刻一個。表示 RD 每個頁面都要不停嘗試亂按才會知道這個頁面有哪些狀態…怎麼可能每種狀態都試得到？就跟玩多重結局的戀愛遊戲一樣啊，沒看攻略本你怎麼知道單一角色有幾條路線要跑？完美大結局要符合哪些條件才能得到 CG 圖？

同樣的道理，一個 App 有幾個頁面？一個頁面有多少元件？當元件被觸發時會有什麼樣的回饋？Prototype 不能一眼看出元件所有狀態，Mockup 也不行，得回到 Wireframe 上，不止說明文字需包含觸發條件、回饋，必要時各種狀態都得畫出來標示在理想狀態旁。

新的問題就出現了…市面上目前沒有一款 Wireframe 工具適合拿來寫說明文字的，我還是先用手繪稿頂著加減看吧。