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

第1章　App產(chǎn)品交互設計入門　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　結構層　5
1．2．4　框架層　5
1．2．5　表現(xiàn)層　5
1．3　App產(chǎn)品設計原則　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)品設計流程　15
1．5　App產(chǎn)品設計工具　16
1．5．1　產(chǎn)品分析工具　16
1．5．2　交互設計工具　18
1．5．3　視覺設計工具　19
1．6　同步強化模擬題　21
作業(yè)：分析App產(chǎn)品的用戶體驗設計思路　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　建立項目和任務　30
2．3．2　建立子任務　32
2．3．3　跟進項目　33
2．4　同步強化模擬題　35
作業(yè)：制作App項目進度表　36
第3章　梳理App產(chǎn)品交互設計創(chuàng)意　37
3．1　認識思維導圖　38
3．1．1　思維導圖是什么　38
3．1．2　思維導圖構成的要素　38
3．1．3　繪制思維導圖的步驟　39
3．2　使用Mindjet MindManager繪制思維導圖　40
3．2．1　認識Mindjet MindManager　40
3．2．2　使用Mindjet MindManager繪制思維導圖的方法及技巧　40
3．3　思維導圖在App產(chǎn)品設計中的應用　45
3．3．1　使用思維導圖分析在線教育類App產(chǎn)品結構　46
3．3．2　使用思維導圖分析閱讀類App產(chǎn)品結構　51
3．4　同步強化模擬題　59
作業(yè)：使用思維導圖分析兩款同類型的App產(chǎn)品結構　60
第4章　制作流程圖　61
4．1　認識流程圖　62
4．1．1　什么是流程圖　62
4．1．2　流程圖的構成　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)品交互原型設計　78
5．1　認識原型設計　79
5．1．1　什么是原型圖和線框圖　79
5．1．2　原型圖設計的目的　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è)：選擇一款App產(chǎn)品，使用墨刀軟件繪制它的原型圖和交互稿　99
第6章　移動端App產(chǎn)品設計規(guī)范　100
6．1　移動端App產(chǎn)品設計中常用的單位　101
6．2　基于iOS系統(tǒng)的App界面設計規(guī)范　102
6．2．1　iOS界面尺寸　102
6．2．2　iOS圖標尺寸　104
6．2．3　iOS字體　104
6．3　基于Android系統(tǒng)的App界面設計規(guī)范　105
6．3．1　Android界面尺寸　105
6．3．2　Android圖標尺寸　106
6．3．3　Android字體　106
6．4　App產(chǎn)品通用設計規(guī)范　107
6．4．1　全局邊距　107
6．4．2　卡片間距　108
6．5　同步強化模擬題　109
作業(yè)：設計一款音樂類App產(chǎn)品的界面　110
第7章　組件設計　111
7．1　認識移動端UI設計組件　112
7．1．1　UI設計組件　112
7．1．2　組件的優(yōu)勢　113
7．1．3　基于組件的設計方法　113
7．1．4　引入組件化的時間　117
7．1．5　使用組件化的方法　118
7．2　導航　118
7．2．1　底部標簽式導航　118
7．2．2　分段控制式導航　119
7．2．3　列表式導航　120
7．2．4　抽屜式導航　120
7．2．5　宮格式導航　121
7．2．6　卡片式導航　122
7．2．7　下拉菜單式導航　123
7．3　引導　123
7．3．1　嵌入式引導　124
7．3．2　幻燈片式引導　124
7．3．3　浮層式引導　125
7．4　加載　126
7．4．1　全屏加載　126
7．4．2　上拉/下拉加載　126
7．4．3　分步加載　127
7．5　網(wǎng)絡異?！?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　開關控件　140
7．9．2　搜索框　140
7．9．3　圖標　141
7．9．4　滑塊　142
7．9．5　進度　142
7．9．6　選框　143
7．9．7　頁面控件　144
7．10　App組件庫應用案例　144
7．11　同步強化模擬題　152
作業(yè)：制作iPhone界面組件　153
第8章　微交互設計　154
8．1　微交互的基礎知識　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　制作頁面跳轉交互效果　177
8．3．2　制作輪播圖交互效果　179
8．4　同步強化模擬題　182
作業(yè)：制作好好住App的界面原型圖和微交互效果　183
第9章　運動類App產(chǎn)品設計全流程　184
9．1　案例說明　185
9．2　設計準備　185
9．2．1　用戶研究　186
9．2．2　競品分析　188
9．2．3　繪制思維導圖　190
9．2．4　產(chǎn)品定位　192
9．3　原型設計　192
9．3．1　線框圖　192
9．3．2　原型圖　193
9．4　界面設計　196
作業(yè)：閱讀類App產(chǎn)品設計　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