交互效果让你的详情页面duang起来

导读：

   在这竞争激烈电商领域， 运营，美工、推广、客服对店铺的整个运营息息相关，缺一不可。今天，咱们就来聊聊店铺设计，为什么是谈店铺设计呢，接下来将为你揭晓。靓丽的页面最能引人注意，丰富的画面可以让平凡普通的页面更加有活力，从而降低跳失率，提高转化。

正文： 

   尽管是普通的页面，也能拥有活力的一面，而在其中起桥梁的就是——装修。或许你会说装修我也会，但，你真的懂吗？还是只会简单的装修。一个成功的店铺离不开运营，离不开设计， 一个好的页面需要符合主题地去设计，当然，装修是每个页面的必经之路，无论是普普通通的页面还是高逼格的页面，经过装修之手，就像经过层层的精致包装，才可以完整、更美好的呈现在大家面前。

一、交互效果的应用

首先需明确，要想要一些丰富的交互效果或是比较智能的显示，就算是高级的后台装修模板，也是需要借助其他工具来使用的，比如倒计时。就需要借助外来工具的使用，接下来就为大家引荐设计师门在装修时会经常用到的工具——盛夏科技在线布局和醉语言编辑器。

（一）设置动态倒计时

设置倒计时，一般在大促活动中会用到，可以起到渲染活动紧张氛围的效果。如下图所指，做好倒计时图片，上传图片空间后，进入盛夏科技，把背景和尺寸调整好，再点击“倒计时”图层，调整好下列的属性，最后点击右上角的”生成代码”即可（需注意选择是淘宝店铺还是天猫店铺，因为不同类型的显示尺寸是不一样的）。

（二）设置搜索框、视频以及旺旺客服

搜索框可调节大小以及不透明度，视频可等比例调节大小，并将视频链接放入即可。旺旺客服可调整显示大图小图。如下图：

（三）轮播海报的应用（不用买智能版依然可以用）

海报轮播，对于用默认的专业版模板的店铺，是没有全屏图片轮播的功能的，但买模板的每个月也要承担的很大的费用，当然，针对的一些小商型的店铺。现在解决办法来了，不用购买装修模板也可以实现全屏轮播海报的效果。同理，打开“盛夏科技”，点击右侧的“图片轮播”层，在底部属性里即可添加轮播图片以及链接，导航开关以及箭头可自行选择隐藏，最后直接点击生成代码即可。

（四）鼠标经过弹出图层

鼠标经过弹出图层，也就是开关灯效果， 将宝贝图片和鼠标经过的图片依次更新上去，调节好大小生成代码即可，是不是很简单呢。

（五）多层固定背景代码

多层固定背景，是交互效果其中一种，在页面上的效果表现是有一层是固定的，另外一层可以在其固定背景上滚动展示。一般运用在分类banner的海报上，图片是固定背景——jpg格式，上面的文字是可以滚动的——png格式。按下图所示，复制图片链接地址，替换红色的文字，对于png的透明图，需要复制代码去替换。然后即可去后台利用自定义模块去编辑即可。

二、装修必备桥梁

（一）淘宝天猫店铺优惠券链接转换工具

有装修过后台的人都会知道，pc端的优惠券链接和无线端的优惠券链接是不一样的，在这就给大家献上宝典——淘宝天猫店铺优惠券链接转换工具。

http://www.ahatao.com/pc2wap/

直接复制链接点击生成即可获取无线端的链接地址，是不是很方便呀。

（二）1920尺寸全屏页面生成

你可知道这是什么呢，一般情况下，无论是天猫还是淘宝店铺，页面上的宽度是做1920px的，但你在装修的时候，是否有遇到过这样的情况呢，直接把图片放上去，却不会居中显示，而是偏移了位置，这时候就需要借助这个工具来限制它啦——战国策。http://moban.cn/gongju/index.php?t=quanpin

如上图所示，将代码粘贴进选框中，然后点击“生成全屏代码”，复制代码去装修后台即可，此处需要注意的是，在进行第二次生成全屏代码时需要点击左边的“清空代码”，不然会导致生成的是乱码。

（三）如何获取天猫淘宝的主图原图

最后这一招很神奇的哦，不知道你有没有发现，淘宝的主图获取直接右击就可以复制图片了，但这招在天猫却不顶用，那到底可以怎么拿到图片呢，在主图中选择你想要的图片，在小图中右击“在新标签中打开图片”，此时在新窗口里会看到一张小图，只要将红框里的尺寸限制删除，就可以得到主图原图的大小。

五、总结

交互效果的应用，可以给页面增加几分活力，但是，也不是说交互效果越多越好，太多的话反而会扰乱整个页面。特别是对于电商页面，简单的交互效果在页面上呈现会美观活力了很多，但应用过多的话会产生视觉疲劳的。以上所说的交互效果就有：

1.设置倒计时

2.设置搜索框、视频、旺旺客服

3.轮播海报的应用

4.鼠标经过弹出图层

另外，在装修过程中也需要借助一些工具，方便我们工作的进行，例如生成全屏代码,优惠券转换工具，以及日常工作时需要用到的ps快捷键技能，通过一些技巧来提高我们工作的效率与质量。