电商设计必须了解的尺寸,祥情页尺寸,首页尺寸,手机页面尺寸等

来源:网络   作者:热心网友   发布时间:2017-06-26    浏览次数:609

今天给大家分享一下电商设计必须了解的尺寸,包括祥情页尺寸,首页尺寸,手机页面尺寸等


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上限六张、常放的是优惠券或者产品分类,但是需要手指左右滑动才能看到信息、所以多图用的不是很多、除非是大型商场内容实在太多了才用

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6107.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通