第 一章　簡(jiǎn)述交互設(shè)計(jì)　/ 001

1.1　Freemind　/ 002

1.2　Axure RP　/ 004

1.3　Adobe After Effects　/ 006

1.4　Adobe FLASH　/ 007

1.5　Adobe Photoshop　/ 008

1.6　Principle　/ 009

1.7　Sketch　/ 010

D二章　基礎(chǔ)服務(wù)交互　/ 012

2.1　應(yīng)用圖標(biāo)入口　/ 012

2.2　清除緩存　/ 013

2.3　清除數(shù)據(jù)　/ 014

2.4　滑動(dòng)調(diào)節(jié)　/ 015

2.5　數(shù)據(jù)讀取　/ 016

2.6　支付的交互　/ 017

2.7　意見(jiàn)反饋　/ 019

2.8　多國(guó)語(yǔ)言　/ 021

2.9　登錄設(shè)備管理　/ 022

2.10　關(guān)于　/ 023

2.11　手機(jī)號(hào)注冊(cè) （方法一）　/ 024

2.12　手機(jī)號(hào)注冊(cè) （方法二）　/ 025

2.13　手機(jī)號(hào)碼變更 （單向確認(rèn)）　/ 027

2.14　手機(jī)號(hào)碼變更（雙向確認(rèn)）　/ 029

2.15　郵箱注冊(cè) （無(wú)需驗(yàn)證）　/ 031

2.16　郵箱注冊(cè) （需驗(yàn)證郵箱）　/ 032

2.17　郵箱登錄　/ 033

2.18　短信驗(yàn)證碼登錄　/ 034

2.19　銀行卡綁卡　/ 035

2.20　銀行卡解除綁卡　/ 037

2.21　幫助中心　/ 038

2.22　驗(yàn)證碼按鈕狀態(tài)的效果圖　/ 039

2.23　時(shí)間顯示狀態(tài)的效果圖　/ 040

2.24　切換框架的方式　/ 041

2.25　消息撤回　/ 042

2.26　手機(jī)充值　/ 044

2.27　本章總結(jié)說(shuō)明　/ 045

第三章　直播系統(tǒng)交互　/ 046

3.1　直播主要框架　/ 046

3.2　首頁(yè)“+”添加好友的交互　/ 047

3.3　“我要直播”的申請(qǐng)交互　/ 049

3.4　“我要直播”通過(guò)審核后的直播交互　/ 050

3.5　“關(guān)注”頁(yè)面詳細(xì)的交互　/ 051

3.6　直播中的詳細(xì)交互　/ 053

3.7　直播中的“發(fā)信息”交互　/ 054

3.8　直播中的“私信”交互　/ 055

3.9　直播中的“點(diǎn)歌”交互　/ 057

3.10　直播中的“送禮”交互　/ 058

3.11　直播中的“送禮”不足金幣的交互　/ 059

3.12　直播中的“錄視頻”交互　/ 061

3.13　直播中的“其他”交互　/ 062

3.14　“首頁(yè)”和“關(guān)注”的搜索頁(yè)詳細(xì)交互　/ 063

003 APP 交互設(shè)計(jì)全流程圖解

3.15　“通訊錄”頁(yè)面詳細(xì)的交互　/ 064

3.16　發(fā)現(xiàn)的交互“關(guān)注圈”　/ 065

3.17　發(fā)現(xiàn)的交互“附近的直播”　/ 065

3.18　發(fā)現(xiàn)的交互“zui新直播”　/ 066

3.19　發(fā)現(xiàn)的交互“我的關(guān)注”　/ 067

3.20　發(fā)現(xiàn)的交互“我的粉絲”　/ 068

3.21　發(fā)現(xiàn)的交互“觀看歷史”　/ 069

3.22　發(fā)現(xiàn)的交互“我的視頻”　/ 070

3.23　發(fā)現(xiàn)的交互“我的好友”　/ 071

3.24　我的交互“個(gè)人資料”　/ 072

3.25　我的交互“個(gè)人資料” （地址）　/ 073

3.26　我的交互“個(gè)人資料” （發(fā)票抬頭）　/ 075

3.27　我的交互“個(gè)人資料”性別、地區(qū)、個(gè)人標(biāo)簽、星座、身高、興趣愛(ài)好　/ 077

3.28　我的交互“錢(qián)包”　/ 078

3.29　我的交互“優(yōu)惠券”　/ 080

3.30　我的交互“日常任務(wù)”　/ 081

3.31　我的交互“設(shè)置”　/ 082

3.32　“設(shè)置”-“賬號(hào)和安全”-“手機(jī)號(hào)”　/ 084

