UI创意设计（活页式）

理论与实践相结合，通过实际项目突出应用

融合课程思政元素，突出立德树人根本任务

配套丰富教学资源，方便师生线上线下使用

随着5G信息技术的飞速发展，特别是人工智能技术已深入人们工作生活的各个领域，人们面对的智能终端设备越来越多。为了更快速而准确地使用这些智能设备，UI设计成为提升用户对智能设备直观体验的决定因素，界面的美观度、规范化、交互性直接决定了这款智能产品在用户心中的形象。

本书采用活页式装订+项目案例编写模式，针对目前的智能手机AUI设计、网站WUI设计及智能穿戴设备、智能家居、公共场所智能终端等其他智能终端设备GUI设计所涉及的相关知识和技术技能逐一进行知识讲解和案例制作过程的演示，让读者深刻理解UI相关知识并熟练掌握各种图标、控件和界面的制作技术。

本书编写特点如下：

（1）在内容选取上，本书分为基础设计和创意设计两大部分，基础设计包括UI设计、图标设计和控件设计；创意设计从不同平台的终端设备入手，分别介绍AUI设计、WUI设计和GUI设计的多个典型案例的制作技术和详细制作步骤。

（2）在编写体例上，本书按照活页式装订+项目案例编写模式，结合UI设计的工作过程和工作技能展开，每个任务或案例都是独立的，可以单独成课，符合活页式的编排。

（3）在课程思政上，本书以“立德树人”为根本任务，在每个项目的教学中都融入了课程思政元素，各案例在职业道德、美育教育、工匠精神、文化自信和行为习惯上都有所体现。

本书共两个单元：单元1 UI基础设计，主要介绍UI设计的相关知识、图标的设计与制作和UI控件的设计与制作；单元2 UI创意设计，主要介绍手机端AUI设计、PC端WUI设计和其他智能终端设备的GUI设计，共14个相关知识点和50个案例制作。

本书的教学时数为64课时，各单元的参考教学课时见下表。

单元 项目 教学内容 课时分配

理论教学 实践训练

单元1 UI基础设计

项目1 初识UI设计

何谓UI设计 4

UI设计流程

UI设计原则

UI设计风格

UI设计色彩

UI设计字体

UI常用工具

项目2 设计制作图标

认识图标 2

制作便签图标 2

制作天气图标 2

制作闹钟图标 2

制作下载图标 2

制作邮箱图标 2

项目3 设计制作UI控件

认识UI控件 2

绘制简洁音乐进度条 1

绘制质感下载进度条 1

绘制扁平按钮 1

绘制质感按钮 1

单元2 UI创意设计

项目1 AUI设计

认识AUI设计 2

手机锁屏界面设计 2

手机主题界面设计 2

手机闹钟设置界面设计 2

手机天气界面设计 2

手机音乐APP首页设计 2

手机音乐APP播放页设计 2

项目2 WUI设计

认识WUI设计 2

Edge浏览器图标设计 2

网站Logo设计 2

网页按钮设计 2

网页导航设计 2

网站Banner设计 2

网站首页设计 2

项目3 GUI设计

认识GUI设计 2

行车记录仪UI设计 2

图书馆自助机UI设计 2

iPad点餐UI设计 2

跑步机UI设计 2

VR眼镜UI设计 2

交通违法自助受理机UI设计 2

课时总计 14 50

本书是“影视动画”国家职业教育教学资源库的子项目“UI创意设计”的配套教材，在“智慧职教”网站上有配套资源及配套课程。

本书由赵艳莉任主编，各参编人员分工如下：单元1项目1和其他每个项目的任务1由赵艳莉编写，单元1项目2和项目3的所有案例由范亚飞编写，单元2项目1的所有案例由卢琦编写，单元2项目2的所有案例由张岚岚编写，单元2项目3的所有案例由郑雅文编写。赵艳莉负责本书进行了框架设计、版式设计、统稿和资源整理工作。

