Axure RP 產品原型設計 (Axure RP 9)(全彩慕課版)

王敏，宜賓工業職業技術學院現任高校教師，擁有十余年的一線教學與研究經驗，具有深厚的理論功底與豐富的實戰教學經驗。曾獲得獲得全國高校教師教學創新大賽二等獎（國家級）,並多次指導學生在全國性專業競賽中斬獲佳績。

第 1 章 初識產品原型設計

1.1 產品原型概述… …………………… 2

1.1.1 草圖原型… …………………… 2

1.1.2 低保真原型… ………………… 2

1.1.3 高保真原型… ………………… 2

1.2 產品原型設計的流程… …………… 2

1.2.1 需求分析… …………………… 3

1.2.2 架構設計… …………………… 3

1.2.3 流程設計… …………………… 3

1.2.4 原型設計… …………………… 4

1.2.5 原型評審… …………………… 4

1.2.6 完善優化… …………………… 5

1.3 Axure RP 概述…………………… 5

1.4 Axure RP 的歷史………………… 6

1.4.1 Axure RP 的誕生… ………… 6

1.4.2 Axure RP 的發展… ………… 6

1.5 Axure RP 的應用………………… 7

1.5.1 繪制架構圖… ………………… 7

1.5.2 繪制流程圖… ………………… 7

1.5.3 繪制原型圖… ………………… 7

1.5.4 實現交互… …………………… 8

1.5.5 生成HTML 文件……………… 8

1.5.6 生成Word 說明書… ………… 9

1.6 AIGC 賦能產品原型設計… …… 10

1.6.1 認識AIGC…………………… 10

1.6.2 AIGC 賦能原型設計流程… 10

1.6.3 產品原型設計常用的

AI 工具……………………… 10

第 2 章 Axure RP 基礎知識

2.1 歡迎界面… ……………………… 17

2.2 工作界面………………………… 17

2.2.1 標題欄… …………………… 17

2.2.2 菜單欄… …………………… 18

2.2.3 工具欄… …………………… 19

2.2.4 畫布… ……………………… 20

2.2.5 “頁面”與“概要”面板… 20

2.2.6 “元件庫”與“母版”

面板………………………… 20

2.2.7 “樣式”、“交互”與“說明”

面板………………………… 21

2.3 文件的基本操作………………… 22

2.3.1 新建文件… ………………… 22

2.3.2 保存文件… ………………… 23

2.3.3 打開文件… ………………… 23

2.3.4 導入文件… ………………… 23

2.3.5 關閉文件… ………………… 23

2.3.6 文件格式… ………………… 23

2.3.7 自動備份… ………………… 24

2.4 頁面管理………………………… 25

2.4.1 添加頁面… ………………… 25

2.4.2 移動頁面… ………………… 25

2.4.3 刪除頁面… ………………… 26

2.4.4 剪切頁面… ………………… 26

2.4.5 復制頁面… ………………… 26

2.4.6 粘貼頁面… ………………… 26

2.4.7 重命名頁面… ……………… 26

2.4.8 重復頁面… ………………… 26

2.4.9 圖表類型… ………………… 27

2.4.10 搜索頁面…………………… 27

2.5 頁面設置………………………… 28

2.5.1 頁面尺寸… ………………… 28

2.5.2 頁面對齊… ………………… 28

2.5.3 頁面填充… ………………… 29

2.5.4 低保真度模式… …………… 32

2.6 操作視圖………………………… 32

2.6.1 縮放視圖… ………………… 33

2.6.2 平移視圖… ………………… 33

2.7 標尺、網格和輔助線…………… 33

2.7.1 標尺… ……………………… 33

2.7.2 網格… ……………………… 34

2.7.3 輔助線… …………………… 34

第3 章 元件與元件庫

3.1 添加元件………………………… 39

3.1.1 課堂案例——制作企業招聘H5

崗位申請頁的低保真原型… 39

3.1.2 基本元件… ………………… 43

3.1.3 課堂案例——制作中式茶業官網

聯系方式頁的低保真原型… 49

3.1.4 表單元件… ………………… 59

3.1.5 菜單/ 表格元件… ………… 63

3.1.6 標記元件… ………………… 66

3.1.7 課堂案例——制作家具電商

平臺的購買商品流程圖… … 67

3.1.8 流程圖元件… ……………… 70

3.1.9 圖標元件… ………………… 71

3.1.10 示例 UI 模式元件… ……… 71

3.2 管理元件………………………… 73

3.2.1 課堂案例——管理中式茶業

官網聯系方式頁低保真原型

的元件… …………………… 73

3.2.2 命名元件… ………………… 74

3.2.3 定位元件… ………………… 74

