老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了！每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」，卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊！
Wireframe 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。就像是室內設計平面圖，只有簡單的幾何圖型，卻是裝修最重要的依據。如果不繪製Wireframe就直接上機開工，會發生做到一半漏了某個功能、或是頁面操作不流暢，反過頭來修修改改浪費更多時間力氣的窘境。
（講是這樣講，我還是會加一點圖型、加一點灰階做區分啦，不然整個畫面都是大框框套小框框，框框相連到天邊很難第一眼就辨識出每個框帶表什麼含意。底圖也是方框、按鈕也是方框，直接把底圖範圍填上實心的灰色來得直覺。）
每個頁面都已繪出？
從 Functional Map 延伸出來的 UI Flow ，就是繪製 Wireframe 的依據，UI Flow 上規劃哪幾個頁面，按照編號就該有幾頁的 Wireframe 、如果有較特殊的過場動畫或特效，就需要更多頁的 Wireframe 來說明。這個步驟能確保整個 App 架構完整度。
所需功能都被規劃到了嗎？
有些較細節的功能在 UI Flow 上是看不到的，必須回到 Functional Map 一一確認。像是使用者欲刪除某些檔案所跳出的 Alert 警告、或是操作到一半網路突然斷線的提示。
畫面上元件是否易於操作？
依照 HIG 和大眾操作的慣性，回前頁在左上角，編輯、確定通常會在右上角。有沒有小於 44x44px 的按鈕、或是小於 12pt 的中文字？是否塞太多資訊進去導致畫面擁擠？
Wireframe 製作成本低，容易被修改、繪製快速，在開發初期是溝通和發想的重要步驟，節省時間和人力成本，又可防止開發中期發現缺漏或不合用導致全盤重來。很多時候案子都很趕，沒有時間讓 UI/UX 在開發後期進行易用性測試，所以在 Wireframe 階段就要將易用性考慮進去，可以說未來所有的設計都是以 Wireframe 為基準。別小看它只是份簡單的框線圖稿，責任非常重大。
除了畫面結構外、額外的說明註解也是 Wireframe 的一部份。在每個按鈕或是可操作的元件上說明其變化和狀態，讓這份文件即使不經由說明也能夠讓人理解所有元件的操作與畫面組成。註解說明通常有幾大類：
過場動畫、特效
像是視窗是由右往左推、還是從下方往上浮現？是左右翻轉還是撕去一頁的擬真動畫？這部份如果沒有明確指示，RD 就得依照自己的想像製作，極有可能不是原本規劃人員心裡想的那個樣子。也有可能製作這樣的特效需要花費更多的時間，礙於時程沒辦法製作。越初期決定這些細節越能節省開發成本，所以在 Wireframe 上就要清楚註明。
畫面操作
Table View 內建手指往左划動、該欄位會出現刪除按鈕；手指將列表向下拉即重新整理；雙手指是否可在圖片上放大縮小等等，各種操作導致畫面變更、怎麼變更的方式都需寫明。
視窗種類
新開的視窗是 Popover、Alert 還是 Model Window？雖然畫面一看就知道，但還是標記一下吧。
狀態改變
電話功能在 iPod 上無法使用，所以要偵測機型、在 iPod 隱藏播打電話的按鈕。或是地圖搜尋到一半網路突然斷線，檔案下載到中途就失去連線等等，各種突發狀態會影響 App 的功能與操作，在這種情況下的畫面顯示也需在畫 Wireframe 時就考慮進去並詳細說明應對方法。
本文中的 Wireframe 圖片上其實省略很多說明文字，真的要寫是寫不完的。有些 UI 設計師會把 Wireframe 串成很大一張 Flow，這能快速了解每個頁面的層級順序。但這對 RD 來說就是個吃效能的怪物， Wireframe 結合 Flow 的圖片尺寸非常非常大張。要從這麼大張的圖找到其中某一格是自己想看的那頁很困難，負責刻介面的 RD 比較長時間盯著其中一頁在工作、而不是對著整大張 Flow 圖滿畫面亂跑。
上面這張 Flow 原始對應的 App 只有14個頁面左右，在沒有任何文字說明的情況下，圖檔原始尺寸就已達 1260x3358px。如果把 Wireframe 結合 Flow 的作法套用在更複雜的 App 介面設計上，再加上說明文字等等，相信這張圖會大到沒有人想去開它、看著圖上標示的去執行，即使 RD 必須照著 Wireframe 工作。
好幾位 RD 跟我抱怨過，為什麼 UI 設計師老愛這樣做，除了看起來很炫好像很專業印出來可以當壁紙外，開大圖根本就是在為難他們的電腦。其實我也不知道，我的電腦效能不太好，Lag 過後就學乖了，立刻捨棄這種大圖作法另尋解決方案。
所以每一頁 Wireframe 都需要編號的原因在這裡，RD 可以把純文字版的 UI Flow 當成是目錄，對照編號找到 Wireframe，只需開啟一張單頁 Wireframe 圖檔和一張文字版的 Flow 圖檔，這兩張圖尺寸都不大，不僅節省電腦效能和閱讀圖片時間精力，更能讓 RD 專注在寫 Code 這件事上。
