移动终端UI界面设计项目教程

本书使用项目教学的方式进行编写，以智能手机UI界面为主要设计对象，以用户体验情感为中心，结合设计关键要素进行UI设计教学。通过本书的学习，读者可掌握移动终端UI界面设计方法，满足UI设计师的岗位需求，是一本理论与实践紧密结合的教材。

本书的教与学采用“学中做、做中学”“任务驱动”和“行动导向”的方式，由浅入深、循序渐进地来完成，在完成项目任务的同时，实现对知识和技能的掌握，体现真实的工作过程，培养学生在实际工作中的动手能力。

在当今数字信息时代，移动终端设备以其便携性的特点发展迅猛，新产品不断推出，更新速度较快，保有量也不断增加，移动终端包括手机、平板电脑、车载导航等相关移动设备。而移动终端的界面则是用户使用移动终端设备的第一平台，越来越受到用户和开发人员的重视，一套风格统一、有亲和力的界面系统往往能激发用户使用的欲望，获得满足感、尊重感和归属感。本书的编写以用户体验情感为中心，结合设计关键要素进行UI设计教学，使学生通过学习掌握移动终端UI界面设计方法，满足UI设计师的岗位需求，是一本理论与实践紧密结合的教材。

本书采用项目教学方式进行编写，以智能手机UI界面为主要设计对象。编写理念新颖，内容选取合理，组织得当，体现实用性。全书共由七个单元构成，以项目为学习单元，每个单元又包含一到三个任务，涉及了移动终端的常用UI设计任务，具有典型性特征。每个单元中都有相关知识讲解和任务实施的步骤，并配合相应任务的进度，以实践案例的形式拓展学生的设计思维。每个单元后又配合相应类型的项目实训作为习题，供学生进行实践练习。

本书采用Photoshop作为UI界面的设计工具，从艺术角度和实用角度出发，专注于界面的视觉效果及风格体现，可较为快捷和形象地将界面的视觉效果呈现出来，更好地与该专业其他课程进行衔接。

本书的教与学采用“学中做、做中学”“任务驱动”和“行动导向”的方式，由浅入深、循序渐进地来完成，使学生在完成项目任务的同时，逐步掌握UI界面的设计方法和设计要求。最终实现对知识和技能的掌握，体现真实的工作过程，培养学生在实际工作中的动手能力。

本书由天津电子信息职业技术学院的沈强老师担任主编，组织全书的编写，并负责全书的统稿；由天津电子信息职业技术学院的孙新奎老师和王佳老师担任副主编。本书中单元1、单元4和单元7由沈强老师负责编写，单元2和单元3由王佳老师负责编写，单元5和单元6由孙新奎老师负责编写。本书可作为高职高专移动互联应用技术专业和艺术设计相关专业的教学用书，也可作为UI设计人员的入门用书。

由于时间仓促，且作者水平有限，书中疏漏和错误之处在所难免，敬请读者批评指正，如对本书有疑问，请发邮件（shenqiang0411427@163.com）联系询问。

序
前言

