去繁從簡(jiǎn)：交互設(shè)計(jì)知識(shí)體系精講

第 1章 交互設(shè)計(jì)的基本認(rèn)識(shí) 013
1．1　交互設(shè)計(jì)師的價(jià)值體現(xiàn)　014
1．1．1　在團(tuán)隊(duì)工作流程中的價(jià)值體現(xiàn)　014
1．1．2　在用戶體驗(yàn)提升工作中的價(jià)值體現(xiàn)　015
1．2　UED團(tuán)隊(duì)的設(shè)計(jì)流程　018
1．2．1　產(chǎn)品需求　018
1．2．2　需求評(píng)審　019
1．2．3　交互設(shè)計(jì)　019
1．2．4　交互評(píng)審　020
1．2．5　視覺設(shè)計(jì)　021
1．2．6　視覺評(píng)審　021
1．2．7　開發(fā)走查　021
1．2．8　可用性報(bào)告　022
1．3　如何通過交互設(shè)計(jì)提升用戶體驗(yàn)　022
1．3．1　優(yōu)化功能流程　022
1．3．2　提升設(shè)計(jì)體驗(yàn)　023
1．3．3　優(yōu)化實(shí)現(xiàn)機(jī)制　024
第　2章 交互設(shè)計(jì)的基本原則　025
2．1　尼爾森十大可用性原則　026
2．1．1　狀態(tài)可感知原則　026
2．1．2　貼近用戶認(rèn)知原則　027
2．1．3　操作可控性原則　028
2．1．4　一致性原則　029
2．1．5　防錯(cuò)性原則　029
2．1．6　識(shí)別好過回憶原則　030
2．1．7　靈活高效原則　031
2．1．8　美學(xué)和極簡(jiǎn)設(shè)計(jì)原則　032
2．1．9　容錯(cuò)性原則　032
2．1．10　人性化幫助原則　034
2．2　高效性原則　035
2．2．1　優(yōu)化性能　035
2．2．2　減少操作路徑　036
2．2．3　減少頁面跳轉(zhuǎn)　036
2．2．4　支持批量操作　037
2．3　及時(shí)反饋性原則　037
2．3．1　結(jié)果反饋　038
2．3．2　狀態(tài)反饋　040
2．3．3　過渡反饋　041
2．3．4　操作反饋　042
2．3．5　聲音和震動(dòng)反饋　043
2．4　易學(xué)性原則　043
2．4．1　加強(qiáng)視覺引導(dǎo)　044
2．4．2　明確場(chǎng)景指示　044
2．4．3　遵循用戶已有的習(xí)慣　045
2．4．4　合理運(yùn)用動(dòng)畫與視覺效果　045
2．5　易讀性原則　046
2．5．1　通過布局區(qū)分信息層級(jí)　046
2．5．2　保持適當(dāng)?shù)牧舭住?46
2．5．3　簡(jiǎn)化元素　047
2．5．4　運(yùn)用三大定律　048
第3章　iOS與Material Design設(shè)計(jì)規(guī)范詳解　049
3．1　iOS系統(tǒng)組件的設(shè)計(jì)規(guī)范　050
3．1．1　UI欄（UI-Bars）　051
3．1．2　UI視圖（UI-Views）　053
3．2　Material Design組件的設(shè)計(jì)規(guī)范062
3．2．1　菜單　063
3．2．2　底部動(dòng)作條　064
3．2．3　進(jìn)度和動(dòng)態(tài)　064
3．2．4　按鈕　065
3．2．5　滑塊　067
3．2．6　卡片　068
3．2．7　Snackbar與Toast　068
3．2．8　紙片　069
3．2．9　副標(biāo)題　070
3．2．10　警告框　070
3．2．11　開關(guān)　071
3．2．12　分隔線　072
3．2．13　Tabs　072
3．2．14　網(wǎng)格　073
3．2．15　文本框　073
3．2．16　列表　074
3．2．17　工具提示　074
3．2．18　列表控制　075
3．3　iOS系統(tǒng)和Android系統(tǒng)在設(shè)計(jì)中的差異　076
3．3．1　消息提醒機(jī)制的差異　076
3．3．2　手勢(shì)操作的差異　077
3．3．3　組件風(fēng)格的差異　078
3．3．4　發(fā)送按鈕的差異　080
3．3．5　導(dǎo)航欄的差異　080
3．3．6　返回上一級(jí)頁面組件的差異　081
3．4　iOS 和Material Design的元件庫(kù)　081
3．4．1　制作統(tǒng)一可復(fù)用的Axure元件庫(kù)　082
3．4．2　Axure元件庫(kù)的使用方法　086
3．4．3　源文件　086
3．5　App中六大組件的使用方法與區(qū)別087
3．5．1　警告框和底部操作列表　087
3．5．2　標(biāo)簽欄和工具欄　088
3．5．3　底部動(dòng)作條和菜單　088
3．5．4　選擇器和底部操作列表　089
3．5．5　下拉菜單和活動(dòng)視圖控制器　089
3．5．6　Snackbar和Toast　090
第4章　以功能劃分的移動(dòng)端組件與控件設(shè)計(jì)規(guī)范詳解　091
4．1　組件與控件的基本認(rèn)識(shí)　092
4．2　導(dǎo)航類組件　092
4．2．1　底部標(biāo)簽式導(dǎo)航　093
4．2．2　分段控制式導(dǎo)航　094
4．2．3　列表式導(dǎo)航　094
4．2．4　下拉菜單式導(dǎo)航　095
4．2．5　抽屜式導(dǎo)航　095
4．2．6　宮格式導(dǎo)航　096
4．2．7　卡片式導(dǎo)航　096
4．3　引導(dǎo)類組件　097
4．3．1　幻燈片式引導(dǎo)　097
4．3．2　浮層式引導(dǎo)　098
4．3．3　嵌入式引導(dǎo)　098
4．4　加載類組件　099
4．4．1　全屏加載　100
4．4．2　分步加載　100
4．4．3　下拉加載　101
4．4．4　上拉加載　101
4．4．5　預(yù)加載　102
4．4．6　智能加載　102
4．5　網(wǎng)絡(luò)異常類組件　103
4．5．1　網(wǎng)絡(luò)切換　103
4．5．2　斷網(wǎng)情況　104
4．5．3　弱網(wǎng)情況　107
4．6　空數(shù)據(jù)類組件　107
4．6．1　初始狀態(tài)　108
4．6．2　清空狀態(tài)　108
4．6．3　出錯(cuò)狀態(tài)　109
4．7　提示類組件　111
4．7．1　紅點(diǎn)提示　111
4．7．2　數(shù)字提示　112
4．7．3　系統(tǒng)推送提示　112
4．7．4　彈窗提示　113
4．8　操作類組件　114
4．8．1　底部操作列表　114
4．8．2　底部浮層視圖　115
4．8．3　編輯菜單　115
4．8．4　底部工具欄　116
4．8．5　按鈕　117
4．8．6　選擇器　119
4．8．7　下拉菜單　119
4．8．8　文本框　120
4．9　單元控件類組件　121
4．9．1　搜索　121
4．9．2　開關(guān)　122
4．9．3　頁面控制器　122
4．9．4　圖標(biāo)　123
4．9．5　滑塊　124
4．9．6　進(jìn)度　124
4．9．7　選框　124
第5章　Web端系統(tǒng)組件的設(shè)計(jì)規(guī)范詳解　125
5．1　Web 端組件設(shè)計(jì)規(guī)范的基本介紹　126
5．1．1　Web 端設(shè)計(jì)規(guī)范的價(jià)值　126
5．1．2　Web 端設(shè)計(jì)理念　127
5．1．3　Web 端設(shè)計(jì)原則　132
5．2　反饋類組件　134
5．2．1　Toast　134
5．2．2　警示提示　136
5．2．3　對(duì)話框　137
5．2．4　通知提醒框　138
5．2．5　文字提示　138
5．3　表單類組件　139
5．3．1　短文本　139
5．3．2　短文本聯(lián)想　141
5．3．3　長(zhǎng)文本　143
5．3．4　選擇器　146
5．3．5　樹選擇　148
5．3．6　日期選擇器　151
5．3．7　時(shí)間選擇器　154
5．3．8　級(jí)聯(lián)　156
5．3．9　數(shù)字輸入　158
5．3．10　單選組件　159
5．3．11　復(fù)選框　159
5．3．12　開關(guān)　160
5．4　基礎(chǔ)類組件　161
5．5　數(shù)據(jù)類組件　162
5．5．1　徽標(biāo)數(shù)　162
5．5．2　上傳　163
5．5．3　進(jìn)度條　164
5．5．4　加載　164
5．6　導(dǎo)航類組件　165
5．6．1　導(dǎo)航菜單　166
5．6．2　面包屑　168
5．6．3　標(biāo)簽頁　169
5．6．4　分頁　170
5．6．5　步驟條　171
5．6．6　下拉菜單　172
5．7　其他類組件　172
5．7．1　標(biāo)簽　173
5．7．2　表格　174
5．7．3　列表　175
5．7．4　卡片　176
第6章　交互原型圖的設(shè)計(jì)規(guī)范與方法　177
6．1　交互原型圖的設(shè)計(jì)規(guī)范　178
6．1．1　明確主場(chǎng)景和適用人群　178
6．1．2　信息結(jié)構(gòu)合理化　179
6．1．3　流程設(shè)計(jì)簡(jiǎn)單合理化　180
6．1．4　設(shè)計(jì)符合大部分用戶的認(rèn)知模型　180
6．1．5　交互邏輯無缺失　181
6．1．6　異常場(chǎng)景無遺漏　182
6．1．7　關(guān)鍵字段有規(guī)則定義　182
6．1．8　極限情況有定義　182
6．1．9　是否涉及多種角色和權(quán)限　183
6．1．10　全局組件有說明　183
6．2　掌握交互設(shè)計(jì)背后的邏輯　184
6．2．1　警示框　185
6．2．2　Toast　186
6．2．3　對(duì)象內(nèi)嵌　186
6．3　易遺漏的交互場(chǎng)景分析　187
6．3．1　iOS 版歷史搜索原型圖分析　188
6．3．2　常見的易遺漏的交互場(chǎng)景　190
6．4　移動(dòng)端長(zhǎng)表單設(shè)計(jì)　192
6．4．1　主方案1　193
6．4．2　主方案2　194
6．4．3　主方案3　195
6．5　交互文檔的輸出規(guī)范與方法　197
6．5．1　完整的項(xiàng)目簡(jiǎn)介　197
6．5．2　需求分析　198
6．5．3　新增修改記錄　198
6．5．4　信息架構(gòu)　198
6．5．5　交互設(shè)計(jì)的方案闡述　199
6．5．6　頁面交互流程圖　200
6．5．7　異常頁面和異常情況的說明　202
第7章　團(tuán)隊(duì)產(chǎn)品交互設(shè)計(jì)的工作流程　203
7．1　分析產(chǎn)品需求　204
7．1．1　產(chǎn)品戰(zhàn)略級(jí)需求　204
7．1．2　用戶級(jí)產(chǎn)品需求　205
7．1．3　用戶體驗(yàn)級(jí)產(chǎn)品需求　206
7．2　需求評(píng)審　206
7．3　交互設(shè)計(jì)　210
7．4　交互評(píng)審　218
7．5　視覺設(shè)計(jì)　219
7．6　視覺評(píng)審　219
7．7　交互視覺走查　219
7．7．1　交互走查　220
7．7．2　視覺走查　220
7．7．3　走查報(bào)告　220
第8章　交互設(shè)計(jì)綜合分析與講解　221
8．1　站在開發(fā)的角度優(yōu)化產(chǎn)品方案　222
8．1．1　緩存機(jī)制　222
8．1．2　數(shù)據(jù)上傳機(jī)制　223
8．2　標(biāo)簽欄是固定好，還是不固定好　225
8．2．1　通過消息列表進(jìn)入個(gè)人主頁　225
8．2．2　通過通訊錄列表進(jìn)入個(gè)人主頁　226
8．3　常見的四大用戶體驗(yàn)誤區(qū)　227
8．3．1　路徑越淺，體驗(yàn)就越好　227
8．3．2　過分強(qiáng)調(diào)小場(chǎng)景　227
8．3．3　過度反饋　228
8．3．4　數(shù)據(jù)上傳前臺(tái)顯示，而非后臺(tái)加載　228
8．4　探索流量分發(fā)的設(shè)計(jì)方法　229
8．4．1　設(shè)計(jì)流量分發(fā)的目的　230
8．4．2　如何進(jìn)行流量分發(fā)設(shè)計(jì)　231
8．4．3　如何驗(yàn)證流量分發(fā)設(shè)計(jì)效果　235
8．5　微信設(shè)計(jì)背后的產(chǎn)品邏輯分析　235
8．5．1　點(diǎn)贊評(píng)論聚合　235
8．5．2　朋友圈的模塊設(shè)置　236
8．5．3　購(gòu)物、錢包和游戲模塊設(shè)置　237
8．5．4　朋友圈支持的圖片上傳格式　237
8．5．5　通訊錄的模塊設(shè)置　238
8．5．6　微信號(hào)為何不能修改　238
8．5．7　相冊(cè)模塊的命名　239
8．5．8　朋友圈的查看設(shè)置　239
8．5．9　群發(fā)僅限200 人設(shè)置　240
8．5．10　對(duì)話列表的刪除設(shè)置　240