《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》分为9 章，分别为UI 入门必修课、初识Sketch、使用Sketch 绘制线框图、使用Sketch 设计图标、按钮设计、移动端界面设计、PC 端网页界面设计、UI 的输出与交互设计、使用Xcode 制作交互效果。通过 《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的学习，读者可以熟悉移动UI 设计的规范和设计要点，同时掌握移动UI 的输出及交互动效的添加方法。 《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》适用于UI 设计师、网站设计人员和网页设计爱好者阅读，也可作为网页设计师、交互设计师、艺术院校师生及UI 设计爱好者的参考书。

《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》以案例带动知识面的方式，以案例为主，详细介绍并演示各种工具的使用方法并细化操作步骤，使读者通过案例的学习，在实践中熟练掌握Sketch 的使用方法。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》从布局上分为实战案例、操作指南、通关必读、知识链接、提示和技巧6 个主要部分。
每一个实战案例都讲解了实际工作中一个Sketch 作品的制作过程，步骤讲解具体，过程讲解清
晰且完善，通俗易懂。
本书的操作指南是在UI 设计过程中对常用的、典型的工具及方法的具体讲解和分析，能够使读者掌握重点。《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的知识链接是对实际UI 设计过程中的方法及软件功能进行具体分析及理论性讲解。本书的通关必读中讲解了UI 设计的基础常识、设计理念及设计规范，读者可以学习和参考，以掌握UI 设计中必不可少的理论知识。而通过提示和技巧，读者可以在UI 设计过程中学习到更简捷、更有效率的技巧和方法。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》*后介绍了Xcode 的使用，Xcode 和Sketch 一样是iOS 系统的独霸软件。Xcode
是运行在操作系统Mac OS X 上的集成开发工具，在此着重讲解了Xcode 移动端UI 设计常用的控件和功能，使读者能够通过Xcode 看到移动UI 设计*终的演示效果和交互体验。
编写本《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的目的在于讲解如何使用Sketch 软件和使用Xcode 运行交互效果，使读者了
解UI 设计的基础常识和必要知识。本书语言简洁、描述细致且全面，使读者能够轻松地学会Sketch 的操作，了解图标和界面的绘制过程，在UI 的学习中起到事半功倍的效果。由于互联网
的更新较快，书中所提供的网址仅供参考。