3.2.4 縮放元件… ………………… 74

3.2.5 旋轉元件… ………………… 74

3.2.6 組合元件… ………………… 75

3.2.7 元件排序… ………………… 75

3.2.8 對齊和分布元件… ………… 76

3.3 轉換元件………………………… 76

3.3.1 課堂案例——制作旅遊出行App

引導頁的低保真原型… …… 76

3.3.2 轉換為形狀… ……………… 80

3.3.3 轉換為圖片… ……………… 80

3.4 創建元件庫……………………… 81

3.4.1 課堂案例——制作中式茶業

官網元件庫… ……………… 81

3.4.2 新建元件庫… ……………… 82

3.4.3 編輯元件庫… ……………… 83

3.4.4 添加圖片文件夾… ………… 84

3.5 使用外部元件庫………………… 85

3.5.1 課堂案例——制作旅遊出行App

登錄頁的低保真原型… …… 85

3.5.2 下載元件庫… ……………… 90

3.5.3 導入元件庫… ……………… 90

3.6 課堂練習——制作中式茶業官網

首頁的低保真原型……………… 91

3.7 課後習題——制作企業招聘H5

關於我們頁的低保真原型……… 91

3.8 AI 擴展——用ProcessOn 的

AI 功能制作旅遊出行App 的

用戶登錄流程圖………………… 92

第4 章 元件的樣式與母版

4.1 設置元件屬性…………………… 94

4.1.1 課堂案例——制作中式茶業

官網茶葉詳情頁的高保真

原型… ……………………… 94

4.1.2 不透明度… ………………… 97

4.1.3 排版… ……………………… 97

4.1.4 填充… ……………………… 99

4.1.5 線段… ……………………… 99

4.1.6 陰影… ……………………… 100

4.1.7 圓角… ……………………… 100

4.1.8 邊距… ……………………… 100

4.2 創建和管理樣式………………… 100

4.2.1 課堂案例——制作企業招聘H5

關於我們頁的高保真原型…… 101

4.2.2 創建頁面樣式… …………… 103

4.2.3 創建元件樣式… …………… 104

4.2.4 編輯元件樣式… …………… 105

4.2.5 格式刷… …………………… 105

4.3 認識母版………………………… 105

4.4 創建和編輯母版………………… 107

4.4.1 課堂案例——創建旅遊出行App

狀態欄和指示器母版… …… 107

4.4.2 創建母版… ………………… 108

4.4.3 課堂案例——將中式茶業官網

底部轉換為母版… ………… 109

4.4.4 編輯和轉換母版… ………… 110

4.4.5 搜索母版… ………………… 111

4.4.6 刪除母版… ………………… 111

4.5 添加母版到頁面………………… 111

4.5.1 課堂案例——在旅遊出行App

引導頁中添加母版… ……… 112

4.5.2 拖放行為… ………………… 113

4.5.3 文本和圖片重寫… ………… 114

4.5.4 使用情況報告… …………… 114

4.6 課堂練習——制作中式茶業官網

關於品茗頁的高保真原型……… 114

4.7 課後習題——將企業招聘H5 標題

轉換為母版……………………… 115

4.8 AI 擴展——用妙多AI 工具制作電

商App 詳情頁的高保真原型…… 116

第5 章 基礎交互

5.1 認識Axure RP 的交互結構…… 118

5.2 添加鏈接交互…………………… 119

5.2.1 課堂案例——制作旅遊出行

App 的頁面鏈接… ………… 120

5.2.2 打開鏈接… ………………… 121

5.2.3 關閉窗口… ………………… 122

5.2.4 課堂案例——制作中式茶業

官網的視頻鏈接… ………… 122

5.2.5 框架中打開鏈接… ………… 123

5.2.6 課堂案例——制作中式茶業

官網的返回頂部… ………… 123

5.2.7 滾動到元件… ……………… 124

5.3 添加元件交互…………………… 125

5.3.1 課堂案例——制作家具電商

平臺頂部導航欄的顯示/ 隱藏

效果… ……………………… 125

5.3.2 顯示/ 隱藏… ……………… 126

5.3.3 設置面板狀態… …………… 127

5.3.4 設置文本… ………………… 128

5.3.5 設置圖片… ………………… 128

5.3.6 課堂案例——制作中式茶業新聞

動態頁的頁碼交互… ……… 129

5.3.7 設置選中… ………………… 130

5.3.8 設置列表選中項… ………… 130

5.3.9 啟用/ 禁用… ……………… 130

5.3.10 移動………………………… 131

5.3.11 旋轉………………………… 131

5.3.12 設置尺寸…………………… 131

5.3.13 置於頂層/ 底層…………… 131

