Axure原型設計：Axure原型加流程圖功能的高效結合

大部分PM使用Visio或者Mindmanager來畫流程圖然後倒入Axure，而很少有人知道Axure自帶的流程圖功能也很實用。尤其是和原型搭配使用，絕對是雙劍合璧，天下無敵。

希望通我使用“原型+流程圖”的多年經驗，讓更多的PM也可以掌握並運用到平常的原型設計工作中。

一、流程圖的通病

目前所有流程圖軟件都存在一個問題，那就是流程圖無法關聯到原型頁面。

無法做到直接點擊流程圖裡面的節點(頁面、功能、操作)，展示與之相關的更多信息。這樣子使用上面會很受限。

頁面流程圖無法查看指定頁面詳情

比如我們畫頁面流程圖，展示了所有頁面以及頁面間的流向關係。UI設計師和開發童鞋，有時候需要查看某個頁面的具體內容。

功能流程圖無法查看指定功能詳情

功能流程圖也存在類似的問題，開發童鞋想了解某個功能的具體情況，只能問PM或者自己找對應功能的原型頁面。

功能邏輯圖無法顯示具體控件

畫一個功能具體的步驟邏輯的時候，有時候我們需要展示一下其中的控件，比如寫下單流程的時候可能需要展示一下付款彈窗。

當然也可以使用原始方法，直接複製過來，第一麻煩第二修改了無法同步。

無法對流程圖節點做註釋

流程圖是由一個個節點連接而成，有時候節點需要寫幾句話註釋一下。不是所有的流程圖軟件都能支持，更主要的是沒辦法做到默認隱藏，點擊展開註釋。除非你把流程導出為html格式，但是這樣子又不能導入到Axure中了。

二、Axure流程圖的介紹

以上這些使用問題，都可以使用Axure的流程圖來滿足。接下來我會一一的來講解如何解決。

先簡單介紹一下Axure的流程圖功能是什麼，其實本質上是一個元件庫。

含有很多種元件，用途各不相同。大家使用的時候儘量遵循其定義的通用規範。當然如果你有特殊需要，可以單獨定義。

三、流程圖如何關聯頁面

Axure提供了兩種操作方法，本質上都是設置“引用頁面”屬性，Flow元件庫中的所有元件都具備該屬性。Dafault默認元件庫中部分元件支持該屬性。

“引用頁面”除了關聯了對應頁面，同時集成了對應頁面的標題。當你修改頁面結構中的頁面標題，這裡也會同步更新。

拖拽頁面到工作區

當你畫頁面流程圖的時候，需要展示某個頁面的詳情。

那麼選中Axure左方的頁面結構中的該頁面。

然後拖動到右邊的工作區即可，效果如下圖。

最終的顯示效果請查看我之前的文章，以及我繪畫的頁面原型圖。

其中右下角帶有“藍色矩形組”圖標的矩形，代表可以點擊進入該頁面的線框圖，查看詳細的頁面佈局、控件、邏輯等。

設置引用頁面屬性

根據上圖，你應該可以猜到其實拖曳頁面名稱到工作區，是創建了一個頁面並且設置了屬性“引用頁面”到該頁面。所以你也可以這樣做。

• 拖動Flow元件庫中的元件到工作區
• 設置屬性“引用頁面”到你所需的頁面
• 生成原型查看效果。

四、流程圖如何關聯具體功能

方法有2種，大家可以按需參考。

• 設置“引用頁面”屬性到具體的功能頁面，方法如上。
• 設置單擊鏈接到具體的功能頁面，再簡單不過。

五、流程圖如何顯示具體控件

在畫某個功能的具體邏輯時候，我們可以藉助Axure的“頁面快照”功能來展示一些控件。有助於技術童鞋對功能的理解和實現。

新建頁面快照

從左方的Flow元件庫，拖動”頁面快照”到右方的工作區。

設置引用頁面

方法和上面的類似，但是展示效果有點區別哦。所謂頁面快照是指將引用頁面的具體內容顯示到該元件區域範圍裡。比如我引用了閃電約首頁這個頁面，那麼效果如下。

修改快照參數

顯示明顯有問題，我們可以修改一下參數。

取消適應比例，然後把該頁面快照元件的尺寸修改成375 x667，然後填充的相對座標改成(0,0,0,0)。此時快照效果如下。

配置動作

比如你可以設置該頁面隱藏一些控件，或者展示隱藏的彈框，吐司提示。

大概是這樣子了，在設計商品詳情、購物車、確認訂單的時候，該功能特別適用。有需要的童鞋可以試下。

七、流程圖如何顯示節點的註釋

這個其實很簡單，但是很多PM沒用過。

八、總結

以上這些技巧都是Axure自帶的流程圖功能，只是很少有人系統的總結並分享出來。

希望通過我的文章，大家以後能善用Axure的流程圖。而不是盲目的跟風使用第三方腦圖軟件。

適合產品經理的流程圖軟件就是Axure，配合強大的原型功能。絕對是雙劍合璧，天下無敵。