单元1 移动终端图标界面设计 1
引例描述 1
1.1 相关知识与技能 1
1.1.1 界面图标设计要点 1
1.1.2 拟物化界面设计 3
1.1.3 扁平化界面设计 3
1.2 任务一：图标界面背景和布局设计 6
1.2.1 任务陈述—木质界面背景和
布局设计 6
1.2.2 任务实施 7
1.2.3 任务拓展—牛仔布效果界面背景
和布局设计 15
1.3 任务二：图标造型效果设计 20
1.3.1 任务陈述—金属质感图标造型
效果设计 20
1.3.2 任务实施 21
1.3.3 任务拓展—皮革质感图标造型
效果设计 27
1.4 任务三：图标图形设计 32
1.4.1 任务陈述—拟物化图标图形设计 32
1.4.2 任务实施 33
1.4.3 任务拓展—简约图标图形设计 49
1.5 项目实训 53
单元2 移动终端锁屏界面设计 54
引例描述 54
2.1 相关知识与技能 54
2.1.1 解锁开关界面作品分析 54
2.1.2 时钟与日期图标设计 56
2.1.3 天气预报图标设计的要点 57
2.2 任务一：解锁开关界面设计 58
2.2.1 任务陈述—迷宫解锁开关
界面设计 58
2.2.2 任务实施 59
2.2.3 任务拓展—撕纸效果解锁开关
界面设计 70
2.3 任务二：时钟解锁界面设计 76
2.3.1 任务陈述—指针时钟解锁
界面设计 76
2.3.2 任务实施 77
2.3.3 任务拓展—数字时钟界面设计 90
2.4 任务三：天气预报图标设计 95
2.4.1 任务陈述—具象天气预报
图标设计 95
2.4.2 任务实施 96
2.4.3 任务拓展—抽象简约风格天气
预报图标设计 104
2.5 项目实训 107
单元3 手机通话界面设计 108
引例描述 108
3.1 相关知识与技能 108
3.1.1 拨号界面设计作品分析 108
3.1.2 通话记录界面的要点 110
3.1.3 电话簿界面的要点 111
3.2 任务：手机通话界面设计 112
3.2.1 任务陈述—怀旧风格手机通话
界面设计 112
3.2.2 任务实施 113
3.2.3 任务拓展—透明效果手机拨号
界面设计 139
3.3 项目实训 154
单元4 移动终端影音媒体界面设计 156
引例描述 156
4.1 相关知识与技能 156
4.1.1 界面细节带给用户的心理感受 156
4.1.2 制作金属质感按钮 159
4.1.3 制作金属质感旋钮 162
4.2 任务一：视频媒体播放器界面设计 168
4.2.1 任务陈述—清新风格视频播放器
界面设计 168
4.2.2 任务实施 169
4.2.3 任务拓展—橙色视频播放器
界面设计 181
4.3 任务二：音频媒体播放器界面设计 185
4.3.1 任务陈述—流线型音频媒体
播放器界面设计 185
4.3.2 任务实施 186
4.3.3 任务拓展—酷黑音频播放器
界面设计 193
4.4 任务三：收音机播放器界面设计 201
4.4.1 任务陈述—旋钮型收音机播放器
界面设计 201
4.4.2 任务实施 202
4.4.3 任务拓展—滑动型收音机播放器
界面设计 216
4.5 项目实训 224
单元5 移动终端游戏界面设计 226
引例描述 226
5.1 相关知识与技能 226
5.1.1 游戏界面娱乐氛围的营造方法 226
5.1.2 游戏界面字体设计的要领 228
5.1.3 游戏界面发光字体设计与制作 230
5.2 任务一：游戏图标设计 235
5.2.1 任务陈述—手机桌球游戏
图标设计 235
5.2.2 任务实施 236
5.2.3 任务拓展—手机五子棋游戏
图标设计 243
5.3 任务二：游戏登录界面设计 248
5.3.1 任务陈述—手机桌球游戏登录
界面设计 248
5.3.2 任务实施 249
5.3.3 任务拓展—手机五子棋游戏登录
界面设计 253
5.4 任务三：游戏操作界面设计 260
5.4.1 任务陈述—手机桌球游戏操作
界面设计 260
5.4.2 任务实施 261
5.4.3 任务拓展—手机五子棋游戏操作
界面设计 271
5.5 项目实训 278
单元6 移动终端软件界面设计 279
引例描述 279
6.1 相关知识与技能 279
6.1.1 软件界面个性的塑造原则 279
6.1.2 软件色彩设计 281
6.1.3 软件布局设计 281
6.2 任务一：软件图标设计 281
6.2.1 任务陈述—即时聊天软件
图标设计 281
6.2.2 任务实施 282
6.2.3 任务拓展—手机录音软件
图标设计 285
6.3 任务二：软件欢迎（登录）界面设计 288
6.3.1 任务陈述—即时聊天软件登录
界面设计 288
6.3.2 任务实施 289
6.4 任务三：软件操作界面设计 297
6.4.1 任务陈述—即时聊天软件操作
界面设计 297
6.4.2 任务实施 298
6.4.3 任务拓展—手机录音软件操作
界面设计 311
6.5 项目实训 322
单元7 移动终端UI主题设计 323
引例描述 323
7.1 相关知识与技能 323
7.2 任务一：手机锁屏界面主题设计 327
7.2.1 任务陈述—教师职业主题手机
锁屏界面设计 327
7.2.2 任务实施 328
7.2.3 任务拓展—温暖夏日主题手机
锁屏界面设计 338
7.3 任务二：手机图标界面主题设计 343
7.3.1 任务陈述—教师职业主题手机
图标界面设计 343
7.3.2 任务实施 344
7.3.3 任务拓展—温暖夏日主题手机
图标界面设计 358
7.4 项目实训 362

1. SwiftUI完全开发 [李智威 著]
2. 深入浅出OpenHarmony——架构、内核、驱动及应用开发全栈 [李传钊 著]
3. UI界面设计与制作教程 [主 编 黎 娅 任劲松]
4. Android高级程序设计 [主编　周雯　舒松]
5. 基于Android平台的移动开发技术 [主编 徐硕博 黄卫东 贾雁]
6. Android 应用开发项目实战 [主编 梁 琨 朱冰鸿]
7. Android应用开发基础教程 [主编 巫湘林]
8. 移动终端服务器管理与开发 [主编 熊伟 曹天人]
9. Android软件应用与实践 [主编 梁平 高峰]
10. 移动端UI设计及规范——分分钟搞定App UI设计 [北京课工场教育科技有限公司Q]
11. 移动端UI商业项目实战——让人爱不释手的移动端UI设计 [北京课工场教育科技有限公司]
12. Visual C++ & Android程序设计综合实训（第二版） [主编 梁建武]
13. Android开发实用教程 [主编 王建华 张伟]
14. Android基础教程 [余 平 张建华]
15. Android 4.X手机/平板电脑程序设计入门、应用到精通（第二版） [孙宏明 著]
16. Android手机/平板电脑程序开发教练 [黄彬华 编著]
17. Android手机程序设计入门、应用到精通 [孙宏明 著]