愉悦客户的变态需求!那就用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中国

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 愉悦客户的变态需求!那就用Sketch高效绘制线框图吧!

0
分享到:更多 ()