既 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。手繪 Wireframe 比例大概抓一下就好了。

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。圖片尺寸也同樣要有統一性。統一性指的不是 18px 就畫 18px 人肉電腦這麼精準，而是指這個標題在這裡畫這麼大、在其他地方的這個標題也要畫差不多這麼大。有誤差沒有關係，不要搞到內文字看起來比標題大就好。

• 文字
• 圖片

文字

畫 Wireframe 時 PM、BD 不一定能提供定版的文案，此時會用假字。假字內容越接近產品最終形態越好，比如標題文字就給一個像是真正會被使用的標題；時間文字直接打上 2014 年 9 月 19 日。需考量某個區塊的文字必須全部顯示、又有可能會有好幾行和一兩個字的極端情況。如果手繪就不用這麼講究了，用一排 XXX 或是橫線帶過，知道這裡放的是文字即可。

圖片

Wireframe 不會使用真正圖片，而是使用方框或填充灰色的方塊代表，可以的話要與最終產品上出現的圖片比例尺寸盡量接近。

連結

觸發這個元件後頁面會導到哪裡去，請對照 UI Flow 的頁面編號。

• 連到哪一頁
• 出現什麼

連到哪一頁

有些元件觸發後會連到其他頁面，元件旁就要寫明「因為做了什麼事」、「所以連到哪一頁」，標上連結過去的頁面編號。

跳出什麼

有些元件觸發後不會連到其他頁面，而是出現 Popover、Modal Window 之類的視窗或選單。同樣要在該元件旁註明「因為做了什麼事」、「所以出現什麼」。

特效

各式動態效果、能讓產品看起來很炫、但拿掉也不會影響到功能的部份。 規劃特效動畫前請先和 RD 討論實作可行性，嚴禁設計師自己一個人天馬行空腦補。

• 特效
• 轉場
• 音效
• 震動

特效

某些小地方使用特效動畫有畫龍點睛之效，用太兇會造成使用者反感、RD 也會想揍你。Wireframe 上要寫明特效呈現方式，圖文很難表達時請另附件範例，務必要讓接手 Wireframe 的人能理解。

轉場

頁面和頁面之間的過場動畫。轉場動畫可提示使用者這個頁面是依附在前頁、還是中斷目前操作。轉場動畫時間不要太頻繁、時間過長，使用者容易疲憊厭煩。Xcode 內建數種轉場方式，也有人用 Swift 寫了套件，請和 RD 討論好要用哪種方式處理再註明到 Wireframe 上。

外部影響

各種外部輸入而影響頁面的可能。

• 手勢
• Portrait 和 Landscape
• 搖晃
• 語音
• 外部設備

結論

Wireframe 是線框稿沒錯，但在產品開發上它不僅僅是線框稿這麼簡單，Wireframe 文件應該包含所有製作上的細節，說明文字量非常龐大，不僅僅只有圖而已。實際製作的時候真要照這份清單跑，絕對有種怎麼畫怎麼寫永遠都做不完的感覺。但 RD 要接手 Wireframe 進行開發、未來產品驗收也需要這份文件，越詳細越不容易有溝通落差或誤會。

上述內容肯定有遺漏缺少的部份，本文很舊了僅供參考。