手繪技巧，有哪些手繪線框圖的小技巧？(4)

工具

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

酒精性麥克筆

臺(tái)灣常見 Pantone 、Copic 這兩牌子。我買 NEOPIKO，忘記是最便宜還是因?yàn)闆]用過買來試試…效果也很好，挺喜歡的。不要買毛筆軟頭，請(qǐng)?zhí)羝筋^＋硬尖頭那種。

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

油性色鉛筆

鉛筆、油性原子筆、水性筆畫的草稿，被酒精性麥克筆一涂，畫面通通都臟掉。早期我用到 H 的自動(dòng)筆在畫，下筆重一點(diǎn)同樣臟臟的。后來找到破解法：油性色鉛筆。拿淺色的來替代鉛筆打草稿，畫錯(cuò)一樣擦得掉很不明顯。就算酒精性麥克筆抹過去也不會(huì)糊，根本救星啊！

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

粗的黑色原子筆

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

步驟

0. 白紙

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

可以去 UI Stencils—iPhone Sketch Pad 找免費(fèi)的樣板 PDF 下載。

1. 打草稿

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

根據(jù) 為什么要畫3次 Wireframe？ 介紹的個(gè)人習(xí)慣，動(dòng)用麥克筆的 Wireframe 在手繪稿中算是第 2 次了，會(huì)有張遼草的亂撇鉛筆稿當(dāng)范本，所以拿色鉛筆直接畫也不太會(huì)出錯(cuò)。

2. 上底色

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

3. 描邊

用粗黑筆描輪廓線，畫面就會(huì)有模有樣的。色鉛筆畫錯(cuò)也沒關(guān)系，黑筆邊一描下去就很不明顯了。

icon 我不太會(huì)在這個(gè)步驟畫，等架構(gòu)都確定了才會(huì)想 icon 的設(shè)計(jì)，通常就是一個(gè)圈圈代替。萬(wàn)一 Wireframe 一直重畫，光刻 icon 就飽了。

4. 寫字

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

5. 上重點(diǎn)色

幾個(gè)比較重要的顏色要加強(qiáng)，用深一點(diǎn)的灰色也行，但視覺會(huì)沒有重心，用亮一點(diǎn)的色彩加強(qiáng)比較討喜。

6. 外框

外框最后再來畫，避免萬(wàn)一要加什么麥克筆色就糊掉了。不畫也沒關(guān)系，但加這一圈框在視覺上比較有精神，焦點(diǎn)會(huì)集中在框內(nèi)。

其它

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

Status bar 的收訊、時(shí)間、電池狀態(tài)什么的通常我都懶得畫，如果你的 App 在設(shè)計(jì)上有需要用到這條列的話一定要畫清楚。

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

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