Sketch设计教室!从零开始学APP设计利器Sketch(一) - 优设网 - UISDC

Sketch设计教室!从零开始学APP设计利器Sketch(一)

2014/08/26 197211评论区

Sketch设计教室!从零开始学APP设计利器Sketch(一)

对于sketch,静电的第一印象是Google的Sketch up,一款3d建模草图软件。 那么这次静电提到的Sketch,则是一款全新的设计软件。一听到设计软件,大家的反应必须是Adobe家的Photoshop,Illustrator等等等等。那么今天静电要为大家介绍的,则是这款Sketch。这款软件的定位非常精准,首先,它是一款矢量制图软件;其次,这款软件的目标用户是APP设计师(当然用来设计网页也是可以的)。到这里大家伙可能有点不解,既然Photoshop这样的工具已经可以满足我们设计App效果图的需求,那么这款软件又有什么与众不同之处以至于我们非要用呢? 别着急,听静电慢慢往下讲。

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,我们同样添加了一些基本的位图工具,比如模糊和色彩校正。我们尽力让 Sketch容易理解并上手简单,有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计,Sketch 都能替代Adobe Photoshop,Illustrator 和 Fireworks。

——摘自《sketch用户手册》

踏破铁鞋无觅处——初识效率之王Sketch

在sketch用户手册中,编者毫不掩饰sketch的强大功能,甚至说:对于绝大多数的数字产品的设计,sketch可以完全替代photoshop,illustrator和fireworks。 最初看到这些句子的时候,静电有点不以为然,但好奇心还是驱使静电将这个程序下载下来,打开这个钻石形状的图标,静电看到一排看起来很简单的图标,在上边 可以拖动来画各种形状,但并没有感受到更特别的地方。 由于工作忙,静电在打开后没多久便关闭了程序开始忙其他的事情。 就这样大概十几天时间就过去了。这段时间内,正值静电负责设计的app改版后期,工作非常忙,而且要负责安卓和iphone两个平台的同时开发,工作量非常大。光是切图,就有三四套,其中还不包括细节的调整工作。 静电之前一直没有标注效果图的习惯,一来工作时间所迫,二来是偷懒。效果图作完在手机上预览感觉良好,就直接给到开发工程师,告知一些细节如何处理然后将切图交付。然后等工程师完成后就坐在他们跟前来调整界面。

这是一个漫长而且非常磨人的过程,由于细节非常多,所以即使使用之前静电讲述的fireworks批量切图法,依然可以把人搞的头昏脑涨。而且由于没有标注设计稿的字号,图片尺寸,前端工程师全凭感觉开发。所以到他们认为可以交付的程度,其实整个界面还是惨不忍睹的,在以前,静电会搬个小椅子坐在他们跟 前,与他们一起“目测”调整字号,图片大小。 但,在这个过程中,静电越来越发现,这种方式效率是及其低下的,一来浪费了双方大量的时间来调整,二来由于都是目测调整,所以最终效果不太理想。

之前静电一直认为,标注效果图是一件非常无意义的事情,但,这件事促使我开始反省,也许我是错的。 在与开发工程师沟通后,静电认为设计稿标注是有章可循的,使用px标注的字号可以与安卓和ios平台通过一定规律进行转换为dp或者sp,大多数其他间距也可以实现较为精确的匹配。 所以静电决定开始标记一些主界面的效果图做尝试。

标注效果图是一项很繁琐的工作,虽然我们可以尝试使用一些标记软件(静电寻找的标记软件是一款名为markman的基于air开发的程序,这款软件在初期为我的标注工作带来了很大帮助),但大部分标记软件充其量就是一个标尺和取色器的结合体,可以满足一部分的工作,但对于字号的标注一样无能为力,我需要在设计软件中先查看字体属性,然后再现打字到标注软件中,效率啊效率,实在是让人抓狂。最终,静电看到了这款躺在我dock上已经十来天没打开过的sketch。