本书配备有教学资源包，包括微课、动画、素材、效果图、课件及习题等，读者既可登录“智慧职教”网站进行免费下载和课程在线学习（链接地址：https://www.icve.com.cn/portal/courseinfo?courseid=pvpvanass7dff0dqqf1gsw），也可通过扫描书中二维码进行自主学习。

由于编者水平有限，书中难免存在不妥甚至错误之处，恳请读者批评指正。

编 者

2021年11月

单元１　UI基础设计
项目1　初识UI设计 2
任务1　何谓UI设计 2
任务2　UI设计流程 8
任务3　UI设计原则 11
任务4　UI设计风格 13
任务5　UI设计色彩 16
任务6　UI设计字体 23
任务7　UI常用工具 26
项目2　设计制作图标 30
任务1　认识图标 30
任务2　制作便签图标 40
步骤一　绘制图标背景 41
步骤二　绘制“笔”造型 42
步骤三　绘制“文字”造型 43
任务3　制作天气图标 45
步骤一　绘制图标背景 46
步骤二　绘制云朵造型 47
步骤三　绘制字母C造型 48
步骤四　绘制太阳造型 50
任务4　制作闹钟图标 52
步骤一　绘制图标背景 52
步骤二　绘制熊猫头像 53
步骤三　绘制刻度 54
步骤四　绘制指针 56
任务5　制作下载图标 59
步骤一　绘制图标背景 60
步骤二　绘制圆形造型 60
步骤三　绘制下载图形 63
任务6　制作邮箱图标 66
步骤一　绘制图标背景 67
步骤二　绘制邮件图形 68
项目3　设计制作UI控件 71
任务1　认识UI控件 71
任务2　绘制简洁音乐进度条 78
步骤一　绘制背景图像 78
步骤二　添加素材效果 79
步骤三　绘制进度条 79
任务3　绘制质感下载进度条 82
步骤一　绘制背景图像 82
步骤二　添加图文效果 83
步骤三　绘制质感进度条 84
任务4　绘制扁平按钮 87
步骤一　绘制背景图像 88
步骤二　添加基本文字 88
步骤三　绘制扁平按钮 90
任务5　绘制质感按钮 93
步骤一　绘制背景图像 93
步骤二　添加文字效果 94
步骤三　绘制质感按钮 95
单元2　UI创意设计
项目1　AUI设计 101
任务1　认识AUI设计 101
任务2　手机锁屏界面设计 110
步骤一　绘制背景 111
步骤二　绘制时间信息及解锁键 112
步骤三　绘制界面主体图案 112
任务3　手机主题界面设计 115
步骤一　绘制背景图案及手机顶部区域 116
步骤二　绘制时间、天气区域 117
步骤三　添加界面图标及文字 118
任务4　手机闹钟设置界面设计 120
步骤一　绘制背景及手机顶部区域 121
步骤二　绘制闹钟设置区 122
步骤三　绘制底部菜单栏 123
任务5　手机天气界面设计 125
步骤一　绘制背景及手机顶部区域 126
步骤二　绘制当日天气状况 127
步骤三　绘制一周天气状况 128
任务6　手机音乐APP首页设计 130
步骤一　绘制手机顶部区域 131
步骤二　绘制封面推荐区域 132
步骤三　绘制推荐歌单区域 133
步骤四　绘制底部菜单栏 135
任务7　手机音乐APP播放页设计 136
步骤一　绘制背景及手机顶部区域 137
步骤二　绘制歌曲信息部分 138
步骤三　绘制播放进度条 139
步骤四　添加播放按钮组件 140
项目2　WUI设计 142
任务1　认识WUI设计 142
任务2　Edge浏览器图标设计 160
步骤一　绘制图标背景 161
步骤二　绘制六个不规则椭圆 161
步骤三　添加图标效果 162
任务3　网站Logo设计 164
步骤一　绘制背景 165
步骤二　绘制草芯 166
步骤三　绘制四片叶 166
步骤四　添加文字信息 167
任务4　网页按钮设计 168
步骤一　创建背景 169
步骤二　绘制绿色水晶按钮 170
步骤三　绘制其他水晶按钮 171
任务5　网页导航设计 172
步骤一　创建画布确定网页宽度 173
步骤二　绘制导航背景 173
步骤三　添加导航信息 174
步骤四　绘制搜索栏 175
步骤五　绘制导航水平线 176
任务6　网站Banner设计 177
步骤一　创建画布确定Banner宽度 177
步骤二　置入Banner元素 178
步骤三　绘制动画 178
任务7　网站首页设计 182
步骤一　创建画布确定网页宽度 183
步骤二　添加Logo和导航条 183
步骤三　绘制页面背景 184
步骤四　添加图片元素 185
步骤五　添加按钮 185
步骤六　添加文字信息 186
项目3　GUI设计 189
任务1　认识GUI设计 189
任务2　行车记录仪UI设计 193
步骤一　绘制界面背景 193
步骤二　绘制图标背景 194
步骤三　导入图标 195
步骤四　添加文字信息 196
任务3　图书馆自助机UI设计 198
步骤一　绘制界面背景 198
步骤二　添加文字信息 199
步骤三　绘制天气模块 200
步骤四　绘制功能模块 202
任务4　iPad点餐UI设计 204
步骤一　绘制界面背景 205
步骤二　绘制水平时间栏 205
步骤三　绘制侧面导航栏 206
步骤四　绘制内容栏 209
任务5　跑步机UI设计 214
步骤一　绘制界面背景 214
步骤二　绘制宫格功能模块 215
步骤三　绘制图标并添加文字 216
任务6　VR眼镜UI设计 219
步骤一　绘制界面背景 220
步骤二　制作内容区域 222
步骤三　绘制功能按钮 224
任务7　交通违法自助受理机UI设计 227
步骤一　绘制界面背景 228
步骤二　绘制上边框和下边框 229
步骤三　绘制按钮 231
步骤四　添加文字信息 233

