第1章　移动UI交互设计基础　001
1.1　了解UI设计 / 001
1.1.1　什么是UI设计 / 001
1.1.2　移动UI设计 / 001
1.1.3　移动UI设计的特点 / 002
1.2 　了解移动UI交互设计 / 003
1.2.1　什么是交互 / 003
1.2.2　什么是交互设计 / 003
1.2.3　移动UI交互的特点 / 004
1.2.4　了解交互设计师 / 005
1.3　移动UI交互设计需要考虑的内容和用户因素 / 006
1.3.1　需要考虑的内容 / 006
1.3.2　需要考虑的用户因素 / 006
1.3.3　交互设计与用户体验 / 007
1.4　移动 UI 交互设计的基本流程 / 008
1.5　需求分析 / 008
1.5.1　主动需求与被动需求 / 008
1.5.2　需求分析的流程 / 009
1.6　操作流程设计 / 010
1.6.1　操作流程的分类 / 010
1.6.2　操作流程的设计原则 / 011
1.7　信息架构设计 / 013
021 CONTENTS
1.7.1　信息架构概述 / 013
1.7.2　信息架构的设计方法 / 013
1.8　原型设计 / 015
1.8.1　原型设计概述 / 015
1.8.2　原型设计的流程 / 016
1.9　练习题 / 017
第2章　UI元素交互设计　018
2.1　文字 / 018
2.1.1　关于文字交互 / 018
2.1.2 UI中的字体应用 / 019
2.1.3　控制字体数量 / 020
2.1.4　体现文字的层次感 / 020
2.1.5　文字排版方式 / 021
2.2　图标 / 023
2.2.1　图标的作用 / 023
2.2.2　图标的表现形式及其适用场景 / 024
2.2.3　实战——设计相机应用图标 / 027
2.3　图标的意义 / 030
2.3.1　预见性 / 030
2.3.2　美观性 / 031
2.3.3　统一性 / 031
2.3.4　保持图标统一的方法 / 032
2.3.5　实战——设计线框功能图标 / 033
2.4　按钮 / 037
2.4.1　真正的按钮与伪按钮 / 038
2.4.2　常见交互按钮样式及其
应用场景 / 038
2.4.3　设计出色的交互按钮的方法 / 040
2.4.4　实战——设计微渐变按钮 / 042
2.5　图片 / 045
2.5.1　常用的图片比例 / 045
2.5.2　常见的图片排版方式 / 046
2.5.3　实战——设计图片展示界面 / 048
2.6　导航 / 052
2.6.1　底部标签式导航 / 052
2.6.2　舵式导航 / 052
2.6.3　选项卡式导航 / 053
2.6.4　侧边式导航 / 055
2.6.5　实战——设计侧边交互导航界面 / 055
2.7　表单 / 058
2.7.1　文本输入表单元素 / 058
2.7.2　搜索表单的常见表现形式 / 060
2.7.3　搜索表单的不同交互状态 / 062
2.7.4　实战——设计登录界面 / 064
2.8　练习题 / 067
第3章　交互设计与用户体验　069
3.1　用户体验与交互设计的
基本知识 / 069
3.1.1　用户体验概述 / 069
3.1.2　基础体验类型 / 069
3.1.3　交互设计的作用 / 071
3.1.4　交互设计的5个要素 / 072
3.2　界面交互设计 / 073
3.2.1　交互设计模式 / 073
3.2.2　提升转化率 / 074
3.2.3　独特的UI交互技巧 / 076
3.3　可用性设计 / 077
3.3.1　什么是可用性 / 077
3.3.2　可用性的表现 / 078
3.3.3　实战——使用Adobe XD设计影视App
界面 / 078
3.4　沉浸感设计 / 083
3.4.1　什么是沉浸感 / 083
3.4.2　沉浸感的设计原则 / 083
3.4.3　实战——使用Adobe XD设计美食App
界面 / 085
3.5　情感化设计 / 089
3.5.1　什么是情感化设计 / 089
3.5.2　互联网产品的情感化设计 / 090
3.5.3 UI情感化设计细节 / 091
3.5.4　实战——使用Adobe XD设计音乐App界面 / 094
3.6　优秀 UI 交互设计具有的特点 / 101
3.6.1　明确系统状态 / 101
3.6.2　有触感 / 101
3.6.3　有意义的转场动效 / 102
3.6.4　引导用户 / 103
3.6.5　强调界面的变化 / 103
3.6.6　需要注意的细节 / 103
3.7　网站 UI 与移动 UI 的差异 / 104
3.7.1　设备尺寸不同 / 104
3.7.2　交互方式不同 / 105
3.7.3　使用环境不同 / 106
3.7.4　网络环境不同 / 106
3.7.5　基于位置服务的精细度不同 / 106
3.7.6　实战——使用Adobe XD设计家具
App界面 / 107
3.8　练习题 / 116
第4章　UI元素交互动效　117
4.1　交互动效 / 117
4.1.1　交互动效概述 / 117
4.1.2　优秀交互动效具有的特点 / 118
4.1.3　交互动效的优点 / 118
4.1.4　功能型动效和展示型动效 / 120
4.2　使用动效表现 UI 交互 / 121
4.2.1　转场过渡 / 121
4.2.2　层级展示 / 122
4.2.3　空间扩展 / 122
4.2.4　关注聚焦 / 123
4.2.5　内容呈现 / 123
4.2.6　操作反馈 / 124
4.3　开关按钮交互动效 / 124
4.3.1　开关按钮的功能与特点 / 124
4.3.2　实战——制作开关按钮交互动效 / 125
4.4　加载交互动效 / 130
4.4.1　了解加载交互动效 / 130
4.4.2　加载交互动效的常见表现形式 / 131
4.4.3　实战——制作加载等待动效 / 132
4.5　文字交互动效 / 136
4.5.1　文字交互动效的表现优势 / 136
4.5.2　文字交互动效的常见表现形式 / 137
4.5.3　实战——制作动感遮罩文字
交互动效 / 139
4.6　图标交互动效 / 146
4.6.1　图标交互动效的常见表现方法 / 146
4.6.2　实战——设计相机App启动图标的
动效 / 148
4.6.3　实战——制作线框图标的动效 / 155
4.7　导航菜单交互动效 / 161
4.7.1　导航菜单交互动效的优势 / 161
4.7.2　导航菜单交互动效的设计要点 / 162
4.7.3　实战——制作侧滑式导航菜单交互动效 / 163
4.8　练习题 / 169
第5章　界面交互动效 　171
5.1　设计界面交互动效 / 171
5.1.1　拥有一个出色的想法 / 171
5.1.2　实现想法 / 172
5.1.3　实战——制作智能家居App界面的转场动效 / 173
5.2　界面交互动效的表现形式 / 180
5.2.1　界面交互动效的常见表现形式 / 180
5.2.2　实战——制作界面功能展开动效 / 184
5.3　界面转场交互动效 / 190
5.3.1　界面转场交互动效的常见形式 / 190
5.3.2　界面转场交互动效的设计要求 / 193
5.3.3　实战——制作登录转场交互动效 / 196
5.4　界面交互动效的设计规范 / 204
5.4.1　界面交互动效的设计要点 / 204
5.4.2　通过交互动效设计提升用户体验 / 207
5.4.3　实战——制作图片翻页交互动效 / 210
5.5　练习题 / 219