Axure RP 8.0基礎培訓教程

狄睿鑫

河北師範大學物聯網研究院產品經理、設計師，51CTO學院簽約講師，企業內部培訓講師，所參與的項目涉獵教育類、電商類、有聲書等類型，對產品設計、項目管理有獨特的見解。所參與設計的E School數字教育平台，在2015巴塞羅那全球智慧城市博覽會暨全球峰會中，榮獲全球智慧城市項目大獎，是自該博覽會創建以來中國第一次獲得的大獎。

 

第1章初識Axure RP 8.0 11

1.1 Axure RP 8.0的用途12

1.2 Axure RP 8.0的工作界面12

1.2.1 菜單欄 13

1.2.2 工具欄 13

1.2.3 功能區——頁面 15

1.2.4 功能區——元件庫 15

1.2.5 功能區——母版 16

1.2.6 功能區——設計區域 16

1.2.7 功能區——檢視 16

1.2.8 功能區——概要 17

1.2.9 賬號的註冊與登錄 17

1.3 文件的操作19

1.3.1 新建文件 19

1.3.2 打開文件 20

1.3.3 保存文件 21

1.3.4 導入頁面 21

1.3.5 導出頁面為圖片 22

1.3.6 自動備份設置 23

1.3.7 從備份中恢復 23

1.4 Axure RP 8.0的基礎配置24

1.4.1 網格 24

1.4.2 輔助線 26

1.4.3 對齊元件 31

1.4.4 自定義設計區域中的輔助元素 32

 

第2章元件庫 35

2.1 基本元件36

2.1.1 矩形類元件 36

2.1.2 佔位符 39

2.1.3 圖片 40

2.1.4 水平線和垂直線 42

2.1.5 熱區 42

2.1.6 課堂案例：設置文字在鼠標指針懸停時的樣式 43

2.2 表單元件44

2.2.1 文本框和多行文本框 44

2.2.2 下拉列錶框 46

2.2.3 列錶框 47

2.2.4 複選框 48

2.2.5 單選按鈕 48

2.2.6 提交按鈕 49

2.2.7 課堂案例：自定義文本框樣式 49

2.3 菜單和表格50

2.3.1 樹狀菜單 50

2.3.2 水平菜單和垂直菜單 51

2.3.3 表格 52

2.4 動態面板53

2.4.1 課堂案例：輪播圖基礎 53

2.4.2 元件介紹 56

2.4.3 課堂案例：“返回頂部”懸浮按鈕 59

2.4.4 課堂案例：滾動消息 60

2.5 內聯框架62

2.5.1 課堂案例：實現菜單跳轉效果 62

2.5.2 元件介紹 63

2.6 中繼器基礎65

2.6.1 課堂案例：基礎學生名單 65

2.6.2 元件介紹 66

2.6.3 課堂案例：完善學生名單 69

2.7 標記元件71

2.7.1 頁面快照 72

2.7.2 便籤和標記 74

2.7.3 箭頭 75

2.8 流程圖元件75

2.8.1 繪製流程圖 75

2.8.2 生成頁面流程圖 76

2.9 課堂練習76

2.9.1 課堂練習：分類導航的水平拖動效果 77

2.9.2 課堂練習：App信息流 77

2.10 課後習題77

2.10.1 課後習題：按鈕的禁用樣式製作 77

2.10.2 課後習題：製作App中的“開關”元件 78

2.10.3 課後習題：切換標籤頁 78

2.10.4 課後習題：訂單列表 78

 

第3章母版 79

3.1 母版基礎80

3.2 母版的應用80

3.2.1 創建母版 80

3.2.2 母版實例 81

3.2.3 母版的拖放行為 81

3.2.4 應用母版 83

3.2.5 移除母版 83

3.3 課後習題：關於母版的思考與練習84

 

第4章交互 85

4.1 交互基礎詳解86

4.1.1 課堂案例：彈框的燈箱效果 86

4.1.2 事件、用例和動作 88

4.2 條件用例90

4.2.1 課堂案例：評論區製作 90

4.2.2 條件用例詳解 92

4.2.3 If和Else If 93

4.2.4 課堂案例：登錄驗證 93

4.3 變量95

4.3.1 課堂案例：顯示登錄時所使用的用戶名 95

4.3.2 變量詳解 97

4.3.3 課堂案例：獲取驗證碼時的倒計時效果100

4.4 函數104

4.4.1 課堂案例：自動獲取頁面名稱104

4.4.2 函數詳解106

4.4.3 函數列表107

4.4.4 課堂案例：生成4位驗證碼111

4.5 母版自定義事件114

