源地址:http://mp.weixin.qq.com/s?__biz=MzA4MzI0MTkxOQ==&mid=200243366&idx=1&sn=1c73c5c2bc40c569720472b117cddb93&key=2f5eb01238e84f7e458a3d385f69535ccda762daed1386d0feae7dfd2e47cb18eda28d5a706867cd93c0b6ba51c76ded&ascene=0&uin=NTI2NDgzMzM1&devicetype=iMac+MacBookPro9%2C2+OSX+OSX+10.10.1+build(14B25)&version=11020012&pass_ticket=EIkvkqnf54kj6IyItD%2FMZP4HneZK%2BvuiwiGPxGW8t3ywwPDObmQTZF7tjpQDQB0s

由于微信不方便观看,特转载!

谢谢静电!!

对于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的独特之处。

效果图智能标记

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

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

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

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

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

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

产品经理也可以轻松转移到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的基本操作.

Sketch使用教程(一)相关推荐

  1. 给iOS开发者的Sketch入门教程

    给iOS开发者的Sketch入门教程 作为一名iOS开发者,我经历过几个没有设计师的项目,结果就是,痛苦的一逼. 做这种类型的项目,设计是非常重要的,特别是迭代设计. 在每个项目最开始的时候,客户其实 ...

  2. 给 iOS 开发者的 Sketch 入门教程

    给 iOS 开发者的 Sketch 入门教程 原文出处: raywenderlich   译文出处:Andy矢倉(@Andy矢倉) 作为一名iOS开发者,我经历过几个没有设计师的项目,结果就是,痛苦的 ...

  3. sketch基础教程大全,对象、图层、画板常见技巧

    sketch对象.图层.画板的使用技巧 1.通过快捷键调整图形的形状 选择图形,按住Command按键,然后通过上.下.左.右方向键按1像素调整图形形状.同时按住按钮.CommandShift方向键, ...

  4. Sketch基础教程之文字工具详细介绍

    Sketch 是最强大的移动应用矢量绘图设计工具,对于网页设计和移动设计者来说,比PhotoShop好用N倍!尤其是在移动应用设计方面,Sketch 的优点在于使用简单,学习曲线低,并且功能更加强大易 ...

  5. Sketch进阶教程-图标绘制(一)

    Sketch Mac是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具.能够满足网页.用户界面.图标等的设计需求. Sketch是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具. ...

  6. Sketch进阶教程-原型设计入门

    Sketch for Mac是一款运行在Mac平台上的专业矢量绘图软件,sketch mac 中文破解版提供了丰富的矢量绘图和文字工具,你可以使用sketch mac 破解版来设计界面.网站.图标等, ...

  7. Sketch使用教程(三)

    源地址:http://mp.weixin.qq.com/s?__biz=MzA4MzI0MTkxOQ==&mid=200315033&idx=1&sn=773b20776f4d ...

  8. sketch使用教程:高效的快捷方式

    写在前面的话.很高兴你能点击进来看此篇内容,因为你已经注意到sketch3.0的优势,并尝试开始使用它来完成UI设计,从UI的角度来看,它的优越性是PS无法比拟的.下面以及将来的日子里,我会陆续为大家 ...

  9. Sketch使用教程(二)

    源地址:http://mp.weixin.qq.com/s?__biz=MzA4MzI0MTkxOQ==&mid=200277398&idx=1&sn=4ae436fb2f09 ...

最新文章

  1. git reset 怎么还原_git reset --hard 操作后的数据恢复
  2. mysql多租户schema复制,Asp.net core下利用EF core实现从数据实现多租户(3): 按Schema分离 附加:EF Migration 操作...
  3. 南华大学计算机学院足球队,球场健儿,不言放弃——记南华大学“新生杯”足球赛...
  4. python自带库处理excel-python 学习(三)数据库、EXCEL处理
  5. 关于1970-1-1 00:00.000的知识【转】
  6. 【错误记录】Google Play 上架报错 ( 此版本不符合 Google Play 关于提供 64 位版本应用的要求 )
  7. 《云计算》学习笔记4——Google的云计算原理与应用(分布式结构化数据表BigTable)
  8. tkinter 菜单添加事件_tkinter学习教程(七)
  9. 一个线程资源中有多个模态对话框的问题
  10. LeetCode 248. 中心对称数 III(DFS/BFS)
  11. 数仓备机DN重建:快速修复你的数仓DN单点故障
  12. 前端系统化学习【JS篇】:(四)Javascript中的数据类型
  13. [NVIDIA] Ubuntu 卸载 cuda
  14. 意见反馈接口php,用PHP制作的意见反馈表源码
  15. mysql unsigend_创建表 查询数据
  16. mysql innodb数据库引擎_mysql的innodb数据库引擎详解
  17. Windows下安装神通数据库
  18. 电力拖动自动控制系统_专插本专业全面分析:电子工程及其自动化
  19. 小赛毛游C记——初识C语言(3)
  20. 电视剧中的计算机学霸,电视剧中的九位学霸男神,真希望身边有位颜值又高学习又好的男生...

热门文章

  1. 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
  2. 掌门1对1《啊呜!卡通人》引强烈共鸣 智能科技赋能高效教学收获点赞
  3. android remount 命令,Android remount failed解决问题以及/system‘ not in /proc/mounts 解决
  4. mac 版 docker挂载文件出现Mounts denied问题
  5. ajax重要且常用参数
  6. adobe reader xi补丁_Adobe Reader XI
  7. vue中不同模块间的跳转
  8. 信贷反欺诈风险管理体系|附欺诈策略细则
  9. 怎么防止跨站请求伪造攻击(CSRF)
  10. 软件测试工程师一定要参加软考吗?