起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure原型設(shè)計(jì)：Axure原型加流程圖功能的高效結(jié)合
大部分PM使用Visio或者M(jìn)indmanager來畫流程圖然后倒入Axure，而很少有人知道Axure自帶的流程圖功能也很實(shí)用。尤其是和原型搭配使用，絕對是雙劍合璧，天下無敵。
希望通我使用“原型+流程圖”的多年經(jīng)驗(yàn)，讓更多的PM也可以掌握并運(yùn)用到平常的原型設(shè)計(jì)工作中。
一、流程圖的通病
目前所有流程圖軟件都存在一個問題，那就是流程圖無法關(guān)聯(lián)到原型頁面。
無法做到直接點(diǎn)擊流程圖里面的節(jié)點(diǎn)(頁面、功能、操作)，展示與之相關(guān)的更多信息。這樣子使用上面會很受限。
頁面流程圖無法查看指定頁面詳情
比如我們畫頁面流程圖，展示了所有頁面以及頁面間的流向關(guān)系。UI設(shè)計(jì)師和開發(fā)童鞋，有時(shí)候需要查看某個頁面的具體內(nèi)容。
功能流程圖無法查看指定功能詳情
功能流程圖也存在類似的問題，開發(fā)童鞋想了解某個功能的具體情況，只能問PM或者自己找對應(yīng)功能的原型頁面。
功能邏輯圖無法顯示具體控件
畫一個功能具體的步驟邏輯的時(shí)候，有時(shí)候我們需要展示一下其中的控件，比如寫下單流程的時(shí)候可能需要展示一下付款彈窗。
當(dāng)然也可以使用原始方法，直接復(fù)制過來，第一麻煩第二修改了無法同步。
無法對流程圖節(jié)點(diǎn)做注釋
流程圖是由一個個節(jié)點(diǎn)連接而成，有時(shí)候節(jié)點(diǎn)需要寫幾句話注釋一下。不是所有的流程圖軟件都能支持，更主要的是沒辦法做到默認(rèn)隱藏，點(diǎn)擊展開注釋。除非你把流程導(dǎo)出為html格式，但是這樣子又不能導(dǎo)入到Axure中了。
二、Axure流程圖的介紹
以上這些使用問題，都可以使用Axure的流程圖來滿足。接下來我會一一的來講解如何解決。
先簡單介紹一下Axure的流程圖功能是什么，其實(shí)本質(zhì)上是一個元件庫。
含有很多種元件，用途各不相同。大家使用的時(shí)候盡量遵循其定義的通用規(guī)范。當(dāng)然如果你有特殊需要，可以單獨(dú)定義。
三、流程圖如何關(guān)聯(lián)頁面
Axure提供了兩種操作方法，本質(zhì)上都是設(shè)置“引用頁面”屬性，F(xiàn)low元件庫中的所有元件都具備該屬性。Dafault默認(rèn)元件庫中部分元件支持該屬性。
“引用頁面”除了關(guān)聯(lián)了對應(yīng)頁面，同時(shí)集成了對應(yīng)頁面的標(biāo)題。當(dāng)你修改頁面結(jié)構(gòu)中的頁面標(biāo)題，這里也會同步更新。
拖拽頁面到工作區(qū)
當(dāng)你畫頁面流程圖的時(shí)候，需要展示某個頁面的詳情。
那么選中Axure左方的頁面結(jié)構(gòu)中的該頁面。
然后拖動到右邊的工作區(qū)即可，效果如下圖。
最終的顯示效果請查看我之前的文章，以及我繪畫的頁面原型圖。
其中右下角帶有“藍(lán)色矩形組”圖標(biāo)的矩形，代表可以點(diǎn)擊進(jìn)入該頁面的線框圖，查看詳細(xì)的頁面布局、控件、邏輯等。
設(shè)置引用頁面屬性
根據(jù)上圖，你應(yīng)該可以猜到其實(shí)拖曳頁面名稱到工作區(qū)，是創(chuàng)建了一個頁面并且設(shè)置了屬性“引用頁面”到該頁面。所以你也可以這樣做。
- 拖動Flow元件庫中的元件到工作區(qū)
- 設(shè)置屬性“引用頁面”到你所需的頁面
- 生成原型查看效果。
四、流程圖如何關(guān)聯(lián)具體功能
方法有2種，大家可以按需參考。
- 設(shè)置“引用頁面”屬性到具體的功能頁面，方法如上。
- 設(shè)置單擊鏈接到具體的功能頁面，再簡單不過。
五、流程圖如何顯示具體控件
在畫某個功能的具體邏輯時(shí)候，我們可以借助Axure的“頁面快照”功能來展示一些控件。有助于技術(shù)童鞋對功能的理解和實(shí)現(xiàn)。
新建頁面快照
從左方的Flow元件庫，拖動”頁面快照”到右方的工作區(qū)。
設(shè)置引用頁面
方法和上面的類似，但是展示效果有點(diǎn)區(qū)別哦。所謂頁面快照是指將引用頁面的具體內(nèi)容顯示到該元件區(qū)域范圍里。比如我引用了閃電約首頁這個頁面，那么效果如下。
修改快照參數(shù)
顯示明顯有問題，我們可以修改一下參數(shù)。
取消適應(yīng)比例，然后把該頁面快照元件的尺寸修改成375 x667，然后填充的相對坐標(biāo)改成(0,0,0,0)。此時(shí)快照效果如下。
配置動作
比如你可以設(shè)置該頁面隱藏一些控件，或者展示隱藏的彈框，吐司提示。
大概是這樣子了，在設(shè)計(jì)商品詳情、購物車、確認(rèn)訂單的時(shí)候，該功能特別適用。有需要的童鞋可以試下。
七、流程圖如何顯示節(jié)點(diǎn)的注釋
這個其實(shí)很簡單，但是很多PM沒用過。
具體的可以查看我寫過的舊文《產(chǎn)品邏輯的常用表達(dá)法》，《Axure最正統(tǒng)的產(chǎn)品邏輯表達(dá)法》。
八、總結(jié)
以上這些技巧都是Axure自帶的流程圖功能，只是很少有人系統(tǒng)的總結(jié)并分享出來。
希望通過我的文章，大家以后能善用Axure的流程圖。而不是盲目的跟風(fēng)使用第三方腦圖軟件。
適合產(chǎn)品經(jīng)理的流程圖軟件就是Axure，配合強(qiáng)大的原型功能。絕對是雙劍合璧，天下無敵。
相關(guān)閱讀
Axure最正統(tǒng)的產(chǎn)品邏輯表達(dá)法
如何繪畫狀態(tài)機(jī)來描述業(yè)務(wù)的變化
#專欄作家#
浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
你這是什么流程圖？你這是業(yè)務(wù)流程圖？
厲害厲害，這個方法確實(shí)強(qiáng)大。感覺看了樓主的很多文章才發(fā)現(xiàn)了AXURE真正強(qiáng)大的實(shí)力。
請問連接線上的文字是怎么寫出來的？
使用連接線模式，然后雙擊就可以在上面寫文字。以后有問題請?zhí)砑庸娞杔angzisay提問哦。
請教，Axure畫泳道圖有什么心得嗎？
Axure不太適合畫泳道圖，還不如直接畫業(yè)務(wù)序列圖。
直接用表格，然后底層顯示就可以了
想問一下如何配置能出來藍(lán)色矩形
生成原型的時(shí)候，配置-交互-在新窗口中顯示引用頁的圖標(biāo)，把它選中即可。
把樓主的幾乎文章全部都看了一遍，大三狗產(chǎn)品小白一枚，這樣的干貨對于我確實(shí)很有用，打算周末的時(shí)候好好自己整理輸出一下，能跟我的實(shí)習(xí)公司導(dǎo)師提一下如何改進(jìn)公司的交互稿。不知道能不能加一下樓主的微信？感謝分享！??！
nuanai88
可惜axure沒有腦圖功能，不然就全了
沒有類似于xmind、mindmanager的樹狀腦圖框架，但是完全可以使用axure做出類似的效果，而且并不麻煩。
尤其是一鍵生成頁面流程圖。
可是一般工作流程不都先畫腦圖框架，再畫原型嗎？
是的啊，先架構(gòu)，后原型。和這篇文章并不矛盾。
謝謝分享。
可點(diǎn)擊元件的右下角的藍(lán)色矩形組是標(biāo)準(zhǔn)元件么？我找了下，沒發(fā)現(xiàn)。。。
那是頁面引用功能。
rp源文件中可以學(xué)到如何使用。
我查看了也用了引用功能。確實(shí)也引用，能點(diǎn)擊跳轉(zhuǎn)。但就是沒有這個藍(lán)色的矩形?？赡苁茿xure 版本不一樣吧。我的8.0.
配置的時(shí)候，需要處理下。
嗯 ，我研究研究。多謝。
我也是同樣的情況，你解決了嗎
又很長時(shí)間沒用Axure 了。還沒去研究呢。抱歉。
你的axure版本是多少？我的7.0沒看到引用頁面這個功能。
axure rp 8.0
呃呃呃呃
你這樣的畫，流程圖是有的，但是原型里面都是圖片到時(shí)候改起來不方便啊
請認(rèn)真看，展示的效果像圖片，本質(zhì)上只是引用。
修改的時(shí)候和修改母版是類似的，一處修改，多處生效。
詳細(xì)，可以搬來學(xué)習(xí)，謝謝分享 ??