Photoshop CC移动UI设计实用教程

第 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