Axure-RP-8-交互原型設計案例教程第2章

1、第2章 圖形元件Axure RP 8 交互原型設計案例教程（微課版）微課版Axure RP 將所有與設計原型的相關對象統(tǒng)稱為元件（Widgets），并且專門存放于元件庫面板中。Axure RP 提供了三類元件庫，分別是：默認、流程圖和圖標。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.1 認識元件庫面板當圖標數量太多而不容易查找某個圖標時，可以使用元件的查找功能快速查找。單擊元件庫面板上的按鈕，然后輸入要查找的圖標名稱即可，如圖2-1 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.

2、1 認識元件庫面板圖 2-1 查找元件與一般的圖形處理軟件不同，Axure RP 創(chuàng)建圖形元件的方法是：使用鼠標從【元件庫】面板中將某個元件拖到頁面中。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.2 使用圖形元件Axure RP 提供了兩種選擇工具按鈕：相交選擇模式（【Ctrl+1】）和包含選擇模式（【Ctrl+2】），這兩個按鈕可以在主工具欄上找到，如圖2-2 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.3 選擇圖形元件圖 2-2 在頁面上應用元件除了使用選擇工具選擇對象外，

3、還可以在頁面上沒有元件的位置右擊鼠標，從彈出的快捷菜單中執(zhí)行選擇對象的命令，如圖2-3 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.3 選擇圖形元件圖 2-3 選擇對象的快捷菜單1. 使用鼠標變換使用鼠標變換對象時，最好使用選擇工具。選擇對象后，會出現一個綠色的邊界框。鼠標指針放在邊界框內按下左鍵拖動即可移動位置，鼠標放在4 個角或者4 條邊處的小方格上，指針會變成雙向箭頭，此時可改變寬度和高度，如圖2-4 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.4 變換圖形元件圖

4、2-4 變換對象大小使用鼠標旋轉對象需先按下【Ctrl】鍵，然后將鼠標指針放在邊界框周圍8 個小方格的任意一個上，此時鼠標指針變成彎曲箭頭，按住鼠標左鍵拖動即可旋轉對象，如圖2-5所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.4 變換圖形元件圖2-5 變換對象的方向2. 使用樣式工具欄變換在樣式工具欄中，可以通過設置參數精確變換元件的位置和大小，如圖2-6 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.4 變換圖形元件圖 2-6 樣式工具欄的變換參數3. 使用【樣式】面板變換

5、【樣式】面板是【檢視】面板的一個子面板，在該面板中，除了和樣式工具欄一樣可精確變換元件的大小和位置外，還可以精確旋轉對象。選擇多個圖形元件對象時，在【樣式】子面板中可以看到變換分成了兩部分，上面的“位置+尺寸”針對的是選擇的多個元件對象，也可以理解為將選擇的多個對象作為一個整體來變換大小和位置；下面的“每個元件”針對的是選擇的多個對象中的每個對象，如圖2-7 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.4 變換圖形元件圖 2-7 樣式面板中的變換參數鏡像也可叫作翻轉，分為水平鏡像和垂直鏡像。選擇對象后，在【樣式】子面板中只要單擊【水

6、平鏡像】按鈕和【垂直鏡像】按鈕即可實現鏡像操作。除了使用【樣式】子面板中的兩個鏡像按鈕外，還可以在要鏡像的元件上右擊鼠標，從彈出的快捷菜單中執(zhí)行【變換形狀】【水平鏡像】或者【垂直鏡像】命令。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.5 鏡像圖形元件在Axure RP 中，鎖定對象有兩種方法。（1）使用鎖定按鈕：在主工具欄中可以找到【鎖定】和【解除鎖定】兩個按鈕，如圖2-8 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.6 鎖定和解鎖圖形元件圖 2-8 主工具欄的【鎖定】和【解除

