Axure中繼器:制作可交互的“APP音樂播放列表頁”

13 評論 31613 瀏覽 80 收藏 8 分鐘

這兩天,通過網(wǎng)絡(luò)資料以及公司大牛的傾情幫助,終于學(xué)會了Axure中繼器功能,并試著做了一個可交互的“App音樂播放列表頁”,并把步驟詳細(xì)分享給大家,希望對大家有幫助。

先看看效果

點擊每首歌曲,首先小喇叭會變亮,表示當(dāng)前播放音樂,且頁面底部播放臺同時切換到此歌曲。

http://kb1mel.axshare.com? ?(打開有點慢,請見諒哦)

詳細(xì)制作步驟

一、首先畫一個大體的頁面框架,頁面尺寸為320*568(可以自定義),如下圖所示:
QQ截圖20161201133114

二、接下來,我們要制作歌曲列表,因為每首歌曲的排版樣式都是一致的,所以我們想到可以用Axure中繼器來實現(xiàn)重復(fù)項目列表的繪制。詳細(xì)步驟如下:

2.1從元件庫拖一個中繼器到頁面,命名為MusicList,如下圖:

1.垂直和水平規(guī)定中繼器各項目列表的排布方式,例子中是垂直排布;選中排布,可以設(shè)置每列最多項目數(shù),比如我們設(shè)了4個,意思就是垂直一列最多排4個項目,多的就得另起一列排布。

2.間距可以設(shè)置項目之間的行距和列距。大家可以嘗試的點擊試試看)

QQ截圖20161201134038

2.2鼠標(biāo)雙擊中繼器,進(jìn)入模板編輯頁面,設(shè)置模板尺寸為320*65,“Moon Light”命名為“MusicName”,“Capo Probuction – Serenity”命名為“PeopleName”如下圖所示(命名是為了對應(yīng)數(shù)據(jù)集,后面會使用到)

QQ截圖20161201135042

回到框架頁面,你會發(fā)現(xiàn)變成這樣了:

QQ截圖20161201135715

插個小曲,可以繼續(xù)添加項目列,如下圖(雙擊“添加行”,輸入4,然后在外面點擊下就可以添加1行,注意之前設(shè)置的最多項目數(shù)問題)

QQ截圖20161201140033

2.3建立數(shù)據(jù)集,我們把這個數(shù)據(jù)集也對應(yīng)設(shè)置兩列內(nèi)容,標(biāo)題分別是MusicName和PeopleName(可以自定義,不需要和模板中的一樣),下面的內(nèi)容根據(jù)需要也一并填入。(雙擊可填入)如下圖:

QQ截圖20161201141937

接下來,選中中繼器,設(shè)置每項加載時,模板中MusicName值為數(shù)據(jù)集中[[Item.MusicName]],PeopleName值為[[Item.PeopleName]],(“[[Item.MusicName]]”可以直接輸入,也可以通過點擊【fx】圖標(biāo),在彈出的編輯界面中,點擊【插入變量或函數(shù)…】)如下圖所示:

QQ截圖20161201142725

得到的效果如下圖所示,每項的內(nèi)容和數(shù)據(jù)集對應(yīng)起來了。

QQ截圖20161201143657

2.4雙擊中繼器打開模板,首先設(shè)置喇叭選中狀態(tài)為紅色(喇叭用的是字體圖標(biāo),可以設(shè)置選中狀態(tài)),然后設(shè)置點擊模板中的任意處喇叭選中狀態(tài)為“Ture”,如下圖所示

QQ截圖20161201145410

不要勾選“取消[選項]組效果”,然后把模板中的喇叭右鍵單擊設(shè)置[選項]組并且命名,這樣就可以實現(xiàn)單擊歌曲實現(xiàn)唯一選中項了。

QQ截圖20161201150718

三、根據(jù)上面的方法,再建立一個中繼器MusicPlay作為播放臺,只要1列就可以了,模板中內(nèi)容命名為MusicName1和PeopleName1,同時值為[[Item.MusicName1]]和[[Item.PeopleName1]]

QQ截圖20161201144503

四、實現(xiàn)單擊歌曲,喇叭變紅,且播發(fā)臺同時切換此歌曲,打開歌曲列表模板,設(shè)置喇叭選中時,執(zhí)行“中繼器MusicPlay更新行”命令,將中繼器MusicPlay中的MusicName1更新為中繼器MusicList中的[[Item.MusicName]],將中繼器MusicPlay中的PeopleName1更新為中繼器MusicList中的[[Item.PeopleName]]:

QQ截圖20161201151616

這時,需要一個條件,即中繼器MusicPlay滿足[[TargetItem.xx==’xx’]]這個條件時,才會更新為中繼器MusicList點擊項目的內(nèi)容,因為MusicName1和PeopleName1的值都是根據(jù)點擊中繼器MusicList實時變化的,所以不能當(dāng)條件,所以在中繼器MusicPlay數(shù)據(jù)集加一列不變的,可以命名為Condition,內(nèi)容為Ture,當(dāng)做項目的屬性。

QQ截圖20161201153759即當(dāng)[[TargetItem.Conditon==’Ture’]],喇叭變紅時,中繼器MusicPlay中的MusicName1更新為中繼器MusicList中的[[Item.MusicName]],將中繼器MusicPlay中的PeopleName1更新為中繼器MusicList中的[[Item.PeopleName]]

QQ截圖20161201154146

點擊“確定”,生成Html預(yù)覽下效果吧。

大家最好在做的時候,一邊做一遍思考,因為軟件的學(xué)習(xí)要深入,不是只會這一個案例就可以掌握中繼器的,還是要多練習(xí)多思考,有什么問題,大家可以一起交流學(xué)習(xí)呀。

 

本文由 @ 逗比交互 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 請問最后一步”用例編輯”是哪個元件的交互用例?zhong 1,zhong 2又是什么?

    來自上海 回復(fù)
  2. 講的太糙了

    來自北京 回復(fù)
  3. 應(yīng)該在musiclist模板設(shè)置,失去焦點時,喇叭的狀態(tài)設(shè)為false

    來自北京 回復(fù)
  4. musiclist的點擊一行喇叭選中后,點擊另一行時,上一次點擊的喇叭選中狀態(tài)怎么取消?

    來自北京 回復(fù)
  5. 我不是想做UI,,方向是產(chǎn)品經(jīng)理,應(yīng)該不需要在高保真上發(fā)那么多時間學(xué)習(xí)把,基礎(chǔ)的還行

    來自廣東 回復(fù)
    1. 嗯嗯,能表達(dá)好需求就好

      回復(fù)
  6. 建立數(shù)據(jù)集那里我雙擊怎么是空白的呀 ??

    來自四川 回復(fù)
    1. 雙擊就可以輸入了 你可以再試試 不行就加群,我給你說

      來自江蘇 回復(fù)
    2. 417203171

      來自江蘇 回復(fù)
  7. 好贊,太需要了

    回復(fù)
  8. 喇叭的設(shè)置麻煩詳細(xì)一點 謝謝

    回復(fù)
    1. 喇叭是用字體圖標(biāo)做的,字體圖標(biāo)和字體的使用差不多,只不過顯示的是小圖標(biāo),可以隨意更改大小和顏色,喇叭的默認(rèn)狀態(tài)是黑色,在交互樣式設(shè)置里設(shè)置選中狀態(tài)為紅色,然后再添加交互動作使得選中狀態(tài)為Ture就好了

      回復(fù)
    2. 用的字體圖標(biāo)是FontAwesome,使用參考網(wǎng)站www.axure.com.cn/2309/

      回復(fù)