數(shù)字媒體交互設(shè)計(jì)： App產(chǎn)品交互設(shè)計(jì)方法與案例（中級(jí)）

第1章　App產(chǎn)品交互設(shè)計(jì)入門(mén)　1
1．1　認(rèn)識(shí)App產(chǎn)品　2
1．1．1　什么是App　2
1．1．2　認(rèn)識(shí)手機(jī)操作系統(tǒng)　3
1．2　App產(chǎn)品用戶(hù)體驗(yàn)的5個(gè)層面　3
1．2．1　戰(zhàn)略層　4
1．2．2　范圍層　4
1．2．3　結(jié)構(gòu)層　5
1．2．4　框架層　5
1．2．5　表現(xiàn)層　5
1．3　App產(chǎn)品設(shè)計(jì)原則　6
1．3．1　主體-背景原則　6
1．3．2　接近性原則　7
1．3．3　相似性原則　8
1．3．4　連續(xù)性原則　9
1．3．5　封閉性原則　11
1．3．6　對(duì)稱(chēng)性原則　12
1．3．7　共同命運(yùn)原則　14
1．4　App產(chǎn)品設(shè)計(jì)流程　15
1．5　App產(chǎn)品設(shè)計(jì)工具　16
1．5．1　產(chǎn)品分析工具　16
1．5．2　交互設(shè)計(jì)工具　18
1．5．3　視覺(jué)設(shè)計(jì)工具　19
1．6　同步強(qiáng)化模擬題　21
作業(yè)：分析App產(chǎn)品的用戶(hù)體驗(yàn)設(shè)計(jì)思路　21
第2章　團(tuán)隊(duì)協(xié)作管理App項(xiàng)目　22
2．1　團(tuán)隊(duì)協(xié)作和項(xiàng)目管理　23
2．1．1　團(tuán)隊(duì)協(xié)作的要素　23
2．1．2　常見(jiàn)的團(tuán)隊(duì)協(xié)作方法　24
2．2　項(xiàng)目管理工具——Trello　24
2．2．1　認(rèn)識(shí)Trello　24
2．2．2　Trello的主要功能　26
2．3　制作App項(xiàng)目管理表　29
2．3．1　建立項(xiàng)目和任務(wù)　30
2．3．2　建立子任務(wù)　32
2．3．3　跟進(jìn)項(xiàng)目　33
2．4　同步強(qiáng)化模擬題　35
作業(yè)：制作App項(xiàng)目進(jìn)度表　36
第3章　梳理App產(chǎn)品交互設(shè)計(jì)創(chuàng)意　37
3．1　認(rèn)識(shí)思維導(dǎo)圖　38
3．1．1　思維導(dǎo)圖是什么　38
3．1．2　思維導(dǎo)圖構(gòu)成的要素　38
3．1．3　繪制思維導(dǎo)圖的步驟　39
3．2　使用Mindjet MindManager繪制思維導(dǎo)圖　40
3．2．1　認(rèn)識(shí)Mindjet MindManager　40
3．2．2　使用Mindjet MindManager繪制思維導(dǎo)圖的方法及技巧　40
3．3　思維導(dǎo)圖在App產(chǎn)品設(shè)計(jì)中的應(yīng)用　45
3．3．1　使用思維導(dǎo)圖分析在線(xiàn)教育類(lèi)App產(chǎn)品結(jié)構(gòu)　46
3．3．2　使用思維導(dǎo)圖分析閱讀類(lèi)App產(chǎn)品結(jié)構(gòu)　51
3．4　同步強(qiáng)化模擬題　59
作業(yè)：使用思維導(dǎo)圖分析兩款同類(lèi)型的App產(chǎn)品結(jié)構(gòu)　60
第4章　制作流程圖　61
4．1　認(rèn)識(shí)流程圖　62
4．1．1　什么是流程圖　62
4．1．2　流程圖的構(gòu)成　63
4．1．3　繪制流程圖的步驟　65
4．2　使用OmniGraffle繪制流程圖　67
4．2．1　使用OmniGraffle繪制流程圖的方法　67
4．2．2　繪制購(gòu)買(mǎi)會(huì)員流程圖　71
4．3　使用流程圖分析App產(chǎn)品　73
4．3．1　制作流程圖　73
4．3．2　分析流程圖　75
4．4　同步強(qiáng)化模擬題　76
作業(yè)：制作發(fā)紅包流程圖　77
第5章　App產(chǎn)品交互原型設(shè)計(jì)　78
5．1　認(rèn)識(shí)原型設(shè)計(jì)　79
5．1．1　什么是原型圖和線(xiàn)框圖　79
5．1．2　原型圖設(shè)計(jì)的目的　80
5．2　繪制原型圖的基本流程　80
5．2．1　收集用戶(hù)信息　80
5．2．2　繪制草圖　82
5．2．3　制作原型圖　82
5．2．4　制作交互稿　83
5．2．5　可用性測(cè)試　84
5．3　認(rèn)識(shí)墨刀　86
5．3．1　墨刀的基本使用方法　86
5．3．2　使用墨刀繪制App產(chǎn)品原型圖　92
5．4　同步強(qiáng)化模擬題　98
作業(yè)：選擇一款A(yù)pp產(chǎn)品，使用墨刀軟件繪制它的原型圖和交互稿　99
第6章　移動(dòng)端App產(chǎn)品設(shè)計(jì)規(guī)范　100
6．1　移動(dòng)端App產(chǎn)品設(shè)計(jì)中常用的單位　101
6．2　基于iOS系統(tǒng)的App界面設(shè)計(jì)規(guī)范　102
6．2．1　iOS界面尺寸　102
6．2．2　iOS圖標(biāo)尺寸　104
6．2．3　iOS字體　104
6．3　基于Android系統(tǒng)的App界面設(shè)計(jì)規(guī)范　105
6．3．1　Android界面尺寸　105
6．3．2　Android圖標(biāo)尺寸　106
6．3．3　Android字體　106
6．4　App產(chǎn)品通用設(shè)計(jì)規(guī)范　107
6．4．1　全局邊距　107
6．4．2　卡片間距　108
6．5　同步強(qiáng)化模擬題　109
作業(yè)：設(shè)計(jì)一款音樂(lè)類(lèi)App產(chǎn)品的界面　110
第7章　組件設(shè)計(jì)　111
7．1　認(rèn)識(shí)移動(dòng)端UI設(shè)計(jì)組件　112
7．1．1　UI設(shè)計(jì)組件　112
7．1．2　組件的優(yōu)勢(shì)　113
7．1．3　基于組件的設(shè)計(jì)方法　113
7．1．4　引入組件化的時(shí)間　117
7．1．5　使用組件化的方法　118
7．2　導(dǎo)航　118
7．2．1　底部標(biāo)簽式導(dǎo)航　118
7．2．2　分段控制式導(dǎo)航　119
7．2．3　列表式導(dǎo)航　120
7．2．4　抽屜式導(dǎo)航　120
7．2．5　宮格式導(dǎo)航　121
7．2．6　卡片式導(dǎo)航　122
7．2．7　下拉菜單式導(dǎo)航　123
7．3　引導(dǎo)　123
7．3．1　嵌入式引導(dǎo)　124
7．3．2　幻燈片式引導(dǎo)　124
7．3．3　浮層式引導(dǎo)　125
7．4　加載　126
7．4．1　全屏加載　126
7．4．2　上拉/下拉加載　126
7．4．3　分步加載　127
7．5　網(wǎng)絡(luò)異?！?27
7．5．1　整頁(yè)提示　127
7．5．2　占位符　128
7．5．3　警示框提示　129
7．5．4　界面內(nèi)嵌提示　129
7．5．5　Toast提示　129
7．5．6　Tips提示　130
7．6　空數(shù)據(jù)類(lèi)型　131
7．6．1　初始狀態(tài)　131
7．6．2　清空狀態(tài)　131
7．6．3　出錯(cuò)狀態(tài)　132
7．7　提示　133
7．7．1　數(shù)字提示　133
7．7．2　紅點(diǎn)提示　134
7．7．3　彈框提示　134
7．7．4　系統(tǒng)推送提示　135
7．8　操作　136
7．8．1　底部操作列表　136
7．8．2　底部浮層視圖　136
7．8．3　底部工具欄　136
7．8．4　編輯菜單　137
7．8．5　按鈕　138
7．8．6　選擇器　138
7．8．7　下拉菜單　139
7．8．8　文本框　140
7．9　單元控件　140
7．9．1　開(kāi)關(guān)控件　140
7．9．2　搜索框　140
7．9．3　圖標(biāo)　141
7．9．4　滑塊　142
7．9．5　進(jìn)度　142
7．9．6　選框　143
7．9．7　頁(yè)面控件　144
7．10　App組件庫(kù)應(yīng)用案例　144
7．11　同步強(qiáng)化模擬題　152
作業(yè)：制作iPhone界面組件　153
第8章　微交互設(shè)計(jì)　154
8．1　微交互的基礎(chǔ)知識(shí)　155
8．1．1　什么是微交互　155
8．1．2　微交互的作用　158
8．2　Adobe XD的使用方法　159
8．2．1　Adobe XD的工作界面　159
8．2．2　Adobe XD的基本操作　162
8．2．3　制作高保真原型圖　174
8．3　創(chuàng)建可交互式原型　177
8．3．1　制作頁(yè)面跳轉(zhuǎn)交互效果　177
8．3．2　制作輪播圖交互效果　179
8．4　同步強(qiáng)化模擬題　182
作業(yè)：制作好好住App的界面原型圖和微交互效果　183
第9章　運(yùn)動(dòng)類(lèi)App產(chǎn)品設(shè)計(jì)全流程　184
9．1　案例說(shuō)明　185
9．2　設(shè)計(jì)準(zhǔn)備　185
9．2．1　用戶(hù)研究　186
9．2．2　競(jìng)品分析　188
9．2．3　繪制思維導(dǎo)圖　190
9．2．4　產(chǎn)品定位　192
9．3　原型設(shè)計(jì)　192
9．3．1　線(xiàn)框圖　192
9．3．2　原型圖　193
9．4　界面設(shè)計(jì)　196
作業(yè)：閱讀類(lèi)App產(chǎn)品設(shè)計(jì)　198
第10章　App產(chǎn)品運(yùn)營(yíng)：喜馬拉雅
如何通過(guò)運(yùn)營(yíng)手段成為行業(yè)先鋒　199
10．1　初創(chuàng)期　200
10．2　發(fā)展期　200
10．3　成熟期　202
10．4　同步強(qiáng)化模擬題　205
作業(yè)：為生鮮電商類(lèi)App產(chǎn)品做運(yùn)營(yíng)活動(dòng)　206
附錄　同步強(qiáng)化模擬題答案速查表　207