您的位置: 青财网 > 企业 > 正文

电商手机端首页设计及装修的小技巧!

2021-02-23 07:51:23来源:阅读:-
电商手机端首页设计及装修的小技巧

大家是否遇到过在装修无线端首页的时候,总是掌握不好每一个区域的尺寸?卡不到那个线?每个自定义模块最多做10张切片,自定义模块之间存在白色缝隙,自定义模块最多添加10个?

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

重点是自定义部分,大部分页面都要利用自定义模块装修,自定义模块宽度608像素,高度不限(是76的倍数)。

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

1.无线端尺寸技巧

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

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

电商手机端首页设计及装修的小技巧

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

这时候显示是这样的:

电商手机端首页设计及装修的小技巧

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

电商手机端首页设计及装修的小技巧

网格大小是完全一致的。

也就是说,只要按照网格拉参考线设计,只需要注意最小切片是2个格子高度或宽度(152x152像素),就不用每做一屏去算尺寸了,按照网格进行设计,设计省时间,切片装修简单高效。天猫和京东只需要去看每一个格子的高度即可,同理,你GET到了吗?如果你还是没有看懂,可以加我微信咨询。

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

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

电商手机端首页设计及装修的小技巧

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

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

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

电商手机端首页设计及装修的小技巧

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

如果这2个小技巧对你有帮助,请转发给你的朋友,让更多的人能够学习到!

本公众号后台回复“京东代码”既可以获取京东装修代码合集。

推荐阅读:青海在线

滚动推荐
51:23电商手机端首页设计及装修的小技巧!
PS中【编辑】——【首选项】——【参考线网格和切片】将网格线间隔设置为[详细]
40:16微信iPad版下载,iPhone版
IT之家(www.ithome.com):微信iPad版下载,iPho[详细]
30:58华为手机虚拟键功能这么炫,可惜很多
用了许久的华为手机,早已对其虚拟键习以为常,反倒觉得物理按键有点LOW[详细]
21:44599元也能买到全面屏,小米再推性
无论是小米MIX2S还是小米8周年旗舰手机,只要是小米手机,一经发布就[详细]
57:56魔兽迷都激动了,直接用荣耀V20打
今天,网络上曝光了一段让魔兽爱好者为之兴奋的视频:一位魔兽爱好者竟然在[详细]
44:07平价机推荐:最受网友青睐的5款的高
相信很多用户都会有这样的感受,目前市面上很多国外手机价格都普遍偏贵,像[详细]
34:35浅谈微信商城小程序营销方案!
都知道小程序2018年很火,是一个风口,笔者也亲眼见识了很多客户利用小[详细]