1. 零基础玩转国产大模型DeepSeek [徐永冰 张帅 编著]
2. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
3. 信息系统项目管理师考试32小时通关（适用第4版考纲） [薛大龙]
4. 信息系统管理工程师考试32小时通关（适配第2版考纲） [薛大龙　刘伟]
5. 土木工程材料检测实训 [洪晓江 达则晓丽 钱波]
6. 科技信息检索与论文写作实用教程 [李振华]
7. 传统山水画论解读与实践 [陈钠 著]
8. Python数据库编程 [主编 殷树友 邢 翀]
9. 计算机基础实训指导 [主编 袁春萍 朱妮]
10. 嵌入式人工智能技术应用（数字教材） [主编 胡娜 杨国勇 晏廷荣]
11. Vienna整流器技术 [桂存兵 著]
12. 变频器与伺服应用 [陈刚 叶云飞]
13. 物联网工程设计与实践 [汤琳 李敏]
14. 炉边夜话——深入浅出话AI [汪建　著]
15. 电商运营与管理 [钟肖英 陈潇]
16. Java面向对象程序设计 [主编 姜春磊 陈虹洁]
17. 信息技术基础（Windows 10+WPS Office）（微课版） [主编　石利平　田辉平　谢盛嘉]
18. 人工智能应用 [主编　陈　萍　刘培培　陈孟军]
19. 大学生职业发展与就业指导 [主编　刘志坚]
20. 高级办公应用项目教程 [主编 屈晶 赵成丽]
21. 微信小程序开发项目实战（微课版） [主编 黄龙泉 郭峰 朱倩]
22. 企业档案工作实战宝典百问百答 [华俊 卢秀英 邵甜甜 著]
23. 计算机网络原理及应用 [主编 唐继勇 叶坤 孙梦娜]
24. 大学生创业基础 [主编 王丽莉 王 杨]
25. 船舶辅机 [主编 王连海 于洋 姜淑翠]
26. 大学生就业指导 [主编 王丽莉 董宴廷]
27. 系统架构设计师章节习题与考点特训 [主编 薛大龙 邹月平]
28. 高校学生工作探索与实践 [郭亮 著]
29. 大学生情商管理 [方雄 著]
30. 2023年长沙市会展业发展报告 [主编 周栋良]