3.33　“設(shè)置”-“賬號(hào)和安全”-“密碼設(shè)置”　/ 086

3.34　“設(shè)置”-“賬號(hào)和安全”-“支付設(shè)置”　/ 087

3.35　蘋(píng)果手機(jī)的設(shè)置　/ 088

3.36　“設(shè)置”-“通用”-“多語(yǔ)言”　/ 089

3.37　“設(shè)置”-“通用”的“字體大小”　/ 090

3.38　“設(shè)置”-“通用”的“聊天背景”　/ 091

3.39　“設(shè)置”-“通用”的“視頻和相片”　/ 092

3.40　“設(shè)置”-“消息通知” 的“消息通知免打擾”　/ 093

3.41　“設(shè)置”-“直播設(shè)置”的“直播場(chǎng)控”　/ 094

3.42　“設(shè)置”-“直播設(shè)置”的“黑名單”　/ 095

3.43　“設(shè)置”-“直播設(shè)置”的“關(guān)注的主播開(kāi)播提醒”　/ 096

3.44　直播的商業(yè)　/ 097

3.45　本章總結(jié)說(shuō)明　/ 098



第四章　電商購(gòu)物系統(tǒng)交互　/ 099

4.1　電商系統(tǒng)主要框架　/ 099

4.2　“首頁(yè)”的詳細(xì)交互　/ 101

4.3　“首頁(yè)”-“消息”的詳細(xì)交互　/ 102

4.4　“首頁(yè)”- 分類“襯衫”的詳細(xì)交互　/ 103

4.5　商品的“詳情”頁(yè)的詳細(xì)交互　/ 104

4.6　商品的“評(píng)論”頁(yè)的詳細(xì)交互　/ 105

4.7　商品的“相關(guān)”頁(yè)的詳細(xì)交互　/ 106

4.8　顧客怎么給商品評(píng)論的交互　/ 107

4.9　“購(gòu)物車”的詳細(xì)交互　/ 109

4.10　“馬上購(gòu)買(mǎi)”確認(rèn)訂單頁(yè)面　/ 110

4.11　“我”-“錢(qián)包”的詳細(xì)交互　/ 111

4.12　“錢(qián)包”-“交易流水”　/ 112

4.13　“交易流水”-“交易信息”的詳情說(shuō)明　/ 113

4.14　“錢(qián)包”-“支付管理”　/ 114

4.15　“支付管理”-“自動(dòng)扣款”的詳細(xì)交互　/ 115

4.16　“錢(qián)包”-“總資產(chǎn)”　/ 116

4.17　“錢(qián)包”-“現(xiàn)金資產(chǎn)”-“充值”（可用余額）　/ 117

4.18　“錢(qián)包”-“現(xiàn)金資產(chǎn)”-“提現(xiàn)”　/ 119

4.19　“錢(qián)包”-“銀行卡”（添加綁定銀行卡）　/ 121

4.20　銀行卡詳細(xì)頁(yè)面信息　/ 123

4.21　“我”-“優(yōu)惠券”詳細(xì)交互　/ 124

4.22　手動(dòng)添加“優(yōu)惠券”的交互　/ 125

4.23　“我”-“日常任務(wù)”的詳細(xì)交互　/ 126

4.24　“我”-“設(shè)置”的詳細(xì)交互　/ 127

4.25　加入購(gòu)物車的交互　/ 129

4.26　自有平臺(tái)的支付交互　/ 130

4.27　與第三方支付平臺(tái)he作的支付交互　/ 131

4.28　本章總結(jié)說(shuō)明　/ 133

005 APP 交互設(shè)計(jì)全流程圖解

第五章　互聯(lián)網(wǎng)金融系統(tǒng)借款端交互　/ 134

5.1　借款端的主要框架　/ 134

5.2　“借款”的詳細(xì)交互（申請(qǐng)）　/ 135

5.3　“申請(qǐng)”后的系統(tǒng)自動(dòng)評(píng)分　/ 137

5.4　“借款”-“計(jì)算器”的交互　/ 138

5.5　“進(jìn)度”的狀態(tài)交互　/ 140

5.6　“錢(qián)包”的詳細(xì)交互　/ 142

5.7　“錢(qián)包”-“消息中心”的詳細(xì)交互　/ 143

5.8　“錢(qián)包”-“貸款確認(rèn)”的詳細(xì)交互　/ 144

5.9　“錢(qián)包”-“還款”的詳細(xì)交互　/ 145

5.10　“可用余額”充足的還款交互　/ 146

5.11　“可用余額”不足的充值還款交互　/ 147

5.12　“可用余額”不足的自動(dòng)劃扣銀行卡還款交互　/ 148

5.13　“錢(qián)包”-“交易流水”的詳細(xì)交互　/ 149

