01-初识sketch-sketch优势

布满荆棘的人生 2022-11-25 05:25 301阅读 0赞

个人公众账号:IT入门

# 一.Sketch简介 #

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

--摘自《sketch用户手册》

![format_png][]

### **（1）Sketch是什么？** ###

Sketch是一款轻量、高效的矢量设计工具，它在矢量编辑基础上，提供了基本的位图样式支持（例如模糊和颜色调节），支持矩形工具、文字工具、布尔运算等功能。你可以把它看做是简化版的Photoshop，矢量版的Axure rp。但需要注意的是，Sketch不是一款位图编辑器。这就是说，你如果想做的是照片修正、画笔绘图，这款软件就不合适。

# Part 1 Sketch的八大优势 #

## **1. 小清新颜值高** ##

简洁高效 – 抗干扰

界面简洁美好，功能清晰。无悬浮面板，选择一个对象/图层（objects）就会展示对应检查器（inspectors），不会有PS中处理大文件时各种开关窗口情况。

![format_png 1][]

▲ 软件截图（全屏）：左侧栏为图层区；右侧栏为检查器区

## **2. 使用畅快易上手** ##

### **2.1 无限画布&画板 – 自由度高** ###

不管有多少画布（pages）都被包含在同一个文档中，还可以在程序内部进行搜索，便于管理大型项目

在一个画布中可以平铺无限个画板（Artboard），这样的全局视野，规划自由度高，也利于思考界面元素关系和维护界面设计的一致性，方便各种check。

![format_png 2][]

▲ 示意文件截图（局部）：右侧为随意摆放的4个画板

说明：Sketch文档>Page>Artboard>Layer

在一个Sketch文档中可以建立多个画布（Page），画布中可以自由放置画板（Artboard）。

而每个元素/对象都作为一个图层（layer），以图层或组（group）的形式安置在artboard中。

### **2.2 无冷启动时间 – 运行快** ###

0启动时间，也就是没有类似于PS的启动画面，节省了等待时间

由于多是矢量文件，因此体量小，运行快。

### **2.3 简化操作 – 交互体验好** ###

操作人性，各种贴心设计 ，使眼与手在界面设计过程中更加轻松高效完成工作，上手指数超高。

方便选择：

上文提到的Sketch中不同面板位置是固定的，选中某个对象才会显示对应的检查器，不用在众多属性窗口中苦苦寻觅

鼠标掠过画布中元素的时，左侧图层栏会出现蓝色框对对焦到选中的元素

左侧分栏可以看到矢量图形的的缩略图，不用仔细阅读面板信息即可准确选择

![format_png 3][]

▲ 选中右侧元素”BHBH“，左侧蓝色框自动对焦图层。

简而言之，不懂PS/AI的小白上手Sketch完全无碍。

## **3. 像素级精准** ##

### **3.1像素级对齐** ###

Sketch中在编辑路径时，可以选择三种对齐方式——

Don’t round to nearest pixels：不自动对齐像素：编辑路径时可以随意移动节点

Round to half pixels：以半像素为单位对齐：可能出现半像素

Round to full pixels：以1像素为单位对齐像素：锚点全部像素对齐，避免锯齿，可以节省设计湿大量微调时间。

![format_png 4][]

▲ 三种对齐方式

![format_png 5][]

▲ 三种对齐方式的说明图

### **3.2数值化编辑** ###

矢量软件的一大优势就是可以编辑精准，Sketch中可以实时调节形状的半径/数量等各个参数，数值化编辑让设计更加精准和专业。

基于公式运算的变形：

PS中的标尺和矢量工具都很笨重，比如建立倍数关系的东西、按黄金分割分配比例、做菲波那切数列图标什么的都很纠结。

而在Sketch中甚至可以直接完成简单运算：

![format_png 6][]

▲ 像 100 \* 1.6 + 60 这样的运算可以在 Sketch 中进行  \*[图片来源][Link 1]

Sketch让设计师更加关注数值，更理性有逻辑的去编排布局，而不是随意拖拽元素。

## **4. 非破坏性编辑** ##

随时调节形状的半径/数量：

在PS中如果需改变已建图形的半径就要重新建立形状，而Sketch则可以随时编辑。

![format_png 7][]

▲ 圆角变形就是辣么简单

### **随时编辑的布尔运算** ###

