內容簡介
本書是由UI 互動設計專家林兆勝集多年豐富的教學經驗和實踐經驗編寫而成。全書共分為15 章,其中,第1 章至第6 章屬於基礎操作部分,主要講解了Axure RP 的界面元素、常規元件的使用方法、樣式的套用以及流程圖的使用等;第7 章至第12 章屬於中高級操作部分,重點講解了事件、用例和動作、動態面板、表單、變數和函式、條件的運用;第13 章至第15 章則向讀者介紹了自適應視圖的使用方法、如何發布互動原型以及如何建立並使用團隊合作項目。另外,對於學習能力強的讀者,還可以通過掃描本書封底的二維碼下載額外贈送的Axure RP 高級教程。
圖書目錄
第 1 章初識Axure RP............................................................................. 1
本章導讀···································· 1
學習目標···································· 1
技能要點···································· 1
1.1 互動式原型設計和Axure RP······2
1.1.1 Axure RP 介紹····················2
1.1.2 軟體的優勢和用戶群·········· 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 格線和輔助線·························9
1.6.1 格線······························· 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 創建元件庫······················ 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 最佳化圖片························· 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 創建表格方法··················· 53
4.2.2 選擇表格························· 53
4.2.3 編輯表格························· 55
4.3 格式化文本····························55
4.3.1 使用樣式工具列················ 56
4.3.2 使用【樣式】子面板·········· 56
4.3.3 使用格式刷······················ 57
案例演練網頁文字排版···············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 創建和套用頁面樣式·········· 71
案例演練網頁版面設計···············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 導出為網頁格式················ 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 【展開/摺疊樹節點】········130
8.4 其他動作·······························130
8.4.1 【等待】························· 130
8.4.2 【其他】························· 130
8.4.3 【觸發事件】··················· 131
8.4.4 【自定義事件】················ 134
案例演練製作網頁導航彈出選單···136
本章總結···································· 139
6
ACxureoRnP 交t互e原n型t設s計
第9 章動態面板.................................................................................. 140
本章導讀···································· 140
效果欣賞···································· 140
學習目標···································· 141
技能要點···································· 141
9.1 動態面板的基本操作··············· 142
9.1.1 認識動態面板··················· 142
9.1.2 設定動態面板的樣式·········· 142
9.1.3 管理動態面板··················· 142
9.1.4 適應內容························· 145
9.1.5 顯示滾動條······················ 146
9.1.6 固定到瀏覽器··················· 146
9.1.7 100%寬度························· 147
9.1.8 動態面板和一般元件的轉換· 147
9.2 動態面板的事件和動作············ 148
9.2.1 動態面板的事件················ 148
9.2.2 動態面板動作··················· 153
案例演練網頁圖片輪播效果·········153
本章總結································· 159
第 10 章表單........................................................................................160
本章導讀···································· 160
效果欣賞···································· 160
學習目標···································· 161
技能要點···································· 161
10.1 表單基礎······························ 162
10.1.1 認識表單元件··················162
10.1.2 創建表單元件··················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 章變數和函式............................................................................188
本章導讀···································· 188
效果欣賞···································· 188
學習目標···································· 189
技能要點···································· 189
11.1 變數··································· 190
11.1.1 變數基礎························ 190
11.1.2 全局變數························ 190
11.1.3 局部變數························ 193
11.2 函式··································· 194
11.2.1 元件函式························ 194
11.2.2 頁面函式························ 195
11.2.3 視窗函式························ 196
11.2.4 滑鼠指針函式·················· 196
11.2.5 日期函式························ 197
11.2.6 字元串函式····················· 199
11.2.7 數學函式························ 200
Con目t錄ents
7
11.2.8 布爾函式························ 201
11.2.9 數字函式························ 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
案例演練網購倒計時系統············219
本章總結···································· 225
第 13 章自適應視圖............................................................................226
本章導讀···································· 226
效果欣賞···································· 226
本章導讀···································· 279
效果欣賞···································· 279
學習目標···································· 280
技能要點···································· 280
15.1 關於團隊項目······················· 281
15.1.1 團隊合作形式··················281
8
ACxureoRnP 交t互e原n型t設s計
15.1.2 創建團隊項目··················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