Axure教程:真的能播放視頻的視頻APP原型(抖音案例)
今天和大家分享一個視頻分享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協議
花拳繡腿,實戰中沒毛用
原型預覽及下載地址:
https://axhub.im/ax9/245be6a62d202617
圖片輪播
你好可愛我我好想認識你呀~
原型 中繼器
不知能否進一步溝通?
emmm…… 加你QQ了,但是沒有同意 ??
可以的