Axure網站與App原型設計（全彩慕課版）（Axure RP 10）

王中剛，武漢信息傳播職業技術學院信息工程學院院長、副教授、工程師 電子信息工程技術專業帶頭人，從事高職教學及管理工作17年； 第46屆世界技能大賽湖北省選拔賽 “移動應用開發”項目專家組成員。 湖北省世賽教育研究院學術委員會專家； 第三屆湖北省大學生信創大賽（高職組）決賽專家； 湖北省職業教育教學成果獎、第八屆湖北省高等學校教學成果獎三等獎。

目錄

第 1章　Axure原型設計簡介　001

1.1　原型　002

1.1.1　草圖原型　002

1.1.2　低保真原型　003

1.1.3　高保真原型　003

1.2　Axure RP 10的安裝與漢化　004

1.3　認識Axure RP 10的工作界面　006

1.3.1　菜單欄　007

1.3.2　工具欄　010

1.3.3　頁面與大綱區域　014

1.3.4　元件庫與母版區域　015

1.3.5　工作區域　017

1.3.6　檢視區域　018

1.4　原型設計流程　019

1.4.1　需求分析　019

1.4.2　頁面架構設計　019

1.4.3　低保真原型設計　022

1.4.4　原型評審　022

1.4.5　高保真原型設計　022

1.5　小結　022

1.6　練習　023

第 2章　用頁面區域管理頁面　　024

2.1　頁面區域　025

2.1.1　頁面區域的結構　025

2.1.2　頁面區域的意義　025

2.1.3　使用頁面區域的註意事項　025

2.2　頁面區域的使用方法　026

2.3　實戰——藍月亮官網欄目規劃　027

2.4　小結　030

2.5　練習　030

第3章　用Axure元件庫“搭積木”　031

3.1　繪制線框圖所用的元件　032

3.1.1　常用元件的使用方法　033

3.1.2　互動元件的使用方法　038

3.1.3　表單元件的使用方法　038

3.1.4　菜單和表格元件的使用方法　043

3.1.5　標記元件的使用方法　044

3.2　繪制流程圖所用的元件　045

3.3　豐富的圖標元件庫　049

3.4　載入元件庫和自定義元件庫　050

3.4.1　載入元件庫　050

3.4.2　自定義元件庫　053

3.5　實戰——制作個人簡歷表　055

3.6　小結　059

3.7　練習　060

第4章　用Axure動態面板制作動態效果　061

4.1　動態面板的使用方法　062

4.1.1　創建動態面板並命名　062

4.1.2　編輯動態面板的狀態　063

4.1.3　通過大綱區域管理動態面板　068

4.2　動態面板的常用功能　072

4.2.1　顯示與隱藏效果　072

4.2.2　調整大小以適合內容　076

4.2.3　滾動條設置　079

4.2.4　固定到瀏覽器　081

4.2.5　100%寬度　083

4.2.6　從動態面板脫離　084

4.2.7　轉換為母版　086

4.2.8　轉換為動態面板　086

4.3　實戰——制作淘寶登錄頁面選項卡的切換效果　086

4.3.1　登錄頁面選項卡標簽設計　087

4.3.2　密碼登錄選項卡設計　090

4.3.3　短信登錄選項卡設計　093

4.3.4　選項卡交互效果設置　094

4.4　小結　096

4.5　練習　097

第5章　用Axure變量制作豐富的交互效果　098

5.1　全局變量和局部變量的使用方法　099

5.2　變量值在頁面間傳遞　101

5.2.1　登錄表單和首頁　101

5.2.2　新建變量和賦值　103

5.2.3　首頁顯示變量值　106

5.2.4　頁面觸發事件　107

5.2.5　發布原型　108

5.3　實戰——制作簡易計算器　109

5.3.1　計算器布局設計　109

5.3.2　數字按鈕交互設計　112

5.3.3　運算按鈕交互設計　115

5.3.4　等號按鈕交互設計　116

5.4　小結　118

5.5　練習　118

第6章　用Axure母版減少重復工作　119

6.1　母版功能簡介　120

6.1.1　母版的使用方法　120

6.1.2　制作母版的2種方式　122

6.2　母版的3種拖放行為　126

6.2.1　任何位置　126

6.2.2　鎖定到母版所在位置　128

6.2.3　從母版中脫離　130

6.3　實戰——藍月亮招聘網站導航菜單母版設計　132

6.3.1　導航菜單母版布局設計　133

6.3.2　網站Logo和頁尾信息母版布局設計　134

6.3.3　導航菜單母版交互設計　136

6.4　小結　138

6.5　練習　138

第7章　用Axure鏈接動作制作交互效果　139

7.1 “打開鏈接”和“關閉窗口”動作　140

7.1.1　當前窗口打開鏈接　140

7.1.2　新窗口打開鏈接　143

7.1.3　彈出窗口打開鏈接　144

7.1.4　父窗口打開鏈接　146

7.1.5　關閉窗口　148

7.2 “在框架內打開鏈接”動作　149

7.2.1　內聯框架　149

7.2.2　父框架　153

7.3 “滾動到元件（錨鏈接）”動作　155

7.4　設置自適應視圖　158

7.5　小結　160

7.6　練習　161

第8章　用Axure元件行為制作交互效果　162

8.1　“顯示/隱藏”行為　163

8.1.1　用切換方式控制元件的顯示與隱藏　163

8.1.2　用變量方式控制元件的顯示與隱藏　164

8.1.3　多個導航菜單聯動效果　167

8.2 “設置文本”和“設置圖片”行為　169

8.2.1　“設置文本”行為　169

8.2.2　“設置圖片”行為　171

8.3 “設置選中”行為　172

8.3.1　單選按鈕選中行為　172

8.3.2　復選框選中行為　175

8.4 “設置選中下拉列表選項”行為　177

8.4.1　一對一聯動效果　177

8.4.2　一對多聯動效果　180

8.5 “啟用/禁用”行為　184

8.6 “移動”“旋轉”和“置頂/置底”行為　186

8.7 “獲取焦點”和“展開/折疊樹節點”行為　187

8.8　小結　188

8.9　練習　189

第9章　用中繼器模擬數據庫操作　190

9.1　認識中繼器　190

9.2　中繼器綁定數據　192

9.2.1　中繼器布局設計　192

9.2.2　中繼器數據綁定　194

9.3　新增數據彈出框設計　197

9.4　中繼器新增數據操作　199

9.5　中繼器刪除數據操作　203

9.5.1　行內刪除數據　203

9.5.2　全局刪除數據　204

9.6　小結　206

9.7　練習　206

第 10章　美團App低保真原型設計　207

10.1　需求描述　208

10.2　設計思路　208

10.3　準備工作　208

10.4　設計流程　208

10.4.1　底部標簽導航母版設計　208

10.4.2 “美團”頁面布局設計　212

10.4.3　輪播效果制作　215

10.4.4 “美團機票”頁面布局設計　216

10.4.5 “美團機票”頁面上下滑動設計　218

10.4.6 “美團”頁面與“美團機票”頁面切換顯示的效果　222

10.5　小結　223

10.6　練習　223

第 11章　去哪兒網站高保真原型設計　224

11.1　需求描述　224

11.2　設計思路　225

11.3　準備工作　225

11.4　設計流程　226

11.4.1　網站註冊表單的布局設計　226

11.4.2　網站註冊表單校驗　228

11.4.3　倒計時交互設計　229

11.4.4 “登錄”頁面布局與交互設計　230

11.4.5　導航菜單母版設計　235

11.4.6　首頁搜索區域導航菜單懸浮效果設計　239

11.5　小結　245

11.6　練習　245

第 12章　產品經理的職能　246

12.1　產品經理所需的基礎能力　246

12.2　項目各階段的產品經理職能　247

12.3　小結　248

12.4　練習　248