第1章 初识Sketch 1
1.1 拥抱变化，交互设计师的蜕变之旅 2
1.2 Sketch简介 2
1.2.1 Sketch是什么 3
1.2.2 Sketch的优势 3
1.2.3 Sketch对于团队特别是交互设计师的价值 7
1.2.4 Sketch的应用前景 8
1.2.5 Sketch和Photoshop对比 8
1.3 Sketch获取 9
1.3.1 Sketch下载 9
1.3.2 Sketch安装 12
1.3.3 Sketch激活 12
1.3.4 Sketch定价策略 13
1.4 Sketch界面介绍 15
1.4.1 菜单栏 15
1.4.2 工具栏 16
1.4.3 页面 16
1.4.4 图层 17
1.4.5 画布 17
1.4.6 检查器 18
1.5 Sketch上手试用 19
1.6 团队项目介绍 22
1.6.1 项目背景说明 22
1.6.2 项目功能需求 25
1.6.3 项目产品架构 25
知识拓展 26
动脑思考 30
动手操作 30
第2章 快速入门 31
2.1 交互设计入门 32
2.1.1 认识交互设计 32
2.1.2 认识交互设计师 33
2.1.3 交互设计师需要具备的素质 33
2.1.4 交互设计师的职责 35
2.1.5 交互设计师的专业背景要求 36
2.1.6 交互设计师需要的知识体系 36
2.1.7 交互设计师常用的工具 37
重点2.1.8 了解交互设计流程 38
2.2 明确目标和产出物 41
2.2.1 流程图 41
2.2.2 低、高保真原型 43
2.2.3 交互说明 44
2.2.4 视觉规范 45
2.2.5 视觉标注稿 45
2.2.6 规范切图 46
2.2.7 动效参数 46
2.3 学习基本工具使用 46
重点2.3.1 线条工具 47
重点2.3.2 几何工具 52
重点2.3.3 文字工具 57
2.4 学习高级工具使用 60
2.4.1 剪刀工具 60
2.4.2 变形工具 63
2.5 学习其他工具使用 64
2.5.1 插入类工具 65
2.5.2 组织类工具 65
2.5.3 编辑类工具 66
2.5.4 辅助类工具 69
2.6 学会版本管理 69
2.6.1 使用多个Sketch文件管理 70
2.6.2 使用Sketch自动保存历史版本 70
2.7 了解原型尺寸和命名规范 73
重点2.7.1 原型尺寸 73
2.7.2 命名规范 75
2.8 掌握交互设计方法论 76
2.8.1 交互设计方法论的概念 76
2.8.2 交互设计方法论——5W2H 76
2.8.3 其他交互设计方法论 79
知识拓展 81
实战教学 85
动脑思考 92
动手操作 92
第3章 基础运用 93
3.1 创作空间 94
3.1.1 画布 94
重点3.1.2 Artboard（画板） 96
重点3.1.3 栅格布局 100
3.2 框架设计 104
3.2.1 发散思维 104
3.2.2 人物角色 106
3.2.3 故事板 106
3.2.4 流程设计 107
3.2.5 信息架构 108
3.3 界面设计 109
3.3.1 界面设计原则 109
3.3.2 界面设计理论 109
3.3.3 界面设计实践 109
3.4 图像处理 114
3.4.1 图像导入 114
重点3.4.2 图像处理方式 114
3.4.3 Mask（蒙版）处理 119
3.5 图标设计 124
重点3.5.1 认识图标 124
3.5.2 图标绘制规范 126
重点 3.5.3 图标绘制 128
3.5.4 图标引用 132
3.6 测距和对齐 136
3.6.1 测距 136
3.6.2 对齐 136
知识拓展 137
实战教学 149
动脑思考 157
动手操作 157
第4章 高级运用 158
4.1 快速原型设计 159
4.1.1 快速复制 159
4.1.2 批量复制 161
4.1.3 一级页面设计 169
4.2 归类整理 169
重点4.2.1 图层整理 169
重点4.2.2 页面整理 171
重点4.2.3 图层查找 171
4.3 原型演示 173
4.3.1 Sketch Mirror 173
4.3.2 Sketch Mirror for iPhone 175
4.3.3 需求验证 175
4.3.4 二级页面设计 176
4.4 Symbol（符号） 176
重点4.4.1 Symbol的介绍及应用场景 176
重点4.4.2 Symbol基础教程 178
重点难点4.4.3 Symbol嵌套教程 181
重点难点4.4.4 夜视Symbol库制作 185
4.5 Styled Text（样式库） 189
4.5.1 StyledText的概念 189
4.5.2 Text Style（字体样式） 190
4.5.3 Share Style（共享样式） 192
4.5.4 夜视项目样式库 193
4.6 细节设计 194
重点4.6.1 交互边界 194
重点4.6.2 特殊状态 196
重点4.6.3 场景设计 199
4.6.4 首页及播放页设计 200
知识拓展 202
实战教学 209
动脑思考 212
动手操作 212
第5章 团队协作 213
5.1 Sketch和团队协作 214
5.1.1 团队协作基础 214
5.1.2 Sketch协作流程 216
5.2 使用Libraries减少重复劳作 217
重点新功能5.2.1 Libraries介绍 217
重点 5.2.2 Libraries制作和导入 218
重点5.2.3 Libraries使用和更新 220
重点5.2.4 Libraries云协作 221
5.3 使用坚果云构建协作环境 222
5.3.1 构建前的准备工作 222
5.3.2 创建团队文件夹 224
5.3.3 设置本地同步文件夹 226
5.3.4 查看历史版本 228
动脑思考 229
动手操作 229
第6章 交付输出 230
6.1 交互设计输出物 231
6.1.1 交互方案和交互原型 231
重点6.1.2 交互说明 237
重点6.1.3 交互规范 247
6.2 视觉设计输出物 255
6.2.1 视觉风格探索 255
6.2.2 视觉页面 256
重点6.2.3 视觉规范 257
重点6.2.4 视觉标注 260
重点6.2.5 切图资源 263
知识拓展 266
实战教学 269
动脑思考 274
动手操作 274
第7章 动效设计Principle 275
7.1 需要动效设计的原因 276
重点7.1.1 为用户创造愉悦的体验 276
7.1.2 验证心中的想法和可行性 276
7.1.3 与开发工程师沟通动态效果 276
7.2 选择Principle的原因 277
7.2.1 Principle简介 277
7.2.2 Principle的优势 277
7.2.3 Principle的获取、安装与激活 279
7.3 Principle初体验 281
7.3.1 初识界面 282
重点7.3.2 交互形态 288
重点7.3.3 事件 290
重点7.3.4 动画 291
7.4 Principle制作原型 294
7.4.1 准备工作 295
7.4.2 制作翻页效果 296
7.4.3 制作转场效果 298
7.4.4 制作滚动效果 300
7.4.5 原型演示 301
7.5 Principle制作动画 304
重点难点7.5.1 动画构思 304
重点7.5.2 动画制作 304
重点难点7.5.3 交付开发实现 307
实战教学 308
动脑思考 316
动手操作 316
第8章 完整后台设计实现 317
8.1 后台设计目标 318
8.1.1 业务功能 318
8.1.2 设计目标 319
8.2 后台框架设计 319
8.2.1 角色场景 320
8.2.2 权限设计 320
8.2.3 流程设计 322
8.3 后台界面设计 324
8.3.1 菜单导航设计 324
8.3.2 内容列表设计 325
8.3.3 流程页面设计 325
8.3.4 页面细节设计 326
8.3.5 创建最小化Symbol库 327
8.4 后台交互说明 327
8.4.1 学会讲故事 327
8.4.2 时刻警惕权限和安全 328
8.5 学习建议 328
8.5.1 Sketch学习建议 328
8.5.2 交互设计学习建议 329
结语 331
参考文献 332