移动UI交互设计与动效制作(微课版)

第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