設計必修課：Axure RP 9互聯網產品原型設計（微課視頻版）

盧斌
雲南美術家協會會員，雲南藝術學院任教，致力於視覺藝術與設計、設計形態學領域的研究和探索，設計作品多次獲國家級省級獎項。從事UI設計多年，有豐富的移動UI設計經驗，熟練使用Axure RP和Adobe XD等設計軟件，曾出版Indesing CS6完全自學一本通等圖書。

第1章熟悉Axure RP 9
1.1 關於Axure RP 9 1
1.2 Axure 的主要功能 3
1.3 Axure RP 9的安裝與啟動 5
1.3.1 下載Axure RP 9 5
1.3.2 應用案例——安裝Axure RP 9 5
1.3.3 漢化與啟動Axure RP 9 6
1.4 Axure RP 9的操作界面 7
1.4.1 菜單欄 7
1.4.2 工具欄 9
1.4.3 功能區 11
1.4.4 工作區 14
1.5 Axure RP 9的幫助資源 14
1.6 查看視圖 15
應用案例——查看視圖 15
1.7 標尺 16
1.8 輔助線 16
1.8.1 輔助線的分類 16
1.8.2 編輯輔助線 17
1.8.3 創建輔助線 19
1.8.4 應用案例——創建輔助線 19
1.8.5 設置輔助線 20
1.9 網格 21
1.9.1 顯示網格 21
1.9.2 網格設置 21
1.10 設置遮罩 21
1.11 對齊/分佈對象 22
1.11.1 對齊對象 22
1.11.2 分佈對象 23
1.12 答疑解惑 23
1.12.1 產品原型設計 24
1.12.2 Axure在產品原型製作中的主要應用 24
1.13 總結擴展 24
1.13.1 本章小結 24
1.13.2 擴展練習——卸載Axure RP 9 25

第2章Axure RP 9的基本操作
2.1 新建文件 26
2.1.1 新建Axure文件 26
2.1.2 應用案例——新建iPhone 11 Pro尺寸的原型文件 26
2.1.3 紙張尺寸與設置 27
2.1.4 新建團隊項目文件 28
2.2 存儲文件 28
2.2.1 保存文件 29
2.2.2 另存文件 29
2.2.3 存儲格式 29
2.3 自動備份 30
2.3.1 啟動自動備份 30
2.3.2 從備份中恢復 30
2.4 打開文件 31
2.4.1 打開文件的方法 31
2.4.2 打開團隊項目 32
2.5 從RP文件導入 32
2.5.1 使用“從RP文件導入”命令 32
2.5.2 應用案例——導入RP文件素材 32
2.6 對象的操作 33
2.6.1 選擇對象 33
2.6.2 移動和縮放對象 34
2.6.3 旋轉對象 35
2.6.4 複製對象 35
2.6.5 剪切和刪除對象 37
2.7 還原與恢復 37
2.7.1 撤銷 37
2.7.2 重做 37
2.8 答疑解惑 38
2.8.1 歡迎界面中的鏈接入口 38
2.8.2 導覽文件和最近編輯文件 38
2.9 總結擴展 39
2.9.1 本章小結 39
2.9.2 擴展練習——通過複製的方法製作水平導航 39

第3章頁面管理
3.2 管理頁面 40
3.2.1 添加頁面 40
3.2.2 重命名頁面 42
3.2.3 移動頁面 43
3.2.4 查找頁面 43
3.3 編輯頁面 43
3.3.1 使用頁面編輯區 44
3.3.2 頁面樣式 44
3.3.3 頁面說明 48
3.4 自適應視圖 50
3.4.1 設置自適應視圖 51
3.4.2 應用案例——添加自適應視圖 52
3.5 圖表類型 53
3.6 生成流程圖 53
3.6.1 生成流程圖的方法 53
3.6.2 應用案例——生成流程圖 54
3.7 繪畫工具 54
3.7.1 繪製圖形 54
3.7.2 轉換錨點類型 55
3.7.3 編輯繪畫工具 56
3.7.4 應用案例——使用繪畫工具繪製圖形 57
3.8 組合對象 58
3.8.1 組合對象的方法 58
3.8.2 取消組合 59
3.9 鎖定對象 59
3.10 隱藏對象 60
3.11 答疑解惑 61
3.11.1 保留頁面文件的舊版本 61
3.11.2 如何處理原型中的文字在不同瀏覽器上效果不一樣的情況？62
3.12 總結擴展 62
3.12.1 本章小結 62
3.12.2 擴展練習——使用元件製作一個標籤面板 63

