四. 架構圖&流程圖

流程圖&連接線

1.流程圖

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

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

Axure_Digram_Type

2. Flow Widget

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

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

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


3. 建立流程圖

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

Axure Flowchart

連接線

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

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

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

Axure Connector Line若是要連接兩個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」來編輯或清除。

Axure 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)」即可。

axure flowchart prototype

6. 秘技(Quick Tips)

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

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

click繪製架構圖

 

1-click繪製架構圖

1. 自動繪製架構圖(sitemap) 2. 觀看教學影片


1. 自動繪製架構圖

每一個網站的規劃,少不了要繪製樹狀的網站架構(sitemap diagram),架構圖能夠以視覺化的方式呈現網頁階層。

您在Axure RP的sitemap窗格定義好的網站架構,只要one-click就可以轉成樹狀架構圖。

建議您先開啟一個空白頁面,命名為』Sitemap』或者其他您覺得有意義的名稱。

接下來,在sitemap窗格中的最上層頁面(root 或 home),按滑鼠右鍵,選擇「Generate Flow Diagram」,此時會出現「Generate Flow Diagram」對話方塊,尋問您想要產生「Standard 」或是「 Right Hanging 」的選項。

axure generate flow diagram

 

接下來Axure RP就會把您所選擇的sitemap架構,繪製成樹狀架構在頁面上,而且樹狀架構圖中的網頁節點會自動連結到對應網頁。

axure generate sitemap

 

Axure RP輸出的樹狀架構圖的字體/節點顏色等,可以透過上方的工具列自行調整字體顏色/區塊填色/線條粗細顏色等等。

如果樹狀架構圖過於龐大,您也可以從次單元首頁,按滑鼠右鍵,選擇「Generate Flow Diagram」, 選擇輸出選項「 Right Hanging 」,來逐步依次輸出每個樹枝的結構,再組合成完整的樹狀架構圖。

 

posted @ 2014-05-07 16:28  roilat  阅读(458)  评论(0编辑  收藏  举报