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

本书由具有APP UI设计经验的设计师和从事多年职业教育的高校教师共同编写。在编写之前大家有个共识，一线的APP UI设计师，尽管可能只需要做全流程中的一部分工作，但是需要对整个UI设计的流程有全面的认识，不仅要有熟练的软件操作能力，而且要有较为扎实的理论功底，这样才能在技术不断更新的情况下保持优秀的职业能力。
　　基于以上思考，编者对移动APP UI设计的全流程进行了仔细分析和梳理，在自身专业知识和从业经验的基础上，本书也借鉴了相关同行以及网络资源中的内容组织方式。一方面将APP UI设计的学习过程分成六个阶段，分别是了解UI设计基本概念、UI设计基本流程、交互式原型设计、图标设计、界面设计以及UI动效设计；另一方面教材内容按两条主线组织编写，一条主线是实际操作任务案例，在案例选择上由浅入深，循序渐进，每个任务设计成：任务描述→设计思路→任务实施→拓展任务；另一条主线是基础理论知识。两条主线紧密融合，非常完整地展现了整个UI设计流程。本书具体内容如下：
　　单元1　交互式UI设计基础。通过认识我们的手机、认识手机APP两个任务掌握手机屏幕的相关参数、APP UI界面的组成和设计要点。通过民宿APP UI设计任务，完整地了解整个设计过程。
　　单元2　交互式原型设计。以徜徉红途APP项目为主线，完成用户登录、图片轮播、首页拖动及回弹、搜索旅游线路和省市级联菜单等任务，让读者掌握利用Axure RP软件绘制原型的方法。
　　单元3　Photoshop 图标设计。通过扁平化和拟物化图标设计任务，重点介绍图标的风格区别和基本图标设计的流程。
　　单元4　Illustrator综合图标设计。通过平面风格图标、立体风格图标、线性风格图标、功能导航图标、控件图标等任务，介绍Illustrator的基本使用方法和综合图标设计的主要过程。
单元5UI界面设计。在单元二原型设计的基础上，利用Photoshop完成具体UI界面的设计，包括引导页、首页、行程、定制页面的设计等，了解UI界面设计的具体知识。
　　单元6　UI动效设计基础。通过制作图标动效和APP界面动效任务，介绍UI动效的基本设计思路、设计方法和After Effects的基本应用。
　　本书结构清晰、语言简洁、实例丰富，主要具有以下几个特点：
　　（1）单元设计紧扣UI设计流程。首先让读者掌握UI设计的整体流程，然后分别按照UI设计的标准流程进行介绍，符合认知规律，使读者学习后更容易在真实工作岗位中快速上手。
　　（2）基础知识与操作任务紧密结合。本书摒弃了传统教科书纯理论式的教学，大量采用实际操作任务进行讲解，在任务操作的基础上辅助关键性基础知识的讲解，促进读者理解。
　　（3）内容覆盖更加完整，介绍更加深入直观。UI全流程的内容涵盖更加完整，目前大部分同类书籍对UI设计基本流程介绍不够深入直观，没有关于Axure RP原型设计和动效设计的相关内容，对图标和界面设计使用的软件也只介绍了Photoshop。本书解决了以上问题，UI基本流程阐述更加深入，涵盖Axure RP原型设计和动效设计，图片设计软件方面，对Photoshop、Illustrator的应用方法都做了简要的阐述。
　　（4）有完整的教学案例和电子资源。教材案例完整，所有实例全部采用详细步骤说明与实际操作相结合的编写手法，使读者通过阅读文字与观察操作步骤中的图示，边学边操作。书中设计的案例均提供调用素材和源文件，并包含本书所有操作实例的高清多媒体有声教学视频。同时，为方便教师教学，还配备了PPT教学课件，以供参考。
　　在学习本书时，除了熟练掌握Office办公软件外，一方面需要具备美术等基本设计素养，可以自修平面、色彩构成等相关知识，增强设计美感；另一方面还需要掌握各类与设计相关的软件使用方法。由于本书篇幅有限，其中涉及Photoshop、Axure RP、Illustrator、After Effects等软件操作的介绍较为精简，在学习过程中需要利用各类资源进一步强化理解和运用。本书配套资源请到http://www.tdpress.com/51eds/下载。
　　本书由阮进军、孙握瑜任主编，周艳丽、朱丽进、江宏任副主编。具体编写分工如下：孙握瑜编写单元1、单元6，朱丽进编写单元2，阮进军编写单元3，江宏编写单元4，周艳丽编写单元5。本书获安徽省教育厅大规模在线开放课程（MOOC）示范项目《UI交互设计与实现》（编号：2018mooc447）资助。
由于编者知识水平有限，书中难免有疏漏和不足之处，恳请广大读者批评指正。