第4章使用元件
4.1 “元件”面板 64
4.2 基本元件 65
4.2.1 矩形 65
4.2.2 圖片 66
4.2.3 佔位符 68
4.2.4 按鈕 68
4.2.5 標題 68
4.2.6 文本標籤和文本段落 69
4.2.7 應用案例——製作商品購買頁 69
4.2.8 水平線和垂直線 70
4.2.9 熱區 70
4.2.10 動態面板 71
4.2.11 應用案例——使用動態面板顯示隱藏對象 73
4.2.12 內聯框架 74
4.2.13 中繼器 75
4.2.14 應用案例——使用中繼器製作活動列表頁 75
4.3 表單元件 76
4.3.1 文本框 76
4.3.2 文本域 77
4.3.3 下拉列表 78
4.3.4 列錶框 79
4.3.5 複選框 79
4.3.6 單選按鈕 80
4.3.7 應用案例——製作淘寶會員登錄頁 80
4.4 菜單|表格元件 81
4.4.1 樹 81
4.4.2 應用案例——美化樹狀菜單的圖標 82
4.4.3 表格 83
4.4.4 水平菜單 84
4.4.5 垂直菜單 85
4.5 標記元件 86
4.5.1 快照 86
4.5.2 水平箭頭和垂直箭頭 87
4.5.3 便簽 87
4.5.4 圓形標記和水滴標記 88
4.6 流程圖 88
4.6.1 矩形和矩形組 89
4.6.2 應用案例——設計製作手機產業流程圖 89
4.6.3 圓角矩形和圓角矩形組 90
4.6.4 斜角矩形和菱形 90
4.6.5 文件和文件組 90
4.6.6 括弧 91
4.6.7 半圓形 91
4.6.8 三角形 91
4.6.9 梯形 91
4.6.10 橢圓形 92
4.6.11 六邊形 92
4.6.12 平行四邊形 92
4.6.13 角色 92
4.6.14 數據庫 92
4.6.15 快照 92
4.6.16 圖片 92
4.6.17 新增流程圖元件 93
4.7 圖標元件 93
4.8 Sample UI Patterns 94
4.8.1 按功能分組 94
4.8.2 應用案例——製作手風琴效果的展示圖片 95
4.9 答疑解惑 96
4.9.1 如何製作樹狀菜單元件的圖標 96
4.9.2 盡量用一個元件完成功能 96
4.10 總結擴展 96
4.10.1 本章小結 96
4.10.2 擴展練習——設計製作註冊頁原型 97

第5章元件的屬性與樣式
5.1 元件的轉換 98
5.1.1 轉換為形狀 98
5.1.2 轉換為圖片 99
5.2 元件的屬性 99
5.2.1 元件說明 100
5.2.2 編輯元件 100
5.2.3 元件的運算 101
5.2.4 應用案例——製作八卦圖形 102
5.2.5 元件提示 103
5.3 元件的樣式 104
5.3.1 位置和尺寸 104
5.3.2 不透明性 104
5.3.3 排版 105
5.3.4 填充 108
5.3.5 線段 111
5.3.6 陰影 113
5.3.7 圓角 113
5.3.8 邊距 114
5.3.9 應用案例——為商品列表添加樣式 114
5.3.10 數據集 115
5.4 創建和管理樣式 116
5.4.1 創建元件樣式 116
5.4.2 應用案例——創建元件樣式 117
5.4.3 應用案例——應用元件樣式 118
5.4.4 樣式的編輯與修改 119
5.5 格式刷 120
5.5.1 使用“格式刷”命令 120
5.5.2 應用案例——使用格式刷為表格添加樣式 121
5.6 元件的管理 121
5.7 答疑解惑 122
5.7.1 製作頁面前的準備工作 122
5.7.2 使用字體圖標而不是圖片 123
5.8 總結擴展 123
5.8.1 本章小結 123
5.8.2 擴展練習——製作熱門車型列表頁 123

