1、第6章 流程圖Axure RP 8 交互原型設計案例教程第1頁，共19頁。在【元件庫】面板中，可以找到流程圖元件庫，如圖6-1 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件圖 6-1 流程圖元件庫第2頁，共19頁。凡事都有規可循，為便于識別，流程圖也有一套約定成俗的標準圖形。Axure RP 中主要流程圖元件的含義如表6-1 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件表6-1 流程圖圖標含義第3頁，共19頁。快照引用頁面有3 種方法。1. 雙擊頁面中的快照元件在打開

2、的【引用頁面】對話框中選擇要引用的頁面，如圖6-2所示。2. 右擊頁面中的快照元件右擊頁面中的快照元件，從彈出的快捷菜單中執行【引用頁面或者母版】命令。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件圖 6-2 選擇引用的頁面第4頁，共19頁。3. 通過【屬性】子面板添加引用頁面選擇頁面上的快照元件后，在【檢視】【屬性】子面板的“快照”參數欄中單擊“添加引用頁面”。快照引用的頁面不可以是快照所在的頁面。當快照引用了一個頁面后，引用頁面的內容如果發生了改變，則快照也會實時發生改變。默認狀態下，快照引用頁面后，會自動調整引用頁面的大小比例，以適

3、合快照元件的大小。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件第5頁，共19頁。當然也可以在【屬性】子面板中設置引用頁面在快照元件中的大小和偏移，例如，將引用頁面向右偏移20 像素，向下偏移50 像素，并且將引用頁面整體大小縮放到原來的一半，如圖6-3 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件圖 6-3 設置引用頁面在快照中的偏移量和大小第6頁，共19頁。無論是否選擇“適應比例”，都可以設置引用頁面在快照中的邊距，默認狀態下，引用頁面在快照元件4 條邊的邊距都是5 像素

4、，如圖6-4 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.1 認識流程圖元件圖 6-4 快照周圍4 條邊的邊距第7頁，共19頁。使用主工具欄的【連接模式】工具（【Ctrl+3】）可以將流程圖元件連接起來。首先在頁面創建相應的流程圖元件，然后使用【連接模式】工具將各個元件連接起來。使用該工具連接元件時，會在元件周圍出現標志，該標志就是元件中可以連接的點，按下鼠標左鍵并將鼠標指針拖到另一個元件（目標元件），此時另一個元件也會出現標志。將鼠標指針對準要連接的標志時，該標志處出現一個紅色的小圓圈，釋放鼠標左鍵即可連接起來。Axure RP 8 交互原型設計

5、案例教程第6章流程圖6.1 使用流程圖元件6.1.2 連接流程圖元件第8頁，共19頁。流程圖之間是用連接線連接的，可以使用【連接模式】工具編輯連接線連接的位置，也可以設置連接的顏色、寬度、類型以及是否添加箭頭等操作，如圖6-5 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.3 編輯流程圖的連接線圖 6-5 編輯后的連接線第9頁，共19頁。編輯元件的連接錨點主要包括移動、添加和刪除三項操作。1. 移動連接錨點位置默認狀態下，一個元件上通常會有4 個連接錨點。如果要添加、刪除或者移動連接的錨點，可以使用主工具欄上的【連接錨點】工具（【Ctrl+8】）。首

6、先要選擇頁面上的元件，然后選擇【連接錨點】工具，此時元件周圍出現4 個小圓圈，如圖6-6 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.4 編輯元件的連接錨點圖 6-6 【連接錨點】工具第10頁，共19頁。使用【連接錨點】工具拖動某個小圓圈即可改變連接錨點的位置，如圖6-7 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.4 編輯元件的連接錨點圖 6-7 改變連接錨點的位置第11頁，共19頁。2. 添加連接錨點使用【連接錨點】工具直接在原件上單擊即可添加更多的連接錨點。3. 刪除連接錨點使用【連接錨點】工具選

7、擇要刪除的連接錨點并按【Delete】鍵，即可刪除多余的連接錨點，或者使用【連接錨點】工具右擊要刪除的連接錨點，從彈出的快捷菜單中執行【刪除】命令，也可以刪除多余的連接錨點。Axure RP 8 交互原型設計案例教程第6章流程圖6.1 使用流程圖元件6.1.4 編輯元件的連接錨點第12頁，共19頁。默認狀態下，啟動Axure RP 時自動生成的4 個頁面都是普通的頁面，可以使用鼠標右擊某個頁面，在彈出的快捷菜單中執行【頁面類型】中的兩個子菜單命令【頁面】和【流程圖】，如圖6-8 所示。如果執行【流程圖】命令，則當前頁面的圖標就變成了流程圖的圖標，如圖6-9 所示。Axure RP 8 交互原型

8、設計案例教程第6章流程圖6.2 使用頁面生成流程圖6.2.1 頁面類型圖 6-8 【頁面類型】命令 圖6-9 【頁面類型】命令第13頁，共19頁。在各個頁面上編輯好相應的內容之后，就可以將關聯的頁面生成有層次的流程圖。1. 重命名頁面重命名每個頁面并在每個頁面添加相應的圖文以及交互內容。2. 生成流程圖在哪個級別的頁面上生成流程圖，就在哪個頁面上右擊，從彈出的快捷菜單中執行【生成流程圖】命令，彈出【生成流程圖】對話框，如圖6-10 所示。Axure RP 8 交互原型設計案例教程第6章流程圖6.2 使用頁面生成流程圖6.2.2 從頁面生成流程圖圖 6-10 【生成流程圖】對話框第14頁，共19

9、頁。執行【文件】菜單下的【打印】、【打印主頁】、【導出主頁為圖片】和【導出所有頁面為圖片】4個命令都可以將流程圖導出為圖片。1. 通過打印輸出為圖片2. 通過導出命令輸出為圖片Axure RP 8 交互原型設計案例教程第6章流程圖6.3 導出流程圖6.3.1 導出為圖片第15頁，共19頁。如果要將流程圖頁面導出為網頁格式，則執行【發布】【生成HTML 文件】（【F8】）命令，也可以單擊【主工具欄】右側的【發布】按鈕，在彈出的列表命令中執行【生成HTML 文件】。執行【生成HTML 文件】命令后，在彈出的對話框中，指定保存HTML 文件的目錄位置，在“打開”欄中可以保持默認選項，單擊【生成】按鈕，即可將當前的文檔輸出為網頁格式。輸出完畢后，由于默認勾選了“默認瀏覽器”選項，所以會自動打開網頁瀏覽器瀏覽輸出的效果。如果流程圖是通過頁面創建的，則生成HTML 文檔后，單擊流程圖中的某個矩形元件，會自動跳轉到對應的頁面，這也是最簡單的一種交互了。Axure RP 8 交互原型設計案例教程第6章流程圖6.3 導出流程圖6.3.2 導出為網頁格式第16頁，共19頁。本章總結第17頁，共19頁。本章總結通過本章的學習，讀者應熟練掌握流程圖元件的使用方法以及建立流程圖的方法，熟練使