跟PS和AI一样，[sketch][]也有联合、相减、相交、差异这些布尔运算。

更方便的地方在于参与运算的子形状都可以即时编辑。每个路径都可以随时修改运算方式和层次等操作，方便管理复杂的形状组合。

比PS中的合并形状更具自由度，也更容易理解层级关系。

![format_png 8][]

▲ 每层与下一层发生布尔运算

### **九宫切片自动化** ###

导入位图文件后可以调整九宫节点，直接实现九宫变形，节省了人工完成的时间。

![format_png 9][]

▲ 九宫编辑

### 可视化渐变调节 ###

由于是矢量文件，所以实现了参数可视化，在图形可以看到直观效果。

![format_png 10][]

▲ 图形上方即有渐变操作杆直接调节

### **复制旋转** ###

可以方便地建立旋转图形及编辑中心点。

![format_png 11][]

总觉得有点酷炫。

### **图层样式可无限累加** ###

可逐层设置的多种混合模式，也就是说可以加外描边的外描边的外描边的外描边……

并可以任意调节各层样式。另外，描边宽度也可以加锚点改变哒（同AI）

## **5. 可调用的嵌套样式** ##

Sketch的明星功能符号（Symbol）和共享样式（Shared style：layer styles&text styles）：

### **符号（Symbol）** ###

就是共享元素，一次编辑，所有共用的地方全部生效，就像是 Photoshop 里的智能对象，且生效范围仅在每一个 .[sketch][] 文件中。不同之处在于Sketch中改变一个元素副本大小所有都同步，PS中智能对象的大小是独立的；且Sketch的符号中文本是可以单独编辑的。

符号被运用的最广泛的地方可能是按钮这样的基本 UI 元素，举个栗子，在PS中建立两个文字不同的图标需要新建智能对象或者文字与按钮分离，编辑时需要打开一个或两个智能对象……Sketch中编辑就轻松很多。

### **共享样式（Shared style：layer styles&text styles）** ###

图层共享样式PS中也能复制黏贴，然文字样式的编辑和共享PS中并没有。共享文字样式等同于直接在软件中调用文字规范，非常有用的功能~

![format_png 12][]

▲ 紫色文件夹即应用了符号（来源：官网）

## **6. 原生测量利器** ##

十分好用的标尺工具

如果需要查看两个元素之间的距离，在选中第一个元素后按住Alt然后将光标指向第二个元素即可。

此时如果按住Alt并移动元素，便能在移动过程中时刻看到元素之间的距离变化：

![format_png 13][]

▲ 对齐也变得非常容易

### **布局网格和参考线** ###

参考线是PS比较渣的点，只能一条条来，不支持布局式参考线（按比例建立多条），做界面设计时基本要借助第三方插件，而在Sketch中就很方便啦。

![format_png 14][]

▲ 参考线批量一键设置

## **7. 灵活的切图和输出** ##

批量输出爽爆，还可以自动画出切片大小（slice），切片输出直观方便 （包括上文提到的九宫变形）

可以导出 0.5x、1x、2x、3x、512W 和 512H 的版本，同时还可以自定义不同尺寸的后缀。

![format_png 15][]

▲ 一键导出多种尺寸和格式

## **8. 前景好迭代快** ##

手机端配套支持

自带的Sketch Mirror支持同步手机端，时时查看效果。

IOS 友好

IOS 各种支持的好，且内置的ios模板 （artboard），各种文档尺寸不用手动输。

![format_png 16][]

## **CSS友好** ##

Sketch是写码的设计师最爱，可能是代码调用方便（？）以下是Avocode（号称是连接设计师与码农的桥梁）做的调研报告《[How designer worked in 2015][]》中关于软件使用比例的截图。

可以理解会有不少创业型小团队将Sketch作为主力设计工具。

![format_png 17][]

▲  Sketch的使用比例快要赶上PS

**社区繁荣插件多**

Sketch由于备受追捧，社区的活跃度高，各种插件、资源查找方便。

**小团队迭代快**

作为为设计师存在的软件，据说非常愿意倾听设计师意见，响应迅速、更新迭代快。

**丰富的插件库**

Sketch支持第三方插件，第三方插件可以让我们更高效地使用Sketch做设计，例如通过Sketch Measure插件，我们很容易为设计稿进行标注，方便前端开发进行效果实现。

