Wireframe 是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面 上只有方框和文字，沒有圖片和色彩。

繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。

就像 是室內設計平面圖，只有簡單的幾何圖型，卻是裝修最重要的依據。

如果不繪製Wireframe就直接上機開工，會發生做到一半漏了某個功能、或是頁面操作 不流暢，反過頭來修修改改浪費更多時間力氣的窘境。

繪出每個功能頁面
從 Functional Map 延伸出來的 UI Flow ，就是繪製 Wireframe 的依據，UI Flow 上規劃哪幾個頁面，按照編號就該有幾頁的 Wireframe 、如果有較特殊的過場動畫或特效，就需要更多頁的 Wireframe 來說明。這個步驟能確保整個 App 架構完整度。

規劃所有需要的功能
有些較細節的功能在 UI Flow 上是看不到的，必須回到 Functional Map 一一確認。

像是使用者欲刪除某些檔案所跳出的 Alert 警告、或是操作到一半網路突然斷線的提示。

畫面上元件是否人性化且易於操作
需依照大眾操作的慣性，例如 : 回前頁在左上角，編輯、確定通常會在右上角。

Wireframe 製作成本低，容易被修改、繪製快速，在開發初期是溝通和發想的重要步驟，節省時間和人力成本，又可防止開發中期發現缺漏或不合用導致全盤重來。很多時候案 子都很趕，沒有時間讓 UI/UX 在開發後期進行易用性測試，所以在 Wireframe 階段就要將易用性考慮進去，可以說未來所有的設計都是以 Wireframe 為基準。別小看它只是份簡單的框線圖稿，責任非常重大。

除了畫面結構外、額外的說明註解也是 Wireframe 的一部份。在每個按鈕或是可操作的元件上說明其變化和狀態，讓這份文件即使不經由說明也能夠讓人理解所有元件的操作與畫面組成。

註解說明通常有幾大類：
1)過場動畫、特效
像是視窗是由右往左推、還是從下方往上浮現？是左右翻轉還是撕去一頁的擬真動畫？這部份如果沒有明確指示，RD 就得依照自己的想像製作，極有可能不是原本規劃人員心裡想的那個樣子。也有可能製作這樣的特效需要花費更多的時間，礙於時程沒辦法製作。越初期決定這些細 節越能節省開發成本，所以在 Wireframe 上就要清楚註明。

2)畫面操作
Table View 內建手指往左划動、該欄位會出現刪除按鈕；
手指將列表向下拉即重新整理；
雙手指是否可在圖片上放大縮小等等，各種操作導致畫面變更、怎麼變更的方式都需寫明。

3)視窗種類
新開的視窗是 Popover、Alert 還是 Model Window？
雖然畫面一看就知道，但還是標記一下吧。

4)狀態改變
電話功能在 iPod 上無法使用，所以要偵測機型、在 iPod 隱藏播打電話的按鈕。或是地圖搜尋到一半網路突然斷線，檔案下載到中途就失去連線等等，各種突發狀態會影響 App 的功能與操作，在這種情況下的畫面顯示也需在畫 Wireframe 時就考慮進去並詳細說明應對方法。

讓開發人員可以把純文字版的 UI Flow 當成是目錄，對照編號找到 Wireframe，只需開啟一張單頁 Wireframe 圖檔和一張文字版的 Flow 圖檔，這兩張圖尺寸都不大，不僅節省電腦效能和閱讀圖片時間精力，更能讓開發人員專注在寫 Code 這件事上。

Cite by : 什麼是Wireframe ? « 嫁給RD的UI Designer

回到 軟體工程の學校專題怎麼做-Leason(3)團隊合作