第6章母版與第三方元件庫
6.1 母版的概念 125
6.1.1 母版的應用 125
6.1.2 使用母版的好處 126
6.2 “母版”面板 126
6.2.1 添加母版 126
6.2.2 添加文件夾 127
6.2.3 查找母版 127
6.3 創建與編輯母版 128
6.3.1 創建母版 128
6.3.2 應用案例——新建iOS系統母版 128
6.3.3 創建子母版 129
6.3.4 應用案例——新建iOS系統佈局母版 129
6.3.5 刪除母版 130
6.4 轉換為母版 130
6.5 母版的使用情況 131
6.5.1 拖放行為 131
6.5.2 添加到頁面中 134
6.5.3 從頁面中移除 135
6.5.4 使用情況報告 135
6.6 使用第三方元件庫 135
6.6.1 下載元件庫 135
6.6.2 載入元件庫 136
6.6.3 移除元件庫 137
6.7 創建元件庫 137
6.7.1 了解元件庫界面 137
6.7.2 應用案例——創建圖標元件庫 138
6.7.3 元件庫的圖標樣式 139
6.7.4 編輯元件庫 139
6.7.5 添加圖片文件夾 140
6.8 答疑解惑 140
6.8.1 不要復制對象，而是轉換為母版 140
6.8.2 如何將較大的組合轉換為母版 141
6.9 總結擴展 141
6.9.1 本章小結 141
6.9.2 擴展練習——創建微信元件庫 141

第7章簡單交互設計
7.1 了解“交互”面板 142
7.2 頁面交互基礎 143
7.2.1 頁面交互事件 143
7.2.2 打開鏈接 144
7.2.3 應用案例—— 打開頁面鏈接 145
7.2.4 關閉窗口 146
7.2.5 在框架中打開鏈接 146
7.2.6 滾動到元件 147
7.3 元件交互基礎 147
7.3.1 元件交互事件 147
7.3.2 顯示/隱藏 148
7.3.3 應用案例——設計製作顯示/隱藏圖片 150
7.3.4 應用案例——為“動態面板”元件添加樣式 151
7.3.5 應用案例——製作輪播圖 152
7.3.6 設置文本 152
7.3.7 設置面板狀態 153
7.3.8 應用案例——為元件添加文本 154
7.3.9 應用案例—— 製作按鈕交互狀態 154
7.3.10 設置選中 155
7.3.11 啟用/禁用 156
7.3.12 移動 156
7.3.13 應用案例——設計製作切換案例 156
7.3.14 旋轉 157
7.3.15 應用案例——製作抽獎幸運轉盤 157
7.3.16 設置尺寸 158
7.3.17 置於頂層/底層 158
7.3.18 設置不透明 158
7.3.19 獲取焦點 159
7.3.20 展開/收起樹節點 159
7.4 設置交互樣式 159
7.4.1 為元件設置交互樣式 159
7.4.2 應用案例——為元件設置交互樣式 160
7.4.3 應用案例——製作動態按鈕 161
7.5 答疑解惑 161
7.5.1 如何通過“動態面板”實現焦點圖片效果 161
7.5.2 使用“設置尺寸”動作完成進度條的製作 162
7.6 總結擴展 163
7.6.1 本章小結 163
7.6.2 擴展練習—— 設計與製作按鈕交互樣式 163

第8章高級交互設計
8.1 變量 164
8.1.1 全局變量 164
8.1.2 應用案例——使用全局變量 165
8.1.3 局部變量 166
8.1.4 添加條件 168
8.1.5 應用案例——設計與製作用戶登錄界面 171
8.1.6 使用表達式 172
8.1.7 應用案例——使用變量完成加法運算 172
8.1.8 應用案例——製作滑動解鎖頁面 173
8.1.9 應用案例——為滑動解鎖設置情形 174
8.1.10 應用案例——查看滑動解鎖的效果 175
8.2 中繼器的組成 175
8.2.1 數據集 175
8.2.2 項目交互 175
8.2.3 中繼器元件動作 176
8.3 中繼器動作 176
8.3.1 設置分頁與數量 176
8.3.2 應用案例——使用中繼器添加分頁 177
8.3.3 添加和移除排序 178
8.3.4 應用案例——使用中繼器設置排序 179
8.3.5 添加和移除篩選 179
8.3.6 添加和移除項目 180
8.3.7 應用案例——使用中繼器實現自增 180
8.3.8 項目列表操作 181
8.3.9 應用案例——使用中繼器顯示頁碼1 181
8.3.10 應用案例——使用中繼器顯示頁碼2 182
8.4 其他動作 182
8.5 函數 183
8.5.1 了解函數 183
8.5.2 應用案例——使用時間函數 184
8.5.3 中繼器/數據集 184
8.5.4 元件函數 185
8.5.5 應用案例——設計與製作寶貝詳情頁1 185
8.5.6 應用案例——設計與製作寶貝詳情頁2 186
8.5.7 頁面函數 186
8.5.8 窗口函數 187
8.5.9 鼠標指針函數 187
8.5.10 應用案例——製作產品局部放大草圖 187
8.5.11 應用案例——為產品局部放大原型添加交互1 188
8.5.12 應用案例——為產品局部放大原型添加交互2 189
8.5.13 數字函數 189
8.5.14 字符串函數 190
8.5.15 數學函數 191
8.5.16 應用案例——設計製作計算器效果 192
8.5.17 日期函數 192
8.5.18 應用案例——使用日期函數1 194
8.5.19 應用案例——使用日期函數2 194
8.6 答疑解惑 195
8.6.1 盡量使用簡潔的交互效果 195
8.6.2 什麼情況下會使用全局變量 195
8.7 總結擴展 196
8.7.1 本章小結 196
8.7.2 擴展練習——設計製作商品購買頁面 196

第9章團隊合作
9.1 使用團隊項目 197
9.2 創建團隊項目 197
9.3 打開團隊項目 199
9.4 加入團隊項目 200
9.5 編輯團隊項目 201
9.6 “團隊”菜單 203
9.7 Axure 雲 205
9.7.1 創建Axure雲賬號 205
9.7.2 發佈到Axure雲 206
9.8 答疑解惑 208
9.8.1 團隊協作和使用版本管理工具的作用 208
9.8.2 Axure RP 9共享項目的幾種頁面狀態 208
9.9 總結擴展 208
9.9.1 本章小結 208
9.9.2 擴展練習——完成團隊項目的簽入與簽出 209

第10章發布與輸出
10.1 預覽原型 210
10.2 預覽選項 211
10.3 生成器 211
10.3.1 HTML生成器 212
10.3.2 Word生成器 214
10.3.3 更多生成器 216
10.4 答疑解惑 217
10.4.1 製作的App原型如何在手機上演示 217
10.4.2 如何將原型導出為圖片 217
10.5 總結擴展 218
10.5.1 本章小結 218
10.5.2 擴展練習—— 發布一個HTML文件 218

第11章設計與製作PC端網頁原型
11.1 設計與製作QQ郵箱加載頁面 220
11.1.1 案例描述 220
11.1.2 案例分析 221
11.1.3 製作步驟 222
11.2 設計與製作新浪微博評論頁面 223
11.2.1 案例描述 224
11.2.2 案例分析 224
11.2.3 製作步驟 225
11.3 設計與製作寶貝分類頁面 226
11.3.1 案例描述 226
11.3.2 案例分析 227
11.3.3 製作步驟 228
11.4 設計與製作課程購買頁面 229
11.4.1 案例描述 229
11.4.2 案例分析 230
11.4.3 製作步驟 230
11.5 設計與製作手機號碼輸入頁面 231
11.5.1 案例描述 232
11.5.2 案例分析 232
11.5.3 製作步驟 233
11.6 設計與製作課程選擇頁面 234
11.6.1 案例描述 234
11.6.2 案例分析 235
11.6.3 製作步驟 236
11.7 設計與製作瀏覽信息頁面 237
11.7.1 案例描述 237
11.7.2 案例分析 238
11.7.3 製作步驟 239
11.8 設計與製作重置密碼頁面 240
11.8.1 案例描述 241
11.8.2 案例分析 241
11.8.3 製作步驟 244

第12章設計與製作移動端網頁原型
12.1 設計與製作App啟動頁面原型 247
12.1.1 案例描述 247
12.1.2 案例分析 248
12.1.3 製作步驟 250
12.2 設計與製作App會員系統頁面原型 251
12.2.1 案例描述 251
12.2.2 案例分析 252
12.2.3 製作步驟 252
12.3 設計與製作App首頁原型 253
12.3.1 案例描述 254
12.3.2 案例分析 254
12.3.3 製作步驟 255
12.4 設計與製作App設計師頁面原型 256
12.4.1 案例描述 256
12.4.2 案例分析 256
12.4.3 製作步驟 256
12.5 設計與製作App頁面導航交互 258
12.5.1 案例描述 258
12.5.2 案例分析 258
12.5.3 製作步驟 260
12.6 設計與製作App註冊/登錄頁面交互 261
12.6.1 案例描述 262
12.6.2 案例分析 262
12.6.3 製作步驟 262
12.7 設計與製作App主頁面交互 263
12.7.1 案例描述 264
12.7.2 案例分析 264
12.7.3 製作步驟 266
附錄A Axure RP 9常用快捷鍵 268
附錄B Axure RP 9與Photoshop 270
附錄C Axure RP 9與HyperSnap 273