Axure RP 9 教程：中繼器實(shí)現(xiàn)模塊排序

17 評(píng)論 11781 瀏覽 17 收藏 7 分鐘

本篇文章展示了如何利用中繼器實(shí)現(xiàn)模塊排序，希望對(duì)有需要的同學(xué)能有所幫助！

效果圖

Axure教程—中繼器實(shí)現(xiàn)模塊排序

使用工具

  • Axure RP 9 beta 繪制原型；
  • Adobe Photoshop CC 2017 處理背景圖片等；
  • Camtasia 2018 錄制視頻及導(dǎo)出gif。

實(shí)現(xiàn)邏輯

  • 中繼器：實(shí)現(xiàn)樣式重復(fù)，但內(nèi)容不同，一定程度上幫助設(shè)計(jì)者實(shí)現(xiàn)高效的整體布局與內(nèi)容梳理。
  • 排序：按照中繼器中不同參數(shù)值的大小進(jìn)行排序交互。

操作步驟

Step one—?jiǎng)?chuàng)建中繼器

? 創(chuàng)建中繼器，取名為Content

? 雙擊進(jìn)入中繼器頁(yè)面在頁(yè)面內(nèi)設(shè)置出想要的內(nèi)容和布局，設(shè)置好后，這個(gè)布局就可以賦予不同的數(shù)值無(wú)限復(fù)用了。本案例使用LOL人物角色，大綱及布局如下（不做詳細(xì)介紹）：

Axure教程—中繼器實(shí)現(xiàn)模塊排序

Axure教程—中繼器實(shí)現(xiàn)模塊排序

注意：給后期需要賦值的Label設(shè)置好名稱，這樣在中繼器中設(shè)置數(shù)據(jù)的時(shí)候會(huì)更加明確，不容易出現(xiàn)數(shù)據(jù)設(shè)置錯(cuò)誤的情況，例如性別的Label我注釋的名稱是Sex，這樣在后期設(shè)置中繼器的時(shí)候找到Sex賦值就可以了。

Step two—設(shè)置中繼器

?在中繼器樣式選項(xiàng)中：找到布局，設(shè)置每行的個(gè)數(shù)，即設(shè)置每行的模塊數(shù)，本案例每行是3個(gè)。

?在中繼器樣式選項(xiàng)中：找到數(shù)據(jù)，設(shè)置行數(shù)，行數(shù)代表了模塊的總個(gè)數(shù)，本案例共使用8個(gè)人物角色，故這里需要設(shè)置8行數(shù)據(jù)。設(shè)置列數(shù)，列數(shù)代表了每個(gè)模塊內(nèi)參數(shù)的個(gè)數(shù)，本案例共使用“背景圖”、“頭像”、“角色名稱”、“性別”、“位置”、“評(píng)分”等9個(gè)參數(shù)，故數(shù)據(jù)列表需要設(shè)置9列。

?為每一列每一行設(shè)置名稱，使每個(gè)Label名稱和列表中名稱一一對(duì)應(yīng)，由于Axure中繼器內(nèi)不能設(shè)置中文名稱，所以本案例都設(shè)置為英文名稱，見(jiàn)下圖：

Axure教程—中繼器實(shí)現(xiàn)模塊排序

Step three—中繼器賦值

?在中繼器設(shè)置交互：（其實(shí)就是將中繼器數(shù)據(jù)填充到我們?cè)O(shè)置好的Label內(nèi)）

Axure教程—中繼器實(shí)現(xiàn)模塊排序

?設(shè)置好以上交互后，在中繼器數(shù)據(jù)中，每一格內(nèi)填寫數(shù)據(jù)，本案例我填寫了每個(gè)角色的名稱、定義了每個(gè)角色的屬性值（亂寫的勿噴）并導(dǎo)入了背景圖片和頭像圖片。此時(shí)已初見(jiàn)成效：

Axure教程—中繼器實(shí)現(xiàn)模塊排序

這時(shí)大家發(fā)現(xiàn)，如果不使用中繼器，一個(gè)一個(gè)去畫出來(lái)也可以做出同樣的效果，但使用中繼器自然有它的好處：

第一，中繼器使用一個(gè)模塊不斷復(fù)用的方式，簡(jiǎn)單便捷；

