Axure教程:中繼器實現列表到詳情頁的數據傳遞

18 評論 76276 瀏覽 265 收藏 8 分鐘

作為一個產品經理如果不會使用Axure估計都不好意在人前講自己如何如何了得,但光會用Axure做線框圖就夠了嗎?顯然是不夠的,在產品設計中很多時候我們需要使用到高保真原型,而高保真原型的制作需要使用到Axure中許多復雜的功能,動態模板是最常用的,中繼器能夠的使用能夠使我們模擬實現數據交換,至于說Axure中的內置函數神馬的那就更不是一般產品經理可以掌握的了。

在這次移動端的項目中,多處涉及到從列表頁到詳情頁的情況,項目中要求體現一定的數據交換的過程。而之前很多時候均是使用動態模板來控制對應關系,一直這樣使用自然是熟悉的很而且也容易實現,但是很難達到真實的使用場景的效果(模擬數據交互)。因為動態模板中的內容均是寫死的若是列表有100項,那么詳情頁也需要預先設置好100頁。作為一個有夢想的產品汪,我怎么能把我寶貴的時間浪費在如此沒有技術含量的重復性工作上?故我鼓起勇氣,拿起武器花了5天時間終于把Axure中實力強大的中繼器給拿下。

下面是實現的效果圖,你看到的圖標,均已經實現了它該有的功能,搜索、分類、頂部欄分類滑動等等,鑒于文章篇幅不宜過長的原則,這一次只講解列表到詳情頁的數據傳遞(只是講解了關鍵設置點)。

PS:哈哈甚至于我把它轉化為IOS的桌面文件時,我的同事還以為是一個真實的手機應用(仰天狂笑?。。。?/p>

列表頁

1

2

詳情頁

兩個頁面中的內容均是一一對應的關系。

在整個實現過程中有幾點需要特別注意:

  1. 中繼器只有在同一個頁面中才能共享到數據;
  2. 在多個中繼器中傳輸數據時,必須在數據源的中繼器中把數據傳輸出來,在接受的中繼器中是不能主動去獲取源中繼器中的數據;
  3. 通過使用indexof函數可以實現數據篩選,在結合相關事件出發賦值行為,可以實現多種形勢的篩選
  4. 在中繼器中并不是所有的數據都需要現實,有些字段可以作為隱性數據,用于實現特殊功能存在
  5. 過濾器使用時一定要注意清楚時間,axure中自帶有清楚單個規則的過濾或是清除中繼器中所有過濾規則
  6. 通過中繼器分頁功能能夠很好的制作列表到詳情的這種跳轉關系
  7. 中繼器中各種值的傳遞,以及通過一些自帶的函數間接傳值都是很常用的方法,通過主動設置變量可以把部件中的值傳遞到中繼器中或進行一些特殊的處理

先給看下我中繼器中的數據是如何設置的,注意數據屬性的字段,整個項目中會用到兩個中繼器,簡便起見直接保持兩個中繼器的字段一致,只是有些無用的字段具體使用時不使用即可。

3

這就是我中繼器中所有的數據,通過這些數據我顯示了列表頁與詳情頁一一對應關系的跳轉邏輯,下面是中繼器中基本項的設置,此處需要注意上面的數據項比基本項中的數量要多,那么多出的數據有什么用呢?在實際中,列表中的信息往往都是比較少的,而詳情頁de內容是是否豐富的,在上面設置的很多的屬性均是只在詳情頁才會使用到。而如何把數據傳遞到詳情頁呢?這是一個問題,容我一一道來:

下圖是第一個中繼器中的基本項設置。

4

中用例中我們可能之前已經看到有中繼器這個選項,其下也有Datasets這個選項,以前不知道有什么用。這幾個操作是在本次項目中使用最平凡的功能。下面整體講解下數據傳遞的邏輯:在源中繼器中把數據都錄入以后,通過”add rows”功能。

5

數傳遞的過程圖,注意箭頭方向,以及圖中的說明文字

6

接著上一張圖,與上一張圖在一個連續的流程中,

7

選擇完成后一步一步確認即可,

下圖是對數據進行標記,方便后面進行數據更新。

8

標記數據

更新數據,傳遞到第二個中繼器中。

9

確認即可,數據傳遞已經完成,哎還是有點復雜啊 :)

