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

Axure:PC端常见图片展位悬停效果(一)

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

本文我来尝试着用axure,将悬停时放大的效果做一下,一起来看看~

为了增加鼠标移入时的响应,一般会在鼠标手势之外另外再加一些特殊的效果突出体现,目的是告之用户“你已经碰到我了”。

常见的效果有以下几种:

1、悬停时图片放大

图1:woshipm首页轮播右侧的图片展位

图2:36Kr列表页图片展位

2、悬停时边框突出(或增加阴影)

图3:优酷视频列表 – 悬停时有阴影

图4:当当网商品列表 – 悬停时连线变化

3、悬停时浮层隐现(包括一些特殊的动画)

图5:woshipm首页的轮播图

图6:土豆网的视频列表

这一篇我们先来尝试着用axure,将悬停时放大的效果做一下。

所需要元件:

  • 动态面板 * 1
  • 图片元件 * 1

涉及交互事件(用例):

  • 鼠标移入时
  • 鼠标移出时

涉及动作:设置尺寸。

涉及动画:线性。

一、最简达成目标