今天和大家分享一個視頻分享app的demo，包括播放視頻、關注、點贊、評論、轉發分享等功能。該原型交互效果齊全，使用也簡單，只需要填寫中繼器表格即可。所以推薦給大家使用，喜歡原型或者有疑問的小夥伴們可以在下方評論處給我留言哦。
大家查看原型的時候，打開電腦可以聽到視頻聲音哦。
效果演示
1. 播放視頻
2. 上下滑動切換視頻
3. 關注
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教程：用中繼器做聊天對話界面
今天的這裡就結束了，喜歡原型或者有疑問的小夥伴們可以在下方評論處給我留言哦，我們下期見。
題圖來自 Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
