Axure RP9实施案例:京东与淘宝等商品图片可放大的原理

转帖|实施案例|编辑:陈津勇|2019-10-16 10:12:37.147|阅读 73 次

概述:本文主要讲述了利用Axure RP快速设计原型工具​完成电商商品详情页系列效果的操作方法。

浏览电商商品的详情页时,经常会看到图片放大器的运用,这是如何实现的呢?本文以京东商品详情页为例,运用Axure RP快速设计原型工具来制作这样的原型效果。案例综合运用了鼠标移入事件、鼠标移动事件、元件的移动、元件的显示/隐藏等交互动作。

为达到更好的效果,建议大家先安装Axure RP,边阅读文章边操作。(号外:慧都网·1024程序员节活动正在火热进行中,Axure RP现金优惠券免费赠送,点击了解详情>>>

点击下载Axure RP正式版


观察交互

首先,一起来观察京东详情页中的图片放大效果。当鼠标在左侧图片上方移动时,图片上方会出现一个半透明的图层跟随鼠标移动,我们将这个半透明的图层称之为放大镜。同时在原图右侧会出现一张放大版的高清大图,高清大图显示的图片信息与左侧半透明图层下的图片信息一致。鼠标移出原图范围边界时,放大镜不再移动,且右侧的高清大图消失。商品图片下方有多张缩略图,鼠标在这些缩略图之间来回移动可切换上方的商品图片。鼠标停留在缩略图上方时,缩略图会有一个选中效果,边框变为了红色。如图1:

思路分析

商品原图以及放大版的高清大图可以用动态面板盛放,动态面板的每个状态放置一张商品图片。商品图片及高清大图这两个动态面板中的图片顺序尽量保持一致。两个动态面板的尺寸相同,这里切记不要勾选自适应内容。通过为页面设置鼠标移动事件、控制放大镜的移动、放大镜随鼠标移动、放大镜在水平方向的位置为鼠标的横坐标-放大镜一半的宽度,垂直方向的位置为鼠标的纵坐标-放大镜一半的高度。

在设置交互之前,我们需要添加一些逻辑判断条件,限制鼠标的移动范围,即鼠标仅能在商品图片的动态面板内移动。在这个交互事件中,我们还需要确定高清大图的坐标位置。与商品原图不同的是,商品原图上方的放大镜在移动,商品图片不动;右侧的高清大图在移动,上方的放大镜不动(这里的放大镜用于辅助理解,实际上不存在)。所以高清大图的移动距离=放大镜相较于商品原图的移动距离x图片的放大倍数(高清大图的尺寸/商品原图尺寸)。放大镜的移动距离=放大镜的坐标-商品原图的坐标。放大镜的默认位置与商品图片的位置一致,这里建议放大镜的尺寸大于等于商品图片的一半尺寸。默认隐藏放大镜和高清大图的动态面板。缩略图切换商品图片这一交互效果,可以通过鼠标移入事件来显示不同的商品原图和高清大图。

制作原型

元件准备

拖动一个动态面板至设计区域,为动态面板增加5个状态,每个状态页面中放大一张商品图片,商品图片尺寸为400x400。再从元件库拖动一个动态面板至右侧,为动态面板增加5个状态,每个状态页面中放置一张高清大图,大图尺寸为800x800。放置一个红色半透明的矩形至商品图片动态面板的上方,矩形尺寸为200x200,矩形与商品图片位置相同。如图2:

放大图片

为页面设置鼠标移动事件、添加逻辑条件,当鼠标的移动范围不超出原图动态面板的边界且动态面板状态为图1时,显示放大镜,移动放大镜至绝对位置([[Cursor.x-Target.width/2]],[[Cursor.y-Target.height/2]]),显示高清大图1,移动高清大图1至绝对位置([[(LVAR2.x-LVAR1.x)2]],[[(LVAR2.y-LVAR1.y)2]])。

案例中有5张商品图片,同样的原理,为另外4张商品图片设置交互情形。最后还要为商品添加一个情形,即当鼠标移出商品图片边界外时,隐藏放大镜和高清大图。

图3:

c8177f3e6709c93db7e73819e0b28dd8d000545e.jpg

图4:

5366d0160924ab188ec201ba497593c979890bfe.jpg

切换商品图片

将5张商品缩略图设置为一个选项组,为缩略图设置选中样式,即选中时边框线为红色。为每个缩略图添加鼠标移入事件、选中缩略图、切换商品图片和高清大图的动态面板状态,显示对应的图片。图5:

908fa0ec08fa513d79ddb99940e220ffb3fbd992.jpg

图6:

0dd7912397dda144be703eb8cf38a5a60df486d6.jpg

到这里,原型已经制作完毕。

*想要获得 Axure RP 更多资源或正版授权的朋友,可以咨询【慧都客服】了解哦~



慧都网·1024程序员节DevExpressMyEclipseAxure RPAsposeFastReport等产品限时放“价”,给你专属宠爱!点击下方图片查看活动详情↓↓↓

QQ截图20191008171313.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:努力拼搏的80后 https://baijiahao.baidu.com/s?id=1626971384119347883&wfr=spider&for=pc

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Axure RP

产品原型设计、网站原型设计、应用程序设计的主流工具与软件

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat