1.3.36

淘宝手机端首页设计及装修的小技巧

杭州/网页设计师/8年前/13592浏览
淘宝手机端首页设计及装修的小技巧
YvanZhang

让设计师更了解淘宝手机端自定义模块设计的要求,方便后期切片装修。

店招、轮播海报等按照尺寸做就好。

 

重点是自定义部分,大部分页面都要利用自定义模块装修,自定义模块宽度608像素,高度不限(是76的倍数)。每个自定义模块最多做10张切片,自定义模块之间存在白色缝隙,自定义模块最多添加10个。

 

如果每做一屏都去计算尺寸,费时费力啊~~是不是心中有一万只那啥飘过……

 

那么来说最简单的方法,PS中【编辑】——【首选项】——【参考线网格和切片】

将网格线间隔设置为76像素,子网格1,

f53458116214a84a0e282b4614bd.jpg


然后在PS中新建一个 宽度608像素  高度随意的文件,显示网格   快捷键Ctrl+ ’ (引号)

这时候显示是这样的

531a5811624ba84a0d304f43c4ac.jpg


我们再看淘宝手机端首页后台的自定义模块界面

87d45811628da84a0d304f65617a.jpg


网格大小是完全一致的。

也就是说,只要按照网格拉参考线设计,只需要注意最小切片是2个格子高度或宽度(152x152像素),就不用每做一屏去算尺寸了,按照网格进行设计,设计省时间,切片装修简单高效。


◆ 图片空间快速选择切片的小技巧


你还在用这种方法在图片空间选择切片吗?

18ae58116334a84a0d304f93d9eb.jpg

如果图片空间文件夹不多这种方法也不慢,但是很多店铺图片空间很多文件夹,很多图片这时候这样选择就不方便了,试想一下,一个手机端50张切片很正常,重复50个这样的选择过程。。。。


看看下面的方法是否对你有所启发


用PS软件切片我们会生成带有切片序号的文件名,重点就是利用这个序号和淘宝按时间排序。

c03358116389a84a0e282b69e3ff.jpg

在这里输入01  可以看到 第一张就是我们想要的切片,利用这个方法我们精准的选择想要的切片,会节省大量时间。(注:此方法会选择最后上传的图片,所以在操作的时候避免他人同时上传带有序号的图片)。



更多工作技巧欢迎关注站酷


当然还有更简便的方式,购买楼主开发的手机端模板,支持自定义热区,热区数据一键导入模板。可以做到整个页面无缝拼接,模板支持轮播海报自定义高度等等功能,有需要的欢迎私信。


118
Report
|
129
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in