按钮+菜单+加载+转场UI交互动效设计教程

本书紧跟移动端交互设计的发展趋势，向读者详细介绍UI交互设计的相关知识，并且讲解目前流行的交互动效设计制作，通过基础知识与实战操作相结合的方式，使读者在理解交互设计的基础上能够在UI界面设计中灵活应用，并且能够在UI中实现各种不同的交互动效，真正做到学以致用。

UI交互设计是设计人与UI之间的“对话”，交互设计的目的包括对UI的有用性、易用性和吸引性方面进行设计和改善。近年来，随着互联网的发展，特别是进入数字时代，多媒体的应用让交互设计的研究显得更加多元化。产品的功能越来越复杂，提高产品用户体验的需求越来越迫切，这些对交互设计提出了越来越高的要求。本书从研究交互设计与用户体验的关系开始，图文并茂、循序渐进地讲解了UI交互设计的基础、UI设计规范、交互设计的UI布局、UI中各种元素的交互设计方法和技巧，并且向读者介绍了交互动效设计的相关知识，通过对交互动效案例的讲解，使读者能够轻松掌握交互动效的制作方法和技巧，全面提升读者的UI交互设计水平，达到学以致用的目的。本书适合学习UI设计的初、中级读者阅读，也可以作为各类在职设计人员在实际UI设计工作中的参考用书。

