第 1 章 UI 设计你要知道的事儿 / 1
1.1 认识 UI 设计 / 2
1.2 UI 设计的原则 / 4
1.2.1 一致性原则 / 4
1.2.2 完整性原则 / 5
1.2.3 直观性原则 / 6
1.2.4 习惯性原则 / 7
1.3 确定 UI 视觉风格的构成要素 / 7
1.3.1 色彩 / 7
1.3.2 文字 / 10
1.3.3 图标 / 13
1.3.4 图片 / 15
1.4 UI 视觉设计中的常用布局 / 17
1.4.1 列表式布局 / 17
1.4.2 陈列馆式布局 / 18
1.4.3 九宫格布局 / 18
1.4.4 选项卡式布局 / 18
1.4.5 旋转木马式布局 / 19
1.4.6 行为扩展式布局 / 19
1.4.7 多面板式布局 / 20
1.4.8 图表式布局 / 20
1.5 UI 设计的流程 / 20
1.5.1 产品定位及市场分析阶段 / 21
1.5.2 交互设计阶段 / 21
1.5.3 界面视觉设计阶段 / 23
1.5.4 界面输出阶段 / 24
1.5.5 可用性测试阶段 / 26

第 2 章 UI 设计你要会用 Photoshop / 27
2.1 初识 Photoshop / 28
2.1.1 掌握 Photoshop 的界面构成 / 28
2.1.2 新建图像文件 / 28
2.1.3 打开和最近打开文件 / 29
2.1.4 在 Photoshop 中置入文件 / 31
2.1.5 保存与关闭文件 / 32
2.2 图层的运用 / 33
2.2.1 “图层”面板 / 33
2.2.2 创建图层与图层组 / 34
2.2.3 复制和删除图层 / 35
2.2.4 图层样式的应用 / 36
2.2.5 设置图层的整体和填充不透明度 / 39
2.3 选区的设置 / 40
2.3.1 规则选区的创建 / 40
2.3.2 不规则选区的创建 / 41
2.3.3 调整与编辑选区 / 42
2.4 图形的绘制 / 44
2.4.1 基础图形的绘制 / 44
2.4.2 自定义形状的绘制 / 46
2.4.3 绘制任意所需的图形 / 47
2.5 蒙版的编辑 / 49
2.5.1 图层蒙版 / 49
2.5.2 剪贴蒙版 / 51
2.5.3 矢量蒙版 / 52
2.6 文字编排设计 / 53
2.6.1 文字的添加与设置 / 53
2.6.2 变形文字的制作 / 55

第 3 章 不同系统及其组件的设计 / 57
3.1 iOS 系统及其组件的设计 / 58
3.1.1 iOS 系统的特点 / 58
3.1.2 iOS 系统的适配规则 / 61
3.1.3 iOS 系统设计的规范 / 64
3.1.4 iOS 系统界面设计实战 / 71
3.2 Android 系统及其组件的设计 / 73
3.2.1 Android 系统的特点 / 73
3.2.2 Android 系统的适配规则 / 76
3.2.3 Android 系统设计的规范 / 82
3.2.4 Android 系统界面设计实战 / 85

第 4 章 移动 UI 界面中的常用元素设计 / 87
4.1 图标 / 88
4.1.1 拟物化的图标设计 / 88
4.1.2 扁平化的图标设计 / 95
4.2 按钮 / 99
4.2.1 突显状态的按钮设计 / 99
4.2.2 皮革质感的按钮设计 / 102
4.3 开关 / 106
4.3.1 拟物效果的开关设计 / 106
4.3.2 层次分明的开关设计 / 109
4.3.3 单选和复选开关设计 / 112
4.4 进度条 / 114
4.4.1 发光效果的线形进度条设计 / 114
4.4.2 清新风格的圆形进度条设计 / 118
4.5 搜索栏 / 121
4.5.1 扁平化的搜索栏设计 / 121
4.5.2 布纹材质的搜索栏设计 / 123
4.6 列表框 / 126
4.6.1 整洁风格的列表框设计 / 126
4.6.2 暗色冷酷风格的列表框设计 / 128
4.7 标签栏 / 131
4.7.1 线形风格的标签栏设计 / 131
4.7.2 组合式标签栏的设计 / 133
4.8 图标栏 / 136
4.8.1 简单时尚的图标栏设计 / 136
4.8.2 立体化的图标栏设计 / 139

第 5 章 界面元素的组合应用 / 142
5.1 引导页设计 / 143
5.1.1 营造趣味感的引导页设计 / 143
5.1.2 半透明质感的引导页设计 / 147
5.1.3 线形风格的引导页设计 / 150
5.2 登录页设计 / 152
5.2.1 扁平化的登录页设计 / 152
5.2.2 黑白主题的登录页设计 / 155
5.2.3 时尚紫色风格的登录页设计 / 158
5.3 首页设计 / 161
5.3.1 甜美风格的首页设计 / 161
5.3.2 时尚酷炫的首页设计 / 165
5.3.3 干净清爽的首页设计 / 169
5.4 列表页设计 / 172
5.4.1 工整的产品列表页设计 / 172
5.4.2 时间轴列表页设计 / 176
5.5 详情页设计 / 180
5.5.1 突出活动内容的详情页设计 / 180
5.5.2 白色清新风格的详情页设计 / 185
5.6 个人中心页面设计 / 190
5.6.1 简约风格的个人中心页面设计 / 190
5.6.2 蓝色清爽风格的个人中心页面设计 / 193

第 6 章 购物 App 界面设计 / 197
6.1 界面布局规划 / 198
6.2 创意思路剖析 / 198
6.3 确定配色方案 / 199
6.4 定义组件风格 / 199
6.5 制作步骤详解 / 199
6.5.1 启动界面 / 200
6.5.2 登录界面 / 202
6.5.3 首页界面 / 205
6.5.4 分类界面 / 207
6.5.5 商品详情界面 / 209
6.5.6 购买界面 / 212
6.5.7 商品结算界面 / 213
6.5.8 个人中心界面 / 215

第 7 章 音乐 App 界面设计 / 217
7.1 界面布局规划 / 218
7.2 创意思路剖析 / 218
7.3 确定配色方案 / 219
7.4 定义组件风格 / 219
7.5 制作步骤详解 / 220
7.5.1 首页界面 / 220
7.5.2 发现界面 / 224
7.5.3 电台界面 / 225
7.5.4 歌曲播放界面 / 228
7.5.5 音效调节界面 / 230
7.5.6 个人中心界面 / 232

第 8 章 资讯 App 界面设计 / 236
8.1 界面布局规划 / 237
8.2 创意思路剖析 / 237
8.3 确定配色方案 / 238
8.4 定义组件风格 / 238
8.5 制作步骤详解 / 239
8.5.1 登录界面 / 239
8.5.2 个人界面 / 240
8.5.3 新闻首页界面 / 241
8.5.4 下载分区界面 / 242
8.5.5 新闻内容界面 / 244
8.5.6 评论界面 / 244

第 9 章 游戏 App 界面设计 / 246
9.1 界面布局规划 / 247
9.2 创意思路剖析 / 247
9.3 确定配色方案 / 248
9.4 定义组件风格 / 248
9.5 制作步骤详解 / 249
9.5.1 欢迎界面 / 249
9.5.2 加载界面 / 250
9.5.3 积分界面 / 252
9.5.4 游戏界面 / 254
9.5.5 预览界面 / 255
9.5.6 结束界面 / 255