线框图 是基于手机app等ui的一种低保真度的设计原型，在去除所有视觉设计细节之下，进行页面结构、功能、内容规划。页面上只有方框和文字，没有图片和色彩。
工具/原料
1
酒精性马克笔
2
油性色铅笔
3
粗的黑色原子笔
4
白纸
方法/步骤
1
白纸大家可以去 UI Stencils—iPhone Sketch Pad 找免费的样板 PDF 下载
2
打草稿直接拿浅色油性色铅笔画出主要区块。根据 为什么要画3次 Wireframe? 介绍的个人习惯，动用麦克笔的 Wireframe 在手绘稿中算是第 2次了，会有张辽草的乱撇铅笔稿当范本，所以拿色铅笔直接画也不太会出错。
3
上底色拿出最浅的 1 号灰阶麦克笔上底色。除非胸有成竹，不然要从 1 号灰阶起手。颜色浅可以多迭几次，下手太重没救。
4
描边用粗黑笔描轮廓线，画面就会有模有样的。色铅笔画错也没关系，黑笔边一描下去就很不明显了。一般，UI设计师会等架构都确定了才会想 icon 的设计，通常就是一个圈圈代替。万一 Wireframe 一直重画，光刻 icon 就饱了。
5
写字请用比 0.5 细的黑笔来写字和补细节。我手账本用 Uni Style FIT 写 ╮(╯_╰)╭ ，随手抓也就是这牌子的黑色，0.38 或 0.28都可以。
6
上重点色几个比较重要的颜色要加强，用深一点的灰色也行，但视觉会没有重心，用亮一点的色彩加强比较讨喜。
7
外框外框最后再来画，避免万一要加什么麦克笔色就糊掉了。不画也没关系，但加这一圈框在视觉上比较有精神，焦点会集中在框内。
注意事项
画这样一张 Wireframe 有依据的话非常快，但很多企划、PM、不看这种手绘图，他们只想看计算机画的。