第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界面第2页和第3页 36
2.2绘制iOS旅游APP跳转页面 41
2.2.1 iOS旅游APP跳转页面第1页 42
2.2.2 iOS旅游APP跳转页面第2页 48
2.2.3 iOS旅游APP跳转页面第3页 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