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

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

效果演示

1. 播放視頻

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

3. 關(guān)注

4. 點(diǎn)贊

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

5. 查看評(píng)論

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

6. 發(fā)表評(píng)論

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

使用說(shuō)明

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

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

視頻中繼器：

評(píng)論中繼器：

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

制作方法

1. 視頻準(zhǔn)備

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

2. 視頻中繼器

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

如下圖擺放：

表格和交互：

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

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

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

關(guān)注的交互：

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

點(diǎn)贊的交互：

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

評(píng)論的交互：

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

分享的交互：

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

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

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

3. 評(píng)論中繼器

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

如下圖擺放：

表格和交互：

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

添加評(píng)論的交互

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

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

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

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