5.3.14 設置不透明………………… 132

5.3.15 課堂案例——為家具電商App

註冊頁文本框獲取焦點…… 132

5.3.16 獲取焦點…………………… 132

5.3.17 展開/ 收起樹節點………… 133

5.4 設置交互樣式…………………… 133

課堂案例——設置家具電商平臺底部

導航交互樣式………………………… 134

5.5 自適應視圖……………………… 135

5.5.1 課堂案例——設置中式茶業

官網茗茶區域自適應視圖…… 135

5.5.2 創建和管理自適應視圖… … 137

5.5.3 編輯自適應視圖… ………… 138

5.5.4 預覽和生成自適應視圖… … 138

5.6 課堂練習——制作家具電商App 的

頁面鏈接………………………… 138

5.7 課後習題——設置職業教育管理系統側導航交互樣式…………… 139

5.8 AI 擴展——用GemDesign 制作中式茶業官網導航自適應視圖… 139

第6 章　動態面板

6.1 認識動態面板…………………… 141

6.2 使用動態面板…………………… 141

6.2.1 課堂案例——為旅遊出行App引導頁創建動態面板… …… 141

6.2.2 創建動態面板並命名… …… 144

6.2.3 管理動態面板狀態… ……… 145

6.2.4 課堂案例——將家具電商平臺樹狀側導航轉換為動態面板……146

6.2.5 轉換為動態面板… ………… 148

6.3 動態面板的特殊樣式……………148

6.3.1 滾動方式… ………………… 149

6.3.2 自適應內容… ……………… 149

6.3.3 課堂案例——將中式茶業官網海報設為100% 寬度……… 149

6.3.4 100% 寬度… ……………… 150

6.3.5 課堂案例——固定家具電商App 頂部… ………………… 150

6.3.6 固定到瀏覽器… …………… 151

6.4 動態面板的特殊事件…………… 152

6.4.1 尺寸改變時… ……………… 152

6.4.2 課堂案例——制作中式茶業官網的輪播效果… ………… 152

6.4.3 載入時… …………………… 156

6.4.4 狀態改變時… ……………… 156

6.4.5 課堂案例——制作企業招聘H5 的拖動交互… ………… 157

6.4.6 拖動事件… ………………… 158

6.4.7 滾動事件… ………………… 158

6.5 課堂練習——固定職業教育管理系統頂部導航欄………………… 159

6.6 課後習題——制作美食外賣App引導頁的拖動交互……………… 159

6.7 AI 擴展——用Master GO 制作家具電商平臺的輪播效果……… 160

第7 章　高級交互

7.1 變量……………………………… 162

7.1.1 課堂案例——跳轉到不同狀態的家具電商平臺購物車頁… … 162

7.1.2 全局變量… ………………… 164

7.1.3 局部變量… ………………… 165

7.2 條件邏輯………………………… 167

7.2.1 課堂案例——制作旅遊出行App 的不同登錄狀態… …… 168

7.2.2 匹配所有或匹配任何條件語句… ……………………… 171

7.2.3 用來進行邏輯判斷的值… … 171

7.2.4 確定變量或元件名稱… …… 172

7.2.5 邏輯判斷的運算符… ……… 172

7.2.6 用來選擇被比較的值… …… 172

7.2.7 文本框… …………………… 173

7.2.8 如果或否則… ……………… 173

7.3 表達式和函數…………………… 173

7.3.1 課堂案例——制作家具電商平臺商品信息交互… ……… 174

7.3.2 運算符類型… ……………… 178

7.3.3 表達式的格式… …………… 179

7.3.4 常見函數… ………………… 179

7.4 課堂練習——制作職業教育管理系統的不同登 錄狀態…………… 185

7.5 課後習題——制作美食外賣App 的不同滾動狀態…………………… 186

7.6 AI 擴展——用MasterGo 制作美食外賣App 的不同登錄狀態…………… 186

第8 章　中繼器

8.1 認識中繼器………………………188

8.1.1 課堂案例——制作家具電商App分類頁的高保真原型… …… 188

8.1.2 數據集… …………………… 191

8.1.3 項目交互… ………………… 192

8.1.4 樣式設置… ………………… 193

8.2 數據集的操作…………………… 195

8.2.1 課堂案例——為家具電商平臺商品列表添加分頁… ……… 195

8.2.2 設置分頁與數量… ………… 197

8.2.3 課堂案例——為旅遊出行App設置酒店排序… …………… 198

8.2.4 添加和移除排序… ………… 200

8.2.5 課堂案例——為家具電商平臺添加商品篩選功能… ……… 201

8.2.6 添加和移除篩選… ………… 203