![format_png 18][]

artboard-一个文件完成整个工程的设计

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

![format_png 19][]

### **丰富的组件库** ###

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

![format_png 20][]

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

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

![format_png 21][]

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

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

### **界面简单易上手** ###

一款软件是否好用，上手难度是初学者首先需要接受的考验，Sketch界面简单易上手，大大降低了初学者的学习门槛，这也是Sketch一贯强调的：“我们提供一款轻量的软件，希望设计师们专注于设计本身”。和Photoshop的界面对比，Sketch的界面十分简洁，这也是我极力推荐交互设计师学习这款软件的原因，它不需要你花多少精力就能上手，并实际应用到交互设计中。

![format_png 22][]

![format_png 23][]

## ##

# 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 感觉会更精准一些。

![format_png 24][]

▲ 任意三种字体上对齐的结果

拼界面无明显优势

运行超快的Sketch能否拿来拼（位图）界面？

导入了一套约18M的文件，其中包含jpg和png文件。移动位图过程中有明显卡顿，九宫切图因为自动化所以会比（ps）较快，但无法做常用的位图编辑，总体交互操作相较PS也没有太多优势。

![format_png 25][]

▲ 18M输出文件

# Part 3 结论：不妨一试 #

诚然Sketch对位图编辑是非常不友好的，完全不能与PS 相提并论，因此现阶段Sketch 一定不是必要工具。当然它的卖点本来就无关位图，其针对UI设计的操作、交互模式大大提高工作效率。不过就像大家知道AI做矢量比PS高效，但就是不移步AI一样（实际工作中位图处理多过矢量)，软件切换多少有心理成本。另外还涉及到团队协作问题，Sketch 现如今在我司还如此孤立无援，且还要多背一台MacBook。

但是Sketch非常适合扁平化设计，顺应了设计理念：数值化编辑像素级精准等等， 而且矢量化设计也是一种趋势。

好玩好用，上手成本低，值得一试。

作为一枚[GUI][]总结一下，Sketch在以下几方面可能有所助益：

### **1. 移动端APP和响应式网页设计利器** ###

全局化视野 精准的自动对齐 符号和共享样式…显然就是为此而生

### **2. 简单的矢量化图标** ###

通过布尔运算能处理的图标都适合在Sketch中操作，输出也快速方便

### **3. 简易形（几何组合造型）尝试** ###

Sketch的数值化编辑、非破坏性编辑使得图形组合的自由度非常高

### **4. 游戏界面风格稿前期设计** ###

也就是刻画之前的各阶段：色彩搭配、布局调整、样式设计

有利于聚焦在设计过程、界面逻辑，而非细节。即避免失控（设计点偏离）以及在丰富的材质中迷失。

# Abobe的反击 #

当然PS也已经向sketch学习，PS CC 2015推出Design Mode，看上去也是萌萌哒。

![format_png 26][]

▲ Design Mode

并没有用过。看讨论是说由于软件体量悠久的操作习惯等问题只是小改，没有多好用。 这个有空研究……

搜集资料的过程中还发现了CC不为人知（也许就我不知道）的功能[Libraries panel][] （附[教程][Link 2]）

![format_png 27][]

▲ 看图秒懂

看图秒懂，就是可以各种调用：色板、sketch的共享字体样式、常用图片是不是都在这里了 。这个有空研究……

想到PS也有一个版本是可以平铺很多画板的，但并没有很多人用。

# 对比Sketch和PS带来的反思 #

### **1. 设计是核心：厘清设计思路很重要** ###

两家都是用来实现设计想法的工具，最关键的还是设计和想法，Sketch中的很多功能都是帮助设计师关注设计流程、把控层级的，

**目录**

一.Sketch简介

（1）Sketch是什么？

Part 1 Sketch的八大优势

1. 小清新颜值高

2. 使用畅快易上手

2.1 无限画布&画板 – 自由度高

2.2 无冷启动时间 – 运行快

2.3 简化操作 – 交互体验好

3. 像素级精准

3.1像素级对齐

3.2数值化编辑

4. 非破坏性编辑

随时编辑的布尔运算

九宫切片自动化

可视化渐变调节

复制旋转

图层样式可无限累加

5. 可调用的嵌套样式

符号（Symbol）

共享样式（Shared style：layer styles&text styles）

