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

29 評論 175312 瀏覽 616 收藏 9 分鐘

大部分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的流程圖。而不是盲目的跟風使用第三方腦圖軟件。

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

相關閱讀

產品邏輯的常用表達法

Axure最正統的產品邏輯表達法

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

如何正確地畫出頁面流程圖

如何用ER圖繪制業務實體模型

如何繪畫狀態機來描述業務的變化

移動PM需要梳理這些流程圖

#專欄作家#

浪子,業務型PM,浪子PRD系列51prd.com,公眾號langzisay。

本文由 @浪子 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你這是什么流程圖?你這是業務流程圖?

    來自北京 回復
  2. 厲害厲害,這個方法確實強大。感覺看了樓主的很多文章才發現了AXURE真正強大的實力。

    來自廣東 回復
  3. 請問連接線上的文字是怎么寫出來的?

    來自湖北 回復
    1. 使用連接線模式,然后雙擊就可以在上面寫文字。以后有問題請添加公眾號langzisay提問哦。

      來自上海 回復
  4. 請教,Axure畫泳道圖有什么心得嗎?

    來自北京 回復
    1. Axure不太適合畫泳道圖,還不如直接畫業務序列圖。

      來自上海 回復
    2. 直接用表格,然后底層顯示就可以了

      來自四川 回復
  5. 想問一下如何配置能出來藍色矩形

    來自北京 回復
    1. 生成原型的時候,配置-交互-在新窗口中顯示引用頁的圖標,把它選中即可。

      來自上海 回復
  6. 把樓主的幾乎文章全部都看了一遍,大三狗產品小白一枚,這樣的干貨對于我確實很有用,打算周末的時候好好自己整理輸出一下,能跟我的實習公司導師提一下如何改進公司的交互稿。不知道能不能加一下樓主的微信?感謝分享?。?!

    來自浙江 回復
    1. nuanai88

      回復
  7. 可惜axure沒有腦圖功能,不然就全了

    來自廣東 回復
    1. 沒有類似于xmind、mindmanager的樹狀腦圖框架,但是完全可以使用axure做出類似的效果,而且并不麻煩。
      尤其是一鍵生成頁面流程圖。

      回復
    2. 可是一般工作流程不都先畫腦圖框架,再畫原型嗎?

      來自浙江 回復
    3. 是的啊,先架構,后原型。和這篇文章并不矛盾。

      來自浙江 回復
  8. 謝謝分享。
    可點擊元件的右下角的藍色矩形組是標準元件么?我找了下,沒發現。。。

    來自四川 回復
    1. 那是頁面引用功能。

      來自上海 回復
    2. rp源文件中可以學到如何使用。

      來自上海 回復
    3. 我查看了也用了引用功能。確實也引用,能點擊跳轉。但就是沒有這個藍色的矩形??赡苁茿xure 版本不一樣吧。我的8.0.

      來自四川 回復
    4. 配置的時候,需要處理下。

      來自上海 回復
    5. 嗯 ,我研究研究。多謝。

      來自四川 回復
    6. 我也是同樣的情況,你解決了嗎

      來自北京 回復
    7. 又很長時間沒用Axure 了。還沒去研究呢。抱歉。

      來自四川 回復
  9. 你的axure版本是多少?我的7.0沒看到引用頁面這個功能。

    來自廣東 回復
    1. axure rp 8.0

      來自上海 回復
  10. 呃呃呃呃

    回復
  11. 你這樣的畫,流程圖是有的,但是原型里面都是圖片到時候改起來不方便啊

    來自廣東 回復
    1. 請認真看,展示的效果像圖片,本質上只是引用。
      修改的時候和修改母版是類似的,一處修改,多處生效。

      來自上海 回復
  12. 詳細,可以搬來學習,謝謝分享 ??

    來自廣東 回復