包邮数字媒体交互设计(慕课版)

目录

项目1　交互设计开发流程与设计分析　1

1.1　交互设计基础概念　1

1.1.1交互设计的定义　1

1.1.2交互设计与用户体验　1

1.1.3交互设计可用性原则　3

1.2　交互设计开发流程　6

1.3开发人员配置　9

1.4　产品交互原型分类　10

1.5　交互设计常用软件　12

1.5.1Visio　12

1.5.2　Teambition　12

1.5.3墨刀　13

1.5.4　Axure RP　13

1.5.5　Adobe XD　14

1.6　项目实施-交互设计案例分析　14

1.7　项目小结　16

1.8　思政知识小课堂　16

1.9　巩固与拓展　16

1.10习题　17

项目2　Web端“家居”交互UI设计　18

2.1　“家居”网页交互UI项目背景分析　18

2.2　交互UI布局设计　18

2.2.1　布局设计理论与分析　18

2.2.2版式设计常见类型与分析　26

2.3　交互UI基础元素设定　28

2.3.1界面尺寸　28

2.3.2文字设计　30

2.3.3色彩搭配　30

2.4　交互UI设计类型分析　31

2.4.1网页设计的分类　31

2.4.2网页交互UI组件的分类　32

2.5　项目实施-Web端“家居”网页交互UI设计　38

2.5.1设计“家居”网页首页　38

2.5.2设计“家居”网页交互UI导航菜单组件　42

2.6　项目小结　45

2.7思政知识小课堂　45

2.8　巩固与拓展　45

2.9　习题　45

项目3　移动端“美食小吃”App交互UI设计　47

3.1　“美食小吃”App交互UI设计项目背景分析　47

3.2　App交互UI设计项目需求分析　47

3.3　App页面视觉层次结构与视觉引导　48

3.3.1层次结构的构建　48

3.3.2视觉引导及反馈　50

3.4　App 界面元素构成设计　52

3.4.1　App 交互界面的构成概念　53

3.4.2　App界面元素设计的构成方法　54

3.5　App界面布局风格设计　56

3.6　移动端平台界面设计规范　57

3.6.1　Android平台　57

3.6.2　iOS平台　60

3.7　App交互UI设计流程分析　64

3.7.1版式界面设计的概念梳理　64

3.7.2切图的重要性　67

3.7.3界面标注的注意事项　67

3.7.4　Ps动态元素的优化存储设置　68

3.8　项目实施-移动端“美食小吃”App 交互UI设计　70

3.8.1设计“美食小吃”App界面UI　70

3.8.2页面适配　74

3.8.3实现美食App界面素材切片输出　75

3.8.4使用Pxcook标注美食App界面　79

3.8.5美食App动态加载画面优化　85

3.9　项目小结　88

3.10　思政知识小课堂　88

3.11　巩固与拓展　88

3.12习题　88

项目4　Web端“电商平台”产品交互设计开发　90

4.1　Web端“电商平台”产品交互设计开发项目背景分析　90

4.2　Web端“电商平台”产品交互设计开发项目需求分析　90

4.3　Axure RP9工具介绍　92

4.3.1Axure　RP 9的工作界面　92

4.3.2Axure　RP9的元件库　94

4.3.3Axure　RP9中的交互功能添加　96

4.3.4Axure交互使用说明　98

4.3.5各个系统变量说明　99

4.3.6元件交互样式　101

4.3.7动画和边界　102

4.4　Axure常用元件　103

4.4.1　Axure常用元件——动态面板　103

4.4.2　Axure常用元件——中继器　106

4.4.3　Axure常用元件——内联框架　110

4.5　查看原型　111

4.5.1Axure原型快速预览　111

4.5.2预览选项设置　111

4.5.3Axure原型生成HTML文件　112

4.5.4Axure原型生成Word说明书　113

4.6　项目实施——Web端“电商平台”产品交互设计开发　114

4.6.1　使用“动态面板”制作Web端Banner轮播效果　114

4.6.2　使用“动态面板 显示/隐藏”制作悬浮按钮显示与隐藏效果　118

4.6.3　使用“交互-移动”制作文字跑马灯效果　123

4.6.4　使用“中继器”制作商品列表页　127

4.6.5　使用“交互-变量”制作秒杀倒计时功能　132

4.6.6　使用“动态面板 热区”制作面板随鼠标滑动　136

4.6.7　使用“内联框架”制作添加视频　141

4.6.8　使用“动态面板 移动”制作图片放大预览功能　146

4.7　项目小结　154

4.8　思政知识小课堂　154

4.9　巩固与拓展　155

4.10　习题　155

项目5　App移动端“思政助手”产品交互设计开发　156

5.1App移动端“思政助手”产品交互设计开发项目背景分析　156

5.2App移动端“思政助手”产品交互设计开发项目需求分析　156

5.3　墨刀原型工具概述　157

5.3.1墨刀工作界面介绍　157

5.3.2墨刀元件介绍　162

5.3.3墨刀交互事件添加　170

5.3.4演示分享　172

5.3.5墨刀工具状态功能详解　176

5.4　项目实施——App移动端“思政助手”产品交互设计开发　178

5.4.1　“思政助手”——底部导航功能制作　178

5.4.2　“思政助手”——TAB切换功能制作　183

5.4.3　“思政助手”——点赞效果制作　186

5.4.4　“思政助手”——图片左右滚动效果制作　188

5.5　项目小结　189

5.6　思政知识小课堂　190

5.7　巩固与拓展　190

5.8　习题　190

项目6　App移动端“茶物语”产品交互设计开发　192

6.1　App移动端“茶物语”产品交互设计开发项目背景分析　192

6.2　App移动端“茶物语”产品交互设计开发项目需求分析　192

6.3　Adobe XD工具介绍　193

6.3.1　Adobe XD的基础操作　193

6.3.2　Adobe XD的基本工具　201

6.3.3　使用Adobe XD完成原型　211

6.3.4　使用Adobe XD成果输出　215

6.4　项目实施——App移动端“茶物语”产品交互设计开发　216

6.4.1　Loading动画效果　216

6.4.2　左右滑动的效果　218

6.4.3　轮播图的演示效果　219

6.5　项目小结　221

6.6　思政知识小课堂　222

6.7　巩固与拓展　222

6.8　习题　222