在开始一个新的网页规划项目的时分，不知道你会不会有那么一瞬间的犹疑：“这个项目要从哪里着手呢？”伴跟着这种犹疑的，是“做点史无前例的著作”的激动。不过，许多时分，这些激动和犹疑都在需求的磨合、规划的细化中，逐步淡化。比较咱们也都发现了，网页布局在许多时分都是相似的，甚至可以说，有些布局方式是长盛不衰的。

这些布局方式，或许说结构，几乎是“约定俗成”的，它们为用户所熟知，它们自身也更贴合用户对内容的识别方式和使用习气。今日的文章，咱们一同来聊聊五种具有持久生命力的优秀网页布局，也许你的下一个网页规划项目可以直接从这五种布局方式入手，无需过多犹疑和纠结。

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

无论屏幕多大，这种布局都可认为用户展示足够的内容，供用户阅览和探索。尽管这种布局跟着屏幕、设备而有所差异，有的规划师会倾向于规划成固定宽或许横跨整个页面的布局，可是整体的方式都迥然不同。

·导航栏

·顶部大图，图片上叠有文字标题

·2~4个分栏，承载不同类别的信息，有的会有图标

·首要的内容区域

·页脚

这种布局规划洁净清爽，有足够强的视觉表现力，而且常常选用的呼应式规划，断点也很好操控。顶部大面积的轮播图或许Banner 也有许多插件或许应用来帮你完成。

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

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

2、单页规划，单栏布局

单页式规划，它非常适宜于展示极简的内容，或许专心出现一个主题。当网站的主题集中，内容也比较固定的时分，无需杂乱的布局来出现，单页单列式的布局足以敷衍一切。

·导航

·首要内容区域，文字+图片为主

·页脚

选用这种布局方式的时分，空间的操控至关重要，适当检测规划师规划留白和布局平衡的功力。元素和元素之间的疏密关系是需求规划师反复推敲的，如果空间操控不合理会给用户一种紊乱的感觉，如果过于严密则会发生局促感。

原理：单页式规划适合于小网站或许小型项目的展示，它可以用来制作一个简略的介绍页面，让简略的内容显得不那么单调，强化内容的方式感和重量感。关于内容简略的博客网站而言，单页式规划也是不错的选择。

相关趋势：和单页规划结合最严密的应该是动效规划和视差滚动，他们可以让单页式规划愈加生动有趣，淡化单调的规划，赋予页面更强的生命力。

3、自定义栅格

那些被规整分割出来的网页布局从来都没有过期过。无论是分割得细碎的网页区域仍是大块的页面区块，大多都需求凭借一套洁净规整的栅格来支撑。在此基础上，内容墨守成规地被置于不同的区块中，被精心地组织展示出来。

在规划师的著作集页面中，你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于，它可以一起出现大量的视觉化的内容，看起来足够丰厚又不会落于下乘。下面这个图库的效果看起来就适当震撼。

在栅格中填充色彩，还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割，可供选择的方案有许多，不过千万要操控好栅格尺度和间距。操控不好的细节，整个规划的平衡感可能会被破坏。

原理：栅格的优势在于它的组织性，关于用户而言，它具有规律性和可预期性。一个漂亮的栅格系统可以让用户更快找到需求的内容，在视觉上也愈加和谐自然。

相关趋势：栅格很简略被人视为卡片这样的元素，可认为其参加翻转等各式各样的动效，出现出更多的信息和视觉层次。

4、经典的F式布局

研究标明，用户在阅览网页的时分，习气于沿着F式的阅览轨迹来阅览信息，也便是说，用户喜欢从左到右阅览，然后向下移动，再继续从左到右阅览。

这种F式的阅览方式对应的网页布局便是F式布局，最要害的信息靠左显现，从上到下尽量保持在一条线上。

·页头和导航

·靠左的一栏相对较宽，展示首要的内容

·靠右常为侧边栏，展示相关链接等内容

·页脚

原理：人的行为很简略受到习气的影响，而研究也证明了人思考、行为确实是方式化的。从左到右，自上而下，人们大多习气了这种行为方式。F式的布局方式具有杰出的适用性，便于用户理解和交互。

相关趋势：F式布局中侧边玩法许多，有的规划师会将导航与之结合，或许在页面顶部加上大图Banner。

5、极简分层

极简化的规划一直都在盛行，它的盛行不是没有原因的。开放式的空间让用户感觉愈加轻松，也使得其中展示的内容更简略被聚集。如果极简化的页面中参加不多的几个并列的内容层，可以让信息更有层次，也使得极简的页面具有了细节。

这种规划并不杂乱，可是让页面愈加有趣了，它可以适配更多不同类型的项目了。这也解说了为什么用户如此的喜欢相似Apple 官网这样的规划。

原理：极简化的页面中参加简略的几个分层，让页面有了视觉焦点，尤其是当规划者想要引导用户关注到某个要害的内容的时分，这种页面布局很很简略完成这一点。

相关趋势：奇妙的暗影和渐变常常被用在这样的页面傍边，强化元素之间的层次感。尽管这些规划手法一度“过期”，可是现在大有卷土重来之势，而Material Design 这样的规划风格便是它们的冲锋号。

结语

许多规划手法、规划趋势都常常会被人质疑，可是如果撇开情感因素，从最基本的规划原理上来推导这些趋势的时分，可以从根本上判读这些规划手法是否真的是有价值的。

今日所谈及的这些布局是经过期间洗炼的经典规划，选择适宜的规划趋势同这些布局结合起来，常常可以带来不错的效果。