上一節我們講解了中繼器的基本原理和使用方法，本文通過幾個實際的案例來幫助大家更進一步的掌握中繼器的使用方法，感受中繼器的強大。在原型設計時，善於利用中繼器，可以有效提高原型的保真度。

案例一：商品列表頁

商品列表頁涉及的互動主要包含篩選、排序以及翻頁，下面我們來看看利用中繼器如何實現這些前端互動效果。
拖入中繼器至設計區域，雙擊中繼器為中繼器設定項，在中繼器編輯介面新增圖片及文字標籤元件，作為商品圖片、標題、價格、銷量及評價的項，做好元件的命名工作。為中繼器新增資料集，注意資料集中列的名稱必須為英文（誰讓Axure是美國人開發的工具產品）。

使用中繼器“每項載入時”事件，將資料集內容賦值給標題、價格、銷量及評價這些項，(圖片就不匯入了，有時間也可以新增到資料集）。使用設定文字動作，將資料賦值給中繼器的變數[[Item.title]]、[[Item.price]]、[[Item.sale]]、[[Item.evaluate]]。

在中繼器外新增一些矩形元件作為排序規則和篩選條件，按照價格、銷量、評價進行排序，按照價格區間作為篩選條件，綜合和全部作為預設排序和預設篩選。

01 排序

在這個案例中，我們需要實現按照價格降序、銷量降序、評價降序檢視商品列表。
價格升序：選中元件，新增“滑鼠單擊事件”，選中當前元件，動作配置皮膚中選擇“新增排序”動作，名稱填寫“價格由低到高”，列選擇price，排序型別選擇Number,排序選擇升序。將當前元件設定為選中樣式。（提前將價格、銷量、評價等排序規則設定為一個組）

銷量降序：選中元件，新增“滑鼠單擊事件”，選中當前元件，動作配置皮膚中選擇“新增排序”動作，名稱填寫“銷量由高到低”，列選擇sale，排序型別選擇Number，排序選擇為降序。將當前元件設定為選中樣式。

評價的設定方法同銷量一致，只是參與排序的列不同，這裡不做重複說明。
綜合：為元件設定“滑鼠單擊事件”，設定選中樣式，選擇“移除排序”動作，移除全部排序。

02 篩選

按照1999以下、2000-3999、4000-5999、6000以上這幾個價格區間篩選商品。
1999以下：為元件設定“滑鼠單擊事件”，設定選中樣式（提前將篩選條件設定為一個組），選擇中繼器動作“新增篩選”，選中中繼器，設定名稱“1999元以下”，規則填寫[[Item.price<=1999]]，移除其它篩選。設定如下圖所示：

6000元以上設定與此類似。
2000-3999：設定“滑鼠單擊事件”，設定選中樣式，新增動作“新增篩選”，選中中繼器，設定名稱“2000元-3999元之間”，規則填寫[[Item.price<=3999&&Item.price>=2000]]，移除其它過濾。設定如下圖所示：

4000-5999、6000以上與上述設定方法類似。

全部：選中元件，新增“滑鼠單擊事件”，設定選中樣式，新增動作“移除篩選”，移除所有過濾器。如下圖所示：

03 翻頁

點選上一頁或下一頁按鈕實現商品列表的翻頁，實現思路如下：
為矩形按鈕設定“滑鼠單擊事件”，新增“設定當前顯示頁面”動作，頁面選擇Next或Previous。設定如下圖所示：

---

案例2：使用者資訊列表

元件準備：拖動中繼器至設計區域，雙擊中繼器進入編輯介面，拖動6個矩形，前四個矩形命名為姓名、性別、年齡、地區，後面兩個矩形為編輯按鈕和刪除。將前面5個矩形選中並轉化為動態皮膚，動態皮膚第一個狀態命名為顯示，複製狀態一資料，第二個狀態命名為編輯，並將編輯修改為儲存。拖動四個文字框至前4個矩形框中，4個文字框分別命名為：編輯姓名、編輯性別、編輯年齡和編輯地區，取消編輯狀態中前四個矩形的命名。
選中中繼器，分別新增NameText、SexText、AgeText和RegionText這四列資料，預設Column列儲存，作為行的序號。至此，所有的元件準備工作已經結束。

關於資料集的具體使用方法，請參照《Axure 9.0高階教程：史上最強元件-中繼器的使用方法》。

01 編輯/儲存資料

我們期望實現的效果如下：

• 點選編輯，可以對當前行的資料欄位進行編輯。
• 點選儲存，更新當前行的資料，使編輯修改後的資料生效。
  為了實現上述的效果，我們需要對編輯和刪除這兩個矩形元件設定以下互動。
  編輯：選中元件，設定“滑鼠單擊事件”，首先新增“設定皮膚狀態動作”，將動態皮膚切換為編輯狀態；然後為姓名文字新增“獲取焦點”動作。互動設定如下圖所示：
  
  

  編輯.png
  
  儲存：選中元件，設定“滑鼠單擊事件”，新增中繼器“更新行”動作，將前面四項修改後的資料儲存到中繼器資料集中，將前四項文字框的文字設定為區域性變數LVAR1；新增“設定皮膚狀態動作”，將動態皮膚切換為顯示狀態。互動設定如下圖所示：
  
  

  儲存.png

02 插入資料

首先拖動一個選單元件至頁面設計區域（注意不要拖入到中繼器皮膚），選單內容分別填充為前面插入和後面插入，隱藏選單。首先我們還是照例觀察下這兩個選單的功能及效果：
前面插入

• 在當前行前面插入一條為編輯狀態的空資料。
• 增加的行序號為插入行的序號。
• 插入行及後面行的序號+1。
  後面插入
• 在當前行後面插入一條為編輯狀態的空資料。
• 增加的行序號為插入行的序號+1。
• 插入行後面行的序號+1。

插入行的互動實現思路如下：
右擊選單：選中動態皮膚，為動態皮膚設定“滑鼠右擊事件”，利用全域性變數儲存當前行的序號，為以後行序號的更變做好基礎。這裡利用系統預設的全域性變數OnLoadVariable儲存插入行的序號，移動選單達到滑鼠的位置，顯示選單 。設定如下圖所示：

前面插入：為選單項新增“滑鼠單擊事件”，新增中繼器動作“更新行”，設定規則：當序號大於等於插入行序號時，目標行序號+1，新增一條與插入行序號一致的空資料，隱藏選單。互動設定如下圖所示：

後面插入：為選單項新增“滑鼠單擊事”，新增中繼器動作“更新行”，設定規則：當序號大於插入行序號時，目標行序號+1，新新增的行序號+1，隱藏選單。互動設定如下圖所示：

儲存新插入行的資料後，需要釋放全域性變數的值，以保證後續的編輯和插入操作可以正常使用，因此需要將上文中儲存按鈕再新增一個動作為變數賦予一個空值。設定如下：

中繼器
如果想要將插入行的資料預設為編輯狀態，我們需要為中繼器事件“每項載入時”，新增一個新的情形（情形就是用例，9.0漢化後的叫法不同）。當全域性變數OnLoadVariable等於序號時，設定動態皮膚為編輯狀態，姓名文字獲取焦點。
為了保證插入行後，資料按照正確的序號進行排序，而不是插入行資料永遠顯示在最後一行，則需要為中繼器重新新增排序規則，按照序號數字排序。中繼器互動設定如下圖所示：

03 刪除行資料

選中刪除矩形元件，設定“滑鼠單擊事件”，新增中繼器動作“刪除行”，動作配置皮膚中選擇當前行。設定如下圖所示：

如果你對Axure或原型設計有興趣，希望系統性地學習Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹互動案例，進一步提升高保互動設計能力。請點選下方關注按鈕，檢視更多連載作品。
點選獲取案例作品原始檔