指南編輯：視頻列表是日常軟件使用過程中非常常見的功能模塊。那么，你知道如何使用中繼器設(shè)計視頻播放列表嗎？這篇文章中的作者總結(jié)了如何使用Axure中繼器實現(xiàn)視頻播放列表。(莎士比亞、里彼得、里彼得、里彼得、里彼得、里彼得、里彼得、里彼得、里彼得)

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

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

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

具體原型地址：

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

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

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

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

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

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

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

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

我們增加三列：

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

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

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

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

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

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

三、交互設(shè)置

1. 中繼器每項加載時交互

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

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

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

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

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

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

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

所以我們把移入是隱藏的擋板和播放按鈕顯示，把移入時擴大了1.1倍的圖片縮小1.1倍，同樣這里也是錨點在中部并且要增加動畫效果，這樣會更加好看。

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

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

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

我們下期見，88~

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

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