第1章  UI交互设计基础

1.1  UI设计概述

1.1.1  初识UI设计

1.1.2  UI设计相关岗位的工作职责

1.2  UI交互设计入门

1.2.1  交互设计中的“交互”

1.2.2  什么是UI交互设计

1.2.3  UI交互设计需要考虑的问题

1.2.4  UI交互设计师常用工具

1.2.5  UI交互设计师常用网站

1.2.6  UI交互设计常用术语

1.2.7  UI交互设计自查表

1.3  UI交互设计的基本流程

1.3.1  需求分析

1.3.2  用户行为流程设计

1.3.3  产品信息架构设计

案例练习1-1  绘制微信信息架构图

1.3.4  产品原型设计

1.3.5  编写交互设计说明文档

1.3.6  产品测评

1.4  移动端App和网站的交互差异

1.4.1  交互和操作方式的不同

1.4.2  使用环境的不同

1.4.3  设备尺寸的不同

1.4.4  网络环境的不同

本章总结

佳作赏析

本章实训——分析手机微信App

第2章  UI交互设计规范和原则

2.1  iOS系统设计规范

2.1.1  有关iOS系统的基本概念

2.1.2  iOS系统UI设计规范

2.2  Android系统设计规范

2.2.1  有关Android系统的基本概念

2.2.2  Android系统UI设计规范

案例练习2-1  对美团App首页界面进行剖析

2.3  交互设计方法论——5W2H

2.3.1  5W2H分析法是什么

2.3.2  5W2H分析法的重要性

2.4  交互设计的原则

2.4.1  人机交互界面设计的基本原则

2.4.2  尼尔森十大原则

2.4.3  交互设计七大定律

本章总结

佳作赏析

本章实训——赏析优秀UI设计

第3章  使用Axure RP实现线框原型设计

3.1  初识Axure RP

3.1.1  软件的安装与汉化

3.1.2  熟悉Axure RP操作界面

3.2  Axure RP基本操作

3.2.1  文件的基本操作

3.2.2  页面的基本操作

3.2.3  自适应视图

案例练习3-1  搭建原型页面结构

3.3  元件的使用

3.3.1  元件库

3.3.2  元件的基本操作

3.3.3  自定义元件库

案例练习3-2  制作状态栏元件

案例练习3-3  制作弹出框外形

案例练习3-4  绘制小鱼图案

案例练习3-5  绘制移动端App引导页

案例练习3-6  根据中国建设银行手机App首页绘制线框图

3.4  母版

3.4.1  创建和删除母版

3.4.2  编辑母版

3.4.3  应用母版

案例练习3-7  使用母版绘制建设银行App的底部导航栏

3.5  预览和发布原型

3.5.1  预览原型

3.5.2  将原型导出为图片

3.5.3  生成HTML文件

本章总结

佳作赏析

本章实训——绘制手机QQ登录界面的完整线框图

第4章  用After Effects设计和实现UI交互动效

4.1  初识After Effects

4.2  After Effects基本操作

4.2.1  项目文件基本操作

4.2.2  导入素材

案例练习4-1  导入PSD格式文件为合成

4.3  交互动效制作基础

4.3.1  “时间轴”面板

4.3.2  关键帧

案例练习4-2  制作界面动效

4.4  蒙版和遮罩

4.4.1  认识蒙版

4.4.2  创建蒙版常用工具

4.4.3  蒙版属性

案例练习4-3  制作蒙版位移动效

4.4.4  轨道遮罩

案例练习4-4  制作文字遮罩动效

4.5  交互动效的预览、渲染和导出

4.5.1  预览动效

4.5.2  渲染和导出动效

本章总结

佳作赏析

本章实训——制作波形充电效果

第5章  常见UI交互动效设计与实现（上）

5.1  图标动效

5.1.1  初识图标动效

5.1.2  图标动效设计思路

案例练习5-1  制作信息图标动效

案例练习5-2  制作“播放—暂停”图标动效

5.2  按钮交互动效

5.2.1  按钮的作用

5.2.2  如何设计出色的交互按钮

案例练习5-3  制作开关按钮交互动效

5.3  导航栏交互动效

5.3.1  常见导航栏的类型

5.3.2  交互式导航栏的设计要点

案例练习5-4  制作顶部标签式导航栏交互动效

本章总结

佳作赏析

本章实训——制作文字路径动效

第6章  常见UI交互动效设计与实现（下）

6.1  文字动效

常见文字动效的表现形式

案例练习6-1  制作文字转换动效

6.2  界面交互动效

6.2.1  界面加载交互动效

案例练习6-2  制作进度条式加载动效

6.2.2  界面转场交互动效

案例练习6-3  制作登录转场动效

6.3  After Effects动画

案例练习6-4  制作人物行走动画

案例练习6-5  制作纸飞机沿路径运动动画

本章总结

佳作赏析

本章实训——制作圆形进度条加载动效

第7章  文旌课堂App的界面与动效设计

7.1  前期规划

7.1.1  需求分析

7.1.2  用户行为流程设计

7.1.3  产品信息架构设计

7.2  绘制页面线框图

7.2.1  分析页面内容

7.2.2  绘制图书页面线框图

7.2.3  绘制文旌课堂App的整体线框图

7.3  绘制交互原型图

7.3.1  制作页面跳转动效

7.3.2  制作图书页面的交互动效

7.3.3  制作图书详情页的交互动效

7.4  将交互动效嵌入样机中

本章总结

参考文献