简介
从电商出现后,详情页设计变得非常重要,好的详情页设计不仅可以满足买家购买需求,从而提高购买转化率,还可以解决买家购买疑问,减少卖家接待工作量。
既然详情页设计这么重要,那么淘宝上的卖家是不是都有自己的设计师?
没有,对于一些中小卖家,他们并没有专属的美工或设计师,他们通常是将详情页设计或者店铺装修外包出去,这样更省事而且出图更快。
但是某宝上许多详情页设计不能满足很多外包的需求,因为经常有这种情况出现,他们接了卖家详情页外包的任务后,转头就丢给没经验的设计师练手;
更可怕的遇到一些不擅长沟通的设计师,沟通时效慢不说,一个不高兴就弃单逃人,最后什么详情页都拿不到!
看了太多这种情况,所以我觉得在详情页设计或者店铺装修上,这些情况都是可以避免的,更重要的是,用以下这种形式还可以将详情页赋予社群营销属性,增加曝光率,提高宝贝的转换率。
详情页设计小程序功能
1.能联系设计师、美工且沟通时效性高;
2.设计师、美工与客户之间有沟通正向反馈;
3.详情页设计、LOGO设计、包装 设计的作品能够根据客户的意愿上架到小程序上进行展示;
4.做好的详情页用小程序分享到微信群、微信好友用于增加曝光率。
详情页设计源码介绍
详情页设计小程序
因为小程序今天测试上线,所以可以通过查找小程序进行首次使用。打开微信,在发现界面找到“小程序”,点击“搜索”,输入“LOGO详情页设计”,就可以找到小程序开始使用。
首页
首页在开发的时候,我是按简约风格,搭配具有设计感的黄色。首页的展示分五部分。
第一是粉设-魔灯的个人介绍;
第二是LOGO设计作品集,33格式显示;
第三是包装设计作品集 22格式显示;
第四是详情页设计作品集 3*3格式显示,这部分我们会根据用户上传他们的详情页作品,进行分享提高曝光率;
第五是底部预约设计师按钮以及介绍按钮;
页面展示如下:
首页的各个模块都是使用弹性盒子模型进行布局,这是目前前端开发者使用较多的盒子模型,这样的布局更便捷,使用起来比较方便,而且我们设置了按钮点击事件,可以通过点击作品进入到作品集详细页面。
详情页
这一部分比较简单,我们通过点击首页上的任何一个作品集就会跳转到这个页面,这个页面用于展示作品的详情,还有一个返回按钮可以返回小程序首页,继续浏览详情页,LOGO设计,包装设计的作品集。
在这里,我添加了一个功能,客户上传自己的详情页后,可以分享到微信群或微信好友,在做好设计的同时,将赋能商品社群营销属性,提高成交量。
详情页分享成功,效果图如下:
虽然页面看起来简单,后台程序是需要一些技巧的,这当中需要考虑到问题有:
1.分享后如何正确的进入到指定页面呢?
2.如果使用wx.redirectTo返回首页的,界面切换不流畅?
3.如何让用户更省流量,更快加载地使用?
最后,用两段代码解决这3个问题。
//用于分享的代码
onShareAppMessage: function () {
var id=this.data.id;
return {
title: '粉设魔灯:好的设计并不贵!',
path: '/pages/detail/detail?id='+id,
}
}
// 返回首页
returnIndex:function(){
if (getApp().globalData.scene == 1008 || getApp().globalData.scene == 1007){
getApp().globalData.scene = 10 //修改场景值,这样分享后,页面切换不卡
console.log("returnIndex getApp().globalData.scene:", getApp().globalData.scene)
wx.redirectTo({
url: '../index/index',
})
}else{
wx.navigateBack({
delta: 1
})
}
},
开发台文件介绍
使用微信开发者工具开发,源码的界面如下,这个不重要,简单看一眼就可以了:
详情页设计小程序总结
作为一个程序猿,开发出功能在详情页,包装,LOGO设计的一个小程序作品,当然是希望让更多人看到了。所以有需要的淘宝卖家用户可以使用哦,可能提高店铺转换率就差用一用小程序了。
什么?不知道怎么用?我不是说了吗?
好吧,再说一遍,一定要记好哈。打开微信小程序,搜索“LOGO详情页设计”,看到一个魔灯的LOGO就是了。
详情页设计免费源码
这个小程序的源码不仅是淘宝店铺设计师们可以使用,你是淘宝店主或者其他企业也可用源码作为店铺或企业宣传使用,如果对这个源码有兴趣可以找我,这一份当然是免费分享啦。