Axure RP10原型設計完全自學一本通

第1章 熟悉Axure RP 10
1.1 關於Axure RP 10 1
1.2 Axure RP 10的主要功能 3
1.2.1 繪制網站構架圖 3
1.2.2 繪制示意圖 3
1.2.3 繪制流程圖 4
1.2.4 實現交互設計 4
1.2.5 輸出網站原型 4
1.2.6 輸出Word 格式的規格文件 4
1.3 軟件的下載、安裝、漢化與啟動 4
1.3.1 下載並安裝Axure RP 10 4
應用案例——安裝Axure RP 10 5
1.3.2 漢化與啟動Axure RP 10 7
1.4 Axure RP 10的工作界面 7
1.4.1 菜單欄 8
1.4.2 工具欄 10
1.4.3 面板 12
1.4.4 工作區 15
1.5 自定義工作界面 16
1.5.1 自定義工具欄 16
1.5.2 自定義工作面板 17
1.5.3 使用單鍵快捷鍵 18
1.6 使用Axure RP 10的幫助資源 19
1.7 查看視圖 20
應用案例——查看視圖 20
1.8 使用標尺 21
1.9 參考線 22
1.9.1 參考線的分類 22
1.9.2 編輯參考線 23
1.9.3 添加參考線 24
應用案例——添加參考線 24
1.9.4 設置參考線 25
1.10 顯示柵格 25
1.10.1 顯示柵格的方法 26
1.10.2 柵格設置 26
1.11 設置遮罩 27
1.12 對齊/分佈對象 27
1.12.1 對齊對象 27
1.12.2 分佈對象 28
1.13 答疑解惑 29
1.13.1 什麽是產品原型 29
1.13.2 Axure 在產品原型中主要應用在哪些方面 29
1.14 總結擴展 30
1.14.1 本章小結 30
1.14.2 舉一反三——卸載Axure RP 10 30

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

第3章 頁面的管理
3.1 瞭解站點 47
3.2 管理頁面 47
3.2.1 添加和刪除頁面 47
應用案例——新建網站頁面 49
3.2.2 重命名頁面 50
3.2.3 移動頁面 50
3.2.4 搜索頁面 51
3.2.5 剪切、復制和粘貼頁面 51
3.2.6 重復頁面 52
3.3 編輯頁面 52
3.3.1 使用頁面編輯區 52
3.3.2 頁面樣式 53
3.3.3 頁面註釋 57
3.4 自適應視圖 59
應用案例——設置自適應視圖 61
3.5 圖表類型 63
3.6 創建流程圖 63
應用案例——創建流程圖 64
3.7 組合對象 65
3.7.1 組合對象的方法 65
3.7.2 取消組合 65
3.8 鎖定對象 66
3.9 隱藏對象 67
3.10 答疑解惑 67
3.10.1 保留頁面文本的舊版本 67
3.10.2 如何處理原型中的文字在不同瀏覽器上效果不一樣的情況 68
3.11 總結擴展 69
3.11.1 本章小結 69
3.11.2 舉一反三——使用元件製作一個標簽面板 69

第4章 使用元件
4.1 “元件庫”面板 71
4.2 基本元件 72
4.2.1 常用元件 72
應用案例——製作商品購買頁 80
4.2.2 互動元件 82
應用案例——使用動態面板隱藏對象 87
應用案例——為中繼器數據集添加行和列 91
應用案例——使用中繼器製作產品頁面 94
4.2.3 表單元件 96
應用案例——製作淘寶會員登錄頁 101
4.2.4 菜單和表格 102
應用案例——美化樹狀菜單的圖標 105
4.2.5 標記元件 108
4.3 Flow（流程圖）元件 110
4.3.1 矩形和矩形組 111
應用案例——製作手機產業流程圖 111
4.3.2 圓角矩形和圓角矩形組 113
4.3.3 斜角矩形和菱形 113
4.3.4 文件和文件組 114
4.3.5 括號 114
4.3.6 半圓 114
4.3.7 三角形 114
4.3.8 梯形 115
4.3.9 橢圓 115
4.3.10 六邊形 115
4.3.11 平行四邊形 115
4.3.12 角色 116
4.3.13 數據庫 116
4.3.14 快照 116
4.3.15 圖片 116
4.3.16 新增流程圖元件 117
4.4 Icons（圖標）元件 117
4.5 Sample UI Patterns 118
應用案例——製作幻燈片效果 118
4.6 Sample Form Patterns 120
4.7 使用“鋼筆工具” 120
應用案例——使用“鋼筆工具”繪制圖形 122
4.8 答疑解惑 124
4.8.1 如何製作樹狀菜單元件的圖標 124
4.8.2 盡量用一個元件完成功能 124
4.9 總結擴展 125
4.9.1 本章小結 125
4.9.2 舉一反三——製作一個手機展示原型 125

