第1章 开启界面设计这扇窗 1
1.1 手机UI设计相关基本概念 2
1.2 智能手机操作系统有哪些 3
1.3 UI界面设计常用的软件 5
1.4 屏幕尺寸相关的术语和概念 7
1.5 界面设计常见图标格式 9
1.6 低保真与高保真原型设计 10
1.7 色彩基础知识 12
1.8 界面设计配色秘笈 22
第2章 经典登录页和登录框 28
2.1 会员登录页 29
2.1.1 制作背景 29
2.1.2 绘制主界面 31
2.1.3 制作细节 33
2.1.4 绘制文本框 35
2.2 旅游名片界面 38
2.2.1 制作背景 39
2.2.2 绘制界面 40
2.2.3 添加素材并调色 42
2.2.4 添加界面元素 45
2.3 盒子登录界面 47
2.3.1 制作背景 48
2.3.2 定义图案 49
2.3.3 绘制界面 50
2.4 通信应用界面 55
2.4.1 制作背景 55
2.4.2 添加元素 59
2.5 酷黑登录页 61
2.5.1 制作背景 62
2.5.2 绘制界面 63
2.5.3 绘制文本框 65
2.6 社交应用登录框 67
2.6.1 制作背景 68
2.6.2 绘制界面 69
2.7 电话呼叫界面 73
2.7.1 制作背景 73
2.7.2 定义图案 75
2.7.3 绘制界面元素 78
第3章 炫酷写实风格表现APP 86
3.1 致炫光盘 87
3.1.1 制作背景 87
3.1.2 绘制图形 89
3.1.3 制作质感 90
3.1.4 制作细节 92
3.1.5 制作阴影 95
3.2 纸质办公档案袋 96
3.2.1 制作背景 96
3.2.2 绘制袋子 97
3.2.3 制作细节 100
3.2.4 定义图案 104
3.3 写实专辑包装 111
3.3.1 制作背景 111
3.3.2 制作封面 113
3.3.3 绘制光盘 115
3.3.4 制作质感 117
3.3.5 制作封口细节 118
3.4 书香记事夹 122
3.4.1 制作背景 123
3.4.2 绘制木板 124
3.4.3 添加纹理 124
3.4.4 绘制折痕 128
3.4.5 绘制夹子 133
3.5 家居插板 135
3.5.1 制作背景 135
3.5.2 绘制图形 137
3.5.3 制作图形元素 139
3.6 陶瓷茶杯 143
3.6.1 制作背景 144
3.6.2 制作阴影 145
3.6.3 绘制盘子 146
3.6.4 绘制茶水 149
3.6.5 制作茶水高光 150
3.6.6 制作手柄 152
3.6.7 绘制茶叶 153
3.7 写实质感开关 153
3.7.1 制作背景 154
3.7.2 制作细节 158
3.8 品质音量旋钮 167
3.8.1 制作背景 168
3.8.2 绘制图形 169
3.8.3 制作阴影 172
3.8.4 添加装饰元素 174
第4章 iOS前沿新潮扁平风 178
4.1 扁平相机图标 179
4.1.1 制作背景 179
4.1.2 绘制图标 180
4.1.3 添加装饰 182
4.1.4 绘制镜头 184
4.2 扁平铅笔图标 187
4.2.1 绘制图标 188
4.2.2 变换图形 189
4.2.3 绘制细节 190
4.2.4 制作阴影 192
4.3 指南针图标 195
4.3.1 绘制图标 195
4.3.2 制作阴影 199
4.3.3 制作倒影 203
4.4 定位图标 206
4.4.1 制作背景 207
4.4.2 绘制图标 208
4.5 微信图标 212
4.5.1 制作背景 212
4.5.2 绘制图标 213
4.6 天气Widget 216
4.6.1 制作背景 217
4.6.2 绘制界面 218
4.6.3 制作界面元素 219
4.7 对话图标 222
4.7.1 制作背景 222
4.7.2 绘制图标 224
4.7.3 制作高光 227
4.7.4 制作细节 229
4.8 盘子图标 231
4.8.1 制作背景 232
4.8.2 绘制盘子 233
第5章 APP纯美传奇质感表现 235
5.1 塑胶质感U盘 236
5.1.1 绘制图标 236
5.1.2 制作图标细节 239
5.2 金属质感系统 243
5.2.1 制作背景 244
5.2.2 绘制图标 245
5.2.3 制作质感 245
5.2.4 定义图案 249
5.2.5 制作图标元素 250
5.3 白金质感开关按钮 252
5.3.1 制作背景 253
5.3.2 绘制图标 254
5.3.3 制作图标元素 257
5.3.4 定义图案 258
5.3.5 制作控件 261
5.4 塑料质感插座 263
5.4.1 制作背景 264
5.4.2 制作阴影 265
5.4.3 制作图标 267
5.4.4 制作插孔 271
5.5 拉丝质感开关 274
5.5.1 制作背景并绘制图标 274
5.5.2 制作细节 277
5.6 糖果质感闪电图标 279
5.6.1 制作背景 280
5.6.2 绘制图形 281
5.6.3 制作阴影 282
5.6.4 添加质感 283
5.7 鎏金质感指南针 285
5.7.1 制作背景 286
5.7.2 绘制图形 287
5.7.3 添加图形元素 292
5.7.4 制作光影 296
第6章 简约流行风图标 299
6.1 脚丫图标 300
6.1.1 制作背景 300
6.1.2 制作图标 302
6.2 电话图标 304
6.2.1 制作背景 305
6.2.2 绘制图标 307
6.2.3 制作图标元素 308
6.3 相机和计算器图标 312
6.3.1 制作背景并绘制图标 313
6.3.2 制作细节 315
6.3.3 绘制镜头 317
6.3.4 绘制计算器图标 318
6.3.5 制作图标元素 320
6.3.6 制作细节 322
6.4 音乐图标 325
6.4.1 制作背景 326
6.4.2 制作图标 328
6.4.3 制作立体效果 329
6.4.4 添加装饰图形元素 331
第7章 商业案例实战 334
7.1 卓云安全大师界面 335
7.1.1 欢迎页面 336
7.1.2 功能页面 340
7.1.3 功能页面2 346
7.1.4 展示页面 352
7.1.5 展示页面2 354
7.2 iOS风格音乐播放器界面 356
7.2.1 制作应用界面 356
7.2.2 展示页面 364
7.3 怡人秋景主题天气界面 365
7.3.1 制作背景 366
7.3.2 绘制界面 369
7.3.3 添加文字 381
7.4 音悦电台界面设计 381
7.4.1 制作背景 382
7.4.2 绘制界面 383
7.4.3 添加图形元素 387
7.4.4 添加素材图像 389
7.4.5 绘制功能控件 391
第8章 APP实用参考荟萃 393
8.1 优秀炫酷图标赏析 394
8.2 流行风格界面赏析 396
8.3 UI设计实用辅助工具 398
8.4 优秀国内外网站推荐 400
8.5 UI设计中常见名词释义 401