移动UI交互设计与动效制作（微课版）（第2版）-图书-人邮教育社区

内容摘要

本书循序渐进地讲解移动UI交互设计与动效制作的相关知识与技巧，强调借助AI辅助创意生成的方法，内容丰富，结构严谨，图文并茂。本书共设 5 章，体系完整、结构严谨、图文并茂、由浅入深，系统讲解移动 UI 交互设计基础、UI 元素交互设计、交互设计与用户体验、UI元素交互动效、界面交互动效核心知识。全书深度融入AI应用实战相关内容，结合大量真实App设计案例，采用理论解析+软件实操+AI智能设计相结合的方式，循序渐进讲解UI设计、交互动效的创作思路与制作技法，帮助读者熟练掌握专业设计能力与AI辅助设计技能，真正做到学以致用。本书不但提供了本书所有实例的源文件和素材，还提供了所有案例的多媒体教学视频，以帮助读者更好地学习并掌握本书所讲解的内容。
本书适合作为数字媒体艺术、视觉传达等相关专业的课程教材，也可以作为各类在职设计人员在实际UI设计工作中的参考用书。

第1章　移动UI交互设计基础
【学习目标】 1
AI协同：学习引导 1
1.1　认识移动UI交互设计 1
1.1.1　UI设计解读 2
1.1.2　UI交互与交互设计 2
1.1.3　移动UI交互的特点 3
1.1.4　了解交互设计师 4
1.2　移动UI交互设计的核心考量 5
1.2.1　需要考虑的内容 5
1.2.2　需要考虑的用户因素 6
1.2.3　交互设计与用户体验 7
1.2.4　多模态交互考量 7
1.3　移动UI交互设计的全流程解析 8
1.3.1　需求洞察与分析 8
1.3.2　操作流程设计 9
1.3.3　信息架构搭建 12
1.3.4　原型设计策略 13
AI协同：原型高效练习 14
1.3.5　视觉设计与交互融合 14
1.3.6　测试、评估与迭代优化流程 17
1.4　AI驱动下的移动UI交互创新 17
1.4.1　AI辅助交互创意生成 17
1.4.2　AI优化交互流程与逻辑 18
1.4.3　AI在个性化交互体验中的应用 19
AI协同：交互方案对比 19
1.5　AI助手 19
1.5.1　使用Pixso AI的方法 20
1.5.2　使用Pixso AI生成App功能图标 20
1.5.3　使用“墨刀AI”生成交互原型与流程方案 22
1.6　本章小结 23
1.7　练习题 23

第2章　UI元素交互设计
【学习目标】 25
AI协同：学习引导 25
2.1　文字设计 25
2.1.1　关于文字交互 26
2.1.2　字体选择与应用场景 26
2.1.3　控制字体数量与层次 27
2.1.4　层次感表现技巧 28
2.1.5　文字排版策略 28
2.2　图标设计 29
2.2.1　图标的认知功能 29
2.2.2　图标的类型及适用场景 31
2.3　图标设计的原则 34
2.3.1　预见性设计 34
2.3.2　视觉美观 34
2.3.3　系统统一性 34
2.3.4　统一性实现方法 35
2.3.5　实战操作——设计线框功能图标 36
AI协同：辅助图标设计练习 39
2.4　按钮交互设计 39
2.4.1　功能型按钮与引导型按钮 39
2.4.2　按钮样式与应用场景 40
2.4.3　高效按钮设计策略 42
2.4.4　实战操作——设计微渐变按钮 44
2.5　图片展示设计 46
2.5.1　图片比例规范 46
2.5.2　常用图片排版模式 47
2.5.3　实战操作——设计图片展示界面 49
2.6　导航系统设计 53
2.6.1　底部标签导航 53
2.6.2　选项卡式导航 53
2.6.3　侧边式导航 55
2.6.4　实战操作——设计侧边导航菜单 56
2.7　表单交互设计 59
2.7.1　文本输入表单元素 59
2.7.2　搜索表单设计模式 61
2.7.3　搜索表单状态交互 62
2.7.4　实战操作——设计登录界面 64
AI协同：辅助学习表单交互设计 66
2.8　3D与AR元素交互 66
2.9　AI助手 67
2.9.1　使用AI提升图片素材清晰度 67
2.9.2　使用AI去除图片背景 68
2.9.3　使用“即梦AI”生成图标素材 69
2.10　本章小结 70
2.11　练习题 70

第3章　交互设计与用户体验
【学习目标】 72
AI协同：学习引导 72
3.1　基础概念解析 72
3.1.1　用户体验概述 73
3.1.2　基础体验分类 73
3.1.3　交互设计的核心价值 75
3.1.4　交互设计五要素 76
3.2　界面交互设计策略 77
3.2.1　交互模式选择 77
3.2.2　转化率提升路径 78
3.2.3　差异化交互技巧 79
3.3　可用性设计 81
3.3.1　可用性标准 81
3.3.2　可用性实践表现 81
3.3.3　实战操作——设计传统艺术App界面 82
AI协同：辅助检查可用性设计 87
3.4　沉浸感设计 87
3.4.1　沉浸感构建逻辑 87
3.4.2　沉浸感设计原则 87
3.4.3　实战操作——设计非遗技艺App界面 89
3.5　情感化设计 92
3.5.1　情感化设计内涵 92
3.5.2　互联网产品的情感化实践 92
3.5.3　UI情感化设计细节 94
3.5.4　实战操作——设计音乐App界面 97
3.6　优秀UI交互设计特征 102
3.6.1　系统状态可视化 103
3.6.2　视觉反馈设计 103
3.6.3　转场动效的意义 103
3.6.4　用户行为引导 104
3.6.5　界面变化强调 104
3.6.6　细节注意事项 105
3.6.7　实战操作——设计家居电商App界面 105
AI协同：辅助学习情感化设计 109
3.7　AI助手 109
3.7.1　使用“文心一言”撰写交互策划方案 109
3.7.2　使用Pixso AI生成UI设计规范 110
3.7.3　使用Pixso AI生成UI设计稿 112
3.8　本章小结 113
3.9　练习题 113

第4章　UI元素交互动效
【学习目标】 115
AI协同：学习引导 115
4.1　交互动效基础 115
4.1.1　动效设计概述 115
4.1.2　优秀动效特征 116
4.1.3　动效的价值优势 117
4.1.4　功能型与展示型动效 118
4.2　动效表现手法 119
4.2.1　转场过渡 119
4.2.2　层级展示 120
4.2.3　空间扩展 120
4.2.4　关注聚焦 120
4.2.5　内容呈现 121
4.2.6　操作反馈 121
4.3　开关按钮动效设计 122
4.3.1　开关按钮交互特性 122
4.3.2　实战操作——制作开关按钮交互动效 122
AI协同：辅助学习开关按钮动效制作 127
4.4　加载动效设计 127
4.4.1　常见表现形式 127
4.4.2　加载动效设计原则 128
4.4.3　实战操作——制作个性加载动效 129
4.5　文字动效设计 134
4.5.1　动效强化文字表现力 134
4.5.2　文字动效常用形式 135
4.5.3　实战操作——制作动感遮罩文字动效 137
4.6　图标动效设计 143
4.6.1　图标动效表现方法 143
4.6.2　实战操作——制作标签栏图标交互动效 145
4.7　导航动效设计 151
4.7.1　导航动效用户体验价值 151
4.7.2　设计要点 152
4.7.3　实战操作——制作侧滑式导航菜单交互动效 153
AI协同：辅助学习导航动效制作 157
4.8　AI助手 158
4.8.1　使用AI智能调整界面局部布局 158
4.8.2　基于AI快速衍生同风格界面 158
4.8.3　使用“讯飞星火”生成动效分镜 159
4.9　本章小结 160
4.10　练习题 161

第5章　界面交互动效
【学习目标】 162
AI协同：学习引导 162
5.1　界面动效设计流程 162
5.1.1　创意构思方法 162
5.1.2　动效实现路径 164
5.1.3　实战操作——制作智能家居App界面的转场动效 164
AI协同：转场动效构思 170
5.2　界面动效表现形式 170
5.2.1　常见表现形式 170
5.2.2　实战操作——制作界面功能展开动效 174
5.3　界面转场动效 179
5.3.1　转场动效常见形式 179
5.3.2　转场动效设计要求 182
5.3.3　实战操作——制作登录转场交互动效 184
5.4　界面动效设计规范 191
5.4.1　设计要点 191
5.4.2　动效提升用户体验策略 193
5.4.3　实战操作——制作图片翻页交互动效 196
AI协同：优化翻页动效节奏 202
5.5　AI助手 202
5.5.1　使用AI实现UI设计稿多终端自动适配 202
5.5.2　使用AI生成设计检查清单 203
5.5.3　使用“千问”输出动效规范 204
5.6　本章小结 205
5.7　练习题 205