第1章 初识UI设计 9
1.1认识UI设计 10
1.2常用UI设计单位解析 10
1.3 UI设计常用图像格式 11
1.4 UI设计准则 11
1.5 UI设计与团队合作关系 12
1.6智能手机操作系统简介 12
1.7 UI设计常用的软件 13
1.8 UI色彩学知识 15
1.9 UI设计常见配色方案 17
1.10 UI设计配色技巧 18
1.11 UI设计色彩学 20
1.12精彩UI设计赏析 22
1.13本章小结 23
第2章 精致按钮及旋钮设计 24
2.1理论知识——移动APP按钮尺寸分析 25
2.2课堂案例——下载按钮 25
2.2.1打开素材 26
2.2.2添加质感 26
2.3课堂案例——简洁按键开关 27
2.3.1制作背景并添加文字 27
2.3.2绘制按键 27
2.4课堂案例——音量滑动条 28
2.4.1打开素材 28
2.4.2绘制图形 28
2.5课堂案例——立体多边形按钮 29
2.5.1制作渐变背景 29
2.5.2绘制图形 30
2.6课堂案例——滑动按钮 32
2.6.1制作背景绘制图形 32
2.6.2绘制控件 34
2.7课堂案例——滑动调节按钮 36
2.7.1制作背景绘制图形 37
2.7.2绘制控件 38
2.7.3添加质感 39
2.7.4绘制刻度 40
2.8课堂案例——功能旋钮 41
2.8.1制作背景绘制图形 41
2.8.2绘制功能图像 43
2.8.3制作立体质感 45
2.8.4绘制指示图形 47
2.8.5添加文字 48
2.9课堂案例——品质音量控件 49
2.9.1制作背景 49
2.9.2制作控件 50
2.9.3制作细节 59
2.10本章小结 61
2.11课后习题 61
2.11.1课后习题1——下单按钮 61
2.11.2课后习题2——圆形开关按钮 62
2.11.3课后习题3——金属旋钮 62
2.11.4课后习题4——音频调节控件 63
第3章 趋势流行扁平风 64
3.1理论知识——扁平化设计 65
3.1.1什么是扁平化设计 65
3.1.2扁平化设计的优点和缺点 65
3.1.3扁平化设计的四大原则 65
3.2课堂案例——盾牌图标 67
3.2.1制作渐变背景 67
3.2.2添加投影 68
3.3课堂案例——扁平分享图标 69
3.3.1绘制圆形 69
3.3.2绘制装饰图形 70
3.3.3制作投影 71
3.4课堂案例——加速图标 72
3.4.1制作背景及轮廓 72
3.4.2绘制图标元素 73
3.4.3制作阴影 74
3.5课堂案例——企业管理登录界面 75
3.5.1绘制主图形 75
3.5.2添加素材及文字 77
3.6课堂案例——社交应用登录框 77
3.6.1制作背景 77
3.6.2绘制界面 78
3.7课堂案例——美食APP界面 81
3.7.1绘制图形并添加素材 81
3.7.2绘制界面元素 82
3.8课堂案例——扁平化邮箱界面 84
3.8.1制作背景及状态栏 84
3.8.2添加文字 85
3.9课堂案例——个人应用APP界面 87
3.9.1制作背景 87
3.9.2绘制界面图形 88
3.9.3添加文字并制作细节 89
3.9.4绘制二级功能页面 90
3.10本章小结 93
3.11课后习题 93
3.11.1课后习题1——扁平铅笔图标 93
3.11.2课后习题2——扁平相机图标 94
3.11.3课后习题3——简约风天气APP 94
第4章 超强表现写实风 96
4.1理论知识——写实风格详解 97
4.1.1写实的艺术表现形式 97
4.1.2 UI设计的写实表现 97
4.2课堂案例——写实SIM卡 98
4.2.1制作背景绘制轮廓 98
4.2.2绘制细节图形 99
4.3课堂案例——写实专辑包装 100
4.3.1制作背景 101
4.3.2制作封面 102
4.3.3绘制光盘 103
4.3.4制作质感 105
4.3.5制作封口细节 107
4.4课堂案例——写实闹钟图标 110
4.4.1制作背景 110
4.4.2绘制闹钟轮廓 110
4.4.3绘制扬声器孔 115
4.4.4绘制灯开关 117
4.4.5绘制表盘图形 119
4.4.6制作表盘细节 120
4.5课堂案例——写实电视机图标 123
4.5.1制作背景并绘制电视轮廓 123
4.5.2绘制屏幕图形 126
4.5.3绘制电视细节 128
4.6课堂案例——写实小票图标 131
4.6.1制作背景并绘制图形 132
4.6.2制作锯齿效果 134
4.6.3添加文字并制作阴影 135
4.7本章小结 137
4.8课后习题 137
4.8.1课后习题1——写实计算器图标 137
4.8.2课后习题2——写实钢琴图标 137
4.8.3课后习题3——写实开关图标 138
第5章iOS风格界面设计 139
5.1理论知识——认识iOS风格 140
5.1.1 iOS的发展及界面分布 140
5.1.2认识iOS的控件 140
5.2课堂案例——苹果风格登录界面 141
5.2.1制作背景 141
5.2.2绘制图形 142
5.2.3添加素材 144
5.2.4绘制文本框 145
5.3课堂案例——会员登录页 147
5.3.1制作背景 147
5.3.2绘制主界面 149
5.3.3制作细节 151
5.3.4绘制文本框 152
5.4课堂案例——通信应用界面 154
5.4.1制作背景 155
5.4.2添加元素 158
5.5课堂案例——音乐电台界面设计 160
5.5.1制作背景 160
5.5.2绘制界面 161
5.5.3添加图形元素 165
5.5.4添加素材图像 167
5.5.5绘制功能控件 168
5.6课堂案例——iPod应用登录界面 169
5.6.1制作背景及绘制状态栏 169
5.6.2添加界面元素 170
5.7课堂案例——iOS风格音乐播放器界面 173
5.7.1制作应用界面 174
5.7.2展示页面 181
5.8本章小结 182
5.9课后习题 182
5.9.1课后习题1——会员登录框界面 182
5.9.2课后习题2——用户界面 182
5.9.3课后习题3——翻页登录界面 183
第6章 精品极致图标制作 184
6.1理论知识——了解图标 185
6.1.1图标的分类 185
6.1.2图标的作用 185
6.1.3图标的格式 185
6.1.4图标和图像大小 186
6.1.5精美APP图标欣赏 188
6.2课堂案例——简洁罗盘图标 188
6.2.1制作背景绘制图形 188
6.2.2绘制表座 191
6.2.3绘制指针 191
6.3课堂案例——简洁进程图标 193
6.3.1制作背景添加图像 193
6.3.2绘制图形 193
6.4课堂案例——美丽拍图标 195
6.4.1绘制矩形并添加阴影 195
6.4.2绘制标志图形 197
6.4.3制作细节部分 198
6.5课堂案例——下载图标 200
6.5.1制作背景并绘制图形 201
6.5.2制作图标元素 203
6.6课堂案例——相机和计算器图标 205
6.6.1制作背景并绘制图标 206
6.6.2制作细节 208
6.6.3绘制镜头 210
6.6.4绘制计算器图标 211
6.6.5制作图标元素 212
6.6.6制作细节 214
6.7课堂案例——日历和天气图标 217
6.7.1制作背景 217
6.7.2绘制日历图标 218
6.7.3制作图标细节 222
6.7.4制作翻页 223
6.7.5绘制天气图标 224
6.8本章小结 228
6.9课后习题 228
6.9.1课后习题1——唱片机图标 228
6.9.2课后习题2——进度图标 229
6.9.3课后习题3——湿度计图标 229
6.9.4课后习题4——小黄人图标 230
第7章 流行界面设计萃 231
7.1理论知识——UI设计尺寸 232
7.1.1 iPhone和Android设计尺寸 232
7.1.2 Android系统换算及主流手机设置 234
7.2课堂案例——存储数据界面 236
7.2.1制作背景绘制图形 236
7.2.2添加细节图像 239
7.3课堂案例——自然协会应用界面 240
7.3.1制作主题背景 240
7.3.2绘制界面图形 241
7.3.3添加图像 242
7.3.4绘制图形 243
7.4课堂案例——点餐APP界面 245
7.4.1制作背景 245
7.4.2添加素材及文字 246
7.4.3添加界面元素 247
7.4.4绘制功能图形及添加素材 252
7.5课堂案例——锁屏界面 254
7.5.1制作背景 255
7.5.2绘制界面图形 258
7.5.3添加文字信息 261
7.5.4添加素材功能图标 265
7.6课堂案例——票券APP界面 266
7.6.1制作背景并绘制状态栏 266
7.6.2添加素材 267
7.6.3添加文字 268
7.6.4绘制按键图形 269
7.6.5添加文字及素材 271
7.7本章小结 272
7.8课后习题 272
7.8.1课后习题1——经典音乐播放器界面 272
7.8.2课后习题2——下载数据界面 273
7.8.3课后习题3——APP游戏个人界面 273
第8章 综合设计实战 275
8.1课堂案例——信息接收控件 276
8.1.1制作背景并绘制图形 276
8.1.2制作控件元素 277
8.1.3添加文字 279
8.2课堂案例——Sense Widget 280
8.2.1制作背景并绘制界面图形 280
8.2.2添加文字信息及素材 285
8.3课堂案例——简洁视频播放界面 286
8.3.1制作主题背景 286
8.3.2添加控件素材 289
8.3.3添加投影 290
8.4课堂案例——怡人秋景主题天气界面 291
8.4.1制作背景 291
8.4.2绘制界面 294
8.4.3添加文字 306
8.5课堂案例——概念手机界面 306
8.5.1制作背景及绘制图形 307
8.5.2添加素材 308
8.5.3添加文字 310
8.5.4绘制手机元素图形 311
8.6本章小结 318
8.7课后习题 318
8.7.1课后习题1——精致CD控件 318
8.7.2课后习题2——APP游戏安装页 319