Sketch 3 超详细新手教程
Sketch 是一款专为 macOS 平台设计的矢量图形编辑器，主要用于 UI/UX 设计、网页设计和图标设计，它的核心优势在于简洁、高效和强大的插件生态。
（图片来源网络，侵删）
第一部分：准备工作与界面初探
安装 Sketch
- 下载：访问 Sketch 官方网站 (sketch.com)。
- 购买：Sketch 采用订阅制，按月或按年付费。
- 安装：下载
.dmg文件后，拖拽到应用程序文件夹即可。
熟悉 Sketch 界面
打开 Sketch，你会看到一个干净整洁的界面，让我们来认识一下主要区域：
- 工具栏：位于屏幕顶部，包含文件操作、分享、视图控制等。
- 画布：中间的白色区域，就是你进行设计的地方。
- 图层列表：位于右侧，这是 Sketch 的核心，它以树状结构显示你画布上的所有元素（图层、组、页面）。
- 检查器：也位于右侧，当选中一个元素时，这里会显示该元素的详细属性，如位置、尺寸、颜色、边框、阴影、文字等。
- 插入栏：位于屏幕左侧，包含各种形状工具、文字工具、图片占位符等。
第二部分：核心概念与基础操作
图层 - 万物皆图层
Sketch 中的一切都是一个“图层”，一条线、一个矩形、一张图片、一段文字，都是一个图层，理解图层是掌握 Sketch 的第一步。
- 图层类型：
- 形状：矩形、圆形、线条等。
- 图片：导入的图片文件。
- 文字：文本图层。
- 组：将多个图层组合在一起，方便管理。
- 符号：可重复使用的组件（如按钮、导航栏），修改符号会更新所有实例。
- 页面：一个 Sketch 文件可以包含多个设计页面（如首页、登录页、个人中心）。
矢量 vs. 位图
- 矢量图形：基于数学公式，由点和线构成。无限放大也不会失真，文件体积小，Sketch 主要处理矢量图形。
- 位图图形：由像素构成，放大后会变得模糊，照片就是典型的位图。
基础操作
- 选择工具：这是最常用的工具（快捷键
V），用于选择和移动图层。 - 绘制形状：
- 从左侧工具栏选择矩形、圆形等。
- 在画布上按住鼠标左键并拖动即可绘制。
- 移动和复制：
- 移动：用选择工具拖动图层。
- 复制：按住
Option(Alt) 键的同时拖动图层，即可复制出一个新图层。
- 调整大小：
- 选中图层后,拖动边角的控制点。
- 按住
Shift键可以等比例缩放。
- 对齐与分布：
- 选中多个图层后,顶部菜单栏会出现
排列->对齐和分布选项，这对于让界面元素整齐排列至关重要。
- 选中多个图层后,顶部菜单栏会出现
- 颜色填充：
- 选中一个图层,在右侧检查器的
填充选项中，点击颜色块即可打开颜色选择器。 - 你可以设置纯色、渐变色，甚至使用图片填充。
- 选中一个图层,在右侧检查器的
第三部分：实战演练 - 设计一个简单的登录界面
让我们通过动手实践来巩固知识,我们的目标是设计一个包含 Logo、输入框和登录按钮的登录界面。
步骤 1：创建新文档
- 打开 Sketch，选择
文件->新建。
步骤 2：绘制 Logo
- 绘制圆形：从左侧工具栏选择 圆形工具，按住
Shift键在画布上拖动，画一个完美的正圆。 - 填充颜色：选中圆形，在右侧检查器中设置一个填充色，比如蓝色。
- 添加文字：选择 文字工具，在圆形旁边输入 "MyApp"。
- 调整文字：选中文字图层，在检查器中可以修改字体、字号、颜色等。
- 创建组：同时选中圆形和文字图层，右键选择
编组(快捷键Cmd + G)，这样它们就被视为一个整体，方便移动和管理。
步骤 3：创建输入框
- 绘制矩形：选择 矩形工具，画一个长条形矩形作为输入框的背景。
- 设置样式：
- 填充：设置为浅灰色（#F5F5F5）。
- 边框：在检查器中，点击边框图标，设置一个 1px 的灰色边框。
- 圆角：在检查器的
边框选项中，调整圆角半径，让矩形看起来更柔和。
- 添加占位符文字：使用文字工具在输入框内输入 "请输入用户名"。
- 对齐：将文字图层和输入框图层垂直居中对齐，选中两者，顶部菜单
排列->对齐->垂直居中。
步骤 4：创建登录按钮
- 绘制按钮：再画一个矩形，比输入框稍宽一些。
- 设置样式：
- 填充：设置一个醒目的颜色，比如绿色。
- 圆角：和输入框保持一致或稍大一些。
- 文字：在按钮上方添加 "登录" 文字，颜色设为白色，并加粗。
- 对齐：将按钮和输入框水平居中对齐。
步骤 5：整理图层
查看右侧的图层列表,你会看到所有杂乱的图层，让我们整理一下：
（图片来源网络，侵删）
- 将 Logo、输入框、按钮分别拖动到独立的图层中，或者创建新的组并重命名（如 "Logo", "Form"）。
- 一个整洁的图层列表会让你的项目一目了然,便于后续修改。
恭喜！ 你已经完成了第一个 Sketch 设计稿。
第四部分：进阶技巧
使用符号
符号是提升设计效率的利器,你网站上有多个按钮，如果使用符号，修改一个就能全部更新。
- 创建符号：
- 选中你想要做成符号的图层（比如一个登录按钮）。
- 右键选择
创建符号，或者使用快捷键Cmd + Option + /。 - 在图层列表中,它会被一个带圆点的矩形框起来。
- 使用符号：
- 选中符号图层,右键选择
在画布中创建实例。 - 你有了两个完全一样的按钮。
- 选中符号图层,右键选择
- 更新符号：
- 双击图层列表中的主符号（带圆点的那个）进入编辑模式。
- 修改颜色或文字。
- 点击画布左上角的
完成按钮。 - 所有实例都会自动更新！
使用网格和布局
- 网格：
视图->显示网格，网格可以帮助你对齐元素，保持界面的一致性。 - 布局：选中图层后，在检查器的
布局面板中，可以设置固定的宽度和高度，或者设置为灵活的宽度（百分比）。
导出设计稿
Sketch 设计稿不能直接在浏览器中运行，需要导出为图片或切图。
- 导出单个图层：
- 选中你想要导出的图层（比如一个按钮）。
- 在右侧检查器的
导出面板中，你可以设置导出的格式（PNG, JPG, SVG 等）和分辨率。 - 点击
导出按钮，或直接使用快捷键Cmd + Option + S。
- 导出多个图层：
- 按住
Cmd键选中多个图层。 - 同样在
导出面板中设置，然后点击导出所有选定的图层。
- 按住
使用插件
Sketch 的强大之处在于其插件生态，插件可以扩展 Sketch 的功能。
（图片来源网络，侵删）
- 安装插件：
- 访问 Sketch Repo 或 Figma Community (很多插件是通用的)。
- 下载
.sketchplugin文件。 - 双击文件,Sketch 会自动安装并提示你重启。
- 推荐插件：
- Content Generator：一键生成大量占位文本和图片。
- Sketch Measure：自动标注设计稿的尺寸、间距和颜色。
- Craft (by InVision)：可以连接到数据源，自动生成列表、卡片等动态内容。
第五部分：学习资源与总结
- 核心是图层：时刻关注右侧的图层列表，保持它的整洁。
- 善用符号：对于重复使用的元素，第一时间创建符号。
- 对齐是关键：使用对齐工具让你的设计看起来更专业。
- 插件是加速器：探索并使用合适的插件，能极大提升你的工作效率。
学习资源
- 官方资源：
- Sketch 官方文档：sketch.com/learn
- Sketch 官方 YouTube 频道：有大量官方教程。
- 社区和博客：
- UX Collective：Medium 上的一个专栏，有大量高质量的 Sketch 和设计教程。
- Smashing Magazine：定期发布深度设计文章。
- 视频教程：
- 在 YouTube 上搜索 "Sketch Tutorial for Beginners"，有大量视频可供选择。
- 国内平台如 Bilibili、站酷上也有很多中文教程。
从今天开始,大胆地使用 Sketch 去创作你的第一个项目吧！熟能生巧，多练多看，你很快就能掌握这款强大的设计工具。
