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

第1章　App產(chǎn)品交互設(shè)計入門　1
1．1　認識App產(chǎn)品　2
1．1．1　什么是App　2
1．1．2　認識手機操作系統(tǒng)　3
1．2　App產(chǎn)品用戶體驗的5個層面　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è)計原則　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　對稱性原則　12
1．3．7　共同命運原則　14
1．4　App產(chǎn)品設(shè)計流程　15
1．5　App產(chǎn)品設(shè)計工具　16
1．5．1　產(chǎn)品分析工具　16
1．5．2　交互設(shè)計工具　18
1．5．3　視覺設(shè)計工具　19
1．6　同步強化模擬題　21
作業(yè)：分析App產(chǎn)品的用戶體驗設(shè)計思路　21
第2章　團隊協(xié)作管理App項目　22
2．1　團隊協(xié)作和項目管理　23
2．1．1　團隊協(xié)作的要素　23
2．1．2　常見的團隊協(xié)作方法　24
2．2　項目管理工具——Trello　24
2．2．1　認識Trello　24
2．2．2　Trello的主要功能　26
2．3　制作App項目管理表　29
2．3．1　建立項目和任務(wù)　30
2．3．2　建立子任務(wù)　32
2．3．3　跟進項目　33
2．4　同步強化模擬題　35
作業(yè)：制作App項目進度表　36
第3章　梳理App產(chǎn)品交互設(shè)計創(chuàng)意　37
3．1　認識思維導(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　認識Mindjet MindManager　40
3．2．2　使用Mindjet MindManager繪制思維導(dǎo)圖的方法及技巧　40
3．3　思維導(dǎo)圖在App產(chǎn)品設(shè)計中的應(yīng)用　45
3．3．1　使用思維導(dǎo)圖分析在線教育類App產(chǎn)品結(jié)構(gòu)　46
3．3．2　使用思維導(dǎo)圖分析閱讀類App產(chǎn)品結(jié)構(gòu)　51
3．4　同步強化模擬題　59
作業(yè)：使用思維導(dǎo)圖分析兩款同類型的App產(chǎn)品結(jié)構(gòu)　60
第4章　制作流程圖　61
4．1　認識流程圖　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　繪制購買會員流程圖　71
4．3　使用流程圖分析App產(chǎn)品　73
4．3．1　制作流程圖　73
4．3．2　分析流程圖　75
4．4　同步強化模擬題　76
作業(yè)：制作發(fā)紅包流程圖　77
第5章　App產(chǎn)品交互原型設(shè)計　78
5．1　認識原型設(shè)計　79
5．1．1　什么是原型圖和線框圖　79
5．1．2　原型圖設(shè)計的目的　80
5．2　繪制原型圖的基本流程　80
5．2．1　收集用戶信息　80
5．2．2　繪制草圖　82
5．2．3　制作原型圖　82
5．2．4　制作交互稿　83
5．2．5　可用性測試　84
5．3　認識墨刀　86
5．3．1　墨刀的基本使用方法　86
5．3．2　使用墨刀繪制App產(chǎn)品原型圖　92
5．4　同步強化模擬題　98
作業(yè)：選擇一款A(yù)pp產(chǎn)品，使用墨刀軟件繪制它的原型圖和交互稿　99
第6章　移動端App產(chǎn)品設(shè)計規(guī)范　100
6．1　移動端App產(chǎn)品設(shè)計中常用的單位　101
6．2　基于iOS系統(tǒng)的App界面設(shè)計規(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è)計規(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è)計規(guī)范　107
6．4．1　全局邊距　107
6．4．2　卡片間距　108
6．5　同步強化模擬題　109
作業(yè)：設(shè)計一款音樂類App產(chǎn)品的界面　110
第7章　組件設(shè)計　111
7．1　認識移動端UI設(shè)計組件　112
7．1．1　UI設(shè)計組件　112
7．1．2　組件的優(yōu)勢　113
7．1．3　基于組件的設(shè)計方法　113
7．1．4　引入組件化的時間　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　整頁提示　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ù)類型　131
7．6．1　初始狀態(tài)　131
7．6．2　清空狀態(tài)　131
7．6．3　出錯狀態(tài)　132
7．7　提示　133
7．7．1　數(shù)字提示　133
7．7．2　紅點提示　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　開關(guān)控件　140
7．9．2　搜索框　140
7．9．3　圖標(biāo)　141
7．9．4　滑塊　142
7．9．5　進度　142
7．9．6　選框　143
7．9．7　頁面控件　144
7．10　App組件庫應(yīng)用案例　144
7．11　同步強化模擬題　152
作業(yè)：制作iPhone界面組件　153
第8章　微交互設(shè)計　154
8．1　微交互的基礎(chǔ)知識　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　制作頁面跳轉(zhuǎn)交互效果　177
8．3．2　制作輪播圖交互效果　179
8．4　同步強化模擬題　182
作業(yè)：制作好好住App的界面原型圖和微交互效果　183
第9章　運動類App產(chǎn)品設(shè)計全流程　184
9．1　案例說明　185
9．2　設(shè)計準備　185
9．2．1　用戶研究　186
9．2．2　競品分析　188
9．2．3　繪制思維導(dǎo)圖　190
9．2．4　產(chǎn)品定位　192
9．3　原型設(shè)計　192
9．3．1　線框圖　192
9．3．2　原型圖　193
9．4　界面設(shè)計　196
作業(yè)：閱讀類App產(chǎn)品設(shè)計　198
第10章　App產(chǎn)品運營：喜馬拉雅
如何通過運營手段成為行業(yè)先鋒　199
10．1　初創(chuàng)期　200
10．2　發(fā)展期　200
10．3　成熟期　202
10．4　同步強化模擬題　205
作業(yè)：為生鮮電商類App產(chǎn)品做運營活動　206
附錄　同步強化模擬題答案速查表　207