流程圖&連接線

1. 流程圖
2. Flow Widget
3. 建立流程圖
4. 關聯網頁
5. 輸出流程圖
6. 秘技(Quick Tips)

1.流程圖

流程圖可以用來表達各式各樣的流程，包括：Use Case、商業流程與網頁流程，在Axure RP中，流程圖常被用來提供一個高階視角(high level view)來看網頁設計可以達成的工作。

在Sitemap窗格中的網頁標示圖案，預設為網頁形狀的ICON，您可以在Sitemap中的網頁上按滑鼠右鍵並選擇「Diagram Type->Flow」，將網頁標示圖案設定為流程圖ICON。不過，這不是建立流程圖所必要的動作。這個動作與繪製流程圖沒有關聯性，只是用來辨 識這個頁面放置流程圖或線框圖。

2. Flow Widget

按下Widgets窗格工具列上的「Flow」可以找到各種流程Widget。

在Widgets 窗格中有各種形狀的Widget可以用來代表不同的流程步驟，如果您找不到適合的形狀，也可以使用Image Widget來代替。

依慣例，在流程圖中不同的形狀的圖形分別代表著特定的意義，但是Axure RP 並沒有限制這些圖形的使用，一般來說，只要您的客戶看的懂就是最好的規則。

3. 建立流程圖

就像 Wireframe Widget一樣，Flow Widget也可以直接從Widgets 窗格中拖拉到Wireframe 窗格，然後透過工具列或快顯功能表(Context Menu)來編輯樣式與屬性，如果要改變流程形狀的話，可以按滑鼠右鍵並選擇「Edit Flow Shape」子選單中的項目。

連接線

Flow Widget和Wireframe Widget最主要的不同就是Flow Widget具有可以附加連接線的連接點。

想 要加上連接線的話，請先按下工具列上的【Connector Mode (F11)】鈕，將Wireframes 窗格改變為Connector Mode，若是要將Wireframe窗格切換回Pointer Mode的話，則請按下【Pointer Mode (F9)】鈕。

切換到Connector Mode後，在Wireframe 窗格中按一下滑鼠左鍵並拖曳，就可以畫出一條連接線。

若是要連接兩個Flow Widget的，請在其中一個Widget上的連接點按住滑鼠左鍵，拖拉連接線到另一個Widget上的連接點後放開滑鼠，就可以新增一條連接線；您也可以利用拖曳連接點的方式將已經建立好的連接線附加到另一個Flow Widget的連接點上。

連接線也可以套用線條末端(例如：箭頭)與線條樣式(例如：虛線)，只要先選好您要設定的連接線，再使用工具列上的Line Pattern 與Line Ends按鈕即可。

4. 關聯網頁

Flow Widget可以關聯到任意指定的一個參考網頁，一旦指定了關聯網頁，Flow Widget上會顯示這個網頁的名稱，而在Prototype中，這個Flow Widget與網頁間會自動建立Hyperlink連結。

從Sitemap窗格中，將任一網頁拖拉到Wireframe窗格中，也會建立一個以這個網頁當作關聯網頁的Flow Widget。

Flow Widget 上的關聯網頁可以透過在Widget上按滑鼠右鍵，並選擇「Edit Flow Shape->Edit Reference Page」來編輯或清除。

5. 輸出流程圖

在Auxre RP繪製的流程圖，可以輸出成圖檔或網頁。

輸出成圖檔:

選擇「File > Export to Image」，就可以把單獨這頁流程圖轉成圖檔。 如果您想把流程圖放到Powerpoint或Word文件，可以直接全選整個 Axure RP流程圖，以Coyp/Paste的操作方式貼到Powerpoint或Word文件中。

輸出成Prototype:

是的，流程圖可以直接在瀏覽器上觀看。輸出流程圖到Html Prototype方式跟輸出其他網頁到Prototype相同，請按下Axure RP軟體上方主功能選單「Generate」功能表，選擇「Prototype(F5)」即可。

6. 秘技(Quick Tips)

秘技一. 固定連接線，取消自動繞圖:

在預設的情況下，連接線會自動繞過中間阻礙的Widget來連接兩個連接點，為了避免連接線或Widget移動時連接線不斷的自動改變路徑，您可以 按滑鼠右鍵並選擇「Edit Connector->Do Not Autoreflow Connector」來停止這個功能。

資料來源: http://userxper.com/axure_tutorial/axure-flow-diagram/axure_flowchart