欢迎您,游客。您可以选择 注册 一个新的帐户,或者用已有的帐户 登陆 本站。

Axure教程:商品详情页产品图效果展示 开始下载

  • 软件大小: [!--filesize--]
  • 软件语言: [!--language--]
  • 软件类别: [!--softtype--] / 产品展示
  • 运行环境: [!--softfj--]
  • 授权方式: [!--softsq--]
  • 软件等级:
  • 整理时间: 2018-09-24 03:55:09
  • 相关链接: [!--homepage--]
  • 插件情况:
  • 贴心提示: 本软件经过本站测试,但请下载后再次进行查毒
  • 卡巴检测: 安全 瑞星检测: 安全 江民检测: 安全 麦咖啡检测: 安全

进入论坛相关讨论区

界面预览(点击查看大图):

Axure教程:商品详情页产品图效果展示 简介

  文章主要对商品详情页产品图的展示原型进行了简要的说明,希望可以给大家带来些收获。

  电商平台商品详情页大同小异,有一个模块是肯定少不了的,就是产品图展示区域,下面主要就展示图区的一些小效果做一些说明。

  网上找一些图片素材,要分两批,一批大图,一批小图(不想自己找的,文末有素材附件)

  1、首先拖入一个动态面板,命名为d,大小为387121,将小图按照顺序排列好,根据美观度自主调节图片间距如下图:

  2、点进去d的状态1,将小图全部选中转换为动态面板,命名为d1,d1展示全部的5张小图,而d则展示4张小图,如下图:

  4、将大图放置在小图的上方,并转换为动态面板,命名为d_big,如下图:

  5、给五张小图分别命名:small_1、small_2、small_3、small_4、small_5,设置鼠标移入移出事件,当鼠标移入时,设置红色外框(命名为wk_red),移动到小图的坐标位置(x,y),这里用到函数[[LVAR1.x]]、[[LVAR1.y]],其中LVAR1代表的是元件小图,同时设置大图根据小图进行状态切换,效果如下图:

  6、在小图两边画上左右箭头,点击左箭头,让d1向左移动一定距离,点击右箭头,让d1向右移动一定距离,向左距离为负值,向右移动为正值。具体参考下图:

  那么再实现了这样的效果后,还有另外的一个效果,也用的比较多,如下图所示:

  以下实现这个效果的方法,并不是最简便的方法,也并不是最完美的方法,只是最基础的方法,这个实现方法简单易懂,还有实现起来复杂,最终效果更逼真,更方便的方法,这里不再做特别说明,大家下去自己研究。

  ps:原型只是工作的一种手段,并不需要在这上面花费太多精力,不过,多了解一点知识总是好的。

  4、拖入动态面板,命名为j_big,将四张切割图按照顺序,放入动态面板中,如下图。

  5、设置鼠标的悬停事件,当鼠标处于不同区域时,显示不同标记的follow。具体设置如下图:

  楼主好人!这个教程我看了好几遍,可是在红框移动的时候遇到了点问题,鼠标点击小图,前两张小图红框正常移动,第三帐开始就跑到不知道哪里去了,请问这是怎么回事

  红色外框的移动出现问题,肯定是坐标设置错了,请检查鼠标移入事件,看获取第三张小图的坐标时是否有错,对函数[[LVAR1.x]]是否运用有误,LVAR1代表的应该是元件本身

  为什么游戏等级会设置得很高,动辄100级,而其他的产品最高等级就比较低,比如网易云,最高10级。这是因为什么呢?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

本文转自当客资源站

Axure教程:商品详情页产品图效果展示 下载地址

Tag: 产品展示图

Axure教程:商品详情页产品图效果展示 说明

  • 如无特别注明,本站压缩包解压密码均为
  • 如果下载不了请按这里报告错误(请务必填写邮箱地址,修复后会联系您)。
  • 为了保证您快速的下载速度,我们推荐您使用[网际快车]等专业工具下载。
  • 为确保下载的软件能正常使用,请使用[WinRAR v3.62]或以上版本解压本站软件。
  • Axure教程:商品详情页产品图效果展示为网上收集,若无意中侵犯了您的版权,请与我们联系

Axure教程:商品详情页产品图效果展示评论   发表评论

回到顶部