上一節(jié)我們講解了中繼器的基本原理和使用方法，本文通過(guò)幾個(gè)實(shí)際的案例來(lái)幫助大家更進(jìn)一步的掌握中繼器的使用方法，感受中繼器的強(qiáng)大。在原型設(shè)計(jì)時(shí)，善于利用中繼器，可以有效提高原型的保真度。

案例一：商品列表頁(yè)

商品列表.png

商品列表頁(yè)涉及的交互主要包含篩選、排序以及翻頁(yè)，下面我們來(lái)看看利用中繼器如何實(shí)現(xiàn)這些前端交互效果。
拖入中繼器至設(shè)計(jì)區(qū)域，雙擊中繼器為中繼器設(shè)置項(xiàng)，在中繼器編輯界面添加圖片及文本標(biāo)簽元件，作為商品圖片、標(biāo)題、價(jià)格、銷(xiāo)量及評(píng)價(jià)的項(xiàng)，做好元件的命名工作。為中繼器添加數(shù)據(jù)集，注意數(shù)據(jù)集中列的名稱(chēng)必須為英文（誰(shuí)讓Axure是美國(guó)人開(kāi)發(fā)的工具產(chǎn)品）。

數(shù)據(jù)集.png

使用中繼器“每項(xiàng)加載時(shí)”事件，將數(shù)據(jù)集內(nèi)容賦值給標(biāo)題、價(jià)格、銷(xiāo)量及評(píng)價(jià)這些項(xiàng)，(圖片就不導(dǎo)入了，有時(shí)間也可以添加到數(shù)據(jù)集）。使用設(shè)置文本動(dòng)作，將數(shù)據(jù)賦值給中繼器的變量[[Item.title]]、[[Item.price]]、[[Item.sale]]、[[Item.evaluate]]。

每項(xiàng)加載時(shí).png

在中繼器外添加一些矩形元件作為排序規(guī)則和篩選條件，按照價(jià)格、銷(xiāo)量、評(píng)價(jià)進(jìn)行排序，按照價(jià)格區(qū)間作為篩選條件，綜合和全部作為默認(rèn)排序和默認(rèn)篩選。

01 排序

在這個(gè)案例中，我們需要實(shí)現(xiàn)按照價(jià)格降序、銷(xiāo)量降序、評(píng)價(jià)降序查看商品列表。
價(jià)格升序：選中元件，添加“鼠標(biāo)單擊事件”，選中當(dāng)前元件，動(dòng)作配置面板中選擇“添加排序”動(dòng)作，名稱(chēng)填寫(xiě)“價(jià)格由低到高”，列選擇price，排序類(lèi)型選擇Number,排序選擇升序。將當(dāng)前元件設(shè)置為選中樣式。（提前將價(jià)格、銷(xiāo)量、評(píng)價(jià)等排序規(guī)則設(shè)置為一個(gè)組）

價(jià)格升序.png

銷(xiāo)量降序：選中元件，添加“鼠標(biāo)單擊事件”，選中當(dāng)前元件，動(dòng)作配置面板中選擇“添加排序”動(dòng)作，名稱(chēng)填寫(xiě)“銷(xiāo)量由高到低”，列選擇sale，排序類(lèi)型選擇Number，排序選擇為降序。將當(dāng)前元件設(shè)置為選中樣式。

銷(xiāo)量降序.png

評(píng)價(jià)的設(shè)置方法同銷(xiāo)量一致，只是參與排序的列不同，這里不做重復(fù)說(shuō)明。
綜合：為元件設(shè)置“鼠標(biāo)單擊事件”，設(shè)置選中樣式，選擇“移除排序”動(dòng)作，移除全部排序。

移除全部排序.png

02 篩選

按照1999以下、2000-3999、4000-5999、6000以上這幾個(gè)價(jià)格區(qū)間篩選商品。
1999以下：為元件設(shè)置“鼠標(biāo)單擊事件”，設(shè)置選中樣式（提前將篩選條件設(shè)置為一個(gè)組），選擇中繼器動(dòng)作“添加篩選”，選中中繼器，設(shè)置名稱(chēng)“1999元以下”，規(guī)則填寫(xiě)[[Item.price<=1999]]，移除其它篩選。設(shè)置如下圖所示：

添加篩選-1.png

6000元以上設(shè)置與此類(lèi)似。
2000-3999：設(shè)置“鼠標(biāo)單擊事件”，設(shè)置選中樣式，添加動(dòng)作“添加篩選”，選中中繼器，設(shè)置名稱(chēng)“2000元-3999元之間”，規(guī)則填寫(xiě)[[Item.price<=3999&&Item.price>=2000]]，移除其它過(guò)濾。設(shè)置如下圖所示：

添加篩選-2.png

全部：選中元件，添加“鼠標(biāo)單擊事件”，設(shè)置選中樣式，添加動(dòng)作“移除篩選”，移除所有過(guò)濾器。如下圖所示：

移除全部篩選.png

03 翻頁(yè)

點(diǎn)擊上一頁(yè)或下一頁(yè)按鈕實(shí)現(xiàn)商品列表的翻頁(yè)，實(shí)現(xiàn)思路如下：
為矩形按鈕設(shè)置“鼠標(biāo)單擊事件”，添加“設(shè)置當(dāng)前顯示頁(yè)面”動(dòng)作，頁(yè)面選擇Next或Previous。設(shè)置如下圖所示：

翻頁(yè).png

案例2：用戶信息列表

用戶列表.png

元件準(zhǔn)備：拖動(dòng)中繼器至設(shè)計(jì)區(qū)域，雙擊中繼器進(jìn)入編輯界面，拖動(dòng)6個(gè)矩形，前四個(gè)矩形命名為姓名、性別、年齡、地區(qū)，后面兩個(gè)矩形為編輯按鈕和刪除。將前面5個(gè)矩形選中并轉(zhuǎn)化為動(dòng)態(tài)面板，動(dòng)態(tài)面板第一個(gè)狀態(tài)命名為顯示，復(fù)制狀態(tài)一數(shù)據(jù)，第二個(gè)狀態(tài)命名為編輯，并將編輯修改為保存。拖動(dòng)四個(gè)文本框至前4個(gè)矩形框中，4個(gè)文本框分別命名為：編輯姓名、編輯性別、編輯年齡和編輯地區(qū)，取消編輯狀態(tài)中前四個(gè)矩形的命名。
選中中繼器，分別添加NameText、SexText、AgeText和RegionText這四列數(shù)據(jù)，默認(rèn)Column列保存，作為行的序號(hào)。至此，所有的元件準(zhǔn)備工作已經(jīng)結(jié)束。

關(guān)于數(shù)據(jù)集的具體使用方法，請(qǐng)參照《Axure 9.0高級(jí)教程：史上最強(qiáng)元件-中繼器的使用方法》。

01 編輯/保存數(shù)據(jù)

我們期望實(shí)現(xiàn)的效果如下：

• 點(diǎn)擊編輯，可以對(duì)當(dāng)前行的數(shù)據(jù)字段進(jìn)行編輯。
• 點(diǎn)擊保存，更新當(dāng)前行的數(shù)據(jù)，使編輯修改后的數(shù)據(jù)生效。
  為了實(shí)現(xiàn)上述的效果，我們需要對(duì)編輯和刪除這兩個(gè)矩形元件設(shè)置以下交互。
  編輯：選中元件，設(shè)置“鼠標(biāo)單擊事件”，首先添加“設(shè)置面板狀態(tài)動(dòng)作”，將動(dòng)態(tài)面板切換為編輯狀態(tài)；然后為姓名文本添加“獲取焦點(diǎn)”動(dòng)作。交互設(shè)置如下圖所示：
  
  編輯.png
  
  保存：選中元件，設(shè)置“鼠標(biāo)單擊事件”，添加中繼器“更新行”動(dòng)作，將前面四項(xiàng)修改后的數(shù)據(jù)保存到中繼器數(shù)據(jù)集中，將前四項(xiàng)文本框的文字設(shè)置為局部變量LVAR1；添加“設(shè)置面板狀態(tài)動(dòng)作”，將動(dòng)態(tài)面板切換為顯示狀態(tài)。交互設(shè)置如下圖所示：
  
  保存.png

02 插入數(shù)據(jù)

首先拖動(dòng)一個(gè)菜單元件至頁(yè)面設(shè)計(jì)區(qū)域（注意不要拖入到中繼器面板），菜單內(nèi)容分別填充為前面插入和后面插入，隱藏菜單。首先我們還是照例觀察下這兩個(gè)菜單的功能及效果：
前面插入

• 在當(dāng)前行前面插入一條為編輯狀態(tài)的空數(shù)據(jù)。
• 增加的行序號(hào)為插入行的序號(hào)。
• 插入行及后面行的序號(hào)+1。
  后面插入
• 在當(dāng)前行后面插入一條為編輯狀態(tài)的空數(shù)據(jù)。
• 增加的行序號(hào)為插入行的序號(hào)+1。
• 插入行后面行的序號(hào)+1。

插入行的交互實(shí)現(xiàn)思路如下：
右擊菜單：選中動(dòng)態(tài)面板，為動(dòng)態(tài)面板設(shè)置“鼠標(biāo)右擊事件”，利用全局變量存儲(chǔ)當(dāng)前行的序號(hào)，為以后行序號(hào)的更變做好基礎(chǔ)。這里利用系統(tǒng)默認(rèn)的全局變量OnLoadVariable存儲(chǔ)插入行的序號(hào)，移動(dòng)菜單達(dá)到鼠標(biāo)的位置，顯示菜單 。設(shè)置如下圖所示：

右擊菜單.png

前面插入：為菜單項(xiàng)添加“鼠標(biāo)單擊事件”，添加中繼器動(dòng)作“更新行”，設(shè)置規(guī)則：當(dāng)序號(hào)大于等于插入行序號(hào)時(shí)，目標(biāo)行序號(hào)+1，添加一條與插入行序號(hào)一致的空數(shù)據(jù)，隱藏菜單。交互設(shè)置如下圖所示：

前面插入行.png

后面插入行.png

賦予空值.png

中繼器
如果想要將插入行的數(shù)據(jù)默認(rèn)為編輯狀態(tài)，我們需要為中繼器事件“每項(xiàng)加載時(shí)”，添加一個(gè)新的情形（情形就是用例，9.0漢化后的叫法不同）。當(dāng)全局變量OnLoadVariable等于序號(hào)時(shí)，設(shè)置動(dòng)態(tài)面板為編輯狀態(tài)，姓名文本獲取焦點(diǎn)。
為了保證插入行后，數(shù)據(jù)按照正確的序號(hào)進(jìn)行排序，而不是插入行數(shù)據(jù)永遠(yuǎn)顯示在最后一行，則需要為中繼器重新添加排序規(guī)則，按照序號(hào)數(shù)字排序。中繼器交互設(shè)置如下圖所示：

中繼器交互設(shè)置.png

03 刪除行數(shù)據(jù)

選中刪除矩形元件，設(shè)置“鼠標(biāo)單擊事件”，添加中繼器動(dòng)作“刪除行”，動(dòng)作配置面板中選擇當(dāng)前行。設(shè)置如下圖所示：

刪除行

如果你對(duì)Axure或原型設(shè)計(jì)有興趣，希望系統(tǒng)性地學(xué)習(xí)Axure知識(shí)，掌握更多Axure使用技巧；或者希望通過(guò)臨摹交互案例，進(jìn)一步提升高保交互設(shè)計(jì)能力。請(qǐng)點(diǎn)擊下方關(guān)注按鈕，查看更多連載作品。
點(diǎn)擊獲取案例作品源文件