第5章 元件的屬性和樣式
5.1 轉換元件 126
5.1.1 轉換為形狀 126
5.1.2 轉換為圖片 127
5.2 元件的屬性 127
5.2.1 元件說明 128
5.2.2 編輯元件 128
5.2.3 元件的運算 130
應用案例——製作iOS系統功能圖標 131
5.2.4 元件提示 132
5.3 使用“樣式”面板 132
5.3.1 元件命名 133
5.3.2 顯示/隱藏元件 133
5.3.3 對齊與分佈 133
5.3.4 位置和尺寸 134
5.3.5 圓角 134
5.3.6 適應文本寬度/適應文本高度 135
5.3.7 不透明度 135
5.3.8 排版 136
5.3.9 填充 139
5.3.10 邊框 142
5.3.11 陰影 143
5.3.12 邊距 144
應用案例——為商品列表添加樣式 145
5.3.13 數據集 146
5.4 創建和管理樣式 148
5.4.1 創建元件樣式 148
應用案例——創建並應用元件樣式 149
5.4.2 樣式的編輯與修改 150
5.5 格式刷 151
應用案例——使用格式刷為表格添加樣式 152
5.6 “大綱”面板 152
5.7 答疑解惑 153
5.7.1 製作頁面前的準備工作 153
5.7.2 使用字體圖標而不是圖片 153
5.8 總結擴展 154
5.8.1 本章小結 154
5.8.2 舉一反三——製作熱門車型列表頁 154

第6章 母版與第三方元件庫
6.1 母版的概念 156
6.1.1 母版的應用 156
6.1.2 使用母版的好處 157
6.2 “母版”面板 157
6.2.1 添加母版 157
6.2.2 添加文件夾 158
6.2.3 查找母版 159
6.3 創建與編輯母版 159
6.3.1 創建母版 159
應用案例——製作iOS 系統母版 160
6.3.2 創建子母版 161
應用案例——新建iOS 系統佈局母版 161
6.3.3 刪除母版 163
6.4 轉換為母版 163
6.5 母版的使用情況 163
6.5.1 拖放行為 164
6.5.2 添加到頁面 167
6.5.3 從頁面移除 168
6.5.4 使用報告 169
6.6 使用第三方元件庫 169
6.6.1 下載元件庫 169
6.6.2 加載元件庫 170
6.6.3 移除元件庫 170
6.7 創建元件庫 171
6.7.1 新建元件庫 171
應用案例——創建圖標元件庫 172
6.7.2 元件庫的圖標樣式 173
6.7.3 編輯元件庫 174
6.7.4 導入圖片文件夾 175
6.8 答疑解惑 175
6.8.1 不要復制對象，而是轉換為母版 175
6.8.2 如何將較大的組合轉換為母版 176
6.9 總結擴展 176
6.9.1 本章小結 176
6.9.2 舉一反三——創建圖標組元件庫 176

第7章 簡單交互設計
7.1 瞭解“交互”面板 178
7.2 頁面交互基礎 179
7.2.1 頁面交互事件 179
7.2.2 打開鏈接 180
應用案例——打開頁面鏈接 182
7.2.3 關閉窗口 183
7.2.4 在框架內打開鏈接 184
7.2.5 滾動到元件（錨鏈接 184
7.3 元件交互基礎 185
7.3.1 元件交互事件 185
7.3.2 顯示/隱藏 186
應用案例——元件的顯示/隱藏 188
7.3.3 設置動態面板狀態 189
應用案例——使用動態面板製作輪播圖 190
7.3.4 設置文本 192
7.3.5 設置圖片 193
應用案例——製作按鈕交互狀態 193
7.3.6 設置選中 194
7.3.7 設置選中下拉列表選項 194
7.3.8 設置錯誤狀態 194
應用案例——製作用戶名輸入錯誤提示 194
7.3.9 啟用/禁用 196
7.3.10 移動 197
應用案例——設計製作切換案例 197
7.3.11 旋轉 198
應用案例——製作抽獎幸運轉盤 199
7.3.12 設置尺寸 200
7.3.13 置頂/置底 200
7.3.14 設置不透明度 200
7.3.15 獲取焦點 201
設置交互樣式效果 202
應用案例——製作動態按鈕 202
7.5 答疑解惑 204
7.5.1 如何通過“動態面板”元件實現焦點圖片效果 205
7.5.2 使用“設置尺寸”動作完成進度條的製作 205
7.6 總結擴展 206
7.6.1 本章小結 206
7.6.2 舉一反三——設計製作按鈕交互樣式 206

