Photoshop移动UI设计实用教程（第2版）

这是一本全面介绍如何使用Photoshop进行UI设计的实用教程。本书针对零基础读者编写，是快速、全面掌握UI设计制作的参考书。

本书由具有丰富UI设计经验的一线设计师精心编写，通过图文并茂的案例讲解，全面展示UI界面设计精髓。从UI界面设计基础到精致按钮及旋钮设计，从写实到扁平风格等，对UI设计中的各种流行设计风格做了全面剖析。每个案例都有制作流程详解，并且安排了相关的课后习题，读者在案例学习后可以参考习题进行练习，拓展自己的创意思维，提高UI界面的设计水平。

本书还为广大读者提供了教学资源，收录了书中所有案例的素材文件及源文件，以及所有案例和课后习题的高清有声教学视频。另外，为方便老师教学，本书还提供了PPT教学课件。

本书适合UI设计初学者学习使用，可作为平面设计师和手机App开发人员的参考用书，也可以作为培训学校、大中专院校相关专业的教学参考书或上机实践指导用书。

第 1章 初识UI设计 9

1．1 认识UI设计 10

1．2 常用UI设计单位解析 10

1．3 UI设计常用图像格式 11

1．4 UI设计准则 11

1．5 UI设计与团队合作关系 12

1．5．1 团队成员 12

1．5．2 UI设计与项目流程步骤 12

1．6 智能手机操作系统简介 12

1．7 UI设计中常用的软件 14

1．7．1 Photoshop 14

1．7．2 Illustrator 14

1．7．3 CorelDRAW 14

1．8 UI色彩学基础知识 15

1．8．1 颜色的概念 15

1．8．2 色彩三要素 16

1．8．3 加法混色 17

1．8．4 减法混色 17

1．8．5 补色 17

1．8．6 芒塞尔色彩系统（Munsell Color System） 17

1．9 UI设计常见配色方案 18

1．10 UI设计配色秘籍 19

1．11 UI设计色彩学 20

1．11．1 色彩与生活 21

1．11．2 色彩意象 21

1．12 精彩UI设计赏析 23

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 课堂案例—圆形开关按钮 30

2．6．1 制作背景并绘制图形 30

2．6．2 添加文字 34

2．7 课堂案例—功能旋钮 35

2．7．1 制作背景并绘制图形 35

2．7．2 绘制功能图像 37

2．7．3 制作立体质感 38

2．7．4 绘制指示图形 40

2．7．5 添加文字 41

2．8 课堂案例—金属旋钮 42

2．8．1 制作背景并绘制图形 42

2．8．2 制作质感 44

2．8．3 制作指示标记 46

2．8．4 制作滑块图形 48

2．8．5 制作插孔 52

2．9 课堂案例—皮革旋钮 56

2．9．1 制作背景 56

2．9．2 绘制图形 57

2．9．3 制作控件 60

2．10 课堂案例—品质音量控件 64

2．10．1 制作背景 64

2．10．2 制作控件 65

2．10．3 制作细节 74

2．11 课堂案例—音频调节控件 76

2．11．1 制作背景并绘制图形 76

2．11．2 绘制刻度 79

2．11．3 制作控件 82

2．12 本章小结 86

2．13 课后习题 86

2．13．1 习题1—白金质感开关按钮 86

2．13．2 习题2—品质音量旋钮 87

2．13．3 习题3—音量控件 87

第3章 趋势流行扁平风 88

3．1 理论知识—扁平化设计 89

3．1．1 何为扁平化设计 89

3．1．2 扁平化设计的优缺点 89

3．1．3 扁平化设计四大原则 89

3．2 课堂案例—扁平铅笔图标 91

3．2．1 绘制图标 91

3．2．2 变换图形 92

3．2．3 绘制细节 93

3．2．4 制作阴影 95

3．3 课堂案例—微信图标 97

3．3．1 制作背景 97

3．3．2 绘制图标 98

3．4 课堂案例—淡雅应用图标控件 99

3．4．1 制作背景 100

3．4．2 绘制图形 100

3．4．3 添加素材 103

3．5 课堂案例—扁平化邮箱界面 104

3．5．1 制作背景及状态栏 104

3．5．2 添加文字 105

3．6 课堂案例—iOS风格音乐播放器界面 107

3．6．1 制作应用界面 107

