Axure教程—中繼器實現模組排序
效果圖
效果圖
使用工具
Axure RP 9 beta 繪製原型
Adobe Photoshop CC 2017 處理背景圖片等
Camtasia 2018 錄製視訊及匯出gif
實現邏輯
中繼器：實現樣式重複，但內容不同，一定程度上幫助設計者實現高效的整體佈局與內容梳理。
排序：按照中繼器中不同引數值的大小進行排序互動。
操作步驟
Step one—建立中繼器
:clock1: 建立中繼器，取名為Content:clock2: 雙擊進入中繼器頁面在頁面內設定出想要的內容和佈局，設定好後，這個佈局就可以賦予不同的數值無限複用了。本案例使用LOL人物角色，大綱及佈局如下（不做詳細介紹）：
注意：給後期需要賦值的Label設定好名稱，這樣在中繼器中設定資料的時候會更加明確，不容易出現數據設定錯誤的情況，例如性別的Label我註釋的名稱是Sex，這樣在後期設定中繼器的時候找到Sex賦值就可以了。
Step two—設定中繼器
:clock3:在中繼器樣式選項中：找到佈局，設定每行的個數，即設定每行的模組數，本案例每行是3個。:clock4:在中繼器樣式選項中：找到資料，設定行數，行數代表了模組的總個數，本案例共使用8個人物角色，故這裡需要設定8行資料。
設定列數，列數代表了每個模組內參數的個數，本案例共使用“背景圖”、“頭像”、“角色名稱”、“性別”、“位置”、“評分”等9個引數，故資料列表需要設定9列。
:clock6:為每一列每一行設定名稱，使每個Label名稱和列表中名稱一一對應，由於Axure中繼器內不能設定中文名稱，所以本案例都設定為英文名稱，見下圖：
Step three—中繼器賦值
:clock7:在中繼器設定互動：（其實就是將中繼器資料填充到我們設定好的Label內）
:clock8:設定好以上互動後，在中繼器資料中，每一格內填寫資料，本案例我填寫了每個角色的名稱、定義了每個角色的屬性值（亂寫的勿噴）並匯入了背景圖片和頭像圖片。此時已初見成效：
（這時大家發現，如果不使用中繼器，一個一個去畫出來也可以做出同樣的效果，但使用中繼器自然有它的好處：第一，中繼器使用一個模組不斷複用的方式，簡單便捷；第二，使用中繼器做出這樣的列表在預覽原型時可以減少卡頓；第三，第三點也是重點，中繼器可以輕鬆實現模組排序）
Step four—設定排序
:clock9:設定用於排序的btn，本案例使用了四個排序btn，分別為評分（Score）、攻擊距離（Attack_distance）、攻擊力（Aggressivity）和防禦力（Defenses）。這裡只給出評分排序的互動設定，其他的幾個自己延伸吧（嘿嘿）！點選評分btn，使8個模組按照評分高低進行排序，互動比較簡單，直接上圖：
解釋：本案例設定了從大到小排序和從小到大排序的Icon，這樣可以增加使用者進行排序操作的互動體驗。
以上為利用中繼器排序的操作流程
原型優化
Adobe Photoshop CC 2017 部分：
:smile:每個角色的背景圖片進行高斯模糊:smile:頭像用橢圓選框工具選好後加上外發光，形成陰影效果
Axure RP 9 beta 部分：
:smile:加入手機、電腦或者ipad的邊框
:smile:在螢幕最上方加入形形色色的小Icons
:smile:給排序btn設定用於區分從大到小和從小到大排序的icon
:smile:設定動態面板加入滾動條
:smile:本案例還給ipad加入了背景圖片
結語
長篇大論終於結束，總結一下，利用中繼器實現排序效果看似炫酷，實質上就是考驗設計師對於中繼器的瞭解程度，對於產品經理而言，日常工作為了追求敏捷開發及快速迭代，並不需要設計這樣複雜的互動，所以囉裡囉嗦說了半天就是……..做出來了其實也沒luan用！！！:laughing::laughing::laughing:
最後還是附上附件下載地址:
連結：
https://pan.baidu.com/s/1BpGGkmK1sRPfiK_VyQdKJw
提取碼：3br7
同時鄭重提醒各位：本rp檔案只能通過Axure RP 9 beta及以上版本開啟，使用Axure 8的同學有需要後期我會上傳低版本。
關注作者公眾號，一起向夢想出發