移动UI交互设计与动效制作（微课版）

图书标准信息

• 作者 刘伦 王璞
• 出版社 人民邮电出版社
• 出版时间 2023-04
• 版次 1
• ISBN 9787115609854
• 定价 89.80元
• 装帧 其他
• 开本 其他
• 纸张 胶版纸
• 页数 220页
• 字数 364千字

【内容简介】

交互设计与动效制作可以拓展UI的空间内容，简化引导流程，降低UI操作的学习成本，更重要的是能够给用户带来意想不到的惊喜。 本书共分为5章，全书内容丰富、结构严谨、图文并茂，循序渐进地讲解了移动UI交互设计基础、UI元素交互设计、交互设计与用户体验、UI元素交互动效和界面交互动效的相关内容，并且通过对大量案例的讲解，使读者能够轻松掌握UI设计和交互动效的设计与制作方法，全面提升读者的交互设计水平，达到学以致用的目的。本书不但提供了本书所有实例的源文件和素材，还提供了所有案例的多媒体教学视频，以帮助读者更好地学习并掌握本书所讲解的内容。 本书适合作为数字媒体、艺术设计相关专业的教材，也可以作为各类在职设计人员在实际UI设计工作中的参考用书。

【作者简介】

张晓景,资深数字媒体专家,具有多年UI设计相关的教学经验，写作经验丰富，出版过多本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