4.5.1 課堂案例：用母版製作菜單被選中時突出顯示的效果114

4.5.2 母版自定義事件詳解118

4.6 課堂練習121

4.6.1 課堂練習：二級聯動下拉菜單121

4.6.2 課堂練習：增減購物車中的商品數量121

4.7 課後習題122

4.7.1 課後習題：登錄時增加4位驗證碼的校驗122

4.7.2 課後習題：利用母版自定義事件顯示不同的個人信息122

 

第5章中繼器進階123

5.1 中繼器排序124

5.1.1 課堂案例：添加排序方式124

5.1.2 課堂案例：移除排序方式126

5.2 中繼器篩選127

5.2.1 課堂案例：添加篩選方式127

5.2.2 課堂案例：移除篩選方式129

5.3 中繼器分頁130

5.3.1 課堂案例：切換分頁130

5.3.2 課堂案例：動態設置每頁顯示的數據條數132

5.4 編輯中繼器數據集136

5.4.1 課堂案例：添加行136

5.4.2 課堂案例：標記行和取消標記行138

5.4.3 課堂案例：刪除行140

5.4.4 課堂案例：更新行142

5.5 課堂練習：跨頁面添加列表數據147

5.6 課後習題：Web端商品列表的篩选和排序147

 

第6章原型的分享149

6.1 生成交互說明書150

6.1.1 頁面說明150

6.1.2 元件說明150

6.1.3 生成Word說明書151

6.1.4 生成CSV報告 154

6.2 利用Axshare在線分享 154

6.2.1 Axshare簡介 155

6.2.2 發布和更新原型 155

6.2.3 參與討論 156

6.2.4 管理原型 157

6.3 生成HTML文件 159

6.3.1 生成本地HTML文件 159

6.3.2 選擇生成的頁面 160

6.3.3 選擇頁面說明字段 160

6.3.4 選擇元件說明字段 161

6.3.5 設置交互效果的相關內容 162

6.3.6 設置HTML頁面左側工具欄的標誌 162

6.3.7 設置Web字體 163

6.3.8 設置字體映射 164

6.3.9 在移動設備中預覽App原型 164

6.3.10 高級設置 166

6.3.11 設置是否開放討論 166

6.4 課堂練習：生成原型的交互說明書 166

6.5 課後習題：練習配置HTML頁面 166

 

第7章利用Axshare創建和管理團隊項目 167

7.1 創建與獲取團隊項目 168

7.1.1 團隊項目工作原理 168

7.1.2 創建團隊項目 168

7.1.3 獲取團隊項目 170

7.2 如何進行團隊項目協作 170

7.2.1 簽出和簽入/獲取和提交變更 171

7.2.2 常規管理 172

7.2.3 版本管理 173

7.3 課後習題：體驗在團隊項目中工作 174

 

第8章自定義元件庫 175

8.1 認識自定義元件庫 176

8.1.1 概述 176

8.1.2 自定義元件庫與母版的對比 176

8.2 自定義元件庫的使用 176

8.2.1 創建自定義元件庫 176

8.2.2 載入自定義元件庫 177

8.2.3 卸載自定義元件庫 178

8.3 課後習題：製作屬於自己的元件庫 178

 

第9章自適應視圖 179

9.1 “響應式佈局”與自適應視圖 180

9.2 使用自適應視圖 180

9.3 課後習題：體驗自適應視圖 182

 

第10章綜合案例實訓 183

10.1 案例：點贊和取消點贊效果 184

10.2 案例：自定義文本框的交互樣式 186

10.3 案例：自定義復選框的交互樣式 187

10.4 案例：手風琴導航菜單 188

10.5 案例：局部滾動的篩選菜單 192

10.6 案例： Web端個人中心快捷入口 193

10.7 案例：加載百分比進度條 195

10.8 案例：雙向選擇列表 197

10.9 課後習題：自定義單選按鈕的交互效果 199

10.10 課後習題：自定義下拉列錶框的交互樣式 199

10.11 課後習題：Web端商品大圖切換效果 200

10.12 課後習題：滾動吸附效果 200

 

第11章商業案例實訓 201

11.1 移動App原型尺寸詳解 202

11.2 商業案例：新聞App 202

11.2.1 標籤欄菜單切換 202

11.2.2 搜索聯想 206

11.2.3 上滑加載更多 210

11.3 商業案例：音樂App 214

11.3.1 啟動頁倒計時後跳轉 214

11.3.2 包含狀態指示器的banner廣告 217

11.3.3 抽屜菜單 220

11.4 課後習題：製作新聞App的視頻和個人中心頁面224