移動APP產(chǎn)品原型設(shè)計：玩轉(zhuǎn)Axure RP

第1章 走進Axure RP世界：了解原型設(shè)計 1
1.1 什么是 Axure RP 2
1.1.1 什么是原型設(shè)計 2
1.1.2 常用原型設(shè)計工具 2
1.1.3 Axure RP能干什么 3
1.2 Axure RP軟件安裝、漢化與注冊 4
1.3 認識Axure的軟件界面 6
1.3.1 Axure工具欄 7
1.3.2 利用Axure站點地圖規(guī)劃欄目結(jié)構(gòu) 16
1.3.3 利用部件制作原型積木 17
1.3.4 制作部件庫 46
1.3.5 將Axure頁面管理起來 47
1.4 Axure RP 8.0與Axure RP 7.0的區(qū)別 48
1.4.1 軟件界面整體區(qū)別 48
1.4.2 菜單欄區(qū)域區(qū)別 50
1.4.3 工具欄區(qū)域區(qū)別 52
1.4.4 站點地圖區(qū)域區(qū)別 52
1.4.5 部件區(qū)域區(qū)別 53
1.4.6 交互樣式區(qū)域區(qū)別 55
1.4.7 部件管理區(qū)域區(qū)別 55
1.4.8 用例編輯、發(fā)布設(shè)置、發(fā)布頁面區(qū)別 57
第2章 實現(xiàn)原型演示的功能邏輯：變量和函數(shù) 60
2.1 不可缺少的全局變量和局部變量 61
2.2 豐富的部件和頁面 67
2.2.1 部件函數(shù) 67
2.2.2 頁面函數(shù) 70
2.3 靈活的窗口和鼠標(biāo) 71
2.3.1 窗口函數(shù) 71
2.3.2 鼠標(biāo)函數(shù) 74
2.4 多變的數(shù)字和字符串 75
2.4.1 數(shù)字函數(shù) 75
2.4.2 字符串函數(shù) 76
2.5 種類繁多的數(shù)學(xué)和日期 77
2.5.1 數(shù)學(xué)函數(shù) 77
2.5.2 日期函數(shù) 77
第3章 Axure交互 79
3.1 Axure觸發(fā)事件 80
3.1.1 部件觸發(fā)事件 80
3.1.2 頁面觸發(fā)事件 81
3.2 Axure交互條件設(shè)置 83
3.3 展示豐富的交互動作 88
3.3.1 鏈接交互動作 88
3.3.2 部件交互動作 96
3.4 神奇的動態(tài)面板 97
3.4.1 認識動態(tài)面板 97
3.4.2 動態(tài)面板的顯示與隱藏效果 101
3.4.3 調(diào)整動態(tài)面板的大小以適合內(nèi)容 101
3.4.4 動態(tài)面板的滾動欄設(shè)置 101
3.4.5 動態(tài)面板固定到瀏覽器 101
3.4.6 100%寬度 102
3.4.7 從動態(tài)面板脫離 102
3.4.8 轉(zhuǎn)換為母版 102
3.4.9 轉(zhuǎn)換為動態(tài)面板 102
3.5 類數(shù)據(jù)庫操作：中繼器 103
3.5.1 認識中繼器 103
3.5.2 中繼器數(shù)據(jù)綁定操作 104
3.5.3 中繼器新增數(shù)據(jù)彈出框設(shè)計 108
3.5.4 中繼器新增數(shù)據(jù)操作 110
3.5.5 中繼器刪除數(shù)據(jù)操作 117
3.5.6 中繼器修改數(shù)據(jù)操作 121
3.5.7 中繼器搜索及排序操作 125
3.5.8 中繼器分頁功能 128
3.6 Axure母版一次制作，終身受益 132
3.6.1 創(chuàng)建母版的兩種方式 132
3.6.2 母版的三種拖放行為 135
第4章 移動APP設(shè)計原則 138
4.1 設(shè)計原則 139
4.1.1 原則1：抓住用戶的心，滿足用戶最真實的需求 139
4.1.2 原則2：用合適的方式展示信息 139
4.1.3 原則3：考慮移動互聯(lián)網(wǎng)設(shè)備的特殊性 139
4.1.4 原則4：不要讓用戶尋找 140
4.1.5 原則5：考慮用戶的使用場景 140
4.1.6 原則6：用戶簡單易學(xué) 140
4.1.7 原則7：如何“抄襲”競品 141
4.2 導(dǎo)航布局設(shè)計 141
4.2.1 標(biāo)簽導(dǎo)航 141
4.2.2 頂部導(dǎo)航 141
4.2.3 抽屜式導(dǎo)航 141
4.2.4 九宮格導(dǎo)航 141
4.2.5 列表式導(dǎo)航 142
4.2.6 tab頁簽導(dǎo)航 142
4.2.7 混合組合導(dǎo)航 142
4.3 移動APP建模 143
4.3.1 模擬情景建模 143
4.3.2 真實情景建模 144
第5章 新聞類APP：騰訊新聞APP低保真原型設(shè)計 148
5.1 新聞類APP原型設(shè)計要素 149
5.2 設(shè)計內(nèi)容與思路 150
5.2.1 騰訊新聞版本 150
5.2.2 設(shè)計內(nèi)容 150
5.2.3 設(shè)計思路 151
5.3 標(biāo)簽導(dǎo)航母版制作 151
5.3.1 標(biāo)簽導(dǎo)航母版布局設(shè)計 151
5.3.2 標(biāo)簽導(dǎo)航選中效果設(shè)計 152
5.3.3 標(biāo)簽導(dǎo)航母版引入頁面 154
5.4 “要聞”頁面內(nèi)容布局設(shè)計 157
5.4.1 頂部狀態(tài)欄設(shè)計 157
5.4.2 “要聞”頁面設(shè)計 159
5.5 “科技”頁面內(nèi)容布局設(shè)計 161
5.6 “新聞”模塊頁簽切換效果設(shè)計 162
5.7 “讀書”模塊頁面布局與交互設(shè)計 163
5.7.1 “精選書城”頁面設(shè)計 164
5.7.2 “我的書架”頁面設(shè)計 168
5.8 爛筆頭筆記——新聞類APP 170
第6章 電商類APP：手機淘寶APP高保真原型設(shè)計 171
6.1 電商類APP原型設(shè)計要素 172
6.2 設(shè)計內(nèi)容與思路 174
6.2.1 手機淘寶APP版本 174
6.2.2 設(shè)計內(nèi)容 174
6.2.3 設(shè)計思路 174
6.3 底部標(biāo)簽導(dǎo)航設(shè)計 175
6.3.1 標(biāo)簽導(dǎo)航布局設(shè)計 175
6.3.2 標(biāo)簽導(dǎo)航交互設(shè)計 178
6.4 “首頁”模塊布局與交互設(shè)計 181
6.4.1 “首頁”頁面內(nèi)容布局設(shè)計 181
6.4.2 海報輪播效果交互設(shè)計 183
6.5 “微淘”模塊布局與交互設(shè)計 184
6.5.1 “微淘”頁面內(nèi)容布局設(shè)計 184
6.5.2 頁簽切換效果交互設(shè)計 186
6.6 “社區(qū)”模塊布局設(shè)計 189
6.7 “購物車”模塊布局與交互設(shè)計 190
6.7.1 “購物車”頁面內(nèi)容布局設(shè)計 190
6.7.2 商品列表上下滑動效果 192
6.8 “我的淘寶”模塊布局設(shè)計 194
6.9 爛筆頭筆記——電商類APP 196
第7章 金融類APP：支付寶APP低保真原型設(shè)計 197
7.1 金融類APP原型設(shè)計要素 198
7.2 設(shè)計內(nèi)容與思路 199
7.2.1 支付寶APP版本 199
7.2.2 設(shè)計內(nèi)容 199
7.2.3 設(shè)計思路 199
7.3 “支付寶”模塊交互設(shè)計 200
7.3.1 九宮格導(dǎo)航設(shè)計 200
7.3.2 海報輪播效果設(shè)計 204
7.4 余額寶界面交互設(shè)計 205
7.4.1 界面布局設(shè)計 205
7.4.2 界面上下滑動設(shè)計 208
7.5 中繼器顯示余額寶轉(zhuǎn)入記錄設(shè)計 211
7.6 余額寶轉(zhuǎn)入界面設(shè)計 214
7.7 爛筆頭筆記——金融類APP 220
第8章 生鮮類APP：愛鮮蜂APP高保真原型設(shè)計 221
8.1 生鮮類APP原型設(shè)計要素 222
8.2 設(shè)計內(nèi)容與思路 223
8.2.1 愛鮮蜂APP版本 223
8.2.2 設(shè)計內(nèi)容 223
8.2.3 設(shè)計思路 223
8.3 “首頁”模塊交互設(shè)計 226
8.3.1 “首頁”界面布局設(shè)計 226
8.3.2 海報輪播效果制作 227
8.4 “鮮奶即遞”詳情設(shè)計 228
8.5 “閃送超市”模塊交互設(shè)計 233
8.5.1 界面布局設(shè)計 234
8.5.2 手風(fēng)琴效果制作 235
8.6 爛筆頭筆記——生鮮類APP 237
第9章 教育類APP：猿題庫APP高保真原型設(shè)計 238
9.1 教育類APP原型設(shè)計要素 239
9.2 設(shè)計內(nèi)容與思路 240
9.2.1 猿題庫APP版本 241
9.2.2 設(shè)計內(nèi)容 241
9.2.3 設(shè)計思路 241
9.3 “練習(xí)”模塊交互設(shè)計 241
9.3.1 標(biāo)簽導(dǎo)航母版設(shè)計 241
9.3.2 “練習(xí)”界面布局設(shè)計 246
9.3.3 海報輪播效果制作 247
9.4 “語文”練習(xí)詳情設(shè)計 248
9.5 “試卷”模塊交互設(shè)計 251
9.5.1 “試卷”內(nèi)容設(shè)計 252
9.5.2 界面上下滑動效果制作 253
9.6 “發(fā)現(xiàn)”模塊布局設(shè)計 256
9.7 “我”模塊布局設(shè)計 257
9.8 爛筆頭筆記——教育類APP 257
第10章 娛樂段子類APP：糗事百科APP高保真原型設(shè)計 259
10.1 娛樂段子類APP原型設(shè)計要素 260
10.2 設(shè)計內(nèi)容與思路 261
10.2.1 糗事百科APP版本 261
10.2.2 設(shè)計內(nèi)容 261
10.2.3 設(shè)計思路 261
10.3 底部標(biāo)簽導(dǎo)航設(shè)計 262
10.4 “糗事”模塊頁面上下滑動效果設(shè)計 266
10.5 “糗友圈”模塊頁簽切換效果設(shè)計 269
10.6 “發(fā)現(xiàn)、小紙條”模塊交互設(shè)計 273
10.7 “我、登錄”模塊交互設(shè)計 274
10.8 爛筆頭筆記——娛樂段子類APP 277
注：以下附錄內(nèi)容讀者可掃描封底二維碼下載獲得。
附錄A 實戰(zhàn)：京東登錄表單原型設(shè)計 279
附錄A.1 新建工程與欄目頁面 279
附錄A.2 繪制用戶名和密碼輸入框 280
附錄A.3 登錄方式設(shè)計 283
附錄B 實戰(zhàn)：簡易計算器原型設(shè)計 286
附錄C 實戰(zhàn)：京東商城首頁原型設(shè)計 291
附錄C.1 首頁布局設(shè)計 291
附錄C.2 手風(fēng)琴式菜單效果 294
附錄C.3 導(dǎo)航菜單移入移出時效果 299
附錄C.4 海報輪播效果 300
附錄D 實戰(zhàn)：智聯(lián)招聘APP原型設(shè)計 304
附錄D.1 智聯(lián)招聘APP版本及設(shè)計內(nèi)容 304
附錄D.2 智聯(lián)招聘標(biāo)簽導(dǎo)航設(shè)計 304
附錄D.3 智聯(lián)招聘的“職位”模塊布局設(shè)計 306
附錄D.4 招聘內(nèi)容滑動效果 310