3．6．2 展示页面 113

3．7 课堂案例—社交应用登录框 114

3．7．1 制作背景 115

3．7．2 绘制界面 116

3．8 课堂案例—简约风天气APP 118

3．8．1 制作背景 119

3．8．2 添加素材并绘制图形 119

3．9 课堂案例—个人应用APP界面 121

3．9．1 制作背景 122

3．9．2 绘制界面图形 122

3．9．3 添加文字并制作细节 123

3．9．4 绘制二级功能页面 125

3．10 本章小结 127

3．11 课后习题 127

3．11．1 习题1—便签图标设计 127

3．11．2 习题2—扁平相机图标 128

3．11．3 习题3—天气Widget 128

第4章 超强表现力之写实风格 129

4．1 理论知识—写实风格解析 130

4．1．1 写实的艺术表现形式 130

4．1．2 UI设计的写实表现 130

4．2 课堂案例—写实计算器图标 132

4．2．1 制作背景并绘制图形 132

4．2．2 添加文字 134

4．2．3 绘制按键 135

4．3 课堂案例—写实邮箱图标 137

4．3．1 制作背景并绘制图形 138

4．3．2 制作高光质感 138

4．3．3 制作阴影质感 139

4．3．4 绘制细节图像 140

4．3．5 绘制邮筒元素图像 142

4．4 课堂案例—写实电视图标 145

4．4．1 制作背景并绘制图形 145

4．4．2 添加素材 147

4．4．3 添加高光质感 148

4．5 课堂案例—写实小票图标 ．152

4．5．1 制作背景并绘制图形 152

4．5．2 制作锯齿效果 155

4．5．3 添加文字并制作阴影 155

4．6 课堂案例—写实开关图标 157

4．6．1 制作背景 157

4．6．2 绘制图形 158

4．6．3 制作控件 160

4．7 课堂案例—写实牛皮钱包图标 164

4．7．1 制作背景并绘制图形 164

4．7．2 制作高光质感 167

4．7．3 添加素材并制作质感 168

4．7．4 制作细节 170

4．8 本章小结 173

4．9 课后习题 174

4．9．1 习题1—写实手机图标 174

4．9．2 习题2—写实闹钟图标 174

4．9．3 习题3—写实钢琴图标 174

4．9．4 习题4—写实开关设计 175

第5章 iOS风格界面设计 176

5．1 理论知识—认识iOS风格 177

5．1．1 iOS的发展及界面分布 177

5．1．2 认识iOS的控件 177

5．2 课堂案例—苹果风格登录界面 178

5．2．1 制作背景 179

5．2．2 绘制图形 179

5．2．3 添加素材 181

5．2．4 绘制文本框 182

5．3 课堂案例—电话界面 184

5．3．1 制作背景并绘制图形 184

5．3．2 添加文字 186

5．3．3 制作界面元素 187

5．3．4 添加素材 188

5．4 课堂案例—用户界面 191

5．4．1 制作背景 191

5．4．2 添加素材 195

5．4．3 绘制图形 197

5．4．4 添加素材及文字 200

5．4．5 绘制拟物图形 204

5．5 课堂案例—会员登录框界面 208

5．5．1 制作背景并绘制图形 208

5．5．2 添加文字并绘制文本框图形 210

5．6 课堂案例—翻页登录界面 215

5．6．1 制作背景 215

5．6．2 绘制图形 215

5．6．3 制作界面细节 217

5．7 本章小结 220

5．8 课后习题 220

5．8．1 习题1—摄影网站会员登录 220

5．8．2 习题2—iPod应用登录界面 221

5．8．3 习题3—木质登录界面 221

第6章 精品极致图标制作 222

6．1 理论知识—了解图标 223

6．1．1 图标的分类 223

6．1．2 图标的作用 223

6．1．3 图标的格式 223

6．1．4 图标和图像大小 224

6．1．5 精美APP图标欣赏 226

6．2 课堂案例—简洁罗盘图标 226

6．2．1 制作背景并绘制图形 226

6．2．2 绘制表座 228

6．2．3 绘制指针 229

6．3 课堂案例—简洁进程图标 230

6．3．1 制作背景并添加图像 231

6．3．2 绘制图形 231

6．4 课堂案例—唱片机图标 232

6．4．1 制作背景并绘制图形 233

