这些布局模式，或者说框架，几乎是“约定俗成”的，它们为用户所熟知，它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章，我们一同来聊聊五种拥有持久生命力的优秀网页布局，也许你的下一个网页设计项目可以直接从这五种布局模式入手，无需过多犹豫和纠结。

 

1、顶部大图Banner+简单的栅格

 

 无论屏幕多大，这种布局都能够为用户展示充足的内容，供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。

 

·导航栏
·顶部大图，图片上叠有文字标题
·2~4个分栏，承载不同类别的信息，有的会有图标
·主要的内容区域
·页脚

 

这种布局设计干净清爽，有足够强的视觉表现力，并且常常采用的响应式设计，断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

 

 原理：这种布局中，每个元素都各司其职，并且整个流程是富有逻辑的，顶部大图足以营造氛围，给予用户特定的体验，下面的次一级元素能够做的很好的支撑。

 

相关趋势：越来越多这类网页开始采用色彩丰富的插画式的图标，而扁平化的设计和这种布局页面有着天然的契合。

 

2、单页设计，单栏布局

 

 单页式设计这几年非常火，它非常适宜于展现极简的内容，或者专注呈现一个主题。当网站的主题集中，内容也比较固定的时候，无需复杂的布局来呈现，单页单列式的布局足以应付一切。

 

·导航
·主要内容区域，文字+图片为主
·页脚

 

培训世界 南京卓文教育体验课 免费预约