每個新案子進來，我通常會畫至少 3 次的 Wireframe，記錄靈感 > 完整繪製 > 電子化。好像重工了喔？可是你哪來的自信覺得設計 App 介面能一次到位呢？靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況，畫 3 次以上的 Wireframe 比較保險。

感覺上畫 3 次 Wireframe 很麻煩，為什麼同樣的工作要做 3 次。我的經驗告訴我、這反而是最快做出好 UI 的方法之一。

第一次算是草稿，記錄發想中的畫面、粗糙的手繪稿即可。追求速度、不求精確和繪圖比例、漏畫項目也沒關係，目的在於補捉所有靈光一閃的想法。對設計師而言，靈光一閃和降乩差不多，要如何在被繆斯女神附身的短短時間將腦海中的靈感記錄下來，靠的是鬼畫符orz。管不到細節，先抓住大方向。畫草圖時間搞不好只有20分鐘，總是要先有粗糙版的 UI Flow 才能慢慢修改到完整。

既然目的只是紀錄靈感和順 Flow 用，通常我會拿背面空白的廢紙塗鴉。「Bamboo Paper - Notebook 」是我目前最喜歡的靈感記錄 App，不管是寫字或是繪圖都十分好操作，還能同步 Evernote 當備份。畫得醜沒關係，自己看得懂就好。

(在會議上邊聽大家的提議，隨手畫出想法好跟與會人員討論用的亂撇 Wireframe。）

第二次能說是精稿，注意每個元件的比例和位置合理性，從只有自己看得懂的鬼畫符，整理重畫成可以拿給 RD 和 PM 看的圖並和他們討論要修改的地方。如果負責寫 Code 的 RD 說沒空陪你討論，就恐嚇他。有經驗的RD 一定比 UI 關心介面配置合理性和每個畫面串接的邏輯，這關係到他們未來要天天加班還是準時回家打電動。

重畫一次 Wireframe 能補完剛剛沒想到、被無視的部份，加上簡單文字說明，此時整個 Flow 又被順了一次，不合理的地方會因為對這個 App 架構的熟悉度增加而被找出來。和 RD 討論實作可行性時、現場修改也容易。如果能夠提升這個階段的製圖速度，遇到有爭議的時候，直接畫給對方看，專業度立刻大增，對外行人來講亂威一把的。可以預期客戶音量會越講越小聲，尤其是把紙筆推給對方、請他把他想像中的介面畫出來的時候，有些客戶甚至會當場消音。

（某次和老公討論字級表的 Wireframe，嫌太複雜要再修改。）

第三次就是完稿，當 RD 和 PM 都說沒問題後，在電腦上使用軟體將框線勾勒出來，並加上文字說明，給客戶簽約用的規格書如果需附上 Wireframe 的話會是這個版本。熟一點的好客戶可以拿手繪稿跟他們討論，但最終還是要進電腦。將手繪稿電子化有個好處，即使將檔案交由他人接手一樣能夠修改、維護，未來遇到類似介面直接拷貝修改，加快工作速度。

會使用 Axure 或 Balsamiq 來製作電子稿，這兩套都是很多人使用、業界滿知名的軟體，各有優缺點。網路上有很多教學和資源庫，上手容易。不過這件事通常被我塞給工讀生去處理了（遠目），才擁有更多時間處理下個 Case 。但遇到複雜、規模較大的產品還是會自己動手。繪製的過程中多少能發現需要改進的地方，花一點心思讓產品更完美沒什麼不好。

（可比對本文第一張圖，將整理過後的構想定版。）

講了這麼一大篇，好像有 Wireframe 就往順利結案踏出一步似的。別傻了，我相信 80% 以上的客戶看不懂 Wireframe，逼他看還會被嫌醜、嚴重質疑專業。這種客戶在請他確認介面時什麼都好，等到定版、交規格書、約都簽了、連 PSD 都做得差不多後才開始 GGYY 囉哩囉嗦，加新功能加特效別人有我們也要有!@#$…。Wireframe 主要是給 RD 看的，省得沒什麼想像力（和設計師比）的 RD 要靠降乩在刻介面。如果肯定這個 Case 結案後再也見不到它，手繪稿撇一撇、說明文字寫一寫，你家的好人 RD 說好就好。