前　言
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》共分9 章，从UI 设计必修课开始，逐步讲解了Sketch 界面、使用Sketch 绘制线框图、设计图标、绘制按钮、制作移动端界面、制作PC 端网页、UI 的输出与交互设计及使用Xcode。除了讲解Sketch 和Xcode 的使用方法外，还穿插了UI 设计的理论知识，如图标设计流程、图标属性、移动界面中的色彩运用、网站常见设计风格等，提供了原型设计的方法、图标及界面设计规范、网页布局原则、iOS 及Android 图标和界面的设计规范与尺寸等UI 设计及应用中的核心内容。
通过《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的学习，读者不但可以使用Sketch 设计出漂亮的图标、流行的界面，还能通过Xcode 制作出UI 的运行效果。从了解什么是UI 开始，到最终的交互体验，以及UI 设计中不可忽略的行业知识，读者将从《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》中获得全面丰富的UI 设计内容及轻松的学习体验。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》结构
第1 章　UI 入门必修课
本章主要讲解了UI、UE 和ID 的基本概念，使读者了解什么是UI 及UI、UE 和ID 的区别和联系，讲述了用户体验的一般设计流程、iOS 和Android 的设计特色、移动UI 的基本常识和网页UI 的基本常识。
第2 章　初识Sketch
本章从介绍Sketch 软件开始，讲述了Sketch 的界面、Sketch 的设计优势、Sketch 的安装与启动，通过制作Apple Watch 界面和iPhone 跳转页面，讲解如何插入形状和图片，使读者体验Sketch 易于操作的特点。
第3 章　使用Sketch 绘制线框图
本章以绘制线框原图贯穿始终，从Sketch 文件的新建和保存，到插入文字、设置文字参数、插入形状、在检查器中调整形状及图层的基本应用。
第4 章　使用Sketch 设计图标
图标的绘制是UI 设计中最为重要的一个环节，一个好的图标，需要有指代性、识别性和审美性。本章不仅详细阐述了图标的绘制过程，介绍了缩放工具、使用参考线和网格、使用检查器、调整锚点和曲线的方法，还讲述了UI 图标的分类、图标的更换方法、绘制流程和图标属性等理念与实际相结合的知识。
第5 章　按钮设计
本章对UI 设计中的按钮进行了详细、具体的讲解，阐明了按钮设计在UI 中的地位和重要作用，介绍了按钮设计的知识和规范，通过一组播放器按钮和一组质感按钮的绘制，详细介绍了渐变、阴影、内阴影、模糊等工具在设计中的应用。
第6 章　移动端界面设计
本章以第3 章的两个线框图为基础，在实际操作中讲述了APP 界面设计，通过修改颜色、样式、文字等参数，完成APP 界面设计的制作。
第7 章　PC 端网页界面设计
本章结合前面章节讲解的内容，使用Sketch 的各种工具完成PC 端网页的制作，讲解了PC端网页设计的方法、PC 端和移动端网页设计的区别、扁平化设计在UI 设计中的应用和网站常见设计风格等内容，对使用Sketch 进行UI 设计是一个概括。
第8 章　UI 的输出与交互设计
本章通过导出APP 应用图标导出移动端APP 界面为网页划分切片和导出点九切图等案例，讲解了Sketch 文件的输出、适配分辨率、分享设计稿、移动交互设计事项等必要的理论知识，帮助读者完成和归纳Sketch 应用与UI 设计的最后环节。
第9 章　使用Xcode 制作交互效果
本章讲解了如何安装并启动Xcode 软件，介绍了Xcode 的界面和主要功能，演示了Xcode 的基本操作，讲解了如何使用Xcode 编辑从Sketch 中导出的图片，通过编辑和使用控件、导入素材等一系列操作，最终实现模拟运行效果的过程。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》特点
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》以案例带动知识面的方式，以案例为主，详细介绍并演示各种工具的使用方法并细化操作步骤，使读者通过案例的学习，在实践中熟练掌握Sketch 的使用方法。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》从布局上分为实战案例、操作指南、通关必读、知识链接、提示和技巧6 个主要部分。每一个实战案例都讲解了实际工作中一个Sketch 作品的制作过程，步骤讲解具体，过程讲解清晰且完善，通俗易懂。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的操作指南是在UI 设计过程中对常用的、典型的工具及方法的具体讲解和分析，能够使读者掌握重点。《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的知识链接是对实际UI 设计过程中的方法及软件功能进行具体分析及理论性讲解。《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的通关必读中讲解了UI 设计的基础常识、设计理念及设计规范，读者可以学习和参考，以掌握UI 设计中必不可少的理论知识。而通过提示和技巧，读者可以在UI 设计过程中学习到更简捷、更有效率的技巧和方法。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》最后介绍了Xcode 的使用，Xcode 和Sketch 一样是iOS 系统的独霸软件。Xcode是运行在操作系统Mac OS X 上的集成开发工具，在此着重讲解了Xcode 移动端UI 设计常用的控件和功能，使读者能够通过Xcode 看到移动UI 设计最终的演示效果和交互体验。
编写《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的目的在于讲解如何使用Sketch 软件和使用Xcode 运行交互效果，使读者了解UI 设计的基础常识和必要知识。《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》语言简洁、描述细致且全面，使读者能够轻松地学会Sketch 的操作，了解图标和界面的绘制过程，在UI 的学习中起到事半功倍的效果。由于互联网的更新较快，书中所提供的网址仅供参考。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》由张晓景编著，李晓斌、高鹏、胡敏敏、杨帆、杨阳、张国勇、贾勇、刘钊、魏华、林秋、夏志利、胡伟军、董亮等也参与了《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》的编写工作。由于作者水平所限，书中难免有疏漏和不足之处，恳请广大读者批评、指正。
《移动互联网之路Sketch Xcode移动UI与交互动效设计从入门到精通》提供了书中案例的源文件、素材文件、教学视频和PPT 教学课件等资源，扫一扫下方的二维码，推送到自己的邮箱后即可下载获取。
编 　者

目　录


