數(shù)字媒體交互設(shè)計（慕課版）

目錄
項目1　交互設(shè)計開發(fā)流程與設(shè)計分析　1
1.1　交互設(shè)計基礎(chǔ)概念　1
1.1.1交互設(shè)計的定義　1
1.1.2交互設(shè)計與用戶體驗　1
1.1.3交互設(shè)計可用性原則　3
1.2　交互設(shè)計開發(fā)流程　6
1.3開發(fā)人員配置　9
1.4　產(chǎn)品交互原型分類　10
1.5　交互設(shè)計常用軟件　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　項目實施-交互設(shè)計案例分析　14
1.7　項目小結(jié)　16
1.8　思政知識小課堂　16
1.9　鞏固與拓展　16
1.10習題　17
項目2　Web端“家居”交互UI設(shè)計　18
2.1　“家居”網(wǎng)頁交互UI項目背景分析　18
2.2　交互UI布局設(shè)計　18
2.2.1　布局設(shè)計理論與分析　18
2.2.2版式設(shè)計常見類型與分析　26
2.3　交互UI基礎(chǔ)元素設(shè)定　28
2.3.1界面尺寸　28
2.3.2文字設(shè)計　30
2.3.3色彩搭配　30
2.4　交互UI設(shè)計類型分析　31
2.4.1網(wǎng)頁設(shè)計的分類　31
2.4.2網(wǎng)頁交互UI組件的分類　32
2.5　項目實施-Web端“家居”網(wǎng)頁交互UI設(shè)計　38
2.5.1設(shè)計“家居”網(wǎng)頁首頁　38
2.5.2設(shè)計“家居”網(wǎng)頁交互UI導航菜單組件　42
2.6　項目小結(jié)　45
2.7思政知識小課堂　45
2.8　鞏固與拓展　45
2.9　習題　45
項目3　移動端“美食小吃”App交互UI設(shè)計　47
3.1　“美食小吃”App交互UI設(shè)計項目背景分析　47
3.2　App交互UI設(shè)計項目需求分析　47
3.3　App頁面視覺層次結(jié)構(gòu)與視覺引導　48
3.3.1層次結(jié)構(gòu)的構(gòu)建　48
3.3.2視覺引導及反饋　50
3.4　App 界面元素構(gòu)成設(shè)計　52
3.4.1　App 交互界面的構(gòu)成概念　53
3.4.2　App界面元素設(shè)計的構(gòu)成方法　54
3.5　App界面布局風格設(shè)計　56
3.6　移動端平臺界面設(shè)計規(guī)范　57
3.6.1　Android平臺　57
3.6.2　iOS平臺　60
3.7　App交互UI設(shè)計流程分析　64
3.7.1版式界面設(shè)計的概念梳理　64
3.7.2切圖的重要性　67
3.7.3界面標注的注意事項　67
3.7.4　Ps動態(tài)元素的優(yōu)化存儲設(shè)置　68
3.8　項目實施-移動端“美食小吃”App 交互UI設(shè)計　70
3.8.1設(shè)計“美食小吃”App界面UI　70
3.8.2頁面適配　74
3.8.3實現(xiàn)美食App界面素材切片輸出　75
3.8.4使用Pxcook標注美食App界面　79
3.8.5美食App動態(tài)加載畫面優(yōu)化　85
3.9　項目小結(jié)　88
3.10　思政知識小課堂　88
3.11　鞏固與拓展　88
3.12習題　88
項目4　Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)　90
4.1　Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)項目背景分析　90
4.2　Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)項目需求分析　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各個系統(tǒng)變量說明　99
4.3.6元件交互樣式　101
4.3.7動畫和邊界　102
4.4　Axure常用元件　103
4.4.1　Axure常用元件——動態(tài)面板　103
4.4.2　Axure常用元件——中繼器　106
4.4.3　Axure常用元件——內(nèi)聯(lián)框架　110
4.5　查看原型　111
4.5.1Axure原型快速預覽　111
4.5.2預覽選項設(shè)置　111
4.5.3Axure原型生成HTML文件　112
4.5.4Axure原型生成Word說明書　113
4.6　項目實施——Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)　114
4.6.1　使用“動態(tài)面板”制作Web端Banner輪播效果　114
4.6.2　使用“動態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果　118
4.6.3　使用“交互-移動”制作文字跑馬燈效果　123
4.6.4　使用“中繼器”制作商品列表頁　127
4.6.5　使用“交互-變量”制作 功能　132
4.6.6　使用“動態(tài)面板+熱區(qū)”制作面板隨鼠標滑動　136
4.6.7　使用“內(nèi)聯(lián)框架”制作添加視頻　141
4.6.8　使用“動態(tài)面板+移動”制作圖片放大預覽功能　146
4.7　項目小結(jié)　154
4.8　思政知識小課堂　154
4.9　鞏固與拓展　155
4.10　習題　155
項目5　App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)　156
5.1App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)項目背景分析　156
5.2App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)項目需求分析　156
5.3　墨刀原型工具概述　157
5.3.1墨刀工作界面介紹　157
5.3.2墨刀元件介紹　162
5.3.3墨刀交互事件添加　170
5.3.4演示分享　172
5.3.5墨刀工具狀態(tài)功能詳解　176
5.4　項目實施——App移動端“思政助手”產(chǎn)品交互設(shè)計開發(fā)　178
5.4.1　“思政助手”——底部導航功能制作　178
5.4.2　“思政助手”——TAB切換功能制作　183
5.4.3　“思政助手”——點贊效果制作　186
5.4.4　“思政助手”——圖片左右滾動效果制作　188
5.5　項目小結(jié)　189
5.6　思政知識小課堂　190
5.7　鞏固與拓展　190
5.8　習題　190
項目6　App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)　192
6.1　App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)項目背景分析　192
6.2　App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)項目需求分析　192
6.3　Adobe XD工具介紹　193
6.3.1　Adobe XD的基礎(chǔ)操作　193
6.3.2　Adobe XD的基本工具　201
6.3.3　使用Adobe XD完成原型　211
6.3.4　使用Adobe XD成果輸出　215
6.4　項目實施——App移動端“茶物語”產(chǎn)品交互設(shè)計開發(fā)　216
6.4.1　Loading動畫效果　216
6.4.2　左右滑動的效果　218
6.4.3　輪播圖的演示效果　219
6.5　項目小結(jié)　221
6.6　思政知識小課堂　222
6.7　鞏固與拓展　222
6.8　習題　222