下面這個是在第二個中繼器中設置的,建立一個列表與詳情頁一一對應的關系。

10

好了整個項目中最關鍵的點已經說完了,圖有點多,有點復雜,不過仔細看一定可以顯示兩個中繼器之間的數據傳遞,列表與詳情頁一一對應的關系也是沒有問題的,有了這個通用控件我們就可以實現海量數據的列表和詳情頁的原型啦??!

若是有任何因為講解不到位的地方,而產生的疑問都可以留言或是私信我,一定會給答復的。

最后附上附件,希望對同學們有所幫助。

作者本人提供:

百度云盤:http://pan.baidu.com/s/1uliIq(公開鏈接)

備用鏈接(人人官方源)

鏈接: http://pan.baidu.com/s/1gd12Ayf

密碼: j7yw

 

本文由 @劉志科(微信號cainiaoPM) 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 更新那一行的操作可以不做,因為在添加那行的時候,通過函數就已經把數據添加過去了

    來自廣東 回復
  2. 求教:發現您是把列表頁和詳情頁做到了一個page上面的。如果是列表頁和詳情頁是2個頁面,還能實現嗎?

    來自北京 回復
    1. 同問

      來自上海 回復
    2. 知道了。
      直接用全局變量,在click button上設置點擊事件的同時把需要的參數一并帶過去就好了

      來自上海 回復
    3. ??

      來自北京 回復
  3. 您好! 您個這個附件 下載了 之后卻無法打開 請問是哪個版本的什么文件 用什么打開?

    來自北京 回復
  4. 好難呀,沒有看懂呀!

    來自河北 回復
  5. 剛接觸axure,還是沒整明白,求樓主大神指導,我是在兩個頁面添加了中繼器,跟你這個挺像的,也是列表頁和詳情頁的跳轉。在列表頁每項數據點擊事件里添加了新窗口打開詳情頁,在這里選中繼器的添加行,右邊的動作欄只顯示列表頁的那個中繼器,沒有詳情頁的中繼器。我的站點地圖是兩個,你的那個為什么就一個呢

    來自寧夏 回復
  6. indexof函數可以實現數據篩選,樓主你的過濾器中的篩選規則,為啥寫成[[Item.testinfo.indexof(num)>-1]] 而不是直接[[Item.testinfo==num]]
    請問這有什么講究么?

    來自北京 回復
  7. 這個很吊!

    來自北京 回復
  8. 笨笨的我 想問一下~~ ? ~~~ 你怎么把兩個聯系起來的, 我做一個簡易的簡單頁到復雜頁 加入排序的功能, 順序換了,點進去都是別行的詳情了~~ 我看你的用例 全都是把中繼器的數據放上去 以及保持兩個中繼器的字段一樣。這樣就可以拉?! 我還是不太明白。 我之前用熱點,但是熱點是認位置的…新手的苦惱,求指導~~~

    來自四川 回復
    1. 點擊了只會 先add 再mark 再update 再set~~…

      來自四川 回復
  9. 學會了~~ thanks ~~~

    來自四川 回復
    1. 您好! 請問您有這個相關的案例嗎? 如果方便的話 可否發我一份? 非常感謝

      來自北京 回復
  10. 好難得趕腳

    來自江蘇 回復
  11. 這個沒什么好學的。只要明白原理就能通了。

    來自北京 回復
  12. 腦袋大了,老是學不會

    來自河北 回復
    1. 中繼器是AXURE中比較強大的功能了,先做一些小的實驗,一步一步學就好了 ?

      來自廣東 回復