网页标准化设计规范

页面常用布局

注:页面基于WP古腾堡(Gutenberg)编辑器的GreenShift构建

常用1栏布局

分栏占比:1模块宽度:1400px
素材宽度:1500px

常用2栏布局

分栏占比:1/2模块宽度:700px
素材宽度:800px

分栏占比:1/2模块宽度:700px
素材宽度:800px

分栏占比:3/5模块宽度:840px
素材宽度:900px

分栏占比:2/5模块宽度:560px
素材宽度:600px

分栏占比:2/3模块宽度:933px
素材宽度:1000px

分栏占比:1/3模块宽度:467px
素材宽度:500px

分栏占比:3/4模块宽度:1050px
素材宽度:1100px

分栏占比:1/4模块宽度:350px
素材宽度:400px

常用3栏布局

分栏占比:1/3模块宽度:467px
素材宽度:500px

分栏占比:1/3模块宽度:467px
素材宽度:500px

分栏占比:1/3模块宽度:467px
素材宽度:500px

分栏占比:2/4模块宽度:700px
素材宽度:800px

分栏占比:1/4模块宽度:350px
素材宽度:400px

分栏占比:1/4模块宽度:350px
素材宽度:400px

常用4栏布局

分栏占比:1/4模块宽度:350px
素材宽度:400px

分栏占比:1/4模块宽度:350px
素材宽度:400px

分栏占比:1/4模块宽度:350px
素材宽度:400px

分栏占比:1/4模块宽度:350px
素材宽度:400px

常用5栏布局不推荐作内容展示和图标展示,不利于三端适配

分栏占比:1/5模块宽度:280px
素材宽度:300px

分栏占比:1/5模块宽度:280px
素材宽度:300px

分栏占比:1/5模块宽度:280px
素材宽度:300px

分栏占比:1/5模块宽度:280px
素材宽度:300px

分栏占比:1/5模块宽度:280px
素材宽度:300px

常用6栏布局常用于图标展示,不推荐作内容展示

分栏占比:1/6模块宽度:233px
素材宽度:300px

分栏占比:1/6模块宽度:233px
素材宽度:300px

分栏占比:1/6模块宽度:233px
素材宽度:300px

分栏占比:1/6模块宽度:233px
素材宽度:300px

分栏占比:1/6模块宽度:233px
素材宽度:300px

分栏占比:1/6模块宽度:233px
素材宽度:300px

注:
1.【模块宽度】指网页模块的设计宽度(基于页面内容宽度为1400px);
2.【素材宽度】指建议为该模块准备的图片宽度,通常略微大于【模块宽度】,以确保图片清晰(基于页面内容宽度为1400px);

图片&视频常用比例

横图常用比例绿色边框为常用

竖图常用比例绿色边框为常用

视频常用比例绿色边框为常用

注:图片常用格式 JPG(传统图片压缩格式),PNG(常用于透明背景图片的格式),Webp(最新图片压缩格式,可以替代JPG和PNG)。