大部分PM使用Visio或者M(jìn)indmanager來(lái)畫流程圖然后倒入Axure，而很少有人知道Axure自帶的流程圖功能也很實(shí)用。尤其是和原型搭配使用，絕對(duì)是雙劍合璧，天下無(wú)敵。

希望通我使用“原型+流程圖”的多年經(jīng)驗(yàn)，讓更多的PM也可以掌握并運(yùn)用到平常的原型設(shè)計(jì)工作中。

一、流程圖的通病

目前所有流程圖軟件都存在一個(gè)問(wèn)題，那就是流程圖無(wú)法關(guān)聯(lián)到原型頁(yè)面。

無(wú)法做到直接點(diǎn)擊流程圖里面的節(jié)點(diǎn)(頁(yè)面、功能、操作)，展示與之相關(guān)的更多信息。這樣子使用上面會(huì)很受限。

頁(yè)面流程圖無(wú)法查看指定頁(yè)面詳情

比如我們畫頁(yè)面流程圖，展示了所有頁(yè)面以及頁(yè)面間的流向關(guān)系。UI設(shè)計(jì)師和開(kāi)發(fā)童鞋，有時(shí)候需要查看某個(gè)頁(yè)面的具體內(nèi)容。

功能流程圖無(wú)法查看指定功能詳情

功能流程圖也存在類似的問(wèn)題，開(kāi)發(fā)童鞋想了解某個(gè)功能的具體情況，只能問(wèn)PM或者自己找對(duì)應(yīng)功能的原型頁(yè)面。

功能邏輯圖無(wú)法顯示具體控件

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

當(dāng)然也可以使用原始方法，直接復(fù)制過(guò)來(lái)，第一麻煩第二修改了無(wú)法同步。

無(wú)法對(duì)流程圖節(jié)點(diǎn)做注釋

流程圖是由一個(gè)個(gè)節(jié)點(diǎn)連接而成，有時(shí)候節(jié)點(diǎn)需要寫幾句話注釋一下。不是所有的流程圖軟件都能支持，更主要的是沒(méi)辦法做到默認(rèn)隱藏，點(diǎn)擊展開(kāi)注釋。除非你把流程導(dǎo)出為html格式，但是這樣子又不能導(dǎo)入到Axure中了。

二、Axure流程圖的介紹

以上這些使用問(wèn)題，都可以使用Axure的流程圖來(lái)滿足。接下來(lái)我會(huì)一一的來(lái)講解如何解決。

先簡(jiǎn)單介紹一下Axure的流程圖功能是什么，其實(shí)本質(zhì)上是一個(gè)元件庫(kù)。

含有很多種元件，用途各不相同。大家使用的時(shí)候盡量遵循其定義的通用規(guī)范。當(dāng)然如果你有特殊需要，可以單獨(dú)定義。

三、流程圖如何關(guān)聯(lián)頁(yè)面

Axure提供了兩種操作方法，本質(zhì)上都是設(shè)置“引用頁(yè)面”屬性，F(xiàn)low元件庫(kù)中的所有元件都具備該屬性。Dafault默認(rèn)元件庫(kù)中部分元件支持該屬性。

“引用頁(yè)面”除了關(guān)聯(lián)了對(duì)應(yīng)頁(yè)面，同時(shí)集成了對(duì)應(yīng)頁(yè)面的標(biāo)題。當(dāng)你修改頁(yè)面結(jié)構(gòu)中的頁(yè)面標(biāo)題，這里也會(huì)同步更新。

拖拽頁(yè)面到工作區(qū)

當(dāng)你畫頁(yè)面流程圖的時(shí)候，需要展示某個(gè)頁(yè)面的詳情。

那么選中Axure左方的頁(yè)面結(jié)構(gòu)中的該頁(yè)面。

然后拖動(dòng)到右邊的工作區(qū)即可，效果如下圖。

最終的顯示效果請(qǐng)查看我之前的文章，以及我繪畫的頁(yè)面原型圖。

其中右下角帶有“藍(lán)色矩形組”圖標(biāo)的矩形，代表可以點(diǎn)擊進(jìn)入該頁(yè)面的線框圖，查看詳細(xì)的頁(yè)面布局、控件、邏輯等。

設(shè)置引用頁(yè)面屬性

根據(jù)上圖，你應(yīng)該可以猜到其實(shí)拖曳頁(yè)面名稱到工作區(qū)，是創(chuàng)建了一個(gè)頁(yè)面并且設(shè)置了屬性“引用頁(yè)面”到該頁(yè)面。所以你也可以這樣做。

• 拖動(dòng)Flow元件庫(kù)中的元件到工作區(qū)
• 設(shè)置屬性“引用頁(yè)面”到你所需的頁(yè)面
• 生成原型查看效果。

四、流程圖如何關(guān)聯(lián)具體功能

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

• 設(shè)置“引用頁(yè)面”屬性到具體的功能頁(yè)面，方法如上。
• 設(shè)置單擊鏈接到具體的功能頁(yè)面，再簡(jiǎn)單不過(guò)。

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

在畫某個(gè)功能的具體邏輯時(shí)候，我們可以借助Axure的“頁(yè)面快照”功能來(lái)展示一些控件。有助于技術(shù)童鞋對(duì)功能的理解和實(shí)現(xiàn)。

新建頁(yè)面快照

從左方的Flow元件庫(kù)，拖動(dòng)”頁(yè)面快照”到右方的工作區(qū)。

設(shè)置引用頁(yè)面

方法和上面的類似，但是展示效果有點(diǎn)區(qū)別哦。所謂頁(yè)面快照是指將引用頁(yè)面的具體內(nèi)容顯示到該元件區(qū)域范圍里。比如我引用了閃電約首頁(yè)這個(gè)頁(yè)面，那么效果如下。

修改快照參數(shù)

顯示明顯有問(wèn)題，我們可以修改一下參數(shù)。

取消適應(yīng)比例，然后把該頁(yè)面快照元件的尺寸修改成375 x667，然后填充的相對(duì)坐標(biāo)改成(0,0,0,0)。此時(shí)快照效果如下。

配置動(dòng)作

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

大概是這樣子了，在設(shè)計(jì)商品詳情、購(gòu)物車、確認(rèn)訂單的時(shí)候，該功能特別適用。有需要的童鞋可以試下。

七、流程圖如何顯示節(jié)點(diǎn)的注釋

這個(gè)其實(shí)很簡(jiǎn)單，但是很多PM沒(méi)用過(guò)。

具體的可以查看我寫過(guò)的舊文《產(chǎn)品邏輯的常用表達(dá)法》，《Axure最正統(tǒng)的產(chǎn)品邏輯表達(dá)法》。

八、總結(jié)

以上這些技巧都是Axure自帶的流程圖功能，只是很少有人系統(tǒng)的總結(jié)并分享出來(lái)。

希望通過(guò)我的文章，大家以后能善用Axure的流程圖。而不是盲目的跟風(fēng)使用第三方腦圖軟件。

適合產(chǎn)品經(jīng)理的流程圖軟件就是Axure，配合強(qiáng)大的原型功能。絕對(duì)是雙劍合璧，天下無(wú)敵。

相關(guān)閱讀

產(chǎn)品邏輯的常用表達(dá)法

Axure最正統(tǒng)的產(chǎn)品邏輯表達(dá)法

如何正確的畫出功能流程圖

如何正確地畫出頁(yè)面流程圖

如何用ER圖繪制業(yè)務(wù)實(shí)體模型

如何繪畫狀態(tài)機(jī)來(lái)描述業(yè)務(wù)的變化

移動(dòng)PM需要梳理這些流程圖

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。