第 1 章 UI 入门必修课 1
1.1　UI、UE 和 ID 1
1.1.1　UI( 用户界面 ) 2
1.1.2　UE( 用户体验 ) 2
1.1.3　ID( 交互设计 ) 2
1.2　用户体验的一般设计流程 2
1.2.1　原型 2
1.2.2　模型 3
1.2.3　演示版 4
1.2.4　中间步骤 4
1.3　iOS 和 Android 的设计特色 4
1.3.1　iOS 的设计特色 4
1.3.2　Android 的设计特色 8
1.4　移动 UI 的基本常识 11
1.4.1　移动 UI 设计中用到的单位 11
1.4.2　iOS 的界面设计规范 12
1.4.3　Android 的界面设计规范 14
1.5　网页 UI 的基本常识 17
1.5.1　安全网页宽度与首屏高度 17
1.5.2　常见网页布局形式 18
1.5.3　网页布局原则 21
1.5.4　网页中的配色方法 22
1.6　本章小结 24

第 2 章 初识 Sketch 25
2.1　绘制 Apple Watch 界面 25
2.1.1　插入 Apple Watch 画板 28
2.1.2　绘制 Apple Watch 界面首页 32
2.1.3　绘制 Apple Watch 界面 36
2.2　绘制 iOS 旅游 APP 跳转页面 41
2.2.1　iOS 旅游 APP 跳转页面 42
2.2.2　iOS 旅游 APP 跳转页面 48
2.2.3　iOS 旅游 APP 跳转页面 51
2.3　本章小结 53

第 3 章 使用 Sketch 绘制线框图 54
3.1　绘制计步 APP 线框图首页 54
3.1.1　新建并保存文件 55
3.1.2　绘制线框图的状态条 57
3.1.3　绘制计步图标线框 59
3.1.4　绘制睡眠状态条 63
3.1.5　绘制底部标签导航 66
3.2　绘制天气 APP 线框图 68
3.2.1　绘制线框图首页 68
3.2.2　绘制首页下滑页 73
3.2.3　绘制搜索页和设置页 76
3.3　本章小结 79

第 4 章 使用 Sketch 设计图标 80
4.1　绘制简洁 iOS 功能图标 80
4.1.1　绘制指南针图标 83
4.1.2　绘制时钟和相机图标 87
4.1.3　绘制计算器和拍摄图标 90
4.1.4　绘制日记事图标 94
4.2　绘制一组 APP 应用图标 96
4.2.1　绘制旅行箱图标 97
4.2.2　绘制轮船图标 100
4.2.3　绘制帐篷和太阳伞图标 103
4.2.4　绘制酒杯、救生圈、天气、冰激凌图标 105
4.2.5　绘制飞机图标 114
4.3　本章小结 117
第 5 章 按钮设计 118
5.1　绘制一组播放器按钮 118
5.1.1　绘制循环按钮 121
5.1.2　绘制播放和暂停按钮 126
5.1.3　绘制语音和关闭按钮 128
5.1.4　绘制喇叭按钮 131
5.1.5　绘制选择、撤销、随机和退出按钮 134
5.1.6　绘制按键和滑杆按钮 138
5.2　绘制质感按钮 141
5.2.1　绘制金属拉丝质感按钮 141
5.2.2　绘制纹理质感按钮 143
5.2.3　绘制水晶质感按钮 146
5.3　本章小结 148
第 6 章 移动端界面设计 149
6.1　绘制计步 APP 界面 149
6.1.1　绘制计步 APP 首页计步显示区 150
6.1.2　绘制计步 APP 首页其他部分 154
6.2　绘制天气 APP 界面 159
6.2.1　绘制天气 APP 首页插画背景 160
6.2.2　绘制天气 APP 其他界面内容 164
6.3　本章小结 173
第 7 章 PC端网页界面设计 174
7.1　设计制作 PC 端支付网页 174
7.1.1　绘制 PC 端支付网页购物车界面 176
7.1.2　绘制 PC 端支付网页其他界面 181
7.2　设计制作家居网站页面 185
7.2.1　绘制 PC 端家居页面的整体结构 188
7.2.2　绘制 PC 端家居网页广告部分 192
7.3　本章小结 202
第 8 章 UI 的输出与交互设计 203
8.1　导出 APP 应用图标 203
8.2　导出移动端 APP 界面 206
8.3　为网页划分切片 211
8.4　导出点九切图 215
8.5　本章小结 218
第 9 章 使用 Xcode 制作交互效果 219
9.1　Xcode 的安装 219
9.2　认识 Xcode 界面 225
9.2.1　按区域划分 Xcode 界面 225
9.2.2　工具栏 226
9.2.3　工具区 227
9.2.4　编辑区 229
9.2.5　导航区 230
9.2.6　调试区 231
9.3　创建和删除项目 232
9.4　为旅游 APP 的跳转页面制作点击效果 239
9.5　制作完整的天气 APP 运行效果 243
9.6　本章小结 248

