編輯導(dǎo)語(yǔ)：在日常使用軟件的過(guò)程中，視頻列表是一個(gè)十分常見(jiàn)的功能模塊，那么，你知道如何利用中繼器來(lái)設(shè)計(jì)出視頻播放列表嗎？本篇文章里，作者就如何利用Axure中繼器實(shí)現(xiàn)視頻播放列表一事做了總結(jié)，一起來(lái)看一下。

視頻列表是平臺(tái)、系統(tǒng)里面的常用功能，所以作者今天就教大家在Axure里面怎么用中繼器制作一個(gè)視頻列表的原型模板。

一、制作完成后應(yīng)具備以下效果

1. 移入效果，移入對(duì)應(yīng)的視頻，視頻封面圖片有一個(gè)亮燈效果以及放大縮小圖片的效果；
2. 播放視頻效果，點(diǎn)擊不同的視頻，可以播放不同的視頻；
3. 中繼器內(nèi)容維護(hù)，在中繼器中導(dǎo)入視頻（本地地址或網(wǎng)絡(luò)地址）、圖片和視頻名稱(chēng)，自動(dòng)生成對(duì)應(yīng)的高保真交互效果。

二、制作材料準(zhǔn)備

制作材料包括中繼器元件、矩形元件、圖片元件、播放按鈕、文本標(biāo)簽。

而中繼器是最重要的元件，后續(xù)的元件都是放在中繼器內(nèi)部。

1. 中繼器內(nèi)部材料擺放

如下圖所示，從上到下的元件擺放順序依次為：

1. 播放按鈕：可以用svg案例或者透明背景的圖片都可以，根據(jù)你能找到的素材。
2. 矩形元件（擋板）：起到一個(gè)半透明的擋板的作用，后續(xù)會(huì)增加鼠標(biāo)移入的反饋交互。默認(rèn)為灰色，透明度為50%。
3. 文字標(biāo)題：用于記錄視頻文字，默認(rèn)填充顏色為黑色，透明為50%，這樣設(shè)置是為了不擋住視頻的封面圖片。
4. 圖片元件：這里我們右鍵將圖片轉(zhuǎn)為動(dòng)態(tài)面板，后續(xù)會(huì)做一個(gè)移入放大圖片的動(dòng)態(tài)交互效果。轉(zhuǎn)為動(dòng)態(tài)面板后，動(dòng)態(tài)面板需要取消自適應(yīng)內(nèi)容的默認(rèn)勾選。

最后我們將中繼器內(nèi)部所有元件組合在一起，我們就完成材料的準(zhǔn)備了。

2. 中繼器表格的設(shè)置

我們?cè)黾尤校?/p>

1）picture：視頻的封面圖片，如果是本地圖片的話(huà)，就右鍵導(dǎo)入圖片即可；如果是網(wǎng)絡(luò)圖片的話(huà)，就直接粘貼網(wǎng)址即可。

2）biaoti：文字標(biāo)題，輸入視頻標(biāo)題文字即可，也可以在excel里面編輯好，然后復(fù)制到中繼器表格里

3）url：視頻的地址，這里我們可以有3種填寫(xiě)方法。

第一個(gè)是填寫(xiě)視頻的網(wǎng)絡(luò)地址，這種是最方便的，本地預(yù)覽、本地發(fā)布、網(wǎng)絡(luò)共享都可以看到，建議大家使用這種方法。

第二個(gè)是填寫(xiě)本地的視頻地址，例如C:\Users\52207\Downloads\xxx.mp4，這種地址的話(huà)就需要發(fā)布生成html文件才可查看，而且還要是在你本機(jī)，視頻位置、視頻名稱(chēng)不發(fā)生改變時(shí)才能才看，所以不太方便。

第三種是直接填寫(xiě)resources\文件名稱(chēng)，例如resources\xxx.mp4xxx.mp4，然后發(fā)布生成html文件，生成html后將視頻復(fù)制到生成文件里面的resources文件夾，這樣我們將整個(gè)文件打包給其他人，別人也能順利查看，這種方法在不能連接到外網(wǎng)的情況下使用的比較多。

三、交互設(shè)置

1. 中繼器每項(xiàng)加載時(shí)交互

設(shè)置圖片：將中繼器中picture列保存的圖片設(shè)置到圖片元件里。

設(shè)置文本：將中繼器中biaoti列保存的文本文本設(shè)置到文字標(biāo)題的元件里。

2. 鼠標(biāo)移入中繼器內(nèi)部組合時(shí)

鼠標(biāo)移入時(shí)，我們把擋板和播放按鈕隱藏，這樣就有一個(gè)類(lèi)似開(kāi)燈的效果。

然后我們?cè)O(shè)置圖片尺寸，將圖片設(shè)置為他原來(lái)的1.1倍，錨點(diǎn)設(shè)置在中部，并且增加動(dòng)畫(huà)。因?yàn)閯?dòng)態(tài)面板的尺寸是不變的，前面我們?nèi)∠催x了自適應(yīng)，所以就有一個(gè)放大的效果。

3. 鼠標(biāo)移出中繼器內(nèi)部組合時(shí)

鼠標(biāo)移出時(shí)，我們相當(dāng)于做一個(gè)反向操作，其實(shí)就是恢復(fù)原狀。

所以我們把移入是隱藏的擋板和播放按鈕顯示，把移入時(shí)擴(kuò)大了1.1倍的圖片縮小1.1倍，同樣這里也是錨點(diǎn)在中部并且要增加動(dòng)畫(huà)效果，這樣會(huì)更加好看。

4. 鼠標(biāo)單擊中繼器內(nèi)部組合時(shí)

鼠標(biāo)點(diǎn)擊視頻組合時(shí)，就是想看看這個(gè)視頻，所以我們用打開(kāi)鏈接的交互，在彈窗中打來(lái)對(duì)應(yīng)的視頻地址（url列所記錄的地址），就可以可以在新窗口中播放視頻了。

那以上就是中繼器版視頻列表模板的制作方法了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀。

我們下期見(jiàn)，88~

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

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