在进行大型项目时，通常都需要设计师去绘制线框图，减少沟通成本。绘制线框图的工具有很多从简单地Balsamiq，以及比较常用的Axure，还有人用AI、PS等绘制线框图，但是最近，我开始用Sketch来绘制线框图，这是一款超级强力的矢量绘图工具。利用Artborad、链接样式、导出切片功能，可方便UI设计师设计出精良的线框图。
地址：(需翻墙)
线框图应该非常的精简，让客户专注一用户体验、流程逻辑上的一些东西，不要太在意这一环节中得外观。强烈建议使用网格和真实的尺寸。这样你就能知道能放多少内容，概要怎样布局。根据我的经验，在有限的时间内设计，线框图的布局和流程越接近真实产品越好。因为线框图的下一步是高保真原型，高保真原型的设计会受线框图很大的影响，所以说线框图的好坏，有时候可能会决定产品的好坏，导航的复杂程度，内容的可读性，可用性，整体的一致性。很多时候线框图最好装入到手机模板里面愁一愁，这跟你光看界面的效果完全不一样。
在这份我提供的Sketch文件中，你将看到所有都是实际尺寸的iOS元素，并且设计上严格遵循iOS设计规范。
我见过效率最高的线框图，颜色一半都是灰色或者是蓝色。理想状态下，整个线框图的色调应该是中性的，并且整体拥塞要一直。这样就能让观者专注于整体流程结构，而不被强烈地色彩吸引。
在Sketch中，链接样式的功能非常方便线框图制作。我选取了4种颜色，作为主要的设计色，只需要改变任意一个的颜色，整体线框图中对应的颜色响应改变。
如果你对色彩不满意，可以自己设置，非常方便。
用户图形界面需充分利用图标，增强辨识度，引导用户，很多情况下，一些关键性操作需用标准图标（或者说设计非常中庸，常见的图标）来代表，因为标准，所以用户能够很快理解。如果你是PS老说，想要知道怎么在Sketch中充分利用图标库，我推荐看我的这篇文章： Photoshop Users: How To Switch To Sketch
iOS人机设计规范( iOS Human Interface Guidelines )非常好，移动UI设计师都应该看一看，在设计的时候，需注意优化按钮尺寸(最小22pt,最大44pt），可读文本尺寸（最小24pt，最大30pt），header 44pt，footer 49pt。在线框图中，尺寸要非常规范。
字体的抉择也是线框图流程的一部分。在iOS设计中，Helvetica Neue是首选，这个字体非常具备传奇性，如果你对它很感兴趣，建议阅读相关书籍并观看电影。
Android推荐Roboto.
如果你不太像纠结于字体，那么Blokk font就很方便。所输入的文本会变成不规则的白块。确保字体尺寸为最合适的32px，行高设定好，否则看起来会很奇怪。
如果想要给客户发送线框图，那么强烈建议PDF格式。因为是全矢量的，因此效果看起来会非常的不错。Sketch功能简洁，可以将创作导成多页，并装载在一个PDF中。因为是全是量的，因此文件会很小，而且任何分辨率下，效果都不错。
Anthony Aubertin.用不同的方法做了一份线框图，推荐各位去看一下 Wireframe UI Kit
扁平化版本的 Minimal iPhone ，我在Dribbble上分享了。
感谢Marcelo Marfill 的iOS UI Kit.
用Sketch制作线框图非常迅捷，最多2小时就能搞定。方便设计师，愉悦客户，在设计之前，最好阅读相关平台的设计规范，写写阅读。
http://www.MartinRGB.com
234
作品
1.7w
粉丝
413
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册