首先静电先去度娘了一下,发现已经有一些讨论组和文章存在,但大部分是外文翻译过来的。借助这些文章,我了解到skech的独特之处。

还在用Photoshop切图的童鞋,推荐一款神器给你们!《MAC下的切图神器!SLICY使用说明》
see-more-slicy

效果图智能标记

sketch实现了软件内的智能标记!这比用标记软件还要方便好多倍。抛弃那些效果图标记软件吧,至于如何标记,静电将在以后的文章中详细讲解。

clip_image002

智能切片工具

第二点吸引静电的,是他的切图工具,借助sketch的切片工具,我们可以轻松将一个图标导出为适用于ios和安卓的各种尺寸,你甚至不用理解大部分的原理(当然了解切图尺寸的关系还是非常有用的),就可以顺利的切出没有毛刺,精确适配xxhdpi,xhdpi,hdpi,ios下一倍和两倍的切片。

先进的对齐工具

虽然photoshop cc 2014版本改进了一些辅助对齐功能,但对比skech简直就是小巫见大巫。sketch的对齐工具可以帮我们更轻松的对齐大部分的元素,丝毫不差。

artboard——轻松完成整个设计

sketch中没有画布的概念,整个空白区域都可进行创作,因为他是基于矢量的。 但我们在某些时候需要一个“框”,来具象化我们的设计。在ps及其他设计软件中,他叫画布,但在skech中,他被赋予了一个新词,artboard。我们可以在一张画布上创建无数张artboard。这对于app的连贯性来说,是非常有帮助的,我们可以将一个app界面看做一个artboard,然后在一个界面中,对比和查看他们的不同之处,或者将他们的交互过程串联起来。一切都非常方便。然后我们可以将这些artboard分别导出为pdf或者分为一个个的图片文件,方便产品经理或开发者查看。一切只需要一到两步的操作。

clip_image003

丰富的组件库

有时候我们需要在设计稿中调用安卓或者ios系统自带的控件,比如弹出的提示框,浮动键盘。但我们一定要自己再画一次吗?不必,sketch有丰富的素材库,我们可以直接将需要的部分拖进来即可,这节省了我们大部分的时间,使我们可以将腾出来的时间用于更加核心的产品设计思考上。

clip_image004

设计稿可以在移动设备上即时预览

sketch中自带了一个mirror的功能,可以像psplay和photoshop的远程连接工具一样,将你的设计稿在移动设备上即时预览查看,非常方便。

clip_image005

产品经理也可以轻松转移到sketch

对于产品经理,sketch完全适用,用他来画原型图简直轻而易举,他丰富的组件库和精确的尺寸控制让我们的原型图更逼真。更有利于交流和前期的展示。你甚至可以考虑将Axure 抛弃了。

下载Sketch,准备开启新旅程

好的,介绍了几点sketch最引人注目的特性。那么静电在这里先放出他的下载地址(静电写文时,sketch的最新版本为3.0.4)。下边两款软件,大家一并先下载并安装好。

Sketch软件下载地址:http://www.bohemiancoding.com/sketch/

Sketch toolbox 下载地址:http://pan.baidu.com/s/1dD3VeUX

最后,静电差点忘了,Sketch现在还没有windows版,想要体验sketch的魅力,请大家买一台Mac设备吧。下期,我们来认识一下skech的基本操作。

同时欢迎关注静电的微信 Jingdesign91

想深入探索 Sketch?来这儿就对啦!

先看看还有哪些贴心功能!
《UI设计师新宠!聊聊sketch那些方便好用的贴心功能》

帮你迅速上手Sketch的10个技巧!
《UI小课堂!帮你迅速上手sketch的10个技巧》

上手了就来创造吧!Sketch超详细教程一枚!
《设计师新宠!教你利用SKETCH创建彩色开关(上)》

原文地址:ui
作者:@JingDesign

AD11-cover-all

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/sketch-app-design-case

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里