5种网站设计布局永远不会过时

在一个网站设计项目的开始，总有一个时刻，你会问自己“我需要从哪里开始？”当你决定创造一些完全不同或者相对新的设计的时候，这将重燃你创作的战斗欲望。

在现实的网站建设工作中，有几个种布局从来都不会过时。这些模式已经被用户所接受，它们易于理解并且为几乎任何的设计和内容类型都可以提供坚实的框架基础。在这里，我们将看看这五个“永恒”的网站设计布局，以及如何充分的利用在你的下个网页设计项目中应用它们。

1.通过在简单的网格堆积上放置形象图

在网站设计上采用网格式的图片排版在当下的设计中也十分常见和流行

无论屏幕大小如何，这种格式能预先给用户一整块的视觉点“放置”他们的注意力，并通过后续的滚动浏览逐步消化信息。虽然此形状的实际规格可能会根据设备类型或是否喜欢全宽或浅图像而改变，但设计前期大致相同。

· 导航；

· 文本内容覆盖其上的视觉形象图；

· 2到4列带有或不带图标的小信息元素；

· 主体内容区域；

· 底部

这种设计最好在整体上以干净为主，以此来提供强大的视觉存在，无论各版块断点如何，倾向于与响应框架能使它发挥更好的视觉效果。这种格式的一些替代应用是使用轮播或视频切换作为设计的注视觉形象。

网格式排版可以增加网页设计的整体条理性

工作原理：每个元素都有一个地方，并有一个逻辑流程跟随内容。主图像应该是吸引用户进入设计的第一印象，次要元素应该使用户想要点击它们。

组合流行趋势：向基于列的信息元素添加明亮的彩色图标或框，或在整个网页设计中为用户界面元素使用平面样式。

2.一页，一列

对于内容简单的网站设计，一栏式布局可以给单页面增添亮点

一种统一的页面布局对于少内容和仅有单个焦点或消息的网站来说是最佳解决方案之一。当消息很简单时，不需要对布局的形状过于深究，单列布局就可以是完美的解决方案。

· 导航；

· 带有图像以及文本的注内容区；

· 底部

当使用这种设计模式时，空间是一个重要的设计元素。确保元素之间有足够的空间，并考虑在设计的外边缘使用夸张的间距。使用单页网站的风险是，如果空间不足，它可能会使用户感到局促或混乱。

工作原理：“一页公式”最适合小型的网站设计。它可以使介绍页面上缺乏的内容或简单的组合在感觉上比原来的更重要。该格式也适用于简单的博客或计划坚持内容单一的网页设计。

组合流行趋势：添加滚动视差效果，使用户滚动时，页面能提供更有利的吸引力。这些简单的效果可以使一个简单的单页网页设计感觉更深更坚韧。

3.定义网格

网格布局在网页设计中可以是可见的或不可见的

整齐地堆叠行和列的内容永远不会出现独特的风格。无论网格是由大量的小块或只是一个4×4的布局安排，一个干净的网格从一开始就告诉你的用户一些事情——此内容是有组织的，能够良好的管理和这是专门为您定制的。

对于设计师的网站设计组合来说，网格所给设计整体带来的效果是令人难以置信的。对于图像网格的好处在于，你可以展示大量的视觉内容，但是看起来不至于显得破旧和杂乱。这种画廊或说图片集的效果可以相当的有影响力。

网格也可以以彩色框或容器的形式来组织文本。网格线可以是可见的或不可见的。有这么多选项可供选择。只要特别注意列和行的宽度和深度以及每个列之间的间距。不要小瞧这些细节，如果组织不好的话它们可可能使整个设计变得更糟。

工作原理：通过网格创建的布局组织是很难被打破的，这就体了它的稳定性。一个漂亮的网格布局可以在创建网页设计整体视觉和谐的同时，使用户可以轻松地查找相关的信息并与内容进行互动。

组合流行趋势：对于平铺的网格你可以尝试使用简单的动效，以便但鼠标悬停或点击通过“翻转”网格块以显示其他信息。想要另一个选择？当然，你也可以考虑将网格变成卡片式的风格。

4.经典的F模式

F模式在网页设计上的应用越来越广泛，这跟它的科学基础息息相关

通过科学研究人们浏览网站的方式揭示了一种被称为F模式的特定流程。阅读模式显示用户从网站的顶部开始，在屏幕上从左到右阅读。然后他们向下移动并再次阅读。最后，他们直线浏览页面的底部。

在这种融合F模式中设计内容是一种方法，可以帮助将内容放在用户正在查找的最正确的路径上。也正因为它的使用性，这个概念转化为设计的共同纲要。

· 头部以及导航；

· 在页面左手边设置一个宽列做为主要内容区；

· 在页面右手边设置一个窄列，用于链接和关联信息，是用户不用转到页面底部来操作；

· 底部

工作原理：人是一种习惯性的生物，这是一个经科学研究的特定模式，显示人们的思维，浏览和阅读网站的方式。它是舒适和常见的，使用户容易理解和便于交互。

组合流行趋势：翻转边栏的位置或将边栏转到导航区域，或在F形图案的顶部使用主视觉形象图。

5.简约分层

简约设计对于网站设计来说怎么都不会过时

在实际的生活中总是有一些优秀的简约设计风格。开放的空间允许用户利用定向焦点并因此而感觉舒适。 然后在那个空间中有层的并置，这些层更复杂和详细。

这是简单和有趣的组合方式，使这种设计风格在一些项目类型上是可行和可模拟的。这也是用户习惯于苹果在他们的网站设计上的常见用法。

简约不仅能给网站设计加分，同时也能更方便用户理解和阅读页面内容

工作原理：分层可以将用户的注意力吸引到网页设计中最重要的位置。特别是与简单的整体设计相结合时，这是要求用户注意的要素。在最小轮廓上分层是展示或突出显示特定内容或号召性用语的好方法。

组合流行趋势：使用细微的渐变或阴影来定义不同图层中的元素。虽然这些设计技术已经过时了一段时间了，但几乎没有什么悬念，这些趋势在最近一段时间正在回归，这要归功于材料设计和重新聚焦在二维空间中创造触觉的设计理念。

总结

当对任何类型的设计存在疑问时，你可以做的最好的办法就是回到设计理论的根源。使用经典的想法和原则来指导你做最终的决策。

在大多数情况下，这会创造出一些干净，易于阅读和遵循常规风格的东西。一旦你完成了这个基本框架，你可以添加一个时尚的元素来保持布局看起来更新。使用这种布局哲学将帮助你创建一个将经得起时间的考验而不会过时的网站设计（现在你可能会在想，在你的网页设计中可能会开始注意和使用到这些概念的其中之一）。