既 Funational Map和 UI Flow後，終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow，這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。
以下是 Wireframe 該包含的部份，要寫的說明文字量可不少：
說明文字
說明文字包山包海，不只 Funational Map 和 UI Flow 有的都要畫或寫在 Wireframe 上，沒有的也一樣要註明清楚。請以「就算沒人講解也能讓第一次接觸這份文件的人看得懂」的心態製作 Wireframe 文件。
編號
UI Flow 有幾頁、Wireframe 就有幾頁甚至更多。把 UI Flow 當成是一本書的目錄頁、編號就是頁碼。當產品頁面數量一多，編號可以加快溝通的速度，光看編號開頭就知道是哪個分類下的頁面。狀態或提示視情況會額外編碼。未來RD在刻介面時就是以 Wireframe 為基礎，要是 Wireframe 少畫一頁，最後產品也會掉一頁...
尺寸
- Web Desktop、Table、Mobile
- iOS、Android...
- Mac、Win...
不同平台有不同的尺寸，繪製 Wireframe 時需按照這些規定製作。平台官方文件給的是多少 px、Wireframe 上就是多少 px。
Grid
- Web Desktop、Table、Mobile
- iOS、Android...
- Mac、Win...
不管哪個平台都有它的 Grid 要遵守，尤其是 Responsive Web。通常都會有一份設計規範，明確定義 Grid 規則，比如 Bootstrap、Smart TV Definition of Application Screen Layout。
（參考：Grid 的運用：PS外掛、Fixed Grid System詳解）
狀態變化
如果 Functional Map 和 UI Flow 都有規劃到，那只要耐心地將所有狀態變化畫出來就好（參考： 各種狀態與突發狀況）。需要注意 Flow 不會特別註明、但還是要在 Wireframe 寫清楚的部份。
- 按鈕狀態
- 讀取中
- 圖表
- 選單
按鈕狀態
按鈕狀態包含下列數種：一般 normal、點擊 highlight、無法被點選 disable、多選 select。注意 Web Desktop 和 Web Mobile 的操作方式不同，Desktop 有 a:hover 可用，但 Mobile 沒有。
讀取中
如果頁面、圖片等等須要連網更新，就要考慮製作「讀取中」的提示狀態。
圖表
產品裡如果包含圖表，記得要給 RD 產生圖表的規則，每個數值、欄位是怎麼來的。這部份可能會是 PM 或 BD 產出，如果沒有，請在小組會議上提起這件事要求專案成員提供。
選單
所有選項都該被列出，尤其是下拉式選單。
文字、圖片
Wireframe 雖然去除視覺影響，但文字 h1、h2、p 等各種形態仍要統一。比如所有標題都用 20px、副標 18px、內文 14px。圖片尺寸也同樣要有統一性。
- 文字
- 圖片
文字
畫 Wireframe 時 PM、BD 不一定能提供定版的文案，此時會用假字。假字內容越接近產品最終形態越好，比如標題文字就給一個像是真正會被使用的標題；時間文字直接打上2014年9月19日。
圖片
Wireframe 不會使用真正圖片，而是使用方框或填充灰色的方塊代表，尺寸要與最終產品上出現的圖片尺寸一樣。
連結
觸發這個元件後頁面會導到哪裡去，請對照 UI Flow 的頁面編號。
- 連到哪一頁
- 出現什麼
連到哪一頁
有些元件觸發後會連到其他頁面，元件旁就要寫明「因為做了什麼事」、「所以連到哪一頁」，標上連結過去的頁面編號。
跳出什麼
有些元件觸發後不會連到其他頁面，而是出現 Popover、Modal Window 之類的視窗或選單。同樣要在該元件旁註明「因為做了什麼事」、「所以出現什麼」。
特效
各式動態效果、能讓產品看起來很炫、但拿掉也不會影響到功能的部份。 規劃特效動畫前請先和 RD 討論實作可行性，嚴禁設計師自己一個人天馬行空腦補。
- 特效
- 轉場
- 音效
- 震動
特效
某些小地方使用特效動畫有畫龍點睛之效，用太兇會造成使用者反感、RD 也會想揍你。Wireframe 上要寫明特效呈現方式，圖文很難表達時請另附件範例，務必要讓接手 Wireframe 的人能理解。
轉場
頁面和頁面之間的過場動畫。轉場動畫可提示使用者這個頁面是依附在前頁、還是中斷目前操作。轉場動畫時間不要太頻繁、時間過長，使用者容易疲憊厭煩。Xcode 內建數種轉場方式，也有人用 Swift 寫了套件，請和 RD 討論好要用哪種方式處理再註明到 Wireframe 上。
外部影響
各種外部輸入而影響頁面的可能。
- 手勢
- Portrait 和 Landscape
- 搖晃
- 語音
- 外部設備
結論
Wireframe 是線框稿沒錯，但在產品開發上它不僅僅是線框稿這麼簡單，Wireframe 文件應該包含所有製作上的細節，說明文字量非常龐大，不僅僅只有圖而已。實際製作的時候真要照這份清單跑，絕對有種怎麼畫怎麼寫永遠都做不完的感覺。但 RD 要接手 Wireframe 進行開發、未來產品驗收也需要這份文件，越詳細越不容易有溝通落差或誤會。
上述內容肯定有遺漏缺少的部份，如果有想到我隨時會補上。