6．4．2 制作纹理图像 234

6．4．3 绘制托盘 236

6．4．4 绘制卡座 239

6．4．5 绘制线缆图形 239

6．5 课堂案例—湿度计图标 240

6．5．1 制作背景并绘制图形 240

6．5．2 定义笔触并设置 243

6．5．3 绘制刻度图形 244

6．6 课堂案例—小黄人图标 246

6．6．1 制作背景并绘制图形 246

6．6．2 制作图标元素 248

6．6．3 绘制眼镜图形 249

6．6．4 绘制嘴巴图形 255

6．7 课堂案例—流量计图标 257

6．7．1 制作背景并绘制图形 257

6．7．2 定义笔触 259

6．7．3 绘制指针 261

6．8 课堂案例—清新邮件图标 262

6．8．1 制作背景并绘制图形 262

6．8．2 绘制锁扣图形 264

6．9 课堂案例—清新音乐图标 265

6．9．1 制作背景并绘制图形 266

6．9．2 制作光盘图形 266

6．10 课堂案例—下载图标 267

6．10．1 制作背景并绘制图形 267

6．10．2 制作图标元素 269

6．11 本章小结 272

6．12 课后习题 272

6．12．1 习题1—清新日历图标 272

6．12．2 习题2—进度图标 273

6．12．3 习题3—日历和天气图标 273

6．12．4 习题4—指南针图标 274

第7章 流行界面设计荟萃 275

7．1 理论知识—UI设计尺寸276

7．1．1 iPhone和Android设计尺寸 276

7．1．2 Android 系统换算及主流手机设置 277

7．2 课堂案例—天气预报界面 279

7．2．1 制作背景 279

7．2．2 绘制第 1个界面 280

7．2．3 添加文字及素材 280

7．2．4 绘制第 2个界面 283

7．3 课堂案例—票券APP界面 284

7．3．1 制作背景并绘制状态栏 284

7．3．2 添加素材 285

7．3．3 添加文字 286

7．3．4 绘制按钮图形 287

7．3．5 添加文字及素材 288

7．4 课堂案例—下载数据界面 290

7．4．1 制作背景并绘制状态栏 290

7．4．2 绘制图形 290

7．4．3 添加文字 291

7．5 课堂案例—游戏界面 294

7．5．1 制作背景 294

7．5．2 绘制界面 296

7．5．3 绘制界面元素 297

7．5．4 添加文字 298

7．5．5 制作按钮控件 302

7．6 课堂案例—APP游戏个人界面 307

7．6．1 创建画布并添加素材 307

7．6．2 添加文字 309

7．6．3 添加图标 311

7．7 课堂案例—iOS风格电台界面．312

7．7．1 制作背景并制作状态栏 312

7．7．2 制作界面元素 312

7．7．3 制作界面细节 317

7．7．4 添加素材 318

7．8 本章小结 320

7．9 课后习题 320

7．9．1 习题1—影视播放界面 320

7．9．2 习题2—美食应用APP界面 320

7．9．3 习题3—经典音乐播放器界面 321

第8章 综合设计实战 322

8．1 课堂案例—精致CD控件 323

8．1．1 制作背景并绘制图形 323

8．1．2 绘制旋钮 324

8．1．3 制作质感 325

8．1．4 制作细节 327

8．1．5 添加文字 329

8．2 课堂案例—信息接收控件 330

8．2．1 制作背景并绘制图形 330

8．2．2 制作控件元素 332

8．2．3 添加文字 333

8．3 课堂案例—天气信息控件 334

8．3．1 制作背景 334

8．3．2 绘制界面 336

8．3．3 添加文字 345

8．4 课堂案例—Windows Phone界面 346

8．4．1 制作背景 346

8．4．2 绘制图形 347

8．4．3 添加文字及素材 349

8．5 课堂案例—APP游戏下载页面 351

8．5．1 制作背景并添加素材 352

8．5．2 绘制图形 352

8．5．3 绘制细节图形 354

8．6 课堂案例—APP游戏安装页面 355

8．6．1 制作背景并绘制图形 356

8．6．2 添加素材并绘制图形 356

8．6．3 添加文字 357

8．6．4 添加素材 357

8．7 本章小结 359

8．8 课后习题 359

8．8．1 习题1—点餐APP界面 359

8．8．2 习题2—概念手机界面 360