通关必读
什么是 Sketch 26
为什么选择 Sketch 26
Sketch 快捷键 37
Sketch 是否能替代 Photoshop 41
图标的源文件格式 52
Sketch 汉化 52
线框图的基本概念 55
绘制线框原型的注意事项 66
画好 APP 线框图流程图的要点 78
线框原型的优势 79
iOS 和 iOS 图标的特点 81
图标设计的必要性 81
UI 图标的分类 82
不同系统图标的更换方法 91
图标集的制作流程 95
图标的源文件格式 104
了解图标的属性 115
UI 设计中最常见的按钮如何设计 119
移动界面中色彩的应用 133
按钮是用户体验的重要因素 139
阴影和内阴影的设置 142
为什么界面设计大多喜欢用蓝色 152
iOS 应用界面设计规范 162
移动界面中文字的使用技巧 168
APP 界面配色原则 168
网页设计 PC 端和移动端的区别 175
扁平化设计在 UI 设计中的应用 179
理解以用户为中心 191
界面设计中的内容与形势统一 191
网站常见设计风格 199
适配多分辨率移动界面 203
交付给开发的文件 210
了解移动设备的手势 214
移动交互动效设计的注意事项 217
常见的交互动画效果 231
交互式动画实现法则 236
为什么在学习 Sketch 之后要了解 Xcode 248
操作指南
安装 Sketch 26
启动 Sketch 27
自定义工具栏 31
自定义快捷键 39
修改参考线颜色 50
使用内置模板 58
添加和删除自定义模板 59
设置填充和描边选项 65
为圆角矩形设置不同的圆角半径 71
调整图层排列顺序 72
设置缩放显示 101
使用缩放工具 102
使用钢笔工具绘制路径 111
使用钢笔工具绘制红心形状 113
设置重叠的填充样式 120
使用动态模糊调整图层 147
创建路径文本 157
使用旋转复制工具 163
自定义和使用文本样式 172
使用蒙版并设置蒙版不透明度 198
获取与安装 Xcode 219
启动 Xcode 221
导入和显示图片 234
知识链接
Sketch 的欢迎窗口 29
Sketch 的主界面 30
工具栏 31
Sketch 中的工具 35
画布 41
Sketch 的系统偏好设置 44
其他新建和保存文件的方法 56
设置文件存储标签和存储路径 57
插入与设置文本选项 61
使用形状检查器 63
添加阴影和内阴影 65
插入圆角矩形 70
图层面板 71
图层类型 71
隐藏和锁定图层 72
复制、剪切和粘贴图层 75
搜索图层 76
在画布中移动和选择图层 85
选择并移动重叠图层 86
在检查器中精确设置对象大小 88
在检查器中变换对象 89
iOS 系统中图标的尺寸 91
编辑形状 99
标尺和参考线 109
使用网格 110
Sketch 中的贝塞尔曲线 110
锚点和曲线的控制 112
使用渐变 124
图案填充 127
噪点填充 131
布尔运算 136
模糊 145
文本转化为轮廓 158
旋转复制 162
创建和编辑组件 170
混合模式 184
编辑位图 186
蒙版 197
分享设计稿 205
获取和使用 Sketch 插件 208
切片图层检查器 212
为什么要使用点九切图 217
Xcode 的快捷键 220
使用 Xcode 欢迎窗口 222
交互设计与交互式动画 222
Xcode 中的应用模板 234