移动互联网之路-Sketch+Xcode移动UI与交互动效设计从入门到精通

目　录

第 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