“十三五”高等职业教育计算机类专业规划教材:UI交互设计与实现

图书标准信息

• 作者 阮进军；孙握瑜
• 出版社 中国铁道出版社
• 出版时间 2020-08
• 版次 1
• ISBN 9787113270391
• 定价 45.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 232页
• 字数 349千字

【内容简介】

本书是移动端APP UI设计的自学教程，通过大量的综合任务案例，介绍如何设计与制作移动端交互界面。全书分为6个单元，分别介绍交互式UI设计基础、交互式原型设计、Photoshop图标设计、Illustrator综合图标设计、UI界面设计以及UI动效设计基础。其中涉及Axure RP、Photoshop、Illustrator、After Effects等软件的操作。本书内容从两条主线进行组织编写，一条主线是实际操作案例，在案例选择上由浅入深，循序渐进，另一条主线是基础理论知识，两条主线紧密融合，非常完整地展现了整个UI设计流程，帮助读者融会贯通，制作出更好的移动APP UI作品。本书结构清晰、语言简洁、实例丰富、版式精美，可以作为高等职业院校、培训机构的参考教材，也适合移动APP UI设计初、中级读者及广大UI设计爱好者和从业者阅读。

【作者简介】

     阮进军，安徽商贸职业技术学院副教授，电子信息工程系主任。近5年主要成果：主持教育部高等职业教育创新发展行动计划项目1项，国家职业教育专业教学资源库课程建设项目1项，主持完成安徽省高校自然科学研究重点项目1项，主持完成省级质量工程项目1项，获实用新型专利授权2项，指导学生参加全国职业院校技能大赛，获得二等奖1项，本人参加安徽省信息化教学大赛获得一等奖1项，获得安徽省教学成果一等奖2项、二等奖3项、三等奖3项，发表教科研论文4篇，主编高职高专教材1部，参编2部。获得的职业资格证书：

（1） Oracle OCP认证；

（2）微软MCP认证工程师；

（3）安徽省高等职业院校高级“双师型”教师。孙握瑜，安徽商贸职业技术学院讲师。

获得过的职业资格证书：（1）数据库应用系统设计工程师；

（2）微软MCP认证工程师；（3）安徽省高等职业院校“双师型”教师（中级）；

（4）人工智能研发工程师。主要成果有：主持安徽省级重点科研项目1项，主持安徽省教育厅大规模在线开放课程（MOOC）示范项目《UI交互设计与实现》项目1项，参与安徽省《计算机网络技术综合改革试点》项目1项。教学成果和奖励：（1）荣获安徽省教学成果一等奖1次，荣获安徽省教学成果二等奖4次，荣获安徽省教学成果三等奖一次。副主副教材1种，参编教材1种。专利 2种。

【目录】

单元1交互式UI设计基础 1

 认识我们的手机 1

任务1.1　查看手机屏幕相关参数 1

知识库 2

一、屏幕（主屏）尺寸 2

二、屏幕分辨率 3

三、网点密度 4

四、像素密度 4

五、DPI和PPI 4

六、dp、pt、sp的概念 5

七、dp和px的转换 5

八、像素比 6

 认识手机APP 7

任务1.2　查看常见手机APP的界面组成 7

知识库 8

一、 UI设计的概念 8

二、 手机UI设计 8

三、 手机UI设计要点 8

四、 APP界面组成说明 9

 UI设计基本流程实操 11

任务1.3　民宿APP UI设计 12

知识库 15

一、用户需求 15

二、绘制草图 16

三、绘制低保真原型（线框图） 17

四、设计高保真原型（效果图） 17

五、手机APP UI设计规范 17

单元2交互式原型设计 19

 规划软件原型结构 19

任务2.1　徜徉红途APP项目规划 20

知识库 23

一、认识Axure工作界面 23

二、页面管理区域的使用 25

 利用元件搭建APP原型界面 25

任务2.2　注册界面搭建 25

知识库 30

一、基本元件 30

二、表单元件 32

三、菜单和表格 34

四、下载并载入元件库和自定义元件库 35

 利用动态面板制作轮播动态效果 36

任务2.3　动态面板实现轮播效果 37

知识库 44

动态面板 44

 利用母版设计APP主界面 46

任务2.4　母版设计导航模块 46

知识库 48

一、母版 48

二、母版创建方式 48

三、母版的拖放行为 49

 利用变量制作交互效果 49

任务2.5　首页拖动及回弹 50

知识库 58

Axure提供了全局变量和局部变量 58

 利用变量值在页面间传递 58

任务2.6　搜索旅游线路 58

知识库 65

变量值在页面间传递 65

 利用部件行为制作交互效果 65

任务2.7　省市级联菜单 65

知识库 73

部件行为 73

单元3Photoshop图标设计 79

 设计扁平化图标 79

任务3.1　制作信封图标 79

任务3.2　制作日历图标 82

任务3.3　制作“徜徉红途APP”启动图标 84

任务3.4　制作折纸风格日历图标 89

知识库 98

一、扁平化设计特点 98

二、扁平化设计原则 99

 设计拟物化图标 102

任务3.5　制作通讯录图标 102

任务3.6　制作指南针图标 112

知识库 122

一、拟物化设计的特点 122

二、拟物化和扁平化设计 122

单元4Illustrator综合图标设计 125

 平面风格图标设计 125

任务4.1　红色旅游景点图标设计 125

知识库 132

图标参考线绘制 132

 立体风格图标设计 135

任务4.2　友税APP图标设计 135

知识库 144

