您现在的位置:   首页 >> 新闻中心 >> 原型设计

AXURE教程:实现B站移动光标达到视频预览效果

发布人:www.yunke.ai 发布时间:2021-01-01 145 次浏览

编辑导读:本文跟大家分享,如何用Axure实现移动光标达到视频预览效果,作者从预览图,到所需原件,再到操作步骤都一一展开了分析,并对过程中需要注意的问题进行了介绍,希望对你有所启发。

一、概述

今天小鱼又来写(shui)教程了,小鱼认为B站有一个非常好的交互设计那就是通过移动光标的方式达到视频预览(虽然是ppt式地播放)如下图所示,其实用AXURE实现起来的话并不是很困难,只是过程会有些繁琐,下面就开始进入正题吧。

二、材料准备

  • AXURE PR 9.0
  • 图片若干(小鱼选取了灵笼片段的一部分总共10张图片)

三、交互逻辑

首先它的交互逻辑,由图可以看出,并不是很复杂,当我们把光标移入的时候,需要根据光标的位置改变进度条和改变图片,然后当我们把光标移出的时候,视频需要回到最开始的状态,进度条归0.

四、实现步骤