给交互的同学!有哪些手绘线框图的小技巧? - 优设网 - UISDC

给交互的同学!有哪些手绘线框图的小技巧?

2015/03/12 20693评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/hand-painted-wireframe-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里