第二，使用中繼器做出這樣的列表在預(yù)覽原型時(shí)可以減少卡頓；

第三，第三點(diǎn)也是重點(diǎn)，中繼器可以輕松實(shí)現(xiàn)模塊排序。

Step four—設(shè)置排序

?設(shè)置用于排序的btn，本案例使用了四個(gè)排序btn，分別為評(píng)分（Score）、攻擊距離（Attack_distance）、攻擊力（Aggressivity）和防御力（Defenses）。這里只給出評(píng)分排序的交互設(shè)置，其他的幾個(gè)自己延伸吧（嘿嘿）！點(diǎn)擊評(píng)分btn，使8個(gè)模塊按照評(píng)分高低進(jìn)行排序，交互比較簡(jiǎn)單，直接上圖：

Axure教程—中繼器實(shí)現(xiàn)模塊排序

解釋：本案例設(shè)置了從大到小排序和從小到大排序的Icon，這樣可以增加用戶進(jìn)行排序操作的交互體驗(yàn)。

以上為利用中繼器排序的操作流程

原型優(yōu)化

Adobe Photoshop CC 2017 部分：

?每個(gè)角色的背景圖片進(jìn)行高斯模糊

?頭像用橢圓選框工具選好后加上外發(fā)光，形成陰影效果

Axure RP 9 beta 部分：

?加入手機(jī)、電腦或者ipad的邊框

?在屏幕最上方加入形形色色的小Icons

?給排序btn設(shè)置用于區(qū)分從大到小和從小到大排序的icon

?設(shè)置動(dòng)態(tài)面板加入滾動(dòng)條

?本案例還給ipad加入了背景圖片

總結(jié)

長(zhǎng)篇大論終于結(jié)束，總結(jié)一下，利用中繼器實(shí)現(xiàn)排序效果看似炫酷，實(shí)質(zhì)上就是考驗(yàn)設(shè)計(jì)師對(duì)于中繼器的了解程度，對(duì)于產(chǎn)品經(jīng)理而言，日常工作為了追求敏捷開發(fā)及快速迭代，并不需要設(shè)計(jì)這樣復(fù)雜的交互，所以啰里啰嗦說(shuō)了半天就是……..做出來(lái)了其實(shí)也沒(méi)luan用?。?！

???最后還是附上附件下載地址：

鏈接：https://pan.baidu.com/s/1BpGGkmK1sRPfiK_VyQdKJw

提取碼：3br7