第8章 高級交互設計
8.1 變量 208
8.1.1 全局變量 208
應用案例——使用全局變量 209
8.1.2 局部變量 211
8.1.3 添加條件 213
應用案例——設計製作用戶登錄頁面 216
8.2 使用表達式 219
8.2.1 運算符的類型 219
8.2.2 表達式的格式 219
應用案例——製作滑動解鎖頁面 220
應用案例——為滑動解鎖設置情形 221
應用案例——查看滑動解鎖的效果 222
8.3 中繼器的組成 224
8.3.1 項目交互 224
8.3.2 中繼器元件動作 224
8.4 中繼器動作 225
8.4.1 設置分頁與數量 225
應用案例——使用中繼器添加分頁 226
8.4.2 添加和移除排序 227
應用案例——使用中繼器設置排序 228
8.4.3 添加和移除篩選 229
8.4.4 添加和刪除項目 229
應用案例——使用中繼器實現自增 229
8.4.5 項目列表操作 231
應用案例——使用中繼器顯示頁碼 231
8.5 其他動作 234
8.6 函數 235
8.6.1 瞭解函數 235
應用案例——使用時間函數 235
8.6.2 中繼器/數據集函數 237
8.6.3 元件函數 237
應用案例——設計製作商品詳情頁 238
8.6.4 頁面函數 240
8.6.5 窗口函數 240
8.6.6 鼠標指針函數 240
應用案例——設計製作產品局部放大效果 241
8.6.7 數字函數 244
8.6.8 字符串函數 244
8.6.9 數學函數 245
應用案例——設計製作計算器效果 246
8.6.10 日期函數 247
應用案例——使用日期函數 249
8.7 答疑解惑 251
8.7.1 盡量使用簡潔的交互效果 251
8.7.2 什麽情況下會使用全局變量 252
8.8 總結擴展 252
8.8.1 本章小結 252
8.8.2 舉一反三——設計製作商品購買頁面 252

第9章 團隊合作
9.1 使用團隊項目 254
9.1.1 創建團隊項目 254
9.1.2 打開團隊項目 256
9.1.3 加入團隊項目 257
9.1.4 編輯團隊項目 259
9.1.5“ 團隊”菜單 261
9.2 Axure Cloud 263
9.2.1 創建Axure Cloud 賬號 263
9.2.2 發布到Axure Cloud 264
9.3 答疑解惑 267
9.3.1 團隊協作和使用版本管理工具的作用 267
9.3.2 Axure RP 10 共享項目的兩種頁面狀態 267
9.4 總結擴展 267
9.4.1 本章小結 267
9.4.2 舉一反三——完成團隊項目的檢出與檢入 267

第10章 發布於輸出
10.1 發布與輸出 269
10.2 使用生成器 270
10.2.1 HTML 生成器 270
10.2.2 Word 生成器 272
10.2.3 更多生成器 274
10.3 答疑解惑 276
10.3.1 製作的App 原型如何在手機上演示 276
10.3.2 如何將原型導出為圖片 277
10.4 總結擴展 277
10.4.1 本章小結 277
10.4.2 舉一反三——發布生成一個HTML文件 278

第11章 設計製作PC端網頁原型
11.1 設計製作QQ郵箱加載頁面 279
11.1.1 案例分析 279
11.1.2 製作步驟 280
11.2 設計製作微博用戶評論頁面 284
11.2.1 案例分析 285
11.2.2 製作步驟 285
11.3 設計製作商品分類頁面 288
11.3.1 案例分析 288
11.3.2 製作步驟 289
11.4 設計製作課程購買頁面 291
11.4.1 案例分析 291
11.4.2 製作步驟 292
11.5 設計製作課程選擇頁面 294
11.5.1 案例分析 294
11.5.2 製作步驟 294
11.6 設計製作重置密碼頁面 297
11.6.1 案例分析 297
11.6.2 製作步驟 298

第12章 設計製作移動端網頁原型
12.1 設計製作App啟動頁面原型 303
12.1.1 案例分析 304
12.1.2 製作步驟 304
12.2 設計製作App會員系統頁面原型 307
12.2.1 案例分析 307
12.2.2 製作步驟 308
12.3 設計製作App首頁原型 310
12.3.1 案例分析 310
12.3.2 製作步驟 310
12.4 設計製作App設計師頁面原型 312
12.4.1 案例分析 313
12.4.2 製作步驟 313
12.5 設計製作App頁面導航交互 314
12.5.1 案例分析 315
12.5.2 製作步驟 315
12.6 設計製作App註冊/登錄頁面交互 319
12.6.1 案例分析 320
12.6.2 製作步驟 321
12.7 設計製作App主頁面交互 322
12.7.1 案例分析 322
12.7.2 製作步驟 323
附錄A Axure RP 10常用快捷鍵 327
附錄B Axure RP 10與Photoshop 328
附錄C Axure RP 10與HyperSnap 331