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

第1章 走進Axure RP世界：了解原型設計 1
1.1 什么是 Axure RP 2
1.1.1 什么是原型設計 2
1.1.2 常用原型設計工具 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ī)劃欄目結構 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ā)布設置、發(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 靈活的窗口和鼠標 71
2.3.1 窗口函數(shù) 71
2.3.2 鼠標函數(shù) 74
2.4 多變的數(shù)字和字符串 75
2.4.1 數(shù)字函數(shù) 75
2.4.2 字符串函數(shù) 76
2.5 種類繁多的數(shù)學和日期 77
2.5.1 數(shù)學函數(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交互條件設置 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 調整動態(tài)面板的大小以適合內容 101
3.4.4 動態(tài)面板的滾動欄設置 101
3.4.5 動態(tài)面板固定到瀏覽器 101
3.4.6 100%寬度 102
3.4.7 從動態(tài)面板脫離 102
3.4.8 轉換為母版 102
3.4.9 轉換為動態(tài)面板 102
3.5 類數(shù)據(jù)庫操作：中繼器 103
3.5.1 認識中繼器 103
3.5.2 中繼器數(shù)據(jù)綁定操作 104
3.5.3 中繼器新增數(shù)據(jù)彈出框設計 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設計原則 138
4.1 設計原則 139
4.1.1 原則1：抓住用戶的心，滿足用戶最真實的需求 139
4.1.2 原則2：用合適的方式展示信息 139
4.1.3 原則3：考慮移動互聯(lián)網(wǎng)設備的特殊性 139
4.1.4 原則4：不要讓用戶尋找 140
4.1.5 原則5：考慮用戶的使用場景 140
4.1.6 原則6：用戶簡單易學 140
4.1.7 原則7：如何“抄襲”競品 141
4.2 導航布局設計 141
4.2.1 標簽導航 141
4.2.2 頂部導航 141
4.2.3 抽屜式導航 141
4.2.4 九宮格導航 141
4.2.5 列表式導航 142
4.2.6 tab頁簽導航 142
4.2.7 混合組合導航 142
4.3 移動APP建模 143
4.3.1 模擬情景建模 143
4.3.2 真實情景建模 144
第5章 新聞類APP：騰訊新聞APP低保真原型設計 148
5.1 新聞類APP原型設計要素 149
5.2 設計內容與思路 150
5.2.1 騰訊新聞版本 150
5.2.2 設計內容 150
5.2.3 設計思路 151
5.3 標簽導航母版制作 151
5.3.1 標簽導航母版布局設計 151
5.3.2 標簽導航選中效果設計 152
5.3.3 標簽導航母版引入頁面 154
5.4 “要聞”頁面內容布局設計 157
5.4.1 頂部狀態(tài)欄設計 157
5.4.2 “要聞”頁面設計 159
5.5 “科技”頁面內容布局設計 161
5.6 “新聞”模塊頁簽切換效果設計 162
5.7 “讀書”模塊頁面布局與交互設計 163
5.7.1 “精選書城”頁面設計 164
5.7.2 “我的書架”頁面設計 168
5.8 爛筆頭筆記——新聞類APP 170
第6章 電商類APP：手機淘寶APP高保真原型設計 171
6.1 電商類APP原型設計要素 172
6.2 設計內容與思路 174
6.2.1 手機淘寶APP版本 174
6.2.2 設計內容 174
6.2.3 設計思路 174
6.3 底部標簽導航設計 175
6.3.1 標簽導航布局設計 175
6.3.2 標簽導航交互設計 178
6.4 “首頁”模塊布局與交互設計 181
6.4.1 “首頁”頁面內容布局設計 181
6.4.2 海報輪播效果交互設計 183
6.5 “微淘”模塊布局與交互設計 184
6.5.1 “微淘”頁面內容布局設計 184
6.5.2 頁簽切換效果交互設計 186
6.6 “社區(qū)”模塊布局設計 189
6.7 “購物車”模塊布局與交互設計 190
6.7.1 “購物車”頁面內容布局設計 190
6.7.2 商品列表上下滑動效果 192
6.8 “我的淘寶”模塊布局設計 194
6.9 爛筆頭筆記——電商類APP 196
第7章 金融類APP：支付寶APP低保真原型設計 197
7.1 金融類APP原型設計要素 198
7.2 設計內容與思路 199
7.2.1 支付寶APP版本 199
7.2.2 設計內容 199
7.2.3 設計思路 199
7.3 “支付寶”模塊交互設計 200
7.3.1 九宮格導航設計 200
7.3.2 海報輪播效果設計 204
7.4 余額寶界面交互設計 205
7.4.1 界面布局設計 205
7.4.2 界面上下滑動設計 208
7.5 中繼器顯示余額寶轉入記錄設計 211
7.6 余額寶轉入界面設計 214
7.7 爛筆頭筆記——金融類APP 220
第8章 生鮮類APP：愛鮮蜂APP高保真原型設計 221
8.1 生鮮類APP原型設計要素 222
8.2 設計內容與思路 223
8.2.1 愛鮮蜂APP版本 223
8.2.2 設計內容 223
8.2.3 設計思路 223
8.3 “首頁”模塊交互設計 226
8.3.1 “首頁”界面布局設計 226
8.3.2 海報輪播效果制作 227
8.4 “鮮奶即遞”詳情設計 228
8.5 “閃送超市”模塊交互設計 233
8.5.1 界面布局設計 234
8.5.2 手風琴效果制作 235
8.6 爛筆頭筆記——生鮮類APP 237
第9章 教育類APP：猿題庫APP高保真原型設計 238
9.1 教育類APP原型設計要素 239
9.2 設計內容與思路 240
9.2.1 猿題庫APP版本 241
9.2.2 設計內容 241
9.2.3 設計思路 241
9.3 “練習”模塊交互設計 241
9.3.1 標簽導航母版設計 241
9.3.2 “練習”界面布局設計 246
9.3.3 海報輪播效果制作 247
9.4 “語文”練習詳情設計 248
9.5 “試卷”模塊交互設計 251
9.5.1 “試卷”內容設計 252
9.5.2 界面上下滑動效果制作 253
9.6 “發(fā)現(xiàn)”模塊布局設計 256
9.7 “我”模塊布局設計 257
9.8 爛筆頭筆記——教育類APP 257
第10章 娛樂段子類APP：糗事百科APP高保真原型設計 259
10.1 娛樂段子類APP原型設計要素 260
10.2 設計內容與思路 261
10.2.1 糗事百科APP版本 261
10.2.2 設計內容 261
10.2.3 設計思路 261
10.3 底部標簽導航設計 262
10.4 “糗事”模塊頁面上下滑動效果設計 266
10.5 “糗友圈”模塊頁簽切換效果設計 269
10.6 “發(fā)現(xiàn)、小紙條”模塊交互設計 273
10.7 “我、登錄”模塊交互設計 274
10.8 爛筆頭筆記——娛樂段子類APP 277
注：以下附錄內容讀者可掃描封底二維碼下載獲得。
附錄A 實戰(zhàn)：京東登錄表單原型設計 279
附錄A.1 新建工程與欄目頁面 279
附錄A.2 繪制用戶名和密碼輸入框 280
附錄A.3 登錄方式設計 283
附錄B 實戰(zhàn)：簡易計算器原型設計 286
附錄C 實戰(zhàn)：京東商城首頁原型設計 291
附錄C.1 首頁布局設計 291
附錄C.2 手風琴式菜單效果 294
附錄C.3 導航菜單移入移出時效果 299
附錄C.4 海報輪播效果 300
附錄D 實戰(zhàn)：智聯(lián)招聘APP原型設計 304
附錄D.1 智聯(lián)招聘APP版本及設計內容 304
附錄D.2 智聯(lián)招聘標簽導航設計 304
附錄D.3 智聯(lián)招聘的“職位”模塊布局設計 306
附錄D.4 招聘內容滑動效果 310