今天给大家分享一下电商设计必须了解的尺寸,包括祥情页尺寸,首页尺寸,手机页面尺寸等
01分辨率设置
传统做印刷的分辨率都是设置成300象素/英寸或254象素/英寸。但网页上用的其实是72象素/英寸。这点要特别注意。
在PS里做好了一张图片可按ctrl+1(小键盘上的数字1)放大100%查看实际的显示效果。
02祥情页尺寸
淘宝的详情页宽度有两种,一种是集市店的750PX,一种是天猫商城的790PX
高度普遍认为10屏为最佳高度,也就是8000PX(一屏为800px)但实际上有很多优秀的屏数也在20屏左右,尤其是服装模特比较多的情况,这个其实是没必要太在意的,按情况来做。
03首页装修的尺寸
宽度也有两种:一种是集市店的950px,一种是天猫商城的990px.
但实际上我们经常是做成更宽的1920px,也即是全屏页面。这需要一点代码实现,没必要购买什么模版。
宽度需要建立四条竖的参考线,以防止主要内容超出了参考线的范围,致使14寸笔记本电脑等小屏幕显示不全。
参考线集市店位置分别是280px、485px、1435px、1640px、
天猫商城是465px、1455px、280px、1640px。
提醒:尺寸记在头脑里随用随输更快,不要设置快捷键自动新建。相信记在硬盘上的,只不过是数据,记在头脑里的,才是真正活学活用的知识。)
04参考线居中小技巧
小技巧:如果要从中间画一条参考线也可以直接输入50%。系统会自动计算。
首页高度和详情页一样也是没有限制的,只是海报部分建意在300Px到500Px之间,太高了感到压仰,也影响加载速度。
对了,首页里还有两条横的参考线,一条是120px,一条是150px这两条参考线是店招和导航的高度,当然也有些直接把导航条去掉了,做成150px的,比如下面这张就把导航条做在了右边,
产品主图的尺寸是方形的,最大是1200pxX1200PX,但更多的是800pxX800px的,
05手机端首页尺寸
手机端我们在设计的时候最掌用是自定义模块了(手机端哦)、在PS里建立宽度608px、高度为152px+(76pxXN)的尺寸、然后画出参考线、在这个尺寸内发挥想象、不让文字和图像出现在参考线上
自定义模块:尺寸是按格子来算的、最低尺寸占两个格子也就是152pxX152px 、 每格76px、那么换算下来我们在Ps里建立的尺寸对应是 第2格:152px、第3格:228px、第4格:304px、第5格:380px、第6格:456px、第7格:532px、第8格:608px、第9格:684px第10格:760px、第11格:836px、第12格:912px、依次类推 无上限、但是规定了可添加10个子模块也就是说一个自定义 模块可添加十张图片、每张图片一个链接
我一般建立608X760的尺寸、做十张图片
单列图片:608pxX(200px-960px)(放单个产品的海报)
双列图片:296pxX160px(放两个产品的海报或者主图)
轮播图片:640X320上限四张、一般放在页头、可以放两个轮播模块
多图:每张宽为248pxX高146px上限六张、常放的是优惠券或者产品分类,但是需要手指左右滑动才能看到信息、所以多图用的不是很多、除非是大型商场内容实在太多了才用