鄭重提醒：本rp文件只能通過(guò)Axure RP 9 beta及以上版本打開，使用Axure 8的同學(xué)有需要后期我會(huì)上傳低版本。

 

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
王得宇A(yù)IPM
AI產(chǎn)品經(jīng)理?微信公眾號(hào)：他們已經(jīng)在路上了
23篇作品 191556總閱讀量
01-136411 瀏覽
加碼五十億流量扶持，「沒(méi)有短視頻基因」的騰訊力推視頻號(hào)
07-268327 瀏覽
倒推可可英語(yǔ)APP需求文檔
07-181763 瀏覽
TikTok 零元開店？我被老鄉(xiāng)各種騙
07-033013 瀏覽
從租房市場(chǎng)上自如的產(chǎn)品革新，看企業(yè)產(chǎn)業(yè)模式的轉(zhuǎn)型升級(jí)
12-191323 瀏覽
在精細(xì)化運(yùn)營(yíng)中，構(gòu)建用戶畫像需要考慮哪些事
評(píng)論
評(píng)論請(qǐng)登錄

  1. 您好，怎么沒(méi)法查看原型了呢

    來(lái)自山東 回復(fù)

    1. 你關(guān)注我公眾號(hào)留下微信我加你看看吧

      來(lái)自浙江 回復(fù)

  2. 請(qǐng)問(wèn)怎么設(shè)置每行的模塊數(shù)呀？

    來(lái)自北京 回復(fù)

    1. 每行的模塊數(shù)就是元件數(shù)啊，中繼器里面增加就行啦

      來(lái)自浙江 回復(fù)

    2. 點(diǎn)擊選中中繼器，layout—-horizontal—-items per row ,輸入指定數(shù)值即可。

      來(lái)自山東 回復(fù)

  3. 人認(rèn)真真的看完了，結(jié)果給我來(lái)一句“對(duì)于產(chǎn)品經(jīng)理而言，日常工作為了追求敏捷開發(fā)及快速迭代，并不需要設(shè)計(jì)這樣復(fù)雜的交互，所以啰里啰嗦說(shuō)了半天就是……..做出來(lái)了其實(shí)也沒(méi)luan用?。　?/p>

    來(lái)自江西 回復(fù)

    1. 哈哈哈 萬(wàn)丈高樓平地起，凡事總是從0開始做起的，就想做產(chǎn)品，我想到了但是不做，和沒(méi)想到完全是兩碼事 哈哈哈

      來(lái)自浙江 回復(fù)

  4. 請(qǐng)教一下中繼器排序的問(wèn)題，已經(jīng)按照教程實(shí)現(xiàn)了中繼器數(shù)據(jù)的添加功能，但是對(duì)中繼器的數(shù)據(jù)排序失敗了。然后把你的rp下載下來(lái)試了一下也是不行？在下使用的也是最新Axure9。我創(chuàng)建了一個(gè)按鈕A，添加單擊事件，單擊事件中對(duì)中繼器的攻擊之一列按照降序排序。然后再IE中預(yù)覽，點(diǎn)擊按鈕A后，中繼器沒(méi)有進(jìn)行排序

    來(lái)自浙江 回復(fù)

    1. 具體情況可能還要具體溝通，不行你關(guān)注我公眾號(hào)加我微信看看吧，這樣講我也不知道問(wèn)題在哪里。

      來(lái)自浙江 回復(fù)

  5. 我下載你的原型文件，用axure 9.0打開，F(xiàn)5預(yù)覽，點(diǎn)擊幾個(gè)排序，內(nèi)容沒(méi)變化？

    來(lái)自四川 回復(fù)

    1. 我看一下，這個(gè)文章發(fā)的早了，當(dāng)時(shí)是axure 9 測(cè)試版本，現(xiàn)在是正式版本了，可能有些兼容性的問(wèn)題，我看下回復(fù)你

      來(lái)自上海 回復(fù)

    2. 同問(wèn)，我做的RP也是排序不行

      來(lái)自浙江 回復(fù)

    3. 你好，我看過(guò)了，我用最新版的axure 9 瀏覽是沒(méi)有問(wèn)題的，我想問(wèn)一下，你在點(diǎn)擊排序的時(shí)候是不是鼠標(biāo)位置有個(gè)很小的圓角矩形，如果有的話，那說(shuō)明你的axure 9的預(yù)覽選項(xiàng)里面有設(shè)置問(wèn)題，可以通過(guò)修改設(shè)置解決。之前遇到過(guò)類似的問(wèn)題，修改預(yù)覽選項(xiàng)可以解決。

      來(lái)自上海 回復(fù)

    4. ”預(yù)覽選項(xiàng)里面有設(shè)置問(wèn)題，可以通過(guò)修改設(shè)置解決?！边@個(gè)哪里設(shè)置？

      來(lái)自浙江 回復(fù)

    5. 之前遇見(jiàn)過(guò)預(yù)覽設(shè)置里面設(shè)置問(wèn)題，導(dǎo)致所有交互都沒(méi)法正常進(jìn)行，但是是所有交互哦，具體情況可能還要具體溝通，不行你關(guān)注我公眾號(hào)加我微信看看吧，這樣講我也不知道問(wèn)題在哪里。

      來(lái)自浙江 回復(fù)

  6. 很炫酷的效果！可以傳個(gè)AXURE 8的版本嗎

    來(lái)自上海 回復(fù)

    1. Axure 8的版本可以抽空做一下，不過(guò)個(gè)人建議使用axure 9哦，畢竟做為產(chǎn)品經(jīng)理需要超強(qiáng)的學(xué)習(xí)能力和適應(yīng)能力哈，你可以關(guān)注我公眾號(hào)，里面有關(guān)于axure 9的鏈接，mac版本和windows版本都有的哦，公眾號(hào)名稱是 他們已經(jīng)在路上了 號(hào)碼是：gh_fa7d54c667da ????

      回復(fù)