5.14　“錢(qián)包”-“充值”的詳細(xì)交互　/ 150

5.15　“錢(qián)包”-“提現(xiàn)”的詳細(xì)交互　/ 152

5.16　“充值”和“提現(xiàn)”更換銀行卡的交互　/ 154

5.17　“我”的詳細(xì)交互　/ 155

5.18　“我”-“借款資料”的交互　/ 157

5.19　“我”-“借款信息”的交互　/ 158

5.20　“我”-“還款信息”的交互　/ 159

5.21　本章總結(jié)說(shuō)明　/ 160

第六章　互聯(lián)網(wǎng)金融系統(tǒng)理財(cái)端交互　/ 161

6.1　互聯(lián)網(wǎng)金融系統(tǒng)理財(cái)端主要框架　/ 161

6.2　“首頁(yè)”的詳細(xì)交互　/ 162

6.3　“收藏”的詳細(xì)交互　/ 164

6.4　“立即投資”的詳細(xì)交互　/ 166

6.5　“理財(cái)”的詳細(xì)交互　/ 168

6.6　“標(biāo)”的來(lái)源交互　/ 169

6.7　“發(fā)現(xiàn)”的詳細(xì)交互　/ 170



6.8　“發(fā)現(xiàn)”-“發(fā)布”的詳細(xì)交互　/ 171

6.9　“相機(jī)膠卷”圖片顯示順序的詳細(xì)交互　/ 173

6.10　“相機(jī)膠卷”刪除圖片和調(diào)整順序的詳細(xì)交互　/ 174

6.11　“目前位置”的詳細(xì)交互　/ 175

6.12　“我”的詳細(xì)交互　/ 176

6.13　“我”-“我的投資”的詳細(xì)交互　/ 177

6.14　“我”-“發(fā)現(xiàn)”-“@ 我”的詳細(xì)交互　/ 178

6.15　“我”-“發(fā)現(xiàn)”-“評(píng)論”的詳細(xì)交互　/ 179

6.16　“我”-“發(fā)現(xiàn)”-“點(diǎn)贊”的詳細(xì)交互　/ 180

6.17　“我”-“發(fā)現(xiàn)”-“主題”的詳細(xì)交互　/ 181

6.18　“我”-“錢(qián)包”的詳細(xì)交互　/ 182

6.19　本章總結(jié)說(shuō)明　/ 183

第七章　社交系統(tǒng)交互　/ 184

7.1　社交系統(tǒng)的主要框架　/ 184

7.2　開(kāi)啟相機(jī)和麥克風(fēng)的權(quán)限　/ 186

7.3　“聊天”的詳細(xì)交互　/ 187

7.4　用戶個(gè)人信息頁(yè)面的詳細(xì)交互　/ 189

7.5　分享此主頁(yè)網(wǎng)址給用戶的詳細(xì)交互　/ 190

7.6　“發(fā)信息”和“隱藏快拍”的交互　/ 192

7.7　“開(kāi)啟”和“關(guān)閉”發(fā)布通知的交互　/ 193

7.8　“關(guān)注我 ”的交互　/ 194

7.9　“發(fā)現(xiàn)”的詳細(xì)交互　/ 195

7.10　“發(fā)布”的詳細(xì)交互　/ 197

7.11　“發(fā)布新帖子”-“標(biāo)記用戶”的詳細(xì)交互　/ 199

7.12　查看自己已發(fā)新帖子的詳細(xì)交互　/ 201

7.13　“我的關(guān)注”的詳細(xì)交互　/ 202

7.14　“我”的詳細(xì)交互　/ 203

7.15　“我”-“收藏”的詳細(xì)交互　/ 204

7.16　“我”-“存檔”的詳細(xì)交互　/ 206

7.17　“我”-“添加用戶”的詳細(xì)交互　/ 207

007 APP 交互設(shè)計(jì)全流程圖解

7.18　“我”-“賬戶設(shè)置”的詳細(xì)交互 1　/ 208

7.19　“我”-“賬戶設(shè)置”的詳細(xì)交互 2　/ 210

7.20　“我”-“編輯個(gè)人主頁(yè)”的詳細(xì)交互　/ 211

7.21　“我”-“有我的相片”的詳細(xì)交互　/ 212

7.22　本章總結(jié)說(shuō)明　/ 213

第八章　交互設(shè)計(jì)相關(guān)內(nèi)容　/ 214

8.1　交互設(shè)計(jì)的場(chǎng)合　/ 214

8.2　交互設(shè)計(jì)的作用　/ 215

8.3　交互設(shè)計(jì)的標(biāo)準(zhǔn)　/ 216

作者自述　/ 218