Sketch 制作 App 界面视频教程大纲

视频系列名称： 《从零开始：Sketch App UI/UX 设计全流程》 目标观众： UI/UX 设计初学者、产品经理、对 App 设计感兴趣的开发者 预期成果： 学员能够独立使用 Sketch 完成一个 App 的主要界面设计,并了解设计规范和交付流程。

课程总览 (共 8 个模块)

各模块详细脚本与要点

模块 1：入门准备：认识 Sketch (15 分钟)

• Sketch 保姆级入门：界面、工具与核心概念
• 内容大纲：
  1. 什么是 Sketch？ (1分钟)
     • 简介：一款专为 UI/UX 设计师打造的 macOS 矢量设计工具。
     • 优势：轻量、插件生态强大、组件化设计、团队协作。
  2. 安装与界面初探 (5分钟)
     • 安装： 提醒需要 macOS 系统，可通过官网或 App Store 购买/下载。
     • 主界面介绍：
       • 顶部工具栏： 常用操作（新建、打开、保存、撤销/重做）。
       • 左侧边栏： 图层列表（最核心，管理所有设计元素）。
       • 中间画布： 你的设计工作区。
       • 右侧边栏： 检查器（最核心，调整选中元素的属性）。
       • 底部状态栏： 缩放比例、画布尺寸等。
  3. Sketch 的核心概念 (9分钟)
     • 图层： 所有东西都是图层（形状、图片、文字、组）。
     • 矢量 vs. 位图： 强调 Sketch 的矢量特性,可无限缩放不失真。
     • 像素网格： 介绍“对齐像素”功能,让设计更锐利。
     • Artboard (画板)： 相当于一个独立的页面或屏幕,是组织设计的基础。
     • Symbol (组件)： 【重点】 可复用的设计元素，修改一处,所有实例同步更新。
     • Style (样式)： 【重点】 颜色、文本、效果的预设,统一设计语言。
     • Shared Library (共享库)： 团队共享的 Symbol 和 Style。

模块 2：基础操作：绘制你的第一个界面 (25 分钟)

• Sketch 基础操作：从画一个按钮开始
• 内容大纲：
  1. 创建新文件与画板 (5分钟)
     • 新建文件，创建一个 375x667 (iPhone 8 尺寸) 的画板。
     • 画板的命名与管理。
  2. 绘制基本形状 (10分钟)
     • 矩形工具： 绘制一个手机屏幕背景。
     • 圆角矩形工具： 绘制一个按钮。
     • 圆形工具： 绘制一个头像或图标。
     • 直线工具 & 星形工具： 快速介绍。
     • 调整属性： 在检查器中修改填充色、边框、圆角半径。
  3. 布尔运算 (5分钟)
     • 【重点演示】 将两个形状选中，使用顶部菜单的 Shape Path (形状路径) 进行：
       • 联集、减去、交集、差集。
       • 实战：用两个圆角矩形通过“减去”操作,创建一个环形进度条。
  4. 添加与编辑文字 (5分钟)
     • 使用文字工具输入文本。
     • 在检查器中调整字体、字号、字重、颜色、行高。
     • 文本的对齐方式。

模块 3：进阶技巧：组件与样式系统 (30 分钟)

• Sketch 进阶魔法：打造可复用的组件库
• 内容大纲：
  1. 创建你的第一个 Symbol (组件) (15分钟)
     • 【重点演示】 将之前绘制的按钮（包括背景和文字）全部选中。
     • 右键点击 -> Create Symbol (创建组件) 或使用快捷键 ⌥⌘C。
     • Symbol 实例： 在画布上双击 Symbol 库中的组件,创建实例。
     • 编辑与覆盖：
       • 双击实例进入编辑模式,修改所有实例。
       • 按住 键单击实例的某个元素（如文字），可以仅修改当前实例，而不会影响 Symbol 源文件。【核心技巧】
  2. 建立颜色样式 (5分钟)
     • 【重点演示】 选中一个颜色，在检查器中点击 号创建颜色样式。
     • 为品牌主色、辅助色、背景色、文字色等创建样式。
     • 应用样式：选中任何形状,从颜色样式中选择一键应用。
  3. 建立文本样式 (5分钟)
     • 【重点演示】 选中一段格式化好的文字，创建文本样式（标题、副标题、正文、说明文字）。
     • 应用文本样式，统一整个 App 的字体层级。
  4. 使用共享库 (5分钟)
     • 演示如何将创建好的 Symbol 和 Style 保存到共享库。
     • 在新文件中如何引入共享库,实现设计资产的统一管理。

模块 4：实战演练：设计 App 首页 (40 分钟)