6. 原生测量利器

布局网格和参考线

7. 灵活的切图和输出

8. 前景好迭代快

CSS友好

丰富的组件库

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

界面简单易上手

Part 2 Sketch的三大痛点

1. 弱爆的位图处理能力

2. 格式支持局限，难以团队协作

3. 平台和语言限制

字体行高诡异

排版对齐很麻烦

Part 3 结论：不妨一试

1. 移动端APP和响应式网页设计利器

2. 简单的矢量化图标

3. 简易形（几何组合造型）尝试

4. 游戏界面风格稿前期设计

Abobe的反击

对比Sketch和PS带来的反思

1. 设计是核心：厘清设计思路很重要

2. 主动优化流程

--------------------

PS更新后有很多有意思的功能和冷知识可能因为以前的使用惯性等原因没有去开发；

培养好的使用习惯，比如图层管理、资源整理；

也许偶尔花点时间去优化流程会是一大助力；

新东西不妨弄一弄，让自己的系统更加Flexible，多多自我迭代。

[format_png]: /images/20221124/f8ad683369564aad9afd6d5b26db2051.png
[format_png 1]: /images/20221124/4b29c8c0455d4ff0889ef493a7428b2f.png
[format_png 2]: /images/20221124/80da3fd2806746b593226ee9898a3089.png
[format_png 3]: /images/20221124/46572a4d7adc496f8af3ffe96782fac5.png
[format_png 4]: /images/20221124/d263337df7bf43fabae22f939c01f911.png
[format_png 5]: /images/20221124/187a977e52554d2dade6a3b07d05886a.png
[format_png 6]: /images/20221124/3b2de7f0255843ccb1ab3e9b2a55a829.png
[Link 1]: https://medium.com/@dyzdyz010/photoshop-sketch-75dc95dc777d#.lr2n0nywy
[format_png 7]: /images/20221124/f91d7e6828a84ef9a053a7302e0550f0.png
[sketch]: http://www.uisdc.com/tag/sketch
[format_png 8]: /images/20221124/c8aeeecc47fb45f6ae305a7badb48d66.png
[format_png 9]: /images/20221124/9eec7c78a22c4563b01d0e33bde90ce6.png
[format_png 10]: /images/20221124/117c382b58c84dbfa66f85b12589391e.png
[format_png 11]: /images/20221124/b357cccac0074186ab53948592c1037e.png
[format_png 12]: /images/20221124/1c8190ced6d742f7a75d8ba7d28670d1.png
[format_png 13]: /images/20221124/799d3a23eb254ff8a1d52d19bae41ed9.png
[format_png 14]: /images/20221124/5920b760c1e447e48c44c8fa513faf6a.png
[format_png 15]: /images/20221124/9284593911ed4f2f9a8e0d6e71134667.png
[format_png 16]: /images/20221124/195bebad2dac41efa656b619d0295fa9.png
[How designer worked in 2015]: https://2015.avocode.com/#summary
[format_png 17]: /images/20221124/7021d6a2d27f4eb0ab0af03f1c606924.png
[format_png 18]: /images/20221124/b36f8162964a4ff0afabb394e5522e22.png
[format_png 19]: /images/20221124/2ccb2a1e92d2445eb9945eb813749306.png
[format_png 20]: /images/20221124/e53c98984c004c5686be340bea987a3e.png
[format_png 21]: /images/20221124/0d6376fdfced4018ae532014056ebe76.png
[format_png 22]: /images/20221124/9ef3ee16d3f544f8846a69a086220fcf.png
[format_png 23]: /images/20221124/42f2814bd1624dffa7a7b1a964d29dbf.png
[format_png 24]: /images/20221124/e1f3958b1acd4bd2b8b7b6d90489a1b4.png
[format_png 25]: /images/20221124/33f620cf92f34c8d8b387c3d38d0b44e.png
[GUI]: http://www.uisdc.com/tag/gui
[format_png 26]: /images/20221124/dc90137d4ee94fc3a764bea3c7d16aef.png
[Libraries panel]: http://blogs.adobe.com/jkost/2014/10/the-libraries-panel-in-photoshop-cc.html
[Link 2]: https://www.youtube.com/watch?v=76A1i9o7g6U
[format_png 27]: /images/20221124/81a1568e05324aae9e466991091ef770.png