有哪些手繪線框圖的小技巧？

 　　群裡有人問起手繪 Wireframe 的工具和方法，我分享下個人經驗。不過現在很少這樣做了，都是鉛筆稿等級就進 Axure 制圖、幾乎沒用到麥克筆，不會的同學學起來先 >>>

　　工具

　　以下是個人習慣，不代表這牌子適合所有人，挑順手(便宜)的買，這 3 種是基本工具。

　　酒精性麥克筆

　　台灣常見 Pantone 、Copic 這兩牌子。我買 NEOPIKO，忘記是最便宜還是因為沒用過買來試試…效果也很好，挺喜歡的。不要買毛筆軟頭，請挑平頭+硬尖頭那種。

　　千萬不要買整套!你是要畫 Wireframe 不是交學校作業，灰階挑 1、3、5，加自己看得順眼的 4 只淺色就綽綽有余了。什麼艷色、深色，畫 Wireframe 用不到。酒精性麥克筆貴死了!能省則省。

　　油性色鉛筆

　　鉛筆、油性原子筆、水性筆畫的草稿，被酒精性麥克筆一塗，畫面通通都髒掉。早期我用到 H 的自動筆在畫，下筆重一點同樣髒髒的。後來找到破解法：油性色鉛筆。拿淺色的來替代鉛筆打草稿，畫錯一樣擦得掉很不明顯。就算酒精性麥克筆抹過去也不會糊，根本救星啊!

　　文具店抓隨便一支就夠用，20 元左右。

　　粗的黑色原子筆

　　最後描框用，隨便哪牌子都可以，挑順手便宜的買。想專業點就拿代針筆吧，我自己是用 Uni 的普通原子筆。(推 ZEBRA Z-1 S 0.7 原子筆，便宜大碗。)

　　步驟

　　0. 白紙

　　iPhone 4 剛出的時候，我去印刷廠印了1000張這種紙，一面是 iPad、一面是 iPhone ，畫了(亂灑)幾年還剩下 200 張左右。

　　可以去 UI Stencils—iPhone Sketch Pad 找免費的樣板 PDF 下載。

　　1. 打草稿

　　直接拿淺色油性色鉛筆畫出主要區塊。

　　根據 為什麼要畫3次 Wireframe? 介紹的個人習慣，動用麥克筆的 Wireframe 在手繪稿中算是第 2 次了，會有張遼草的亂撇鉛筆稿當范本，所以拿色鉛筆直接畫也不太會出錯。

　　2. 上底色

　　拿出最淺的 1 號灰階麥克筆上底色。除非胸有成竹，不然我習慣從 1 號灰階起手。顏色淺可以多迭幾次，下手太重沒救。

　　3. 描邊

　　用粗黑筆描輪廓線，畫面就會有模有樣的。色鉛筆畫錯也沒關系，黑筆邊一描下去就很不明顯了。

　　icon 我不太會在這個步驟畫，等架構都確定了才會想 icon 的設計，通常就是一個圈圈代替。萬一 Wireframe 一直重畫，光刻 icon 就飽了。

　　4. 寫字

　　請用比 0.5 細的黑筆來寫字和補細節。我手賬本用 Uni Style FIT 寫 ╮(╯_╰)╭ ，隨手抓也就是這牌子的黑色，0.38 或 0.28 都可以。

　　5. 上重點色

　　幾個比較重要的顏色要加強，用深一點的灰色也行，但視覺會沒有重心，用亮一點的色彩加強比較討喜。

　　6. 外框

　　外框最後再來畫，避免萬一要加什麼麥克筆色就糊掉了。不畫也沒關系，但加這一圈框在視覺上比較有精神，焦點會集中在框內。

　　其它

　　畫這樣一張 Wireframe 有依據的話非常快，但很多企劃、PM、客戶不看這種手繪圖，他們只想看計算機畫的，所以我越來越少碰麥克筆手繪 Wireframe 。

　　Status bar 的收訊、時間、電池狀態什麼的通常我都懶得畫，如果你的 App 在設計上有需要用到這條列的話一定要畫清楚。

　　現代人都打字、很少寫字，我也是，字很丑，推薦 寫字基本功(附實用原子筆、中性筆、鋼筆字帖、小學一二年級生字) 這本書，從握筆開始矯正。這本寫完可以去看蕙風堂的字帖。反正你的粗黑筆絕對寫不完，拿來練字剛好。

　　PS. 拿 iPhone 隨手拍紙面還挺丑的。