第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
展开
