AxureRP介紹–架構圖和流程圖

2 評論 74729 瀏覽 104 收藏 6 分鐘

1.繪制架構圖

每一個網站的規劃,少不了要繪制樹狀的網站架構,架構圖能夠以可視化的方式呈現網頁層級。在Axure RP的站點地圖面板定義好網站結構,只要點擊一下就可以轉成樹狀架構圖。開啟一個空白頁面,在站點地圖面板中的最上層頁面(index或 home),按鼠標右鍵,選擇“生成流程圖”,此時會出現一個對話框,尋問想要產生標準或是右懸掛的選項。

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

Axure RP輸出的樹狀架構圖的字體/節點顏色等,可以透過上方的工具列自行調整字體顏色/區塊填色/線條粗細顏色等等。如果樹狀架構圖過于龐大,也可以從次單元首頁,按鼠標右鍵,選擇生成流程圖,選擇輸出選項右懸掛,來逐步依次輸出每個樹枝的結構,再組合成完整的樹狀架構圖。

2流程圖

2.1流程圖

流程圖可以用來表達各式各樣的流程,包括:用例、商業流程與網頁流程,在Axure RP中,流程圖常被用來說明所設計頁面可以達成的功能或者過程。不過Axure RP不比Visio這樣專業的畫圖工具,Axure RP只是提供了比較簡單的功能,因此需要繪制更加專業和規范的流程圖時,還是別用Axure RP了,畢竟這里只是用來做輔助說明的。

在站點地圖面板的某個頁面上按鼠標右鍵并選擇圖表類型—流程圖,可將頁面標示為流程圖的圖案,不過這不是建立流程圖所必要的動作,這個動作與繪制流程圖沒有關聯性,只是用來辨識這個頁面放置流程圖或線框圖。

2.2 流程圖組件

在組件選擇面板工具列上下拉選擇流程圖,可以找到各種流程圖組件,可以用來代表不同的流程步驟,如果找不到適合的形狀,也可以使用圖片組件來代替。通常在流程圖中不同的形狀的圖形分別代表著特定的意義,但是Axure RP 并沒有限制這些圖形的使用,一般來說,只要看的懂就是最好的規則。

2.3 畫流程圖

流程圖組件也可以直接從組件選擇面板中拖拉出來,然后通過工具列或快捷菜單來編輯樣式與屬性,如果要改變流程形狀的話,可以按鼠標右鍵并選擇編輯流程形狀子選單中的項目來設置。

連接線:?流程圖組件和線框圖組件最主要的不同就是流程圖組件具有可以附加連接線的連接點。想要加上連接線的話,先按下工具列上的連接線模式,之后在按下鼠標左鍵并拖曳,就可以畫出一條連接線。

若是要連接兩個流程圖組件的,在其中一個組件上的連接點按住鼠標左鍵,拖拉連接線到另一個組件上的連接點后放開鼠標,就可以新增一條連接線;也可以利用拖曳連接點的方式將已經建立好的連接線附加到另一個流程圖組件的連接點上。連接線也可以套用線條末端(例如:箭頭)與線條樣式(例如:虛線),只要先選好要設定的連接線,再使用工具列上的線條樣式與箭頭樣式按鈕即可。

2.4 關聯網頁

流程圖組件可以關聯到任意指定的一個頁面,一旦指定了關聯網頁,流程圖組件上會顯示這個網頁的名稱,而在原型上,這個流程圖組件與網頁間會自動建立超級鏈接。從站點地圖面板中,將任一網頁拖拉到主操作區中,也會建立一個以這個網頁當作關聯網頁的流程圖組件。

流程圖組件上的關聯網頁可以通過在組件上按鼠標右鍵,并選擇編輯流程形狀->編輯引用頁面來編輯或清除。

2.5 輸出流程圖

在Auxre RP繪制的流程圖,可以輸出成圖片或網頁。

輸出成圖片:選擇文件 >導出為圖片,就可以單獨把這頁流程圖轉成圖片。如果想把流程圖放到Powerpoint或Word文件,可以直接全選整個 Axure RP流程圖,以復制/粘貼的方式貼到Powerpoint或Word文件中。

輸出成原型:輸出流程圖到原型方式跟輸出其它網頁到原型相同,按下Axure RP上方主功能選單工具菜單,選擇生成原型即可。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!