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

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

效果演示

1. 播放視頻

2. 上下滑動切換視頻

3. 關注

4. 點贊

雙擊屏幕或點紅心點贊：

5. 查看評論

每一個有自己對應的評論，也是用中繼器可編輯評論內容。

6. 發表評論

7. 轉發分享

使用說明

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

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

視頻中繼器：

評論中繼器：

注意video是對應視頻中繼器中videoname的評論。

制作方法

1. 視頻準備

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

2. 視頻中繼器

材料：連內聯框，頭像圖片，愛心圖標，評論圖片，轉發圖標，點贊數、評論數、轉發數文本，+號紅圈。

如下圖擺放：

表格和交互：

• videoname：視頻的名稱（下面做評論中繼器的時候需要用到的）；
• url：視頻的地址，每項加載時設置內聯框架打開此地址；
• picture：頭像，插入圖片即可。每項加載時設置頭像圖片為此內容；
• 點贊：每項加載時，設置點贊數文本等于該值；
• 評論：每項加載時，設置評論數文本等于該值；
• 轉發：每項加載時，設置轉發數文本等于該值。

上下滑動切換視頻的交互：

首先需要設置中繼器分頁顯示，每頁顯示一項。然后需要利用動態面板，設置向下滑動結束時，設置中繼器當前頁為next；向上活動結束時，設置中繼器當前頁為previous。

關注的交互：

鼠標單擊+號時，設置該文字為√，等待2000ms，隱藏this，即可完成。

點贊的交互：

點擊紅心是切換紅心的選擇狀態。未選中為白色，選中為紅色，選中時，點贊數+1，取消選中時，點贊數-1，雙擊屏幕選中紅心。

評論的交互：

點擊評論圖標，顯示評論組合，評論組合下一部分講。

分享的交互：

點擊分享圖標顯示分享組合，分享組合用圖片和文本框制作即可，如下圖所示：

點擊圖標的時候，我們做一個模擬的效果，彈出toast：發送中，等待2秒，設置toast：已發送。隱藏toast和分享組合。

點擊取消時，隱藏分享組合。

3. 評論中繼器

中繼器內材料：評論者頭像圖片名稱，內容，心圖標，點贊數。

如下圖擺放：

表格和交互：

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

添加評論的交互

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

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

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議