辉灿新闻网 原型设计 Axure:PC端常见图片展位悬停效果(一)

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

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

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

常见的效果有以下几种:

1、悬停时图片放大

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

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

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

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

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

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

图5:woshipm首页的轮播图

图6:土豆网的视频列表

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

所需要元件:

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

涉及交互事件(用例):

鼠标移入时鼠标移出时

涉及动作:设置尺寸。

涉及动画:线性。

一、最简达成目标1. 新建一张图片,将其命名为“图片”(养成为元件命名的好习惯)

直接将图片拖入到编辑界面;或者拖入一个图片元件再双击导入图片。

2. 添加交互,达到以下效果鼠标移入时,图片放大;鼠标移出时,图片复原。

那么,就需要设置两个用例:鼠标移入时、鼠标移出时,可参照下图进行相应设置:

注意:

    放大设置的宽高要比默认的宽高大,要不然看不到效果—— 示例中图片元件默认为400*400,设置放大后的尺寸为450*450。(两个动作的)锚点要选择为“中心”,即保证中心不动,默认为“左上角”。可适当选择使用动画,增加一些效果—— 该阶段原型暂未使用动画。

好,现在预览先看一下效果:

可以看到,鼠标移入移出时,图片(尺寸)放大或还原的效果已经达到。但是,我们上文中提到的效果,图片并没有跑出展位的区域。所以,我们还要给这个图片,加一个展示区域 —— 动态面板。

3. 新建一个动态面板,设置宽高与图片相同,命名为“1”

示例原型为400*400

4. 图片元件“图片”剪切粘贴至动态面板“1”中

OK,再来预览一下效果,正常的情况应该如下图:

二、优化之处

(1)设置尺寸时,我们是使用的是纯数字 —— 绝对值。当我们需要使用其他图片时,这个数字很有可能需要重新调整一下(图片尺寸变了)。

主要的场景:后期维护、复用。

不小心就忘了调整,导致效果出错(图片变形)。

此处可以调整为:

a、鼠标移入时:

宽:[[this.width * 1.1]] —— 当前元件宽度的1.1倍高:[[this.height * 1.1]] —— 当前元件高度的1.1倍

b、鼠标移出时:

宽:[[this.width / 1.1]] —— 当前元件宽度除于1.1(恢复后放大前)高:[[this.height / 1.1]] —— 当前元件高度除于1.1(恢复后放大前)

(2)增加一定的动画,将图片放大/缩小效果更平滑一些。

此处选择的动画是:线性 500ms完成到放大/缩小后的尺寸。

以上2个优化点的设置位置如下图:

优化后的效果:

是不是看上去更舒服一些了?!

以上,图片悬停放大的制作基本完成,预览一下自己的RP,看看效果出来了没?

有问题请留言!希望大家阅文过程中发现问题,及时指出,大胆怀疑,我都会一一回复的。

后续动态预告

    本文提到的另外两种预览效果如何实现;中继器制作3级菜单。

相关阅读

Axure中继器:2级菜单最简洁的打开方式

Axure:一个简单的进度条,了解“触发事件”动作

Axure:菊花转(页面加载动画)如何制作

Axure:巧用交互样式实现多tab切换效果

本文由 @牧逸 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pexels,基于 CC0 协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/2545.html

作者: 牧逸

Axure教程:以微信为例,制作APP启动页的效果

Axure的这些实用技巧,你都知道吗?

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部