Axure RP 8交互原型設計案例教程（微課版）

第 1 章初識Axure RP．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 1
本章導讀····································　1
學習目標····································　1
技能要點····································　1
1．1　交互式原型設計和Axure RP······2
1．1．1　Axure RP 介紹····················2
1．1．2　軟件的優(yōu)勢和用戶群··········　2
1．2　認識Axure RP 界面·················　2
1．2．1　Axure RP 界面元素·············　3
1．2．　2 自定義和復位界面············　5
1．3　文件的基本操作······················5
1．3．　1 新建文件·························6
1．3．　2 保存文件·························6
1．3．　3 打開文件·························6
1．3．　4 導入文件·························7
1．3．　5 關閉文檔·························7
1．4　撤銷和恢復····························7
1．4．　1 常用的撤銷······················7
1．4．　2 自動備份和恢復···············　7
1．5　視圖的操作····························8
1．5．1　縮放視圖·························　8
1．5．2　平移視圖·························　9
1．6　網(wǎng)格和輔助線·························9
1．6．1　網(wǎng)格·······························　9
1．6．2　輔助線····························　9
本章總結····································　11
第　2 章圖形元件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　12
本章導讀····································　12
效果欣賞····································　12
學習目標····································　13
技能要點····································　13
2．1　圖形元件的基本操作···············　14
2．1．1　認識元件庫面板················　14
2．1．2　使用圖形元件···················　14
2．1．3　選擇圖形元件···················　14
2．1．4　變換圖形元件···················　15
2．1．5　鏡像圖形元件···················　17
2．1．6　鎖定和解鎖圖形元件··········　17
2．1．7　對齊和分布圖形元件··········　17
2．1．8　排列圖形元件的順序··········　19
2．1．9　編組圖形元件···················　19
2．1．10　隱藏圖形元件··················20
2．1．11　復制圖形元件··················　21
2．2　編輯圖形元件的樣式和形狀······　21
2．2．1　描邊和填充······················　21
2．2．2　添加陰影·························　23
2．2．3　使用鋼筆工具···················　23
2．2．4　編輯形狀·························　24
2．2．5　結合和分離······················　26
2．2．6　布爾運算·························　28
2．3　自定義元件庫·························28
2．3．1　創(chuàng)建元件庫······················　28
2．3．2　編輯元件庫······················　30
2．3．3　卸載和導入元件庫·············　30
案例演練手機外殼和界面設計······31
本章總結····································　38
第3　章圖像元件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　39
本章導讀····································　39
效果欣賞····································　39
學習目標····································　40
技能要點····································　40
4
目錄ACxureoRnP　交t互e原n型t設s計
3．1　置入圖像·······························41
3．1．1　認識圖像元件···················　41
3．1．2　置入圖像的方法················　41
3．1．3　將圖形粘貼為圖像·············　42
3．1．4　將圖形轉為圖像················　42
3．2　編輯圖像·······························42
3．2．1　適合圖像·························　42
3．2．2　固定邊角·························　43
3．2．3　裁剪圖像·························　44
3．2．4　切割圖像·························　44
3．2．5　圓角化圖像······················　45
3．2．6　給圖像添加邊框················　46
3．2．7　優(yōu)化圖片·························　46
案例演練從“山寨”學習原型設計46
本章總結····································　48
第4　章文字處理．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　49
本章導讀····································　49
效果欣賞····································　49
學習目標····································　50
技能要點····································　50
4．1　添加文本·······························51
4．1．1　應用文本元件···················　51
4．1．2　在其他元件中添加文本·······　51
4．1．3　添加文本的方法················　52
4．1．4　適合文本大小···················　52
4．2　應用表格·······························53
4．2．1　創(chuàng)建表格方法···················　53
4．2．2　選擇表格·························　53
4．2．3　編輯表格·························　55
4．3　格式化文本····························55
4．3．1　使用樣式工具欄················　56
4．3．2　使用【樣式】子面板··········　56
4．3．3　使用格式刷······················　57
案例演練網(wǎng)頁文字排版···············58
本章總結····································　60
第5　章應用樣式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　61
本章導讀····································　61
效果欣賞····································　61
學習目標····································　62
技能要點····································　62
5．1　元件樣式·······························63
5．1．1　打開元件樣式編輯器··········　63
5．1．2　元件樣式的基本操作··········　64
5．1．4　應用元件樣式···················　64
5．1．3　更新元件樣式···················　65
5．2　頁面樣式·······························65
5．2．1　頁面面板的基本操作··········　65
5．2．2　頁面格式化······················　68
5．2．3　創(chuàng)建和應用頁面樣式··········　71
案例演練網(wǎng)頁版面設計···············71
本章總結····································　74
第6　章流程圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　76
本章導讀····································　76
效果欣賞····································　76
學習目標····································　77
技能要點····································　77
6．1　使用流程圖元件······················78
6．1．1　認識流程圖元件················　78
6．1．2　連接流程圖元件················　80
6．1．3　編輯流程圖的連接線··········　80
目錄Con目t錄ents
5
6．1．4　編輯元件的連接錨點··········　81
6．2　使用頁面生成流程圖···············　82
6．2．1　頁面類型·························　82
6．2．2　從頁面生成流程圖·············　82
6．3　導出流程圖····························83
6．3．1　導出為圖片······················　83
6．3．2　導出為網(wǎng)頁格式················　83
案例演練程序工作流程圖設計······84
本章總結····································　87
第7　章事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　88
本章導讀····································　88
效果欣賞····································　88
學習目標····································　89
技能要點····································　89
7．1　交互基礎·······························90
7．1．1　交互三要素······················　90
7．1．2　一分鐘學會交互················　91
7．1．3　交互樣式·························　92
7．2　元件事件·······························93
7．2．1　事件類型·························　94
7．2．2　元件事件詳解···················　94
7．3　頁面事件·······························100
7．3．1　關于頁面事件···················　100
7．3．2　頁面事件詳解···················　100
案例演練空氣AIQ　實況圖表········104
本章總結····································　106
第8　章用例和動作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　108
本章導讀····································　108
效果欣賞····································　108
學習目標····································　109
技能要點····································　109
8．1　用例基礎·······························110
8．1．1　添加用例····························　110
8．1．2　命名用例·························　110
8．1．3　剪切和復制用例················　111
8．1．4　移動用例·························　111
8．1．5　刪除用例·························　112
8．1．6　編輯用例·························　112
8．2　鏈接動作····························112
8．2．1　【打開鏈接】···················　112
8．2．2　【關閉窗口】···················　114
8．2．3　【在框架中打開鏈接】·······　114
8．2．4　【滾動到元件】················　116
8．3　元件動作····························117
8．3．1　【顯示/隱藏】··················　117
8．3．2　【設置文本】···················　120
8．3．3　【設置圖像】···················　121
8．3．4　【設置選中】···················　121
8．3．5　【啟用/禁用】··················　125
8．3．6　【移動】·························　125
8．3．7　【旋轉】·························　127
8．3．8　【設置尺寸】···················　129
8．3．9　【置于頂層/底層】···············　129
8．3．10　【設置不透明度】············129
8．3．11　【獲取焦點】··················　129
8．3．12　【展開/折疊樹節(jié)點】········130
8．4　其他動作·······························130
8．4．1　【等待】·························　130
8．4．2　【其他】·························　130
8．4．3　【觸發(fā)事件】···················　131
8．4．4　【自定義事件】················　134
案例演練制作網(wǎng)頁導航彈出菜單···136
本章總結····································　139
6
目錄ACxureoRnP　交t互e原n型t設s計
第9　章動態(tài)面板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　140
本章導讀····································　140
效果欣賞····································　140
學習目標····································　141
技能要點····································　141
9．1　動態(tài)面板的基本操作···············　142
9．1．1　認識動態(tài)面板···················　142
9．1．2　設置動態(tài)面板的樣式··········　142
9．1．3　管理動態(tài)面板···················　142
9．1．4　適應內(nèi)容·························　145
9．1．5　顯示滾動條······················　146
9．1．6　固定到瀏覽器···················　146
9．1．7　100%寬度·························　147
9．1．8　動態(tài)面板和一般元件的轉換·　147
9．2　動態(tài)面板的事件和動作············　148
9．2．1　動態(tài)面板的事件················　148
9．2．2　動態(tài)面板動作···················　153
案例演練網(wǎng)頁圖片輪播效果·········153
本章總結·································　159
第　10 章表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
本章導讀····································　160
效果欣賞····································　160
學習目標····································　161
技能要點····································　161
10．1　表單基礎······························　162
10．1．1　認識表單元件··················162
10．1．2　創(chuàng)建表單元件··················162
10．2　管理表單······························　162
10．2．1　文本框···························　162
10．2．2　多行文本框·····················164
10．2．3　下拉列表框·····················164
10．2．4　列表框···························　165
10．2．5　復選框···························　166
10．2．6　單選按鈕························166
10．2．7　提交按鈕························166
10．3　表單事件·····························　167
10．3．1　關于表單事件··················167
10．3．2　【文本改變時】···············168
10．3．3　【選項改變時】···············169
10．3．4　焦點事件························170
10．3．5　選中事件························171
10．4　表單動作·····························　173
10．4．1　獲取焦點························173
10．4．2　設置列表選中項···············174
10．4．3　設置選中························174
案例演練支付寶賬戶原型設計······175
本章總結····································　187
第　11 章變量和函數(shù)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．188
本章導讀····································　188
效果欣賞····································　188
學習目標····································　189
技能要點····································　189
11．1　變量···································　190
11．1．1　變量基礎························　190
11．1．2　全局變量························　190
11．1．3　局部變量························　193
11．2　函數(shù)···································　194
11．2．1　元件函數(shù)························　194
11．2．2　頁面函數(shù)························　195
11．2．3　窗口函數(shù)························　196
11．2．4　鼠標指針函數(shù)··················　196
11．2．5　日期函數(shù)························　197
11．2．6　字符串函數(shù)·····················　199
11．2．7　數(shù)學函數(shù)························　200
目錄Con目t錄ents
7
11．2．8　布爾函數(shù)························　201
11．2．9　數(shù)字函數(shù)························　201
案例演練手機時鐘原型設計·········201
本章總結····································　207
第　12 章插入條件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．208
本章導讀····································　208
效果欣賞····································　208
學習目標····································　209
技能要點····································　209
12．1　認識條件·····························　210
12．1．1　理解條件························210
12．1．2　插入條件的方法···············210
12．2　條件的高級應用····················　211
12．2．1　條件的兩種方式···············211
12．2．2　條件設置選項··················212
12．2．3　切換IF/ELSE IF···············　216
案例演練網(wǎng)購倒計時系統(tǒng)············219
本章總結····································　225
第　13 章自適應視圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．226
本章導讀····································　226
效果欣賞····································　226
學習目標····································　227
技能要點····································　227
13．1　自適應視圖基礎····················　228
13．1．1　什么是自適應視圖············228
14．1．2　創(chuàng)建自適應視圖···············228
13．2　自適應視圖事件和動作···········　230
13．2．1　自適應視圖事件···············230
13．2．1　自適應視圖動作···············232
案例演練移動設備出版物自適應視圖
················································　233
本章總結····································　236
第　14 章發(fā)布交互原型．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．237
本章導讀····································　237
效果欣賞····································　237
學習目標····································　238
技能要點····································　238
14．1　預覽交互原型·······················　239
14．1．1　本地預覽························239
14．1．2　在線預覽························240
14．2　生成交互原型說明書··············　241
14．2．1　設計一個交互原型············241
14．2．2　生成Word 格式說明書·······243
14．3　發(fā)布原型·····························　250
14．3．1　將原型發(fā)布到本地············250
14．3．2　將原型發(fā)布到Axure Share··268
14．3．3　將原型發(fā)布到移動設備······269
案例演練制作并發(fā)布App　原型·····　273
本章總結····································　278
第　15 章團隊合作項目．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．279
本章導讀····································　279
效果欣賞····································　279
學習目標····································　280
技能要點····································　280
15．1　關于團隊項目·······················　281
15．1．1　團隊合作形式··················281
8
目錄ACxureoRnP　交t互e原n型t設s計
15．1．2　創(chuàng)建團隊項目··················282
15．1．3　獲取團隊項目··················287
15．1．4　將團隊項目導出為RP 文檔290
15．2　使用和管理團隊項目··············　290
15．2．1　簽出和簽入團隊項目·········290
15．2．2　編輯團隊項目··················292
15．2．3　提交和獲取更新···············293
15．2．4　管理團隊項目··················293
15．2．5　瀏覽團隊項目歷史記錄······294
15．2．6　重新指向團隊項目············294
15．2．7　清理本地副本··················295
案例演練建立團隊項目···············295
本章總結····································　301
附錄快捷鍵．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．302