7、鎖定】按鈕（2）使用菜單命令：執(zhí)行【排列】【鎖定】【鎖定位置和尺寸】（【Ctrl+K】）或者【解除鎖定位置和尺寸】（【Ctrl+Shift+K】）命令。對齊至少要選擇兩個對象，分布至少要選擇3 個對象。在Axure RP 中有3 種方法可以完成對齊和分布。（1）使用主工具欄的按鈕：Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.7 對齊和分布圖形元件圖 2-9 主工具欄的【對齊】和【分布】按鈕（2）使用快捷菜單：（3）使用主程序菜單：除了使用上面的【對齊】按鈕對元件對齊之外，還可以使用Axure RP 軟件提供的元件對齊功能將兩個元件對齊。但

8、是，當將兩個矩形相鄰的邊界對齊時，對齊的邊看起來會變粗，如圖2-10 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.7 對齊和分布圖形元件圖 2-10 兩個矩形相鄰的邊并列對齊這是因為默認狀態(tài)下，程序采用的邊界對齊方式是邊框并排方式，可以執(zhí)行【項目】【項目設置】命令將邊界對齊設置為“邊框重疊”，此時，再將一個右邊界和另一個矩形的左邊界對齊時就會發(fā)現兩個邊界完全重疊了，如圖2-11 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.7 對齊和分布圖形元件圖 2-11 兩個矩形相鄰的

9、邊重疊“邊框重疊”和“邊框并排”究竟有什么區(qū)別呢？只要選擇一個圖形元件并設置較粗的描邊并適當放大視圖，再選擇這兩個選項就能直觀地看出二者的區(qū)別，如圖2-12 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.7 對齊和分布圖形元件圖 2-12 邊框重疊和邊框并排的區(qū)別從元件庫中拖出的元件放到頁面后是有先后順序的，先放置的元件在下層位置，后放置的元件在上層位置。1. 使用主工具欄的按鈕主工具欄的排列順序按鈕，如圖2-13 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.8 排列圖形元

10、件的順序圖 2-13 主工具欄的排列按鈕2. 使用快捷鍵菜單在元件對象上右擊鼠標，從彈出的快捷菜單中可執(zhí)行【順序】【排列順序】命令。3. 使用主菜單命令4. 使用【大綱】面板Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.8 排列圖形元件的順序1. 使用主工具欄的按鈕主工具欄的【群組】和【取消群組】按鈕，如圖2-14 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.9 編組圖形元件圖 2-14 主工具欄的【群組】和【取消群組】按鈕1. 使用主工具欄的按鈕主工具欄的【群組】和【取消群組】

11、按鈕，如圖2-14 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.9 編組圖形元件圖 2-14 主工具欄的【群組】和【取消群組】按鈕2. 使用快捷鍵菜單選擇多個元件對象后右擊鼠標，從彈出的快捷菜單中可執(zhí)行【群組】或【取消群組】命令。3. 使用主菜單命令（1）選擇要添加到群組中的對象。（2）在【大綱】面板中將其拖到群組中，如圖2-15 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.9 編組圖形元件Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件

12、的基本操作2.1.9 編組圖形元件圖 2-15 使用【大綱】面板向群組中添加新對象同樣，在【大綱】面板中也可以將一個群組拖到另一個群組中，建立嵌套群組，如圖2-16 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.9 編組圖形元件圖 2-16 使用【大綱】面板建立嵌套群組在做交互原型設計時，經常需要將某個元件對象隱藏起來。Axure RP 提供了3 種隱藏元件對象的方法。1. 使用樣式工具欄的選項2. 使用快捷鍵菜單3. 使用【樣式】子面板Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1

13、.10 隱藏圖形元件Axure RP 復制圖形元件對象的方法有3 種。1. 使用常規(guī)方法復制執(zhí)行【編輯】【復制】（【Ctrl+C】）、【粘貼】（【Ctrl+V】）命令。這并非Axure RP 獨有的方法，幾乎所有的程序都可以使用該方法。2. 斜向等距快速復制選擇要復制的元件對象后，反復按【Ctrl+D】組合鍵可快速等距斜向復制元件對象。3. 使用鼠標移動時復制按【Ctrl】鍵再移動某個元件就可以實現復制。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.1 圖形元件的基本操作2.1.11 復制圖形元件從元件庫中拖曳到頁面的元件大多是有描邊和填充色的，但是，在做原型設計時，這