• Sketch 实战：从零设计一个电商 App 首页
• 内容大纲：
  1. 分析与规划 (5分钟)

     展示最终效果图，分析首页包含哪些模块：导航栏、搜索栏、Banner、分类图标、商品列表等。

  2. 搭建布局框架 (10分钟)
     • 使用 矩形工具 和 对齐工具 (检查器中) 搭建页面基本结构。
     • 引入 8pt 栅格系统 概念,让元素间距更规整。
  3. - 使用组件 (20分钟)
     • 导航栏： 从 Symbol 库拖入导航栏组件,修改标题和图标。
     • 搜索框： 创建并复用搜索框组件。
     • Banner： 导入一张示例图片,调整圆角和阴影。
     • 分类图标： 使用 自动布局，将图标和文字水平排列，选中后点击检查器中的 Auto Layout 按钮，设置间距和填充,创建一个可伸缩的列表组件。
     • 商品卡片： 创建一个包含商品图、标题、价格、销量的商品卡片 Symbol。
  4. 最终调整与美化 (5分钟)
     • 添加阴影、内边距等细节,让界面更有层次感。
     • 使用 ⌘F 查找图层,快速定位和修改。

模块 5：深化设计：列表页与详情页 (35 分钟)

• Sketch 深化设计：制作动态列表与详情页
• 内容大纲：
  1. 设计列表页 (20分钟)
     • 重复网格： 【重点演示】 选中商品卡片 Symbol，使用顶部菜单的 Repeat (重复) 或快捷键 ⌥⌘G。
     • 调整重复网格的行列数和间距,快速生成商品列表。
     • 创建不同状态的组件： 为商品卡片创建“已售罄”、“收藏”等不同状态的 Symbol,并通过覆盖功能实现。
  2. 设计详情页 (15分钟)
     • 创建新的画板,设计商品详情页。
     • 嵌套组件： 在详情页中复用首页的导航栏组件,并覆盖返回按钮和标题。
     • 设计商品图片轮播、规格选择、购买按钮等模块。

模块 6：交互与原型：让设计“活”起来 (20 分钟)

• Sketch 原型设计：轻松制作 App 交互流程
• 内容大纲：
  1. 进入原型模式 (2分钟)
     • 点击右上角的 Prototype (原型) 模式。
  2. 创建页面链接 (10分钟)
     • 【重点演示】 在首页的某个商品卡片上，按住 键并拖动到详情页的画板上,创建一个链接。
     • 设置转场动画：点击连接线，在下方的检查器中选择 Smart (智能) 或 Slide (滑动) 等动画效果。
  3. 制作一个简单流程 (8分钟)
     • 将首页 -> 列表页 -> 详情页 用链接串联起来。
     • 添加一个返回按钮的链接,从详情页返回列表页。
  4. 预览与分享 (5分钟)
     • 使用预览窗口 (⌘P) 查看交互效果。
     • 点击右上角 Share 按钮，生成一个可分享的链接,方便团队和客户查看。

模块 7：设计规范与交付：交给开发 (25 分钟)

• 设计交付：Sketch 导出切图与标注指南
• 内容大纲：
  1. 导出切图 (15分钟)
     • 【重点演示】 选中需要导出的图层（如图标、按钮）。
     • 使用 Export (导出) 面板（右侧边栏）。
     • 格式： PNG, JPG, SVG, WebP 等。
     • 尺寸： @1x, @2x, @3x (一键导出多倍图)。
     • 切片： 使用切片工具 (⌘K) 精确划定导出区域。
  2. 添加标注 (5分钟)
     • 使用插件： 推荐使用 Sketch Measure 或 Zeplin (需配合)。
     • 演示 Measure： 安装插件后，点击 Run，即可自动生成带尺寸、间距、颜色标注的画板。
  3. 制作设计规范库 (5分钟)
     • 将整理好的 Symbol、颜色、文本样式、导出的切图和标注文档,打包成一个交付文件夹。
     • 介绍如何使用 Sketch Cloud 在线分享和管理整个设计项目。

模块 8：总结与展望 (10 分钟)

• Sketch 学习之路：插件、资源与未来
• 内容大纲：
  1. 课程回顾 (3分钟)
     • 快速回顾从 Sketch 基础到设计交付的全流程。
     • 强调 组件化 和 样式系统 是 Sketch 设计的灵魂。
  2. 推荐实用插件 (5分钟)
     • Icons: Material Icons, Feather Icons, Iconify。
     • UI Kits: Ant Design, Material Design。
     • 效率: Content Reel (随机填充文本), Unsplash (免费图片), Craft (与 Figma/InVision 协作)。
  3. 学习资源与社区 (1分钟)

     官方文档、Sketch App Sources、设计师社区。

  4. 结束语 (1分钟)

     鼓励大家多练习，并预告下一期内容（如 Figma 对比、动效设计等）。

录制视频的小贴士

• 清晰的声音： 使用一个外接麦克风,比画面质量更重要。
• 稳定的画面： 使用屏幕录制软件（如 OBS, CleanShot X）的“跟随鼠标”功能,让焦点始终清晰。
• 光标高亮： 开启鼠标指针高亮和点击效果,方便观众看清你的操作。
• 语速适中： 讲解时语速不要太快,特别是关键步骤。
• 提前准备： 准备好素材、插件和要讲的内容脚本,避免录制时卡顿。
• 善用标注： 可以在屏幕上用文字或箭头标注重点区域。

按照这个大纲，你就可以制作出一系列非常系统和高质量的 Sketch App 设计教程视频了！祝你成功！