去繁從簡：交互設(shè)計知識體系精講

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