Axure教程:真的能播放视频的视频APP原型(抖音案例)

访客3年前黑客文章494

今天和大家分享一个视频分享app的demo,包括播放视频、关注、点赞、评论、转发分享等功能。该原型交互效果齐全,使用也简单,只需要填写中继器表格即可。所以推荐给大家使用,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦。

Axure教程:真的能播放视频的视频APP原型(抖音案例)

大家查看原型的时候,打开电脑可以听到视频声音哦。

效果演示 1. 播放视频

Axure教程:真的能播放视频的视频APP原型(抖音案例)

2. 上下滑动切换视频

Axure教程:真的能播放视频的视频APP原型(抖音案例)

3. 关注

Axure教程:真的能播放视频的视频APP原型(抖音案例)

4. 点赞

双击屏幕或点红心点赞:

Axure教程:真的能播放视频的视频APP原型(抖音案例)

5. 查看评论

每一个有自己对应的评论,也是用中继器可编辑评论内容。

Axure教程:真的能播放视频的视频APP原型(抖音案例)

6. 发表评论

Axure教程:真的能播放视频的视频APP原型(抖音案例)

7. 转发分享

Axure教程:真的能播放视频的视频APP原型(抖音案例)

使用说明

该原型填写中继器表格即可直接使用。

注意:除了图片之外,其他文件要有url,即需要提前将文件上传至 *** 。

视频中继器:

Axure教程:真的能播放视频的视频APP原型(抖音案例)

评论中继器:

注意video是对应视频中继器中videoname的评论。

Axure教程:真的能播放视频的视频APP原型(抖音案例)

*** *** 1. 视频准备

将你需要的视频传到网上,然后记住它的地址。

2. 视频中继器

材料:连内联框,头像图片,爱心图标,评论图片,转发图标,点赞数、评论数、转发数文本,+号红圈。

如下图摆放:

Axure教程:真的能播放视频的视频APP原型(抖音案例)

表格和交互:

videoname:视频的名称(下面做评论中继器的时候需要用到的);

url:视频的地址,每项加载时设置内联框架打开此地址;

picture:头像,插入图片即可。每项加载时设置头像图片为此内容;

点赞:每项加载时,设置点赞数文本等于该值;

评论:每项加载时,设置评论数文本等于该值;

转发:每项加载时,设置转发数文本等于该值。

上下滑动切换视频的交互:

首先需要设置中继器分页显示,每页显示一项。然后需要利用动态面板,设置向下滑动结束时,设置中继器当前页为next;向上活动结束时,设置中继器当前页为previous。

关注的交互:

鼠标单击+号时,设置该文字为√,等待2000ms,隐藏this,即可完成。

点赞的交互:

点击红心是切换红心的选择状态。未选中为白色,选中为红色,选中时,点赞数+1,取消选中时,点赞数-1,双击屏幕选中红心。

评论的交互:

点击评论图标,显示评论组合,评论组合下一部分讲。

分享的交互:

点击分享图标显示分享组合,分享组合用图片和文本框 *** 即可,如下图所示:

Axure教程:真的能播放视频的视频APP原型(抖音案例)

点击图标的时候,我们做一个模拟的效果,弹出toast:发送中,等待2秒,设置toast:已发送。隐藏toast和分享组合。

点击取消时,隐藏分享组合。

3. 评论中继器

中继器内材料:评论者头像图片名称,内容,心图标,点赞数。

如下图摆放:

Axure教程:真的能播放视频的视频APP原型(抖音案例)

表格和交互:

video:点击视频中继器评论按钮时,对该中继器进行筛选,video==videoname,即筛选出该条视频的评论。

picture:每项加载时,设置评论者头像等于此值。

name:每项加载时,设置评论者名称等于此值。

text:每项加载时,设置内容等于此值。

zan:每项加载时,设置点赞数等于此值。点赞的交互和上面一致,就不详细讲了。

添加评论的交互

这个交互其实很简单,大家参考我之前的文章Axure教程:用中继器做聊天对话界面

今天的分享到这里就结束了,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦,我们下期见。

相关文章

如何进行渠道效果分析?

如何进行渠道效果分析?

一个完整的渠道流程是站外渠道——展示广告创意——进入落地页——访问落地页的转化文案——激活用户——提交订单。那如何对渠道的效果进行分析呢?本文给你提供一点小思路,enjoy~ 一个完整的渠道流程...

产品经理最喜欢的“提需求方式”是怎样的?

产品经理最喜欢的“提需求方式”是怎样的?

不管是老板、用户、运营还是销售,他们往往给的不是需求,而是自认为可行的解决方案。每当遇到这种情况,产品经理都是一脸问号,或者内心在万马奔腾。本文浅谈产品经理的进修之道,让你在优秀产品人的道路上越来越远...

5年产品复盘:我的15条成长原则

5年产品复盘:我的15条成长原则

作者回顾了自己的工作经历,从大众点评、阿里巴巴到Rokid公司,从搜索产品、内容社区到AI产品,梳理总结过程中的所思所想,有很多经验值得我们学习。 2015年4月毕业至今,刚好5年,1800+天,先...

ToB产品经理:SDK产品设计的8个技巧

ToB产品经理:SDK产品设计的8个技巧

SDK是TOB产品的一个重要组成部分,可以简单理解提供给程序员帮助他们创建软件。那么如何设计SDK产品,它又有什么设计技巧呢?本文将为大家揭晓。 SDK是对很多非科班出身的产品经理而言是陌生的,但对...

互联网金融的蜕变之道:金融归金融,数字归数字

互联网金融的蜕变之道:金融归金融,数字归数字

互联网金融的昙花一现,让金融行业的再进化提到了议事日程。一味地把金融科技看成是未来的发展方向,并不能够获得持续的发展。让金融的归金融,让数字的归数字,才是金融再进化的正确之道。当金融科技与数字科技能够...

产品运营终极指标:用户生命周期价值LTV

产品运营终极指标:用户生命周期价值LTV

对于从事移动互联网产品商业化工作的人来说,如何衡量产品的变现效率至关重要。一般在讨论商业化效率的时候我们会讨论的指标有Gross Profit、ARPU、eCPM、CAC。但是有一个终极运营指标,那就...