今天和大家分享一個(gè)視頻分享app的demo，包括播放視頻、關(guān)注、點(diǎn)贊、評論、轉(zhuǎn)發(fā)分享等功能。該原型交互效果齊全，使用也簡單，只需要填寫中繼器表格即可。所以推薦給大家使用，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

大家查看原型的時(shí)候，打開電腦可以聽到視頻聲音哦。

效果演示

1. 播放視頻

2. 上下滑動(dòng)切換視頻

3. 關(guān)注

4. 點(diǎn)贊

雙擊屏幕或點(diǎn)紅心點(diǎn)贊：

5. 查看評論

每一個(gè)有自己對應(yīng)的評論，也是用中繼器可編輯評論內(nèi)容。

6. 發(fā)表評論

7. 轉(zhuǎn)發(fā)分享

使用說明

該原型填寫中繼器表格即可直接使用。

注意：除了圖片之外，其他文件要有url，即需要提前將文件上傳至網(wǎng)絡(luò)。

視頻中繼器：

評論中繼器：

注意video是對應(yīng)視頻中繼器中videoname的評論。

制作方法

1. 視頻準(zhǔn)備

將你需要的視頻傳到網(wǎng)上，然后記住它的地址。

2. 視頻中繼器

材料：連內(nèi)聯(lián)框，頭像圖片，愛心圖標(biāo)，評論圖片，轉(zhuǎn)發(fā)圖標(biāo)，點(diǎn)贊數(shù)、評論數(shù)、轉(zhuǎn)發(fā)數(shù)文本，+號紅圈。

如下圖擺放：

表格和交互：

• videoname：視頻的名稱（下面做評論中繼器的時(shí)候需要用到的）；
• url：視頻的地址，每項(xiàng)加載時(shí)設(shè)置內(nèi)聯(lián)框架打開此地址；
• picture：頭像，插入圖片即可。每項(xiàng)加載時(shí)設(shè)置頭像圖片為此內(nèi)容；
• 點(diǎn)贊：每項(xiàng)加載時(shí)，設(shè)置點(diǎn)贊數(shù)文本等于該值；
• 評論：每項(xiàng)加載時(shí)，設(shè)置評論數(shù)文本等于該值；
• 轉(zhuǎn)發(fā)：每項(xiàng)加載時(shí)，設(shè)置轉(zhuǎn)發(fā)數(shù)文本等于該值。

上下滑動(dòng)切換視頻的交互：

首先需要設(shè)置中繼器分頁顯示，每頁顯示一項(xiàng)。然后需要利用動(dòng)態(tài)面板，設(shè)置向下滑動(dòng)結(jié)束時(shí)，設(shè)置中繼器當(dāng)前頁為next；向上活動(dòng)結(jié)束時(shí)，設(shè)置中繼器當(dāng)前頁為previous。

關(guān)注的交互：

鼠標(biāo)單擊+號時(shí)，設(shè)置該文字為√，等待2000ms，隱藏this，即可完成。

點(diǎn)贊的交互：

點(diǎn)擊紅心是切換紅心的選擇狀態(tài)。未選中為白色，選中為紅色，選中時(shí)，點(diǎn)贊數(shù)+1，取消選中時(shí)，點(diǎn)贊數(shù)-1，雙擊屏幕選中紅心。

評論的交互：

點(diǎn)擊評論圖標(biāo)，顯示評論組合，評論組合下一部分講。

分享的交互：

點(diǎn)擊分享圖標(biāo)顯示分享組合，分享組合用圖片和文本框制作即可，如下圖所示：

點(diǎn)擊圖標(biāo)的時(shí)候，我們做一個(gè)模擬的效果，彈出toast：發(fā)送中，等待2秒，設(shè)置toast：已發(fā)送。隱藏toast和分享組合。

點(diǎn)擊取消時(shí)，隱藏分享組合。

3. 評論中繼器

中繼器內(nèi)材料：評論者頭像圖片名稱，內(nèi)容，心圖標(biāo)，點(diǎn)贊數(shù)。

如下圖擺放：

表格和交互：

• video：點(diǎn)擊視頻中繼器評論按鈕時(shí)，對該中繼器進(jìn)行篩選，video==videoname，即篩選出該條視頻的評論。
• picture：每項(xiàng)加載時(shí)，設(shè)置評論者頭像等于此值。
• name：每項(xiàng)加載時(shí)，設(shè)置評論者名稱等于此值。
• text：每項(xiàng)加載時(shí)，設(shè)置內(nèi)容等于此值。
• zan：每項(xiàng)加載時(shí)，設(shè)置點(diǎn)贊數(shù)等于此值。點(diǎn)贊的交互和上面一致，就不詳細(xì)講了。

添加評論的交互

這個(gè)交互其實(shí)很簡單，大家參考我之前的文章Axure教程：用中繼器做聊天對話界面

今天的分享到這里就結(jié)束了，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦，我們下期見。

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

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