14、些默認的顏色往往不能滿足要求，這就需要重新設置。有以下兩種方法設置描邊和填充。1. 使用樣式工具欄在樣式工具欄中，可以使用相關按鈕對圖形元件指定填充顏色和描邊顏色，也可以設置描邊的寬度以及描邊的類型是虛線還是實線，如果不是封閉的圖形元件，還可以通過樣式工具欄對其添加各種箭頭，如圖2-17 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.1 描邊和填充圖 2-17 樣式工具欄的填充和描邊按鈕無論是描邊還是填充，Axure RP 不但允許使用單色（一種顏色），而且可以使用漸變色（兩種或者兩種以上的顏色）。選擇“漸變”填充類型后，可以將

15、鼠標指針放在漸變條的下方，當鼠標指針變成標志時，單擊即可添加一個色標，如圖2-18 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.1 描邊和填充圖 2-18 添加顏色色標2. 使用【檢視】【樣式】子面板【檢視】【樣式】子面板中提供了填充和描邊更詳細的參數設置，【樣式工具欄】中圖形元件填充和描邊的按鈕工具，在該面板中也存在，而且按鈕工具圖標也相同。不過【樣式】子面板對描邊又增加了一個“邊界可見”選項。設置“邊界可見”選項，可以控制圖形元件描邊時哪條邊是可見的，哪條邊是不可見的，如圖2-19 所示。Axure RP 8 交互原型設計

16、案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.1 描邊和填充Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.1 描邊和填充圖 2-19 設置邊界可見前后的圖形比較陰影分為外部陰影（也可以叫投影）和內部陰影，通過樣式工具欄可以為圖形元件對象添加外部陰影，如圖2-20 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.2 添加陰影圖 2-20 樣式工具欄的外陰影參數“偏移”控制陰影到圖形元件的水平距離（x）和垂直距離（y）；“模糊”控制陰影的虛化程度；“

17、顏色”控制陰影的顏色，默認是灰色。對圖形元件添加內陰影，在樣式工具欄中無法實現，需要通過【樣式】子面板來實現，如圖2-21 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.2 添加陰影圖 2-21 【樣式】子面板中的【外陰影】和【內陰影】選項本小節(jié)主要學習鋼筆工具的使用方法。鋼筆工具（【Ctrl+4】） 位于主工具欄中，如圖2-22所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.3 使用鋼筆工具圖 2-22 主工具欄的【鋼筆】工具1. 繪制直線2. 繪制平滑曲線在使用

18、鋼筆工具繪制曲線時，如果使用鼠標右擊，則會在右擊位置和上一錨點之間出現兩條方向相反但位于同一直線的橙色控制手柄線，如圖2-23 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.3 使用鋼筆工具圖 2-23 使用鋼筆工具右擊調整控制手柄線3. 繪制轉折曲線使用鋼筆工具繪制曲線時按下【Ctrl】鍵拖動，則只有靠近鼠標指針一側的橙色控制手柄線變動，另一條控制手柄線保持不同，這樣可以繪制出轉折的曲線，如圖2-24 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.3 使用鋼筆工

19、具圖 2-24 使用鋼筆工具繪制轉折線1. 將一個形狀切換成其他圖形2. 使用黃色小圓點編輯形狀3. 使用黃色小三角圓角化矩形默認狀態(tài)下，矩形的四個直角同時圓角化，如果只對某個角圓角化，則需要在【檢視】【樣式】子面板中通過“圓角化”參數右側的按鈕實現。單擊該按鈕，在彈出的列表中可單擊去掉無需圓角化的角。在【樣式】子面板中設置好圓角化的角之后，在頁面中拖動黃色小三角標志時就只有指定的角變成圓角，如圖2-25 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.4 編輯形狀Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件

