axure原型设计之放大器

2017年3月27日 阅读:634

京东,天猫,淘宝等等这些电商的商品主图都会有放大器的功能,用户只需要将鼠标移到主图上就可以将图片放大查看细节。这种放大器方便用户更加深入地了解图片中的信息,从而一定程度保障了用户对商品的知情权。这一章我就教教大家如何使用axure原型工具制作图片放大器。

第一步:拖拉摆放好相关的控件

1、一张300X200的图片,命名为“小图”;

2、一个150X100的矩形,黄底黄边,并设置不透明度为30%,初始状态设置为隐藏,命名为“放大镜”,放置在“小图”的右下角;

3、一个300X200的动态面板,初始状态设置为隐藏,命名为“放大窗口”,放置在小图右边,并在state1面板状态中放置一张600X400的图片,命名为“大图”。

第二步:添加页面载入时用例

在用例中设置全局变量OnLoadVariable为【大图宽度/小图宽度】,即大小图的宽度比例

第三步:为“放大器”添加鼠标移动时用例

用例中有两个动作:

1、绝对移动“放大器”,x轴移动到【鼠标的x坐标-“放大镜”宽度的一半】,y轴移动到【鼠标的y坐标-“放大镜”高度的一半】,并且左侧、右侧、顶部和底部的边界分别为“小图”的左侧、右侧、顶部和底部。

2、绝对移动“大图”,x轴移动到【(“小图”左侧-“放大镜”左侧)*OnLoadVariable】,y轴移动到【(“小图”顶部-“放大镜”顶部)*OnLoadVariable】。

第四步:为“小图”添加鼠标移动时用例

该用例与“放大镜”的鼠标移动时用例一样,直接复制过来就行

第五步:为“小图”添加鼠标移入时用例

用例中只有两个动作,一个是显示“放大镜”,另一个是显示“放大窗口”。

OK,点击预览,鼠标在图片上移动即可以看到效果。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之放大器
附件下载:放大器rp文件 

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/03/27/257/

7条评论

  • 晓艳 2017年5月4日在下午4:14

    步骤详尽。多谢楼主分享。有两个问题:
    1. 第一步的第三点 “并在state1面板状态中放置一张600X40的图片,命名为“大图” ” 应该是600×400 而不是600×40吧?

    2. 一般的实现当鼠标移出小图是,大图就会消失。但是这里没有这个效果。我在小图上加上了OnMouseOut 隐藏放大镜 隐藏放大窗口后鼠标移出 小图是确实大图和放大镜都隐藏了。但是鼠标在小图里移动时放大镜和大图不断在闪。鼠标动一次闪一次。楼主有好的办法吗?

    • 晓艳 2017年5月4日在下午4:19

      效果在这里http://df19v1.axshare.com 放大器页面

    • 维度 2017年5月4日在下午11:29

      第一个问题确实是600X400,已在博客中改回来了
      第二个问题可以考虑在小图周围围一个很细的边框,鼠标位置大于或小于多少是隐藏放大镜和大图动态面板,只是一个建议,我也没实践过。。。

      • 晓艳 2017年5月5日在下午2:11

        试了下,加上当鼠标移出放大镜 (而不是小图)时隐藏放大镜和大图,就不闪了。

        • 维度 2017年5月5日在下午10:12

          不错,小图和放大镜重叠,处理移入移出的时候比较特殊

  • 一方 2017年4月18日在下午3:19

    做出来的放大镜拉不到底
    底部有小三分之一没法放大

    • 维度 2017年4月18日在下午5:25

      你的图片大小比例问题,要按照我的大图和小图比例来