淘宝模版是怎么设计出来的?其流程是怎样的?

泛旅传媒 2023-09-26 17:37 编辑:admin 55阅读

不请自来!我来回答下!
我曾经在自己的博客里写过:一个淘宝SDK简易装修模板的制作流程,这样的一个制作流程,是关于简易版的!


一个简易模板从头到尾的做下来要一天左右,在别人眼里也就是把图片组合在一起,做成花花绿绿好看就行,很多淘宝店主并不知道这是一个怎么流程,面对他们的提问和要求有时候真是无法解答,欲哭无泪!


看看自己的一个简易模板流程,无需过多吐槽!

第一阶段:制作模板效果图!

开始构思,确定主题,收集素材,确定配色!





主题不多说,一看这么多轴承就明白!合成是关键,高大上就靠它了!构思也不多说,就是体现轴承的气场,“爆发吧,轴承的小宇宙!”

图的处理:打开photoshop,这才是刚刚开始!




处理不是很精致,继续添加其它模块的部分,等大体定下,在根据总体来调节局部地区的细节和配色!




总体框架效果图已经定下!

接下来切图,切图就是把大图根据店铺的模块来切成一张一张的小图,这里具体不细说,还牵扯到一些图片优化的问题,到后面步骤自然就能看见一个个模块的图片被切成什么样的小图片!


第二阶段,用淘宝sdk2.0添加代码制作模板


启动sdk,准备创建模板





模板的制作,基本也就是建立店铺的首页和宝贝分类页,默认详情页的框架,然后对系统模块的css样式设置的过程。




简易模板还好,就是在原先的系统模块添加样式和图片

每一个系统模块都包含一个放图片的文件夹和一个放CSS样式的文件夹



把相对应的系统模块需要的图片放到图片文件夹



添加相对应的CSS样式




如此重复一个个系统模块的建立,直到所有的系统模块添加完毕!

主要就是设置一些系统模块在950,750,190的这几种布局样式,宝贝推荐还有考虑到3栏,4栏,5栏,7栏的宝贝展示设置情况


打包模板,准备上传制作好的模板




填写好模板名称,设置好分类和价格等,制作好模板预览图和使用说明,准备测试模板





申请审核,坐等模板上架!


——————————————2019.1.4更新————————



顺便再说一下高级模板吧!高级模板除了系统模块外,还可以开发制作设计师自己的模块!


在开始建模板的时候,选择高级模板选项,同样也是通过SDK工具来制作!


如上图,高级模板就是要多写一部分模块!文件名前缀tshop-pbsm这一系列的是系统默认的模块,tshop-um这一系列的就是设计师自己制作的模块。


每个设计师模块里面都有这几样,assets文件里放图片和样式文件,XML主要是模块的编辑设置,PHP文件就是模块的页面代码了!


XML代码

PHP文代码


最后,再来一个无线端的模板制作过程吧!现在的无线端使用率非常高!但是目前呢淘宝的电脑端模板和无线模板还不能通用,我想最难解决的恐怕还是图片尺寸缩放的问题,电脑屏幕一个1024的尺寸安放到手机那么大的一个屏幕上,图上的文字怎么识别才是真难题,注定必须要做两套尺寸不同的模板来使用!


我不是你家的美工:淘宝无线模板的制作过程
顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
点击我更换图片