产品设计排版模板_网站如何设计排版尺寸

一、产品寸基础尺寸标准

主流屏幕分辨率适配

1024×768（A4纸大小）：页面宽度≤1002px，设计高度612-615px

800×600：宽度≤778px，排版高度视内容调整

1920×1080：宽度≤1200-1920px，模板高度自适应

PS设计稿尺寸

800×600：740×560px（全屏无滚动条）

1024×768：1002×612-615px

二、网站版心与元素尺寸

版心宽度

1024×768：1000-1200px

800×600：770-780px

1920×1080：900-1200px

常见元素尺寸

Banner：全屏468×60px，何设半屏234×60px，计排小尺寸88×31px

Logo：88×31px

图片：非首页≤60K/张，版尺全尺寸Banner≤14K

文字：12-14px

三、产品寸页面长度与响应式设计

屏幕数量限制：

单屏内容不超过3屏，设计总宽度不超过1屏（A4纸）

响应式原则：宽度需适配主流分辨率（如1920×1080），排版高度动态调整

四、模板注意事项

浏览器兼容性：

IE6.0：宽度=显示器分辨率-21（如1024→1003）

Firefox/Opear：宽度=显示器分辨率-19/23

建议使用CSS媒体查询实现自适应

图片优化

网络显示建议使用WEB安全色（256色域），网站避免PS中的何设RGB/CMYK色彩失真

实际案例参考

800×600页面：778×434px（实际开发中常调整为770×434或760×600）

1024×768页面：1002×615px

通过以上规范，可确保网站在不同设备和浏览器上保持良好的计排显示效果。