手繪技巧,有哪些手繪線框圖的小技巧?(4)
工具
以下是個(gè)人習(xí)慣,不代表這牌子適合所有人,挑順手(便宜)的買(mǎi),這 3 種是基本工具。
酒精性麥克筆
臺(tái)灣常見(jiàn) Pantone 、Copic 這兩牌子。我買(mǎi) NEOPIKO,忘記是最便宜還是因?yàn)闆](méi)用過(guò)買(mǎi)來(lái)試試…效果也很好,挺喜歡的。不要買(mǎi)毛筆軟頭,請(qǐng)?zhí)羝筋^+硬尖頭那種。
千萬(wàn)不要買(mǎi)整套!你是要畫(huà) Wireframe 不是交學(xué)校作業(yè),灰階挑 1、3、5,加自己看得順眼的 4 只淺色就綽綽有余了。什么艷色、深色,畫(huà) Wireframe 用不到。酒精性麥克筆貴死了!能省則省。
油性色鉛筆
鉛筆、油性原子筆、水性筆畫(huà)的草稿,被酒精性麥克筆一涂,畫(huà)面通通都臟掉。早期我用到 H 的自動(dòng)筆在畫(huà),下筆重一點(diǎn)同樣臟臟的。后來(lái)找到破解法:油性色鉛筆。拿淺色的來(lái)替代鉛筆打草稿,畫(huà)錯(cuò)一樣擦得掉很不明顯。就算酒精性麥克筆抹過(guò)去也不會(huì)糊,根本救星!
文具店抓隨便一支就夠用,20 元左右。
粗的黑色原子筆
最后描框用,隨便哪牌子都可以,挑順手便宜的買(mǎi)。想專(zhuān)業(yè)點(diǎn)就拿代針筆吧,我自己是用 Uni 的普通原子筆。(推 ZEBRA Z-1 S 0.7 原子筆,便宜大碗。)
步驟
0. 白紙
iPhone 4 剛出的時(shí)候,我去印刷廠印了1000張這種紙,一面是 iPad、一面是 iPhone ,畫(huà)了(亂灑)幾年還剩下 200 張左右。
可以去 UI Stencils—iPhone Sketch Pad 找免費(fèi)的樣板 PDF 下載。
1. 打草稿
直接拿淺色油性色鉛筆畫(huà)出主要區(qū)塊。
根據(jù) 為什么要畫(huà)3次 Wireframe? 介紹的個(gè)人習(xí)慣,動(dòng)用麥克筆的 Wireframe 在手繪稿中算是第 2 次了,會(huì)有張遼草的亂撇鉛筆稿當(dāng)范本,所以拿色鉛筆直接畫(huà)也不太會(huì)出錯(cuò)。
2. 上底色
拿出最淺的 1 號(hào)灰階麥克筆上底色。除非胸有成竹,不然我習(xí)慣從 1 號(hào)灰階起手。顏色淺可以多迭幾次,下手太重沒(méi)救。
3. 描邊
用粗黑筆描輪廓線,畫(huà)面就會(huì)有模有樣的。色鉛筆畫(huà)錯(cuò)也沒(méi)關(guān)系,黑筆邊一描下去就很不明顯了。
icon 我不太會(huì)在這個(gè)步驟畫(huà),等架構(gòu)都確定了才會(huì)想 icon 的設(shè)計(jì),通常就是一個(gè)圈圈代替。萬(wàn)一 Wireframe 一直重畫(huà),光刻 icon 就飽了。
4. 寫(xiě)字
請(qǐng)用比 0.5 細(xì)的黑筆來(lái)寫(xiě)字和補(bǔ)細(xì)節(jié)。我手賬本用 Uni Style FIT 寫(xiě) ╮(╯_╰)╭ ,隨手抓也就是這牌子的黑色,0.38 或 0.28 都可以。
5. 上重點(diǎn)色
幾個(gè)比較重要的顏色要加強(qiáng),用深一點(diǎn)的灰色也行,但視覺(jué)會(huì)沒(méi)有重心,用亮一點(diǎn)的色彩加強(qiáng)比較討喜。
6. 外框
外框最后再來(lái)畫(huà),避免萬(wàn)一要加什么麥克筆色就糊掉了。不畫(huà)也沒(méi)關(guān)系,但加這一圈框在視覺(jué)上比較有精神,焦點(diǎn)會(huì)集中在框內(nèi)。
其它
畫(huà)這樣一張 Wireframe 有依據(jù)的話非?欤芏嗥髣、PM、客戶(hù)不看這種手繪圖,他們只想看計(jì)算機(jī)畫(huà)的,所以我越來(lái)越少碰麥克筆手繪 Wireframe 。
Status bar 的收訊、時(shí)間、電池狀態(tài)什么的通常我都懶得畫(huà),如果你的 App 在設(shè)計(jì)上有需要用到這條列的話一定要畫(huà)清楚。
現(xiàn)代人都打字、很少寫(xiě)字,我也是,字很丑,推薦 寫(xiě)字基本功(附實(shí)用原子筆、中性筆、鋼筆字帖、小學(xué)一二年級(jí)生字) 這本書(shū),從握筆開(kāi)始矯正。這本寫(xiě)完可以去看蕙風(fēng)堂的字帖。反正你的粗黑筆絕對(duì)寫(xiě)不完,拿來(lái)練字剛好。
PS. 拿 iPhone 隨手拍紙面還挺丑的。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps基礎(chǔ)教程
- Akane_Lee
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- Photoshop初級(jí)教程-命令的技巧
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶(hù)體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 用戶(hù)體驗(yàn),如何讓用戶(hù)心動(dòng)?