编　者
2020年5月本书由具有APP UI设计经验的设计师和从事多年职业教育的高校教师共同编写。在编写之前大家有个共识，一线的APP UI设计师，尽管可能只需要做全流程中的一部分工作，但是需要对整个UI设计的流程有全面的认识，不仅要有熟练的软件操作能力，而且要有较为扎实的理论功底，这样才能在技术不断更新的情况下保持优秀的职业能力。
　　基于以上思考，编者对移动APP UI设计的全流程进行了仔细分析和梳理，在自身专业知识和从业经验的基础上，本书也借鉴了相关同行以及网络资源中的内容组织方式。一方面将APP UI设计的学习过程分成六个阶段，分别是了解UI设计基本概念、UI设计基本流程、交互式原型设计、图标设计、界面设计以及UI动效设计；另一方面教材内容按两条主线组织编写，一条主线是实际操作任务案例，在案例选择上由浅入深，循序渐进，每个任务设计成：任务描述→设计思路→任务实施→拓展任务；另一条主线是基础理论知识。两条主线紧密融合，非常完整地展现了整个UI设计流程。本书具体内容如下：
　　单元1　交互式UI设计基础。通过认识我们的手机、认识手机APP两个任务掌握手机屏幕的相关参数、APP UI界面的组成和设计要点。通过民宿APP UI设计任务，完整地了解整个设计过程。
　　单元2　交互式原型设计。以徜徉红途APP项目为主线，完成用户登录、图片轮播、首页拖动及回弹、搜索旅游线路和省市级联菜单等任务，让读者掌握利用Axure RP软件绘制原型的方法。
　　单元3　Photoshop 图标设计。通过扁平化和拟物化图标设计任务，重点介绍图标的风格区别和基本图标设计的流程。
　　单元4　Illustrator综合图标设计。通过平面风格图标、立体风格图标、线性风格图标、功能导航图标、控件图标等任务，介绍Illustrator的基本使用方法和综合图标设计的主要过程。
单元5UI界面设计。在单元二原型设计的基础上，利用Photoshop完成具体UI界面的设计，包括引导页、首页、行程、定制页面的设计等，了解UI界面设计的具体知识。
　　单元6　UI动效设计基础。通过制作图标动效和APP界面动效任务，介绍UI动效的基本设计思路、设计方法和After Effects的基本应用。
　　本书结构清晰、语言简洁、实例丰富，主要具有以下几个特点：
　　（1）单元设计紧扣UI设计流程。首先让读者掌握UI设计的整体流程，然后分别按照UI设计的标准流程进行介绍，符合认知规律，使读者学习后更容易在真实工作岗位中快速上手。
　　（2）基础知识与操作任务紧密结合。本书摒弃了传统教科书纯理论式的教学，大量采用实际操作任务进行讲解，在任务操作的基础上辅助关键性基础知识的讲解，促进读者理解。
　　（3）内容覆盖更加完整，介绍更加深入直观。UI全流程的内容涵盖更加完整，目前大部分同类书籍对UI设计基本流程介绍不够深入直观，没有关于Axure RP原型设计和动效设计的相关内容，对图标和界面设计使用的软件也只介绍了Photoshop。本书解决了以上问题，UI基本流程阐述更加深入，涵盖Axure RP原型设计和动效设计，图片设计软件方面，对Photoshop、Illustrator的应用方法都做了简要的阐述。
　　（4）有完整的教学案例和电子资源。教材案例完整，所有实例全部采用详细步骤说明与实际操作相结合的编写手法，使读者通过阅读文字与观察操作步骤中的图示，边学边操作。书中设计的案例均提供调用素材和源文件，并包含本书所有操作实例的高清多媒体有声教学视频。同时，为方便教师教学，还配备了PPT教学课件，以供参考。
　　在学习本书时，除了熟练掌握Office办公软件外，一方面需要具备美术等基本设计素养，可以自修平面、色彩构成等相关知识，增强设计美感；另一方面还需要掌握各类与设计相关的软件使用方法。由于本书篇幅有限，其中涉及Photoshop、Axure RP、Illustrator、After Effects等软件操作的介绍较为精简，在学习过程中需要利用各类资源进一步强化理解和运用。本书配套资源请到http://www.tdpress.com/51eds/下载。
　　本书由阮进军、孙握瑜任主编，周艳丽、朱丽进、江宏任副主编。具体编写分工如下：孙握瑜编写单元1、单元6，朱丽进编写单元2，阮进军编写单元3，江宏编写单元4，周艳丽编写单元5。本书获安徽省教育厅大规模在线开放课程（MOOC）示范项目《UI交互设计与实现》（编号：2018mooc447）资助。
由于编者知识水平有限，书中难免有疏漏和不足之处，恳请广大读者批评指正。

编　者
2020年5月

                      本书是移动端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