“网站分析协会”

超过50万名互联网从业者感兴趣

互联网运营领域最有影响力的自媒体。

@Akane_Lee(台湾设计师):当人们询问手绘Wireframe的工具和方法时，分享了个人经验。但是现在很少这样做。都是铅笔稿等级进入Axure绘画，很少用麦克笔，同学们先学。

工具

以下是个人习惯，并不意味着这个品牌适合所有人。

酒精性麦克笔

台湾常见的芬顿、科菲两个品牌。我买了NEOPIKO，不是最便宜的，就是没买过。效果也很好，我喜欢。不要买毛笔柔软的头发，请选择平头硬尖的。

千万不要买全套！画Wireframe不是交学校作业，而是选择灰度1、3、5，加上自己看起来喜欢的4只浅色就足够了。不能用来画什么颜色，深色，宽边框。酒精性麦克笔很贵！能省就省省。

油性铅笔

铅笔、油性圆珠笔、水性笔画的草稿涂在酒精性麦克笔上，画面都很脏。早期我用H的自动笔画画，下笔有点脏。后来找到了破解方法：油性铅笔。用浅色代替铅笔打草稿，像画错了一样擦也不显眼。涂酒精性麦克笔也不涂，根本就是救世主！

在文具店随便抓一个就够了。20元左右。

粗黑色圆珠笔

最后的相框可以随便用，顺便便宜买。如果你想变得专业，请拿一支代针笔。我用Uni的普通圆珠笔。(泽布拉Z-1 S 0.7推圆珠笔，便宜碗。)。

步骤

0。白纸

iphone 4刚出来的时候，我去印刷厂打印了1000张这样的纸，一方面是ipad，一方面是iphone，然后几年还剩200张左右。

您可以到Uistencils-Iphone Sketch Pad查找免费模板PDF下载。

1.起草草案

用浅色、油性、颜色的铅笔直接画出主要块。

取决于为什么要画三次线框？介绍的个人习惯，使用麦克笔的Wireframe可以说是手绘原稿中的第二个。张耀超的涂鸦铅笔原稿用作模板，所以拿彩色铅笔自己画也不会有错误。

2.淘汰赛

拿出最浅的1号灰色麦克风的笔底色。除非胸前长了竹子，否则我习惯从一号灰度开始。颜色浅的话可以重复很多次，手太重，救不了。

3.绘制直线

用粗黑笔画轮廓，画面会变成形状。彩色铅笔错了也没关系。黑色铅笔一画就不显眼了。

Icon我在这个阶段画得不好。在结构确定之前，不可能想到icon的设计。通常被圆圈代替。(阿尔伯特爱因斯坦。)如果Wireframe继续重画，光刻icon将会被分发。

4.写字

请用比0.5细的黑笔写字，并填写细节。我的笔记本用Uni Style FIT写。(_ _ _ _)

5. 上重点色

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

6. 外框

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

其它

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

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

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

超过50万名互联网从业人士关注，互联网运营领域最具影响力自媒体。我们精心挑选互联网运营分析，产品战略，数据解读，设计案例等内容，帮助互联网从业者及时获得专业资讯！

↑↑↑长按二维码识别关注

投稿，商务合作，可联系微信：cyzqx2013