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

第 1 章初識Axure RP．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 1
本章導(dǎo)讀····································　1
學(xué)習(xí)目標····································　1
技能要點····································　1
1．1　交互式原型設(shè)計和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 自定義和復(fù)位界面············　5
1．3　文件的基本操作······················5
1．3．　1 新建文件·························6
1．3．　2 保存文件·························6
1．3．　3 打開文件·························6
1．3．　4 導(dǎo)入文件·························7
1．3．　5 關(guān)閉文檔·························7
1．4　撤銷和恢復(fù)····························7
1．4．　1 常用的撤銷······················7
1．4．　2 自動備份和恢復(fù)···············　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
本章總結(jié)····································　11
第　2 章圖形元件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　12
本章導(dǎo)讀····································　12
效果欣賞····································　12
學(xué)習(xí)目標····································　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　復(fù)制圖形元件··················　21
2．2　編輯圖形元件的樣式和形狀······　21
2．2．1　描邊和填充······················　21
2．2．2　添加陰影·························　23
2．2．3　使用鋼筆工具···················　23
2．2．4　編輯形狀·························　24
2．2．5　結(jié)合和分離······················　26
2．2．6　布爾運算·························　28
2．3　自定義元件庫·························28
2．3．1　創(chuàng)建元件庫······················　28
2．3．2　編輯元件庫······················　30
2．3．3　卸載和導(dǎo)入元件庫·············　30
案例演練手機外殼和界面設(shè)計······31
本章總結(jié)····································　38
第3　章圖像元件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　39
本章導(dǎo)讀····································　39
效果欣賞····································　39
學(xué)習(xí)目標····································　40
技能要點····································　40
4
目錄ACxureoRnP　交t互e原n型t設(shè)s計
3．1　置入圖像·······························41
3．1．1　認識圖像元件···················　41
3．1．2　置入圖像的方法················　41
3．1．3　將圖形粘貼為圖像·············　42
3．1．4　將圖形轉(zhuǎn)為圖像················　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
案例演練從“山寨”學(xué)習(xí)原型設(shè)計46
本章總結(jié)····································　48
第4　章文字處理．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　49
本章導(dǎo)讀····································　49
效果欣賞····································　49
學(xué)習(xí)目標····································　50
技能要點····································　50
4．1　添加文本·······························51
4．1．1　應(yīng)用文本元件···················　51
4．1．2　在其他元件中添加文本·······　51
4．1．3　添加文本的方法················　52
4．1．4　適合文本大小···················　52
4．2　應(yīng)用表格·······························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
本章總結(jié)····································　60
第5　章應(yīng)用樣式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　61
本章導(dǎo)讀····································　61
效果欣賞····································　61
學(xué)習(xí)目標····································　62
技能要點····································　62
5．1　元件樣式·······························63
5．1．1　打開元件樣式編輯器··········　63
5．1．2　元件樣式的基本操作··········　64
5．1．4　應(yīng)用元件樣式···················　64
5．1．3　更新元件樣式···················　65
5．2　頁面樣式·······························65
5．2．1　頁面面板的基本操作··········　65
5．2．2　頁面格式化······················　68
5．2．3　創(chuàng)建和應(yīng)用頁面樣式··········　71
案例演練網(wǎng)頁版面設(shè)計···············71
本章總結(jié)····································　74
第6　章流程圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　76
本章導(dǎo)讀····································　76
效果欣賞····································　76
學(xué)習(xí)目標····································　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　導(dǎo)出流程圖····························83
6．3．1　導(dǎo)出為圖片······················　83
6．3．2　導(dǎo)出為網(wǎng)頁格式················　83
案例演練程序工作流程圖設(shè)計······84
本章總結(jié)····································　87
第7　章事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　88
本章導(dǎo)讀····································　88
效果欣賞····································　88
學(xué)習(xí)目標····································　89
技能要點····································　89
7．1　交互基礎(chǔ)·······························90
7．1．1　交互三要素······················　90
7．1．2　一分鐘學(xué)會交互················　91
7．1．3　交互樣式·························　92
7．2　元件事件·······························93
7．2．1　事件類型·························　94
7．2．2　元件事件詳解···················　94
7．3　頁面事件·······························100
7．3．1　關(guān)于頁面事件···················　100
7．3．2　頁面事件詳解···················　100
案例演練空氣AIQ　實況圖表········104
本章總結(jié)····································　106
第8　章用例和動作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　108
本章導(dǎo)讀····································　108
效果欣賞····································　108
學(xué)習(xí)目標····································　109
技能要點····································　109
8．1　用例基礎(chǔ)·······························110
8．1．1　添加用例····························　110
8．1．2　命名用例·························　110
8．1．3　剪切和復(fù)制用例················　111
8．1．4　移動用例·························　111
8．1．5　刪除用例·························　112
8．1．6　編輯用例·························　112
8．2　鏈接動作····························112
8．2．1　【打開鏈接】···················　112
8．2．2　【關(guān)閉窗口】···················　114
8．2．3　【在框架中打開鏈接】·······　114
8．2．4　【滾動到元件】················　116
8．3　元件動作····························117
8．3．1　【顯示/隱藏】··················　117
8．3．2　【設(shè)置文本】···················　120
8．3．3　【設(shè)置圖像】···················　121
8．3．4　【設(shè)置選中】···················　121
8．3．5　【啟用/禁用】··················　125
8．3．6　【移動】·························　125
8．3．7　【旋轉(zhuǎn)】·························　127
8．3．8　【設(shè)置尺寸】···················　129
8．3．9　【置于頂層/底層】···············　129
8．3．10　【設(shè)置不透明度】············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)頁導(dǎo)航彈出菜單···136
本章總結(jié)····································　139
6
目錄ACxureoRnP　交t互e原n型t設(shè)s計
第9　章動態(tài)面板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　140
本章導(dǎo)讀····································　140
效果欣賞····································　140
學(xué)習(xí)目標····································　141
技能要點····································　141
9．1　動態(tài)面板的基本操作···············　142
9．1．1　認識動態(tài)面板···················　142
9．1．2　設(shè)置動態(tài)面板的樣式··········　142
9．1．3　管理動態(tài)面板···················　142
9．1．4　適應(yīng)內(nèi)容·························　145
9．1．5　顯示滾動條······················　146
9．1．6　固定到瀏覽器···················　146
9．1．7　100%寬度·························　147
9．1．8　動態(tài)面板和一般元件的轉(zhuǎn)換·　147
9．2　動態(tài)面板的事件和動作············　148
9．2．1　動態(tài)面板的事件················　148
9．2．2　動態(tài)面板動作···················　153
案例演練網(wǎng)頁圖片輪播效果·········153
本章總結(jié)·································　159
第　10 章表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
本章導(dǎo)讀····································　160
效果欣賞····································　160
學(xué)習(xí)目標····································　161
技能要點····································　161
10．1　表單基礎(chǔ)······························　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　復(fù)選框···························　166
10．2．6　單選按鈕························166
10．2．7　提交按鈕························166
10．3　表單事件·····························　167
10．3．1　關(guān)于表單事件··················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　設(shè)置列表選中項···············174
10．4．3　設(shè)置選中························174
案例演練支付寶賬戶原型設(shè)計······175
本章總結(jié)····································　187
第　11 章變量和函數(shù)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．188
本章導(dǎo)讀····································　188
效果欣賞····································　188
學(xué)習(xí)目標····································　189
技能要點····································　189
11．1　變量···································　190
11．1．1　變量基礎(chǔ)························　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ù)學(xué)函數(shù)························　200
目錄Con目t錄ents
7
11．2．8　布爾函數(shù)························　201
11．2．9　數(shù)字函數(shù)························　201
案例演練手機時鐘原型設(shè)計·········201
本章總結(jié)····································　207
第　12 章插入條件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．208
本章導(dǎo)讀····································　208
效果欣賞····································　208
學(xué)習(xí)目標····································　209
技能要點····································　209
12．1　認識條件·····························　210
12．1．1　理解條件························210
12．1．2　插入條件的方法···············210
12．2　條件的高級應(yīng)用····················　211
12．2．1　條件的兩種方式···············211
12．2．2　條件設(shè)置選項··················212
12．2．3　切換IF/ELSE IF···············　216
案例演練網(wǎng)購倒計時系統(tǒng)············219
本章總結(jié)····································　225
第　13 章自適應(yīng)視圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．226
本章導(dǎo)讀····································　226
效果欣賞····································　226
學(xué)習(xí)目標····································　227
技能要點····································　227
13．1　自適應(yīng)視圖基礎(chǔ)····················　228
13．1．1　什么是自適應(yīng)視圖············228
14．1．2　創(chuàng)建自適應(yīng)視圖···············228
13．2　自適應(yīng)視圖事件和動作···········　230
13．2．1　自適應(yīng)視圖事件···············230
13．2．1　自適應(yīng)視圖動作···············232
案例演練移動設(shè)備出版物自適應(yīng)視圖
················································　233
本章總結(jié)····································　236
第　14 章發(fā)布交互原型．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．237
本章導(dǎo)讀····································　237
效果欣賞····································　237
學(xué)習(xí)目標····································　238
技能要點····································　238
14．1　預(yù)覽交互原型·······················　239
14．1．1　本地預(yù)覽························239
14．1．2　在線預(yù)覽························240
14．2　生成交互原型說明書··············　241
14．2．1　設(shè)計一個交互原型············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ā)布到移動設(shè)備······269
案例演練制作并發(fā)布App　原型·····　273
本章總結(jié)····································　278
第　15 章團隊合作項目．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．279
本章導(dǎo)讀····································　279
效果欣賞····································　279
學(xué)習(xí)目標····································　280
技能要點····································　280
15．1　關(guān)于團隊項目·······················　281
15．1．1　團隊合作形式··················281
8
目錄ACxureoRnP　交t互e原n型t設(shè)s計
15．1．2　創(chuàng)建團隊項目··················282
15．1．3　獲取團隊項目··················287
15．1．4　將團隊項目導(dǎo)出為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
本章總結(jié)····································　301
附錄快捷鍵．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．302