20、2.2 編輯圖形元件的樣式和形狀2.2.4 編輯形狀圖 2-25 局部圓角化矩形4. 轉為自定義形狀圖標元件庫中的形狀只要雙擊其邊框線就可進入自定義形狀模式，如圖2-26 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.4 編輯形狀圖 2-26 雙擊圖標邊框線進入自定義形狀模式【結合】和【分離】可視為互為逆向操作，【結合】可以將多個圖形元件結合在一起成為一個整體對象，結合后的對象采用最底層圖形元件的樣式，但結合后的每個圖形元件仍然保留原來的形狀，其獨立性的本質并未改變。執(zhí)行【結合】后，再對其【分離】，則分離后的每個元件不會恢復到【

21、結合】前的樣式，而是繼續(xù)保留了與結合時相同的樣式。需要注意的是，結合多個對象元件后，有時會出現鏤空，而有時幾個圖形元件的外觀保持不變，如圖2-27 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合和分離Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合和分離圖 2-27 同樣的圖形元件結合的結果不同下面先使用鋼筆工具沿著順時針方向繪制兩個封閉且重疊的圖形，然后再沿著逆時針方向繪制兩個封閉且重疊的圖形，如圖2-28 所示。Axure RP 8 交互原型設計案例教

22、程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合和分離圖 2-28 使用鋼筆工具按順時針方向繪制的兩個形狀接下來，分別選擇左側的兩個重疊圖形并執(zhí)行【結合】命令，對右側的兩個重疊圖形同樣執(zhí)行【結合】命令，會發(fā)現兩組圖形的結果相同，如圖2-29 所示。繼續(xù)使用鋼筆工具繪制兩個重疊的圖形，但是這一次繪制的兩個圖形，一個沿順時針方向，一個沿逆時針方向，如圖2-30 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合和分離Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的

23、樣式和形狀2.2.5 結合和分離圖 2-29 方向相同的重疊圖形結合的結果圖2-30 繪制的兩個方向相反的重疊圖形再次選擇兩個重疊的圖形并執(zhí)行【結合】命令，奇怪的現象發(fā)生了，兩個圖形重疊的位置竟然變成了鏤空的，如圖2-31 所示。例如，從【元件庫】面板中拖曳出一個橢圓形元件，然后將其復制一個放在原來橢圓的上方并適當將復制的橢圓變小，選擇小橢圓后，單擊【檢視】【樣式】子面板中的【水平鏡像】工具或者【垂直鏡像】工具，再選擇這兩個橢圓并執(zhí)行【結合】命令，鏤空就出現了，如圖2-32 所示。Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合

24、和分離Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.2 編輯圖形元件的樣式和形狀2.2.5 結合和分離圖 2-31 【結合】后出現了鏤空圖2-32 鏤空的圓創(chuàng)建自己的元件庫的具體步驟如下。（1）在【元件庫】面板中單擊【選項】按鈕，在彈出的菜單中執(zhí)行【創(chuàng)建元件庫】命令。（2）在打開的【保存Axure RP 元件庫】對話框中指定保存的位置、元件庫名稱，設置完成后單擊【保存】按鈕。（3）稍等片刻，會重新啟動一個Axure RP 程序，與先前打開的Axure RP不同的是，【頁面】面板名稱在新的程序界面中已經改成了【元件庫頁面】，如圖2-34 所示。Axure RP 8 交互原

25、型設計案例教程（微課版）第2章圖形元件2.3 自定義元件庫2.3.1 創(chuàng)建元件庫Axure RP 8 交互原型設計案例教程（微課版）第2章圖形元件2.3 自定義元件庫2.3.1 創(chuàng)建元件庫圖 2-34 重新啟動的Axure RP 程序界面（4）添加元件頁面。（5）在【元件庫頁面】面板中雙擊某個頁面以打開該頁面。（6）使用本章前面所學的創(chuàng)建和編輯圖形元件的方法，在當前頁面中創(chuàng)建出手機模型，在樣式工具欄或者【樣式】子面板中將橫縱坐標值都設置為0，這樣，繪制的圖形元件就放在了元件庫頁面的左上角位置了。重復步驟（5）和步驟（6），完成其余元件的繪制。（7）執(zhí)行【文件】【保存】（【Ctrl+S】）命令，保存當前繪制的元件，然后關閉當前程序，返回原來的Axure RP 程序界面。（8）如果Ax