hand-painted-wireframe-skills-1

@Akane_Lee(台湾设计师) :群里有人问起手绘 Wireframe 的工具和方法,我分享下个人经验。不过现在很少这样做了,都是铅笔稿等级就进 Axure 制图、几乎没用到麦克笔,不会的同学学起来先 >>>

工具

以下是个人习惯,不代表这牌子适合所有人,挑顺手(便宜)的买,这 3 种是基本工具。

酒精性麦克笔

台湾常见 Pantone 、Copic 这两牌子。我买 NEOPIKO,忘记是最便宜还是因为没用过买来试试…效果也很好,挺喜欢的。不要买毛笔软头,请挑平头+硬尖头那种。

千万不要买整套!你是要画 Wireframe 不是交学校作业,灰阶挑 1、3、5,加自己看得顺眼的 4 只浅色就绰绰有余了。什么艳色、深色,画 Wireframe 用不到。酒精性麦克笔贵死了!能省则省。

油性色铅笔

铅笔、油性原子笔、水性笔画的草稿,被酒精性麦克笔一涂,画面通通都脏掉。早期我用到 H 的自动笔在画,下笔重一点同样脏脏的。后来找到破解法:油性色铅笔。拿浅色的来替代铅笔打草稿,画错一样擦得掉很不明显。就算酒精性麦克笔抹过去也不会糊,根本救星啊!

文具店抓随便一支就够用,20 元左右。

粗的黑色原子笔

最后描框用,随便哪牌子都可以,挑顺手便宜的买。想专业点就拿代针笔吧,我自己是用 Uni 的普通原子笔。(推 ZEBRA Z-1 S 0.7 原子笔,便宜大碗。)

步骤

0. 白纸

tw201503122

iPhone 4 刚出的时候,我去印刷厂印了1000张这种纸,一面是 iPad、一面是 iPhone ,画了(乱洒)几年还剩下 200 张左右。

可以去 UI Stencils—iPhone Sketch Pad 找免费的样板 PDF 下载。

1. 打草稿

tw201503123

直接拿浅色油性色铅笔画出主要区块。

根据 为什么要画3次 Wireframe? 介绍的个人习惯,动用麦克笔的 Wireframe 在手绘稿中算是第 2 次了,会有张辽草的乱撇铅笔稿当范本,所以拿色铅笔直接画也不太会出错。

2. 上底色

tw201503124

拿出最浅的 1 号灰阶麦克笔上底色。除非胸有成竹,不然我习惯从 1 号灰阶起手。颜色浅可以多迭几次,下手太重没救。

3. 描边

tw201503125

用粗黑笔描轮廓线,画面就会有模有样的。色铅笔画错也没关系,黑笔边一描下去就很不明显了。

icon 我不太会在这个步骤画,等架构都确定了才会想 icon 的设计,通常就是一个圈圈代替。万一 Wireframe 一直重画,光刻 icon 就饱了。

4. 写字

tw201503126

请用比 0.5 细的黑笔来写字和补细节。我手账本用 Uni Style FIT 写 ╮(╯_╰)╭ ,随手抓也就是这牌子的黑色,0.38 或 0.28 都可以。

5. 上重点色

tw201503127

几个比较重要的颜色要加强,用深一点的灰色也行,但视觉会没有重心,用亮一点的色彩加强比较讨喜。

6. 外框

tw201503121

外框最后再来画,避免万一要加什么麦克笔色就糊掉了。不画也没关系,但加这一圈框在视觉上比较有精神,焦点会集中在框内。

其它

画这样一张 Wireframe 有依据的话非常快,但很多企划、PM、客户不看这种手绘图,他们只想看计算机画的,所以我越来越少碰麦克笔手绘 Wireframe 。

Status bar 的收讯、时间、电池状态什么的通常我都懒得画,如果你的 App 在设计上有需要用到这条列的话一定要画清楚。

现代人都打字、很少写字,我也是,字很丑,推荐 写字基本功(附实用原子笔、中性笔、钢笔字帖、小学一二年级生字) 这本书,从握笔开始矫正。这本写完可以去看蕙风堂的字帖。反正你的粗黑笔绝对写不完,拿来练字刚好。

PS. 拿 iPhone 随手拍纸面还挺丑的。

【人气超高的Photoshop冷知识教程系列】

冷知识系列第一期:《那些你不知道的PHOTOSHOP冷知识》
冷知识系列第二期:《第二弹!那些你不知道的PHOTOSHOP冷知识之乾坤大挪移》
冷知识系列第三期:《最终完结篇!那些你不知道的PHOTOSHOP冷知识》
冷知识系列完结篇:《最终完结篇特制版!那些你不知道的PHOTOSHOP冷知识(四)》

原文地址:blog.akanelee.me
作者:@Akane_Lee

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量92万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞 1
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