形状编辑工具 144

 线性风格图标设计 145

任务4.3　设计标签栏图标 145

知识库 148

描边面板 148

 功能导航图标设计 149

任务4.4　红色之旅功能导航图标设计 150

知识库 154

路径查找器 154

 控件图标设计 156

任务4.5　输入文本框设计 156

知识库 159

字符面板设置 159

任务4.6　滑块图标的设计 159

知识库 163

渐变面板设置 163

单元5UI界面设计 165

 制作“引导页”页面 165

任务5.1　制作徜徉红途APP引导页1  165

任务5.2　制作徜徉红途APP引导页2  170

任务5.3　制作徜徉红途APP引导页3  172

知识库  175

 制作“首页”页面 176

任务5.4　标签栏导航制作 176

任务5.5　状态栏制作 179

任务5.6　搜索栏制作 183

任务5.7　主界面的制作 184

知识库  189

 制作“行程”页面 190

任务5.8　制作“行程”页面 190

知识库  196

 制作“定制”页面 196

任务5.9　制作“定制”页面 196

知识库  202

单元6UI动效设计基础 203

 制作图标动效 203

任务6.1　设计图标动效 203

 APP引导页动效 210

任务6.2　制作徜徉红途APP引导页动效 210

 制作APP界面动效 215

任务6.3　备忘录APP界面动效 215

知识库 221

一、什么是移动APP动效设计 221

二、移动APP动效的作用 221

三、常用动效设计工具 222

四、图标动效设计思路 222单元1交互式UI设计基础 1

 认识我们的手机 1

任务1.1　查看手机屏幕相关参数 1

知识库 2

一、屏幕（主屏）尺寸 2

二、屏幕分辨率 3

三、网点密度 4

四、像素密度 4

五、DPI和PPI 4

六、dp、pt、sp的概念 5

七、dp和px的转换 5

八、像素比 6

 认识手机APP 7

任务1.2　查看常见手机APP的界面组成 7

知识库 8

一、 UI设计的概念 8

二、 手机UI设计 8

三、 手机UI设计要点 8

四、 APP界面组成说明 9

 UI设计基本流程实操 11

任务1.3　民宿APP UI设计 12

知识库 15

一、用户需求 15

二、绘制草图 16

三、绘制低保真原型（线框图） 17

四、设计高保真原型（效果图） 17

五、手机APP UI设计规范 17

单元2交互式原型设计 19

 规划软件原型结构 19

任务2.1　徜徉红途APP项目规划 20

知识库 23

一、认识Axure工作界面 23

二、页面管理区域的使用 25

 利用元件搭建APP原型界面 25

任务2.2　注册界面搭建 25

知识库 30

一、基本元件 30

二、表单元件 32

三、菜单和表格 34

四、下载并载入元件库和自定义元件库 35

 利用动态面板制作轮播动态效果 36

任务2.3　动态面板实现轮播效果 37

知识库 44

动态面板 44

 利用母版设计APP主界面 46

任务2.4　母版设计导航模块 46

知识库 48

一、母版 48

二、母版创建方式 48

三、母版的拖放行为 49

 利用变量制作交互效果 49

任务2.5　首页拖动及回弹 50

知识库 58

Axure提供了全局变量和局部变量 58

 利用变量值在页面间传递 58

任务2.6　搜索旅游线路 58

知识库 65

变量值在页面间传递 65

 利用部件行为制作交互效果 65

任务2.7　省市级联菜单 65

知识库 73

部件行为 73

单元3Photoshop图标设计 79

 设计扁平化图标 79

任务3.1　制作信封图标 79

任务3.2　制作日历图标 82

任务3.3　制作“徜徉红途APP”启动图标 84

任务3.4　制作折纸风格日历图标 89

知识库 98

一、扁平化设计特点 98

二、扁平化设计原则 99

 设计拟物化图标 102

任务3.5　制作通讯录图标 102

任务3.6　制作指南针图标 112

知识库 122

一、拟物化设计的特点 122

二、拟物化和扁平化设计 122

单元4Illustrator综合图标设计 125

 平面风格图标设计 125

任务4.1　红色旅游景点图标设计 125

知识库 132

图标参考线绘制 132

 立体风格图标设计 135

任务4.2　友税APP图标设计 135

知识库 144

形状编辑工具 144

 线性风格图标设计 145

任务4.3　设计标签栏图标 145

知识库 148

描边面板 148

 功能导航图标设计 149

任务4.4　红色之旅功能导航图标设计 150

知识库 154

路径查找器 154

 控件图标设计 156

任务4.5　输入文本框设计 156

知识库 159

字符面板设置 159

任务4.6　滑块图标的设计 159

知识库 163

渐变面板设置 163

单元5UI界面设计 165

 制作“引导页”页面 165

任务5.1　制作徜徉红途APP引导页1  165

任务5.2　制作徜徉红途APP引导页2  170

任务5.3　制作徜徉红途APP引导页3  172

知识库  175

 制作“首页”页面 176

任务5.4　标签栏导航制作 176

任务5.5　状态栏制作 179

任务5.6　搜索栏制作 183

任务5.7　主界面的制作 184

知识库  189

 制作“行程”页面 190

任务5.8　制作“行程”页面 190

知识库  196

 制作“定制”页面 196

任务5.9　制作“定制”页面 196

知识库  202

单元6UI动效设计基础 203

 制作图标动效 203

任务6.1　设计图标动效 203

 APP引导页动效 210

任务6.2　制作徜徉红途APP引导页动效 210