Axure怎么制作商品详情页产品图展示效果?

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

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

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

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

4、在d1中拖入一个矩形框,外框设置为红色,颜色设为透明,如下图:

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

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

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

8、效果预览

二、能力提升

以下实现这个效果的方法,并不是最简便的方法,也并不是最完美的方法,只是最基础的方法,这个实现方法简单易懂,还有实现起来复杂,最终效果更逼真,更方便的方法,这里不再做特别说明,大家下去自己研究。ps:原型只是工作的一种手段,并不需要在这上面花费太多精力,不过,多了解一点知识总是好的。

1、先拖入一个大小为200×200的矩形框,背景色设置为#666666,透明度为50%,命名为follow_1,然后按住ctrl键,复制出三个,分别命名为follow_2,follow_3,follow_4,如下图:

2、在画布空白区域,按照下图所示,拖入文本框,四个文本框,分别命名为:follow_1_x,y,follow_2_x,y,follow_3_x,y,follow_4_x,y。

3、设置页面载入时事件,获取follow_1~4的坐标值。

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

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

6、设置不同follow显示时,对应右边图片也跟随变换

(0)

相关推荐

  • 淘宝网卖家商品详情页的主图视频如何下载保存?

    本文将介绍淘宝网卖家商品详情页的主图视频下载保存技术. 方法 01 找到商品详情页的视频 点击播放按钮 02 在播放状态下,右击视频页面,选择"视频另存为" 03 编辑名称.保存位 ...

  • 京东商城 iPad 4.0 商品详情页改版-设计总结

    ​京东iPad作为一个独立的客户端app,在外界看来一直处于一个比较尴尬的境地.一方面对标的电商类竞品们大都放弃了Pad阵地,基本放弃了原生界面的开发:一方面在京东内部,相对于其他的客户端,Pad的体 ...

  • 详情页头图设计有哪些实用技巧?

    在电商设计工作中,详情页的设计是我们不得不面对的一大难题,和普通专题页不一样,详情页设计更多的是对文案.卖点进行视觉提炼.视觉表达的过程:如何把一个产品的卖点.特色通过视觉流畅的表达给用户,减少用户阅 ...

  • 京东店铺的商品详情页如何做关联版式

    大家在经营京东店铺的时候,经常是需要把店铺里的商品详情页做上关联版式,同时手机端和PC端都能看的见. 做手机关联.电脑关联,可以给店铺的其他商品引流,同时相关商品可以搭配营销,能够提高销量 那么如何快 ...

  • 如何设置店铺活动在商品详情页显示

    作为淘宝卖家,我们搞活动就是为了让更多的买家看到,来购买产品.淘宝新功能店铺活动可以在宝贝详情页显示,这是不是一个很大的便利.但是该怎样设置呢? 操作方法 01 首先我们的活动必须是在"店铺 ...

  • Axure怎么绘制一幅生产产品图?

    Axure RP想要制作一个生产产品图,该怎么制作呢?首先我们要了解Axure RP,下面我们就来看看详细的教程. 1.首先我们需要下载一个Axure,可以去百度下一个,因为这个软件是要钱的,最好是下 ...

  • ps怎么制作宝贝详情页

    平面软件制作图文并茂的宝贝详情 操作方法 01 1.打开新建750x20000px 02 打开扣好的产品图片,选取好背景素材,文案的编辑 03 3.产品详情的主图.细节的展示 04 4.产品型号.类别 ...

  • 淘宝卖家使用PS软件制作手机详情页的方法!

    最近有朋友问七夜(也就是本人我):如何使用PS软件制作淘宝手机详情页?我写了几个步骤发给他,顺便也贴在这里跟大家分享一下. 话说淘宝上有着众多"一键发布"手机详情页的工具,使用也比 ...

  • Axure怎么制作控件随鼠标移动的效果?

    Axure中想要给空间添加一些效果,比如鼠标跟随,下面我们就来看看详细的教程,效果参考下图: 1.新建一个“方框”和“热区“,分别命名为:”方块“和”热区“,”方块“大小为:280*380,”热区“大 ...