第1章 UI交互设计基础
1.1 UI设计概述 1
1.1.1 什么是UI设计 1
1.1.2 UI设计常用术语 2
1.1.3 UI设计的特点 2
1.2 了解UI交互设计 5
1.2.1 什么是交互 5
1.2.2 什么是交互设计 6
1.2.3 了解UI交互设计师 7
1.2.4 交互设计需要考虑的内容 8
1.2.5 交互设计需要遵循的习惯 9
1.3 交互设计与用户体验的关系 9
1.3.1 什么是用户体验 10
1.3.2 六种基础体验 10
1.3.3 UI交互设计的重要性 12
1.3.4 交互设计的五要素 13
1.4 交互设计的基本流程 14
1.5 产品需求分析 15
1.5.1 需求分析的误区 16
1.5.2 需求分析的路径 16
1.6 用户行为流程设计 17
1.6.1 用户行为流程的分类 18
1.6.2 用户行为流程的设计原则 18
1.7 产品信息架构设计 20
1.7.1 什么是产品信息架构 20
1.7.2 如何进行产品信息架构设计 21
1.8 产品原型设计 23
1.8.1 什么是原型设计 23
1.8.2 原型设计的流程 23
1.9 移动端App与网站的交互差异 24
1.9.1 设备尺寸不同 24
1.9.2 交互方式不同 25
1.9.3 使用环境不同 27
1.9.4 网络环境不同 27
1.9.5 基于位置服务的精细度不同 27
1.10 本章小结 28
第2章 UI设计规范
2.1 了解iOS系统 29
2.1.1 iOS系统的屏幕分辨率 29
2.1.2 逻辑点与倍图 30
2.2 iOS系统UI设计规范 31
2.2.1 iPhone常用屏幕尺寸和分辨率 31
2.2.2 界面元素尺寸规范 32
2.2.3 字体规范 35
2.2.4 图标规范 37
2.2.5 按钮规范 39
2.2.6 版式布局规范 39
2.2.7 边距和间距设置规范 42
2.2.8 交互手势规范 45
2.2.9 设计适配 49
2.3 iOS系统UI设计三大原则 49
2.3.1 视觉层——清晰 49
2.3.2 交互层——遵从 50
2.3.3 结构层——深度 51
2.4 了解Android系统 52
2.4.1 Android系统的发展 52
2.4.2 Android系统常用单位 52
2.4.3 单位换算 53
2.4.4 Android系统常用分辨率 54
2.5 Android系统UI设计规范 54
2.5.1 界面基本元素的尺寸设置 54
2.5.2 字体设计规范 55
2.5.3 图标设计规范 56
2.5.4 色彩应用标准 58
2.5.5 设计适配 61
2.6 本章小结 62
第3章 交互设计的UI布局
3.1 移动端UI的布局设计 63
3.1.1 UI版面布局的特征 63
3.1.2 UI常见布局形式 65
3.1.3 无框设计与卡片式设计 69
3.2 UI设计中的平面构成 71
3.2.1 统一与变化 71
3.2.2 对比与调和 72
3.2.3 对称与平衡 72
3.2.4 节奏与韵律 73
3.3 界面的格式塔原理 74
3.3.1 什么是格式塔原理 74
3.3.2 格式塔原理的七大法则 75
3.4 UI的交互设计 80
3.4.1 用户青睐的交互设计模式 80
3.4.2 如何提升产品转化率 81
3.4.3 三种新颖的UI交互技巧 82
3.5 优秀的UI交互具有哪些特点 85
3.5.1 明确系统状态 85
3.5.2 让按钮和操控拥有触感 86
3.5.3 有意义的转场动效 86
3.5.4 帮助用户开始 87
3.5.5 强调界面的变化 87
3.5.6 需要注意的细节 87
3.6 本章小结 88
第4章 界面元素的交互设计
4.1 UI设计元素——文字 89
4.1.1 衬线字体与无衬线字体 89
4.1.2 UI中的字体应用 90
4.1.3 在界面中尽可能只使用一种字体 91
4.1.4 如何体现文字的层次感 92
4.1.5 文字适配的四种方式 92
4.2 UI设计元素——图标 94
4.2.1 图标的功能 94
4.2.2 图标的类型 96
4.2.3 图标的表现形式及适用场景 97
4.3 图标交互的意义 99
4.3.1 预见性 99
4.3.2 美观性 100
4.3.3 统一性 101
4.4 UI设计元素——按钮 103
4.4.1 按钮的功能与表现 103
4.4.2 常见的按钮形状 104
4.4.3 交互按钮的样式与应用 106
4.5 如何设计出色的交互按钮 108
4.5.1 按钮需要看起来可点击 108
4.5.2 按钮的色彩很重要 109
4.5.3 按钮的尺寸 109
4.5.4 合适的摆放位置 110
4.5.5 良好的对比效果 110
4.5.6 按钮样式需要统一 111
4.5.7 明确告诉用户按钮的功能 111
4.5.8 注意按钮的视觉层级 111
4.6 UI设计元素——图片 112
4.6.1 图片比例 112
4.6.2 常见的图片排版方式 113
4.6.3 UI中图片的应用技巧 115
4.7 UI设计元素——导航 116
4.7.1 底部标签式导航 116
4.7.2 舵式导航 117
4.7.3 选项卡式导航 118
4.7.4 抽屉式导航 120
4.8 UI设计元素——表单 120
4.8.1 文本输入表单元素 120
4.8.2 搜索表单的常见表现形式 122
4.8.3 搜索表单的不同交互状态 123
4.9 本章小结 126
第5章 UI交互动效基础
5.1 交互动效与UI设计 127
5.1.1 UI动效的发展 127
5.1.2 优秀的交互动效具有哪些特点 128
5.1.3 交互动效的优势是什么 129
5.1.4 功能型动效与展示型动效 130
5.2 哪些场合可以使用动效表现UI交互 131
5.2.1 转场过渡 131
5.2.2 层级展示 132
5.2.3 空间扩展 132
5.2.4 关注聚焦 132
5.2.5 内容呈现 133
5.2.6 操作反馈 133
5.3 基础动效类型有哪些 134
5.3.1 基础动效 134
5.3.2 属性变化 135
5.3.3 运动节奏 135
5.3.4 基础动效组合应用 136
5.4 认识主流交互动效制作软件——After Effects 136
5.4.1 了解After Effects 136
5.4.2 After Effects的工作界面 137
5.4.3 After Effects的基本操作 138
5.4.4 导入素材 140
5.4.5 导入PSD格式素材 140
实战练习01——导入PSD格式素材创建合成 141
5.5 交互动效制作基础 142
5.5.1 认识“时间轴”面板 142
5.5.2 理解帧与关键帧 145
5.5.3 创建关键帧 146
5.5.4 编辑关键帧 147
5.5.5 五种基础“变换”属性 149
实战练习02——制作App启动界面动效 151
5.5.6 关于缓动效果 155
5.6 关于蒙版动效 157
5.6.1 蒙版动效原理 157
5.6.2 创建蒙版的工具 158
5.6.3 蒙版属性 159
实战练习03——制作界面蒙版显示动效 160
5.6.4 轨道遮罩 164
实战练习04——制作iOS系统解锁文字遮罩动效 164
5.7 交互动效的渲染输出 167
5.7.1 渲染选项设置 167
5.7.2 使用Photoshop将动效输出为GIF 文件 169
实战练习05——将动效渲染输出为GIF动画文件 169
5.7.3 将动效嵌入手机模板 172
实战练习06——将动效嵌入手机模板 172
5.8 本章小结 174
第6章UI交互动效设计与实现
6.1 开关按钮交互动效 175
6.1.1 开关按钮的功能与特点 175
6.1.2 制作开关按钮交互动效 175
实战练习01——制作开关按钮交互动效 175
6.2 加载进度交互动效 179
6.2.1 了解加载等待动效 179
6.2.2 常见的加载进度动效表现形式 180
6.2.3 制作矩形进度条动效 181
实战练习02——制作矩形进度条动效 181
6.3 文字交互动效 185
6.3.1 文字动效的表现优势 185
6.3.2 常见的文字动效表现形式 186
6.3.3 制作手写文字动效 189
实战练习03——制作手写文字动效 189
6.4 图标交互动效 194
6.4.1 常见的图标动效表现形式 194
6.4.2 制作图标路径变换动效 197
实战练习04——制作图标路径变换动效 197
6.4.3 图标工具栏交互动效 203
6.4.4 制作工具图标动感展开动效 203
实战练习05——制作工具图标动感展开动效 204
6.5 导航菜单交互动效 208
6.5.1 交互式导航菜单的优势 208
6.5.2 交互式导航菜单的设计要点 209
6.5.3 制作侧滑交互导航菜单动效 210
实战练习06——制作侧滑交互导航菜单动效 210
6.6 UI交互动效 213
6.6.1 UI交互动效的作用 213
6.6.2 常见的UI交互动效表现形式 216
6.6.3 制作火箭加载等待动效 220
实战练习07——制作火箭加载等待动效 220
6.7 UI转场交互动效 225
6.7.1 常见的UI转场动效形式 225
6.7.2 UI转场交互动效设计要求 229
6.8 UI交互动效设计规范 232
6.8.1 UI交互动效设计要点 232
6.8.2 通过交互动效设计提升UI用户体验 234
6.8.3 制作登录转场动效 237
实战练习08——制作登录转场动效 237
6.9 本章小结 246