因为国内少有这方面资料,我花了$50美元买了Design+Code这本书,大部分人也不习惯看英文,所以在学习的过程中也进行了翻译,因为水平有限,有不足之处可以给我提出来,还请多见谅。我目前只是个还在学习中的iOS程序猿,打算从事移动开发和设计工作。有任何想法的朋友可以联系我,如果喜欢的话请点个赞或者收藏,你的鼓励是我最大的动力^_^。
微博:toryznoco
Github:github.com/toryznoco
团队网址:normcore.net.cn
微信公众号:NormcoreTeam
郑重声明:本文翻译自Meng To的Design+Code中的Learn Sketch 3,版权归作者所有,如有需要请购买支持正版:https://designcode.io/,本文仅限学习交流使用,任何人不得未经授权转载或用于商业活动。
一个任何人都可以学习的矢量设计工具
Sketch是一个矢量的设计工具,完全注重用户界面的设计。它能很轻易地学会,相比于Photoshop它只需要花费一小部分精力。因为它很简单,任何只受过一点或没有训练的人都可以学习。它很适合为多种设备做设计,并且切图是一件轻而易举的事情。
Sketch使用一个独立单元,风格只和UI设计相关,一个嵌入的iPhone预览工具叫做Mirror和Artboards,是最有效率的为多种屏幕做设计的方法。
Sketch完全地改变了我的工作流,其它任何工具都没有Sketch用起来流畅。新的资源和插件几乎每天都在出现。
Sketch被NetAwards发起了投票年度最受欢迎的App,用的最多的绘制线框图和用户界面设计工具,收到了4000设计师的反馈,击败了全能的Photoshop。尽管Sketch的受关注度只是在过去的几年里极速升涨,但它已经存在有四年多了。它的团队很小,并且很注重用户反馈。最重要的是,它是一个我看到的最有潜力的团队。
Sketch介绍
Sketch是一个基于iOS,Android和Web的设计工具,相比于Photoshop的1.6GB,它仅仅只有41MB的大小。你一打开它,你就会看到一个无穷大的画布。没有窗口会问你需要多大的大小。就像原生的OS X应用一样,你有一个相似的界面有工具栏,导航栏和检查器。结果就是,新的用户会发现Sketch用起来很亲切,因为它不会影响简单的设计。
为多种屏幕设计
你只是和像素打交道,所以你不需要担心其他因素(cm,ml,picas),颜色模式,每英寸像素,和其它所有的额外权重,只需要担心特殊的平台。你不会被一半是图片编辑,数字绘画和3D的工具栏困惑。
它们没有任何问题,只是注重用户界面设计会让你更有效率并且更不容易分心。
每个你在Sketch中学到的东西,在app设计中都很有用。
自定义你的工具栏
保持OS X的一贯设计语言,当你右击工具栏的时候是可以自定义的。你可以通过拖拽进你想要的工具来设置所有你最喜欢的工具。因为我是一个键盘快捷键的巨大支持者,我建议保留那些最难记的但是经常使用的。
它们中的其中一些在当可能用到它们的时候变得活跃,所以把它们保留进工具栏非常有帮助。一些我自喜欢的工具是:Colors, Make Frid, Scissors, Convert to Outlines。
Artboards
Artboards是你app的屏幕。每一个Artboard代表一个屏幕或者一个屏幕内的交互。有一个效率的工作流对现代设计师来说是很重要的。我们可以不再花费我们所有的时间在视觉设计上,因为原形设计,切图和代码会真正的让我们的设计变得生动起来而不是被空缺卡住,被其它东西摆布。在之前,我们为每一个屏幕保存一个我们设计的文件,结果是有许多的文件需要去管理。
有了Artboards和Pages,你不再需要像以前一样,因为你可以将你所有的屏幕放在一起。不再需要隐藏起任何图层。取而代之的是推荐去展示出你所有的图层,以至于你可以轻松地在iPhone上预览所有东西。你可以轻松的重新排列,复制(⌘D)或者导出它们。按下A来创建一个新的Artboard,然后你将会发现一个模板的清单(iOS,Android,Web或者Print)来开始设计。
对于iOS,我建议以iPhone6(375x667pt)为基准在1x下设计,因为那是现今最流行的分辨率。
自定义Artboards可以通过点击+按钮来实现。
Pages
每个Page代表一个平台或者一个完全不同的结果。对于许多项目而言,你一个平台将会有20多个Artboard比如iOS。然后你可能会为Android,Web,Apple Watch,tvOS创建另外的Page。那样的话,你会有一个单个的Sketch文件,而你的整个项目都在里面,节省了你大量在屏幕和平台之前转换的时间。
你可以打开Pages通过点击在page名字旁边的剪头。你也可以通过上下来快速的在pages之间切换。键盘快捷键是Fn↑和↓。
UI模板
Sketch带有大量的针对iOS 9,Material Design和响应式Web用户界面的预制模板。要使用它们,你只需要简单的进入File ➤ New From Template ➤ iOS UI Design。
iOS 9和Material Design模板是特别适用的。它们对于许多设计师,初学者和专家将会是一个好的出发点。
你也可以从网上下载你自己的模板,比如iOS 9 GUI或者Facebook资源文件。把它们保存在模板列表中,打开文件,然后去到File➤ Save as Template…
颜色
有许多人挣扎于颜色的使用,那就是为什么我认为有一个固定开始的调色板很重要。Sketch的颜色工具让你可以保存全局颜色或者作为特殊的文件。使用Eyedropper工具可以提取人何在Sketch里面豁外面的颜色。伴随这项技巧,你可以快速的开始你自己的调色板。好的起始调色板有:iOS,Material Design和Flat UI。
颜色调色板是可以分享的文件,所以我做了一个你可以在这里下载。下载这个Sketch Palettes插件能够快速的导入颜色调色板。要安装一个新的插件,在GitHub页面上点击Download ZIP按钮,并且解压,双击.plugin文件。
Gradients不能被轻易地导入,但是你可以把他们手动地添加进来像这个视频里面做的一样。下载Gradients Sketch file来跟着这个示例。
文本
如果你是刚开始学习排版,我建议你跳到排版部分并且下载一下现代的字体。好的字体来自OS X或者在Google Fonts上免费的是San Francisco, Avenir Next,Open Sans和Roboto。如果你有订阅Typekit,下载Museo和Proxima Nova。
按T来创建一个新的文本层。在检查器中,你可以选择字体和编辑风格。更重要的是,你可以使用Text Styles来重用一样的风格穿过多样的文本层。它工作原理和CSS类似,允许你有一个对于h1,h2,h3的全局的风格。
图标
最重要的是,你的兵器库里将会需要一个好的矢量icon库。PixelLove和Streamline对于iOS来说就很好。Sketch是完全基于矢量的,所以你可以轻易地导入SVG(一个通用的矢量格式)的icons,并且调整到你觉得合适的大小。如果你觉得和矢量路径打交道不习惯,至少你可以改变它的颜色和尺寸来适合你的项目。想要了解Sketch中关于矢量的介绍,我建议你跳到矢量部分。
Symbols
Symbols能够很轻松的通过Artboards共享同样的元素。当你需要多次重用像状态栏、导航栏和底部Tab Bar这种相同的元素时,这个会特别有帮助。你不需要再退回去一个一个编辑那些元素。一旦你更新了一个,它将会同步到其它所有相同的共享的Symbol上。
Symbols的嵌套
如果你想要在一个Symbol中再创建一个Symbol将不会那么简单。尽管官方并不支持,但你可以通过使用在检查器中存在的共享类型来达到同样的目的。
快速导出多种结果
可能我最喜欢的新特性就是能够轻易地到处多种屏幕尺寸的结果。通过使用在界面右下角的导出工具,你可以导出任何比例(1x,2x,3x)和6种格式(JPG,PNG,SVG,PDF,TIFF和EPS)。PDF在iOS中非常有用,SVG是Web很理想的格式。对于许多使用者来说,这就是让Sketch在众多app中脱引而出的原因。
点击Make Exportable来设置你的切片。默认设置是1x,但是再点一次你就会得到2x,然后3x。你也可以设置宽度(w)和高度(h)。比如说,如果你希望你的材料被切成最大800px的宽度,就设置成800w。
如果你希望了解更多关于导出素材,请阅读导出素材部分。
版本控制,自动保存和iCloud
当你忘记保存你的文件而你又恰好关了你的电脑,你通常会遭遇丢失所有修改的风险。那就是自动保存起作用的地方。它会有规律的存储你文件的多个版本,所以你不用担心它。你甚至可以回溯到之前的版本。比如说当你的同事没有你之前使用的字体文件,把所有的文本层改成默认的字体就会非常有用。自动保存工作的时候不会有备份,所以我仍然建议你设置Time Machine来保证额外的安全性。
提示:如果你的工作文件很大,自动保存会占用大量的磁盘空间。当你需要清理你的备份的时候会用到这个小技巧(可能需要翻墙)。
iCloud能和Sketch很好地配合。每次保存不仅把文件保存在你的硬盘上,也保存在了苹果的服务器上。如果你的电脑坏了,你也可以从备份恢复。
在你的iPhone上预览
好的设计需要经受长久的考验。在你电脑屏幕上看起来不错的可能在你的iPhone上并不好用。还好有Sketch Mirror,你可以预览仅仅是通过连接WiFi或者IP地址。如果你试过的话,你可能会发现从你的手机设置你私人的热点会有更好的效果。
Artboards可以在你手机上左右滑动。上下滑动可以在Pages之间切换。双击来放大或适应屏幕。Mirror也支持预览的时候滑动,所以你把你的屏幕想扩多大扩多大。
从Photoshop何Illustrator迁移
作为一名UI设计师,你担心的是你千辛万苦得到的icon和logo库。这有一个解决的方法。只要你知道怎样把他们导出成SVG,迁移到Sketch的过程就轻松多了。
PSD到Sketch
如果你刚好有一套icons是专门用Photoshop做的,你只需要把他们用SVG提取出来。这个过程需要Photosh和Illustrator。
我的PSD文件怎么办?
考虑到两件事情:1)你应该在矢量下工作,2)总是在抠图,除了你的资源库。重复老的工作对于任何设计师来说都是不好的习惯。取而代之的是进入到Sketch的一个项目中,考虑如何和团队一起并且用Sketch来做一个小项目。
客户端和Photoshop遗留
设计师不愿意转到Sketch的最大原因是因为他们的同事想法。那是合理的评定。这个没有明确的解决方法,但是我还是想说一些事。我已经用Sketch在3个不同的地方并且和许多顾客工作。他们每个设计师,工程师和管理者都全部被我成功地转变了。你问我是怎么做到的?说实话,停留在Photoshop的成本要比转换到专门为你工作定制的工具上的成本要大得多。如果Photoshop中的遗留是一个问题的话,我10年前就不会转到Mac。因为史蒂夫乔布斯说的很好:“如果你能成为一个海盗,又为什么加入海军呢?”。成为你想变成的那样吧。
键盘快捷键
设计很好学但是很难去管理。尽管不明显,是键盘快捷键让Sketch在用户界面设计上变得如此效率。不得不点很多的鼠标是我想从Photoshop转换到Sketch的原因之一。
这是一个大部分需要掌握的快捷键的清单。因为我每天都要做上百次这些操作,我发现用心去记住他们很重要。注意到我没有把经常使用的复制(Command C),粘贴(Command V),缩放(Command +/-)和保存(Command S)包含进去。
编辑文本或矢量:Enter
矩形:R
椭圆:O
文本:T
显示距离: Alt
组合图层: Cmd G
揭开组合: Cmd Shift G
显示/隐藏 像素: Ctrl P
颜色获取: Ctrl C
加倍: Cmd D
锁定/解锁 图层: Cmd Shift L
显示/隐藏 图层: Cmd Shift H
切换窗口: Cmd ~
关注图层: Cmd 2
在指定地方粘贴: Cmd Shift V
Sketch里面有大约超过100个快捷键. 如果你想学习全部,访问键盘快捷键部分。
基本的插件
基本上每一周都会有一个新的,用来解决用户界面设计中大问题的,共同开发的插件。作为设计师,我们有许多要面对的问题,所以每次有新的东西时,我都很高兴。在这里寻找全部的列表。
Sketch约束
视频:http://v.youku.com/v_show/id_XMTYzMjU3MzAyNA==.html
Fluid帮助你调整基于Artboard尺寸的设计。这个真的拉近了开发和设计的距离。当你和众多分辨率(iPhone 5,6,6Plus,Android,Web)工作,你可以通过设置越是来保存大量的编辑工作,和你怎样在Xcode中使用Auto Layout很相似。设计师和布局适配打交道是肯定的,并且这就是答案。下载Sketch文件。
Sketch调色板
颜色从没有再设计中变得如此重要。这就是为什么有一个好的调色板来开始很重要。Sketch调色板让你很轻松的保存和到处全局和文件的颜色。我开始一个调色板使用iOS,Material Design和Flat UI颜色。
神奇的Mirror
展示总是占我工作流中巨大部分。比如一个好的icon,它是一个app的第一印象。它给人们在进入app之前讲了一个故事。苹果在展示漂亮的排版和3D效果上很出名。我过去很依赖Photoshop来做那一系列的图片编辑,但是有了神奇的Mirror,你可以在Sketch中达到同样的效果。
视频请点击:http://v.youku.com/v_show/id_XMTYzMjYwMjgxNg==.html
Sketch内容创建器
创建大量的内容很浪费时间。通常的,我们收集形象化的符号和背景图片,以便我们可以把他们用在我们用户界面的图案填充和蒙版。当你要处理上百的项目时,那是很费力的一个过程。有了内容创建器,那些大量的时间被效率地缩短到几分钟,因为这一连串的工作已经为你完成了。你只需要应用这些内容。
视频:http://v.youku.com/v_show/id_XMTYzMjYxMDQ2OA==.html
资源
学习Sketch最好的方法就是下载别人的工作文件并分析。这个社区在以快速的步伐成长,并且每天都会有新的资源文件发布出来。SketchAppSources和Sketch Repo是一些下载Sketch文件最好的地方。他们都有超过2000用户提交Sketch设计。
矢量设备和实物模型
从Angle下载免费的例子,一个混合的资源库有超过140中实物模型。你会发现有iPhone,iPad,Mac和苹果手表设备完全是基于矢量制作的,意味着你可以编辑你心里所想的内容。
以上是Learn Sketch 3的第一部分,待续....