『网站分析公会』
超过50万名互联网从业人士关注
互联网运营领域最具影响力自媒体
@Akane_Lee（台湾设计师） ：群里有人问起手绘 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 在设计上有需要用到这条列的话一定要画清楚。
现代人都打字、很少写字，我也是，字很丑，推荐 写字基本功（附实用原子笔、中性笔、钢笔字帖、小学一二年级生字） 这本书，从握笔开始矫正。这本写完可以去看蕙风堂的字帖。反正你的粗黑笔绝对写不完，拿来练字刚好。
网站分析公会：idiaa-org超过50万名互联网从业人士关注，互联网运营领域最具影响力自媒体。我们精心挑选互联网运营分析，产品战略，数据解读，设计案例等内容，帮助互联网从业者及时获得专业资讯！
↑↑↑长按二维码识别关注
投稿，商务合作，可联系微信：cyzqx2013