做GUI要学Sketch？来看这份超全面的Sketch使用体验
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
做GUI要学Sketch？来看这份超全面的Sketch使用体验
：Sketch作为一个为UI设计而生的工具，全矢量、轻量级、像素级精准，非常适合做移动端应用类的界面设计和简单的扁平图标设计。下文是我通过一段时间的使用，对比PS，梳理了Sketch对我们而言的优点和痛点，探讨了下Sketch对提升工作效率是否有帮助。
它轻巧、优雅、高效，三点相辅相成 。出道至今已经强力地占据了一片设计师市场，经常被拿来跟PS对比。
Part 1 Sketch的八大优势
1. 小清新颜值高
简洁高效 – 抗干扰
界面简洁美好，功能清晰。无悬浮面板，选择一个对象/图层（objects）就会展示对应检查器（inspectors），不会有PS中处理大文件时各种开关窗口情况。
▲ 软件截图（全屏）：左侧栏为图层区；右侧栏为检查器区
2. 使用畅快易上手
2.1 无限画布&画板 – 自由度高
不管有多少画布（pages）都被包含在同一个文档中，还可以在程序内部进行搜索，便于管理大型项目
在一个画布中可以平铺无限个画板（Artboard），这样的全局视野，规划自由度高，也利于思考界面元素关系和维护界面设计的一致性，方便各种check。
▲ 示意文件截图（局部）：右侧为随意摆放的4个画板
说明：Sketch文档&Page&Artboard&Layer
在一个Sketch文档中可以建立多个画布（Page），画布中可以自由放置画板（Artboard）。
而每个元素/对象都作为一个图层（layer），以图层或组（group）的形式安置在artboard中。
2.2 无冷启动时间 – 运行快
0启动时间，也就是没有类似于PS的启动画面，节省了等待时间
由于多是矢量文件，因此体量小，运行快。
2.3 简化操作 – 交互体验好
操作人性，各种贴心设计 ，使眼与手在界面设计过程中更加轻松高效完成工作，上手指数超高。
方便选择：
上文提到的Sketch中不同面板位置是固定的，选中某个对象才会显示对应的检查器，不用在众多属性窗口中苦苦寻觅
鼠标掠过画布中元素的时，左侧图层栏会出现蓝色框对对焦到选中的元素
左侧分栏可以看到矢量图形的的缩略图，不用仔细阅读面板信息即可准确选择
▲ 选中右侧元素”BHBH“，左侧蓝色框自动对焦图层。
简而言之，不懂PS/AI的小白上手Sketch完全无碍。
3. 像素级精准
3.1像素级对齐
Sketch中在编辑路径时，可以选择三种对齐方式——
Don’t round to nearest pixels：不自动对齐像素：编辑路径时可以随意移动节点
Round to half pixels：以半像素为单位对齐：可能出现半像素
Round to full pixels：以1像素为单位对齐像素：锚点全部像素对齐，避免锯齿，可以节省设计湿大量微调时间。
▲ 三种对齐方式
▲ 三种对齐方式的说明图
3.2数值化编辑
矢量软件的一大优势就是可以编辑精准，Sketch中可以实时调节形状的半径/数量等各个参数，数值化编辑让设计更加精准和专业。
基于公式运算的变形：
PS中的标尺和矢量工具都很笨重，比如建立倍数关系的东西、按黄金分割分配比例、做菲波那切数列图标什么的都很纠结。
而在Sketch中甚至可以直接完成简单运算：
▲ 像 100 * 1.6 + 60 这样的运算可以在 Sketch 中进行
Sketch让设计师更加关注数值，更理性有逻辑的去编排布局，而不是随意拖拽元素。
4. 非破坏性编辑
随时调节形状的半径/数量：
在PS中如果需改变已建图形的半径就要重新建立形状，而Sketch则可以随时编辑。
▲ 圆角变形就是辣么简单 *
随时编辑的布尔运算
跟PS和AI一样，也有联合、相减、相交、差异这些布尔运算。
更方便的地方在于参与运算的子形状都可以即时编辑。每个路径都可以随时修改运算方式和层次等操作，方便管理复杂的形状组合。
比PS中的合并形状更具自由度，也更容易理解层级关系。
▲ 每层与下一层发生布尔运算
九宫切片自动化
导入位图文件后可以调整九宫节点，直接实现九宫变形，节省了人工完成的时间。
▲ 九宫编辑
可视化渐变调节
由于是矢量文件，所以实现了参数可视化，在图形可以看到直观效果。
▲ 图形上方即有渐变操作杆直接调节
可以方便地建立旋转图形及编辑中心点。
总觉得有点酷炫。
图层样式可无限累加
可逐层设置的多种混合模式，也就是说可以加外描边的外描边的外描边的外描边……
并可以任意调节各层样式。另外，描边宽度也可以加锚点改变哒（同AI）
5. 可调用的嵌套样式
Sketch的明星功能符号（Symbol）和共享样式（Shared style：layer styles&text styles）：
符号（Symbol）
就是共享元素，一次编辑，所有共用的地方全部生效，就像是 Photoshop 里的智能对象，且生效范围仅在每一个 . 文件中。不同之处在于Sketch中改变一个元素副本大小所有都同步，PS中智能对象的大小是独立的；且Sketch的符号中文本是可以单独编辑的。
符号被运用的最广泛的地方可能是按钮这样的基本 UI 元素，举个栗子，在PS中建立两个文字不同的图标需要新建智能对象或者文字与按钮分离，编辑时需要打开一个或两个智能对象……Sketch中编辑就轻松很多。
共享样式（Shared style：layer styles&text styles）
图层共享样式PS中也能复制黏贴，然文字样式的编辑和共享PS中并没有。共享文字样式等同于直接在软件中调用文字规范，非常有用的功能~
▲ 紫色文件夹即应用了符号（来源：官网）
6. 原生测量利器
十分好用的标尺工具
如果需要查看两个元素之间的距离，在选中第一个元素后按住Alt然后将光标指向第二个元素即可。
此时如果按住Alt并移动元素，便能在移动过程中时刻看到元素之间的距离变化：
▲ 对齐也变得非常容易
布局网格和参考线
参考线是PS比较渣的点，只能一条条来，不支持布局式参考线（按比例建立多条），做界面设计时基本要借助第三方插件，而在Sketch中就很方便啦。
▲ 参考线批量一键设置
7. 灵活的切图和输出
批量输出爽爆，还可以自动画出切片大小（slice），切片输出直观方便 （包括上文提到的九宫变形）
可以导出 0.5x、1x、2x、3x、512W 和 512H 的版本，同时还可以自定义不同尺寸的后缀。
▲ 一键导出多种尺寸和格式
8. 前景好迭代快
手机端配套支持
自带的Sketch Mirror支持同步手机端，时时查看效果。
IOS 各种支持的好，且内置的ios模板 （artboard），各种文档尺寸不用手动输。
Sketch是写码的设计师最爱，可能是代码调用方便（？）以下是Avocode（号称是连接设计师与码农的桥梁）做的调研报告《》中关于软件使用比例的截图。
可以理解会有不少创业型小团队将Sketch作为主力设计工具。
Sketch的使用比例快要赶上PS
社区繁荣插件多
Sketch由于备受追捧，社区的活跃度高，各种插件、资源查找方便。
小团队迭代快
作为为设计师存在的软件，据说非常愿意倾听设计师意见，响应迅速、更新迭代快。
Part 2 Sketch的三大痛点
1. 弱爆的位图处理能力
位图处理就在两个地方：
简单的投影和模糊（4种模糊方式）
位图编辑功能：两个选区工具（魔术棒和选择工具）、反选、裁剪、矢量填充和直接填充。
当然并没有画笔、滤镜种种，且图层样式只有四种：填充、描边、投影、内阴影（没有常用的内外发光 斜面浮雕）
所以说不适于做拟物类界面设计，用Sketch挑战绘图向设计很低效。
2. 格式支持局限，难以团队协作
不支持：PSD和AI文件，部分支持eps/svg。
支持：除图片文件jpg/png/tiff/pdf外，可以导出eps/svg（可以与AI对接）
3. 平台和语言限制
Sketch在官网上的定位就是 —— Sketch- Professional Digital Design for Mac
首先需要Mac，且只有英文系统 （可能会有中文字体支持问题）
如：无法方便地为一段中英混合的文字指定中英文字体（一个知乎上看到的槽点）
“比如说「你好Hello」这几个字，在PS下可以先设为冬青黑，再设为Avenir Next，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持这样的操作，为大段文字设置不同的中英文字体就是灾难。”
字体行高诡异
不同字体的实际行高也不一样，做列表类界面的时候特别麻烦。
另外 Sketch 的行高很有问题，我随手找过几个字体对比过，比如在行高设为 88px 时，每个字体的行高都不一样，行高设为自动时不同字体文本框 padding 也是不同的。
排版对齐很麻烦
Photoshop 的文字有分「段落文本（Paragragh）」和「点文本（Point）」，Sketch中 对应的则是「Fixed」和「Auto」，看上去 Auto 对应的是 PS 里的 点文本，但是 Sketch 的文本框上下会留出一些留白间距，而 PS 则是没有留白间距的处理，这样一来，对齐的时候 PS 感觉会更精准一些。
▲ 任意三种字体上对齐的结果
拼界面无明显优势
运行超快的Sketch能否拿来拼（位图）界面？
导入了一套约18M的文件，其中包含jpg和png文件。移动位图过程中有明显卡顿，九宫切图因为自动化所以会比（ps）较快，但无法做常用的位图编辑，总体交互操作相较PS也没有太多优势。
▲ 18M输出文件
Part 3 结论：不妨一试
诚然Sketch对位图编辑是非常不友好的，完全不能与PS 相提并论，因此现阶段Sketch 一定不是必要工具。当然它的卖点本来就无关位图，其针对UI设计的操作、交互模式大大提高工作效率。不过就像大家知道AI做矢量比PS高效，但就是不移步AI一样（实际工作中位图处理多过矢量)，软件切换多少有心理成本。另外还涉及到团队协作问题，Sketch 现如今在我司还如此孤立无援，且还要多背一台MacBook。
但是Sketch非常适合扁平化设计，顺应了设计理念：数值化编辑像素级精准等等， 而且矢量化设计也是一种趋势。
好玩好用，上手成本低，值得一试。
作为一枚总结一下，Sketch在以下几方面可能有所助益：
1. 移动端APP和响应式网页设计利器
全局化视野 精准的自动对齐 符号和共享样式…显然就是为此而生
2. 简单的矢量化图标
通过布尔运算能处理的图标都适合在Sketch中操作，输出也快速方便
3. 简易形（几何组合造型）尝试
Sketch的数值化编辑、非破坏性编辑使得图形组合的自由度非常高
4. 游戏界面风格稿前期设计
也就是刻画之前的各阶段：色彩搭配、布局调整、样式设计
有利于聚焦在设计过程、界面逻辑，而非细节。即避免失控（设计点偏离）以及在丰富的材质中迷失。
Abobe的反击
当然PS也已经向sketch学习，PS CC 2015推出Design Mode，看上去也是萌萌哒。
▲ Design Mode *
并没有用过。看讨论是说由于软件体量悠久的操作习惯等问题只是小改，没有多好用。 这个有空研究……
搜集资料的过程中还发现了CC不为人知（也许就我不知道）的功能 （附）
▲ 看图秒懂
看图秒懂，就是可以各种调用：色板、sketch的共享字体样式、常用图片是不是都在这里了 。这个有空研究……
想到PS也有一个版本是可以平铺很多画板的，但并没有很多人用。
对比Sketch和PS带来的反思
1. 设计是核心：厘清设计思路很重要
两家都是用来实现设计想法的工具，最关键的还是设计和想法，Sketch中的很多功能都是帮助设计师关注设计流程、把控层级的，
2. 主动优化流程
PS更新后有很多有意思的功能和冷知识可能因为以前的使用惯性等原因没有去开发；
培养好的使用习惯，比如图层管理、资源整理；
也许偶尔花点时间去优化流程会是一大助力；
新东西不妨弄一弄，让自己的系统更加Flexible，多多自我迭代。
对Sketch和PS的研究都尚浅，欢迎吐槽~
「Sketch教程合集持续更新中」
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量104万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注2015版CAD选中图形是蓝色萤光线，怎么改成虚线？()highlight值是1)？
已有帐号？
无法登录？
社交帐号登录The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.Sketch新手指南！10个帮你UI设计提速的Sketch使用技巧
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
Sketch新手指南！10个帮你UI设计提速的Sketch使用技巧
编者按：选择使用Sketch的理由很多，因为好奇跟风安装的同学应该不在少数，看了介绍觉得功能强大而安装的应该也不少。当然，如果你是一名UI/网页设计师，你的Mac和我一样感觉跑PS不堪重负，那么Sketch绝对能帮你排忧解难，从此告别卡顿和无所不在的进度条。
越来越多的设计师开始选择使用Sketch 设计网页、UI了，开发团队 Bohemian Coding 居功至伟。虽然这个还在不断迭代的软件还有不少Bug，并且在功能上尚未完全替代PS，但是已然可以逐渐降低使用PS这款臃肿软件的频率了。如果你想知道你是否适合使用Sketch，可以看看两大软件的对比：。
上手新软件，许多功能都不太就手，设计一个界面可能会比在PS上耗费更多的时间。所以，掌控一些实用的小技巧就非常重要了。哪怕你是Sketch新手，下面的10个小技巧也能帮你节省不少时间。
1、为画板选择合理尺寸
好吧好吧，看起来这并不是太高端的技巧，但是在Sketch中，画板的设定非常实用也非常易用。Sketch 中提供了非常多预设的画板尺寸（要不怎么说它是UI设计神器呢？这个软件就是为UI设计而生的啊！），你只需要点击A按键，就可以选择你需要的画板了！
2、搞定栅格
借助栅格系统来设计UI和网页是经常用到的技巧，在Sketch中，你只需要选择 View(视图) -> Layout Settings (布局设置)
就可以快速配置布局，或者使用Ctrl+L 这个快捷键来调用默认的布局。
3、几秒内快速复制……任何东西！
这一功能在AI和PS中常常使用，Sketch的开发者将这一功能也完全实现在这一软件中。你可以按住Option键，点击要复制的元素拖动就可以。当你将这一元素拖拽到你要的区域之后，然后使用Command+D的快捷键，就可以复制这一动作了。
注意：如果你发觉无法操作的话，可以去Preferences （偏好设置）-> Layers（图层）中解锁 pasted & duplicated objects （粘贴&复制 对象）这一选项。
4、距离测算
如果你想设计出精美的作品，那么一定要对所有的细节了如指掌。如果你想测量页面上所有元素之间的距离，只需要选定元素，按住Option键就可以。接下来，就是属于你自己的强迫症时间了~
5、善用共享样式，你会获益匪浅的
如果你的这个项目有一百多个页面，并且项目的评审已经推进到第三轮了。眼看着终止日期要到了，奇葩甲方深夜打电话给你：“咱们把所有的按钮都改成蓝色的咋样？”
好吧，先不要忙着掀桌子砸电话骂娘，你可以说“OK”的，因为你可以使用共享样式来搞定这些按钮。当你在创建你这些UI元素的时候，对于那些要重复使用的样式，你可以在左侧菜单中点击“No Shared Style”调出菜单，然后给这个样式起一个难忘的名字，然后就可以运用到更多的UI中去了。
6、”滥用”符号（Symbols）
符号，也就是Symbols 是Sketch 中一个非常实用的功能，尽管看起来有点滥用的趋势，但是它确实非常有用。
如果你设计的UI上有许多不同的状态、模式或者选项，那么你可以将单个屏幕设定为一个“符号”，然后单击工具栏中的 “转化为符号（Convert to Symbol）按钮”，再在画板上复制这一“符号”，并且创建你所需要的不同状态，唯一需要做的就是添加你设定的这个符号（Insert -> Symbol）。当你改变这个符号中的元素的时候，所有的屏幕会同时跟着更新，绝对够快捷。
7、绘制图形时拖拽它们
这是一个超级实用的技巧。当你在绘制图形的时候，比如你要画一个圆形，但是你很难一次画好并放置在正确的位置。不过，如果你在绘制过程中按住空格按键，那么你就可以在创建好之后立刻移动它到对的位置，然后继续调整尺寸。
8、飞速改变透明度
这一功能应该也是来源于PS，尽管很多人并不太去使用它。当你要调整一个元素的透明度的时候，不用去慢慢调节进度条，你只需要使用数字按键（1-0）来设定透明度，比如3就是30%透明度。
9、善用“比例（Scale）”功能
很多时候，你在创建的UI元素并不一定符合需求，大了或者小了都很正常。比如你设置了一个边缘半径20px、边框4px的按钮，如果你直接鼠标拖拽缩放，效果恐怕不会理想。如果你点击“比例（Scale）”按钮，这样来调整，效果会好很多。
10、最大限度地利用你的工作空间
大家都扛着笔记本干活儿，但是几乎所有的软件在笔记本上显示的时候，都感觉屏幕空间不够，但又不是所有时候都正好有个屏幕在旁边帮你输出屏幕内容，这个时候，就需要你善用屏幕空间了。如果你要隐藏左右两边的菜单栏，点击Ctrl+Option+Cmd+3 组合键，如果要单独隐藏左边或者右边，快捷键是Ctrl+Option+Cmd+1 和Ctrl+Option+Cmd+2 。
静电的Sketch教程合集持续更新中：
原文地址：
优设译者：
「子木说」
说Sketch是为UI设计而生一点错都没有，不过上手之后你会发现它的许多功能压根就是来自Adobe系的这堆软件。反过来看，其实PS和AI从某种程度上来说“也是为UI设计而生”的，不过你得把其中某些功能单独提出来再组合到一起来看。比如PS中的“图层复合”功能，它可以帮你在同一文件中呈现不同的页面，它主要用来记录图层的可见性、位置和外观，虽然有一定局限性，但是拿来做UI设计倒是非常实用。详细了解可以参考咱们之前发过的文章：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量93万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注