最美UI

愉悦客户的变态需求!那就用Sketch高效绘制线框图吧!


在Sketch中绘制iOS应用线框图

在进行大型项目时,通常都需要设计师去绘制线框图,减少沟通成本。绘制线框图的工具有很多从简单地Balsamiq,以及比较常用的Axure,还有人用AI、PS等绘制线框图,但是最近,我开始用Sketch来绘制线框图,这是一款超级强力的矢量绘图工具。利用Artborad、链接样式、导出切片功能,可方便UI设计师设计出精良的线框图。

iPhone 线框图下载

地址:(需翻墙)

http://cl.ly/3j3w013u0Q1Q

http://cl.ly/070i3s2V0j2U

http://cl.ly/0n3L1x3r0W0t

224G941K-0

224GaB3-2

224G943G-4

注重于用户体验

线框图应该非常的精简,让客户专注一用户体验、流程逻辑上的一些东西,不要太在意这一环节中得外观。强烈建议使用网格和真实的尺寸。这样你就能知道能放多少内容,概要怎样布局。根据我的经验,在有限的时间内设计,线框图的布局和流程越接近真实产品越好。因为线框图的下一步是高保真原型,高保真原型的设计会受线框图很大的影响,所以说线框图的好坏,有时候可能会决定产品的好坏,导航的复杂程度,内容的可读性,可用性,整体的一致性。很多时候线框图最好装入到手机模板里面愁一愁,这跟你光看界面的效果完全不一样。

在这份我提供的Sketch文件中,你将看到所有都是实际尺寸的iOS元素,并且设计上严格遵循iOS设计规范

颜色

我见过效率最高的线框图,颜色一半都是灰色或者是蓝色。理想状态下,整个线框图的色调应该是中性的,并且整体拥塞要一直。这样就能让观者专注于整体流程结构,而不被强烈地色彩吸引。

在Sketch中,链接样式的功能非常方便线框图制作。我选取了4种颜色,作为主要的设计色,只需要改变任意一个的颜色,整体线框图中对应的颜色响应改变。

224G93139-6

如果你对色彩不满意,可以自己设置,非常方便。

图标

用户图形界面需充分利用图标,增强辨识度,引导用户,很多情况下,一些关键性操作需用标准图标(或者说设计非常中庸,常见的图标)来代表,因为标准,所以用户能够很快理解。如果你是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,行高设定好,否则看起来会很奇怪。

224G940c-8

导出为PDF

如果想要给客户发送线框图,那么强烈建议PDF格式。因为是全矢量的,因此效果看起来会非常的不错。Sketch功能简洁,可以将创作导成多页,并装载在一个PDF中。因为是全是量的,因此文件会很小,而且任何分辨率下,效果都不错。

224Ga0L-10

其他人做的线框图

Anthony Aubertin.用不同的方法做了一份线框图,推荐各位去看一下 Wireframe UI Kit

224G92926-12

扁平化版本的 Minimal iPhone ,我在Dribbble上分享了。

感谢Marcelo Marfill 的iOS UI Kit.

总结

用Sketch制作线框图非常迅捷,最多2小时就能搞定。方便设计,愉悦客户,在设计之前,最好阅读相关平台的设计规范,写写阅读。


原文链接:UI中国

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
Sketch新手指南!12个Sketch常见问题解答与Sketch快捷键
下一篇
sketch教程!如何用sketch快速导出psd文件