8.2.7 添加和刪除中繼器的項目… 204

8.3 項目列表的操作…………………204

8.4 課堂練習——制作職業教育管理系統課程列表的高保真原型……205

8.5 課後習題——為美食外賣App設置商家排序……………………205

8.6 AI 擴展——用GemDesign 制作教務管理系統學生列表的高保真原型…206

第9 章 團隊項目與發布輸出

9.1 Axure 雲…………………………209

9.1.1 課堂案例——創建自己的Axure 雲賬戶… …………… 209

9.1.2 創建Axure 雲賬戶………… 210

9.1.3 發布到Axure 雲 …………… 210

9.2 團隊項目………………………… 212

9.2.1 課堂案例——創建中式糕點H5 團隊項目… …………… 212

9.2.2 創建團隊項目… …………… 213

9.2.3 加入團隊項目… …………… 214

9.2.4 打開團隊項目… …………… 215

9.2.5 編輯項目文件… …………… 216

9.3 發布查看原型…………………… 218

9.3.1 課堂案例——查看中式糕點H5 原型… ………………… 219

9.3.2 瀏覽器… …………………… 219

9.3.3 播放器… …………………… 219

9.4 使用生成器………………………220

9.4.1 課堂案例——基於中式糕點H5 原型生成HTML 文件………………… 220

9.4.2 HTML 生成器… …………… 221

9.4.3 Word 生成器… …………… 222

9.4.4 更多生成器… ……………… 225

9.5 課堂練習——創建職業教育管理系統的團隊項目…………………226

9.6 課後習題——發布查看旅遊出行App 原型…………………………226

9.7 AI 擴展——用Pixso 發布音樂播放器原型………………………227

第 10 章 商業案例實戰

10.1 制作中式茶業官網的低保真原型……………………………229

10.1.1 項目背景…………………… 229

10.1.2 項目要求…………………… 229

10.1.3 項目要點…………………… 229

10.1.4 項目設計…………………… 229

10.2 制作企業招聘H5 的低保真原型……………………………230

10.2.1 項目背景…………………… 230

10.2.2 項目要求…………………… 231

10.2.3 項目要點…………………… 231

10.2.4 項目設計…………………… 231

10.3 制作旅遊出行App 的低保真原型……………………………232

10.3.1 項目背景…………………… 232

10.3.2 項目要求…………………… 232

10.3.3 項目要點…………………… 232

10.3.4 項目設計…………………… 232

10.4 制作中式茶業官網的高保真交互原型………………………234

10.4.1 項目背景…………………… 234

10.4.2 項目要求…………………… 234

10.4.3 項目要點…………………… 234

10.4.4 項目設計…………………… 235

10.5 制作家具電商平臺的高保真交互原型… ……………………236

10.5.1 項目背景…………………… 236

10.5.2 項目要求…………………… 236

10.5.3 項目要點…………………… 237

10.5.4 項目設計…………………… 237

10.6 制作企業招聘H5 的高保真交互原型… ……………………238

10.6.1 項目背景…………………… 238

10.6.2 項目要求…………………… 238

10.6.3 項目要點…………………… 239

10.6.4 項目設計…………………… 239

10.7 制作中式糕點H5 的高保真交互原型… ……………………240

10.7.1 項目背景…………………… 240

10.7.2 項目要求…………………… 240

10.7.3 項目要點…………………… 240

10.7.4 項目設計…………………… 240

10.8 制作旅遊出行App 的高保真交互原型… …………………… 241

10.8.1 項目背景…………………… 241

10.8.2 項目要求…………………… 241

10.8.3 項目要點…………………… 241

10.8.4 項目設計…………………… 241

10.9 制作家具電商App 的高保真交互原型 … ……………………243

10.9.1 項目背景…………………… 243

10.9.2 項目要求…………………… 243

10.9.3 項目要點…………………… 243

10.9.4 項目設計…………………… 243

10.10 課堂練習——制作職業教育管理系統的高保真交互原型………245

10.10.1 項目背景… ……………… 245

10.10.2 項目要求… ……………… 245

10.10.3 項目要點… ……………… 245

10.10.4 項目設計… ……………… 246

10.11 課後習題——制作美食外賣App的高保真交互原型……………248

10.11.1 項目背景… ……………… 248

10.11.2 項目要求… ……………… 248

10.11.3 項目要點… ……………… 248

10.11.4 項目設計… ……………… 249

10.12 AI 擴展——用UXbot 制作家具 電商平臺的高保真交互原型……………250

10.12.1 項目背景… ……………… 250

10.12.2 項目要求… ……………… 251

10.12.4 項目要點… ……………… 251

10.12.4 項目設計… ……………… 251