在网站设计工作中，排版布局既可以是最简单的工作之一，但也可能是最棘手的工作。设计师有时候可以在几分钟内完成一个惊人的布局，但是同一位设计师优势互可能会在一天的大部分时间里为同样的任务而绞尽脑汁。
不可否认每一个网站建设项目都是独一无二的，都需要一个独特的解决方案，尤其是对定制型站点来说。但我发现牢记一些坚如磐石且用途广泛的排版布局很有帮助，可以避免我在遇到困难时崩溃的情况。
所以，当你在进行设计工作但是没有想到最佳的页面布局时，下面的十种布局可能足以让你度过难关。
保持简单（Keeping It Simple）
页面布局是艺术和科学的完美结合。创造具有视觉吸引力和独特性的东西需要艺术家的眼睛，但是，你可以使用一些非常容易遵循的指南来创建适用于任何情况的可靠布局。这些原则包括选择和坚持统一的对齐方式、正确地构造你的空间，并通过大小、定位等突出重要元素等。
设计师经常对布局的过程过于在意。我们倾向于处理一个项目，同时认为它需要在各个方面都一定要完全独特，才能值得我们所花费的时间、精力，当然还有客户花在上面的预算。
但是，如果你仔细浏览在线的网站设计，你可能会发现情况有时候并非如此。漂亮的网站通常使用相当简单的布局，而且一点也不独特。诚然，设计师通常想要设计能够打破常规的“非主流”网站，但客户可能更多的只想要一些可用、干净和专业的东西。
在本文中，我们将介绍十种非常常见的布局，你几乎可以在各大网站上看到它们的身影。请注意，这些网站的样式（即颜色、图形和字体）可能是独一无二的，但网站本身的基本结构是基于已经经过验证的网页设计布局方法。我们将通过首先向你展示一个简单的布局轮廓来强调这一点，以便你可以将自己的想法和设计关联到上面，然后我们将用一两个使用该布局的真实网站示例进行说明。
如果你是网页设计师，欢迎将此页面添加为书签，并在下次遇到页面布局困境时回到这里寻找一下灵感。请记住，以下每个布局都只代表你可以塑造和调整的基本建议，我们希望你不要按原样使用它们，而是根据项目的需要自行调整它们。
1.三框布局（Three Boxes）
这可能是排版列表最简单的布局了。事实上，你可能会认为它太简单了，无法满足你的需求。如果有这种想法的话，在深入考虑一下这种排版的真正用途，你会感到惊讶。
这种布局包含一个主要的主内容区域和两个较小的副内容区域。每一个都可以用图形、文本块或两者的混合来填充。此布局中的主内容区域通常会处理成一个幻灯片，以便展示尽可能多的内容。
顶部区域可用于作为Logo、公司名称、导航、搜索栏以及通常在网站上的任何其他信息和功能内容的区域。
这种设计非常适合用于内容元素比较丰富的页面或者是那些偏向于用图片来吸引注意力的页面。每个图像都可以是一个链接，指向一个更大、更复杂的内页。
示例网站
这是一个很容易上手的概念，以下是两个处理的比较好的例子。
Hurst非常有效地使用了三框布局。正如你在此示例中看到的那样，布局可以很好地突出业务及其产品，而不会给设计添加混乱感。
Bloom是另一个很好的例子，它使用设计概念来创建有吸引力的组合设计。这种设计充分利用屏幕来创建一个组织良好的网站以便很好的展示你的作品。
2.3D幻灯片（3D Screenshots）
随着开发人员的脑洞大开，越来越多的效果将网站设计变得更加丰富和吸引人，下面看到的 3D 幻灯片布局或它的一些变体变得越来越流行。
这种类型经常出现在一些用来展示作品集的网站中，可以很好的在第一时间抓住浏览者的注意力。
示例网站
CSS目前可以很轻松的创建这种 3D 效果，你所要做的就是释放你的想象力，在网站建设中创建令人着迷的 3D 幻灯片和交互式效果。
例如，We Build就是一个很好的例子，你很容易就会被这种 3D 交互设计所吸引并不自觉的参与进交互中。
3.高级网格（Advanced Grid）
你将在本文中看到的许多布局都遵循非常严格的网格对齐方式。但是，在大多数情况下，它们并不仅仅只是一个充满统一缩略图的页面。例如，下面的布局混合了不同大小的内容区域以避免视觉上的过于统一。
与三框布局很类似，页面上方有一个主内容区域，接下来是就是对非统一网格想法的简单改动。该空间将水平跨度原本的四个正方形版块的其中两个版块进行组合，以便页面的左半部分与右半部分出现不同。
正如我们在第一个布局中提到的，块不一定是图像。例如，你也可以将其想象为左侧是文本块，而右侧是方形的图像。
示例网站
你可以采用多种方法来设计基于网格的网站。高级网格布局主要在一些作品集类型的网站设计中比较流行。
Leedo是一个很好的例子，它向你展示了如何使用高级网格布局制作一个干净的网站。
Minimalism以不同的方式使用网格设计来展示其作品集。
这个概念是多变的，所以让这个概念成为你自己的概念吧。
4.让图像焕然一新（Featured Graphic）
如果你没有足够的内容，而仅仅是想展示一个图标、照片甚至是符号，你会怎么做？下面的布局是一个非常简单的解决方案，非常受欢迎，并且由于简单，不管是在视觉上还是在可读性上都非常好用。
这种布局是大胆的，但是在内容和元素是上坚持极简以及干净。它所希望展示的内容是强有力的，不可能错过的，只要确保你的图形足够突出。
示例网站
此概念是网站设计中最常用的趋势之一，尤其是在专题和产品页面中经常会被使用到。
Lamira向你展示了如何有效地利用这一趋势在网站主页上推广你的产品，它非常适合用于展示你的主推产品。
这个概念也适用于商业网站。FinWin使用图像来突显自己的专业性。
5.五框布局（Five Boxes）
五框布局是三框布局的演变。所有相同的逻辑都适用，只是经过修改以容纳更多内容。它也可以很容易地调整为四框，这取决于你要展示的内容。
显然，随着你添加到布局中的内容越来越多，副内容版块的空间会变得越来越小，因此对于大多数用途来说，五框布局可能会接近是此类布局的极限。
就像三框布局一样，这个布局非常通用，几乎可以在任何类型的网站上使用。增加这种布局的效果，比如添加大背景图形、圆角、添加阴影、添加水平混动按钮都可以让你变得与众不同。
示例网站
五框布局是一个需要掌握度的概念，你不会像以前那样经常看到它。但是你如果注意的话还是会发些一些非常出色地使用这种策略的网站。
ECOSHOP是一个电子商务类型的站点，它使用五框布局的概念来创建一个很酷的网格状网页设计。
当然，你也可以将它用于像作品集或者Blog的站点中，Voku 是一个很好的例子。
6.固定侧边栏（Fixed Sidebar）
目前为止，我们看到的几乎所有网站设计使用的都是顶部导航。另一个开始慢慢流行起来的选项当然是垂直导航，它有助于在页面左侧创建一个功能强大的垂直列。通常这是一个固定元素，当页面的其余部分滚动时，它会保持在原来的位置。这样做的原因是，导航可以从站点的任何位置进行轻松访问。
其余内容可以借用此文中的其他布局之一。请注意，我修改了三框布局，这次是四框布局。阅读完本文后，请再次查看所有布局，并思考如何混合和匹配这些想法以创建新布局。
示例网站
固定侧边栏是作品集类型网站设计中常用的设计。它同时对于 CV 风格的个人网站也特别有用。
Sonex是一个简介的作品集站点，它有一个固定的侧边栏。允许你以创造性的方式添加菜单和设置你的社交媒体快捷方式。
Moler向您展示使用固定侧边栏概念的另一种表达方式。
7.标题和图库（Headline & Gallery）
每个人都喜欢一个看起来舒服的画廊类型的页面。从布局的角度来看，还有什么比这更简单的呢？你所需要的只是一个统一的、坚持到底的图像网格，以及带有可选子标题的标题空间。这里的关键是让你的标题足够大。
此示例使用长方形来模拟真实情况下的站点，但是可以并且应该对其进行修改以适应你所要展示的任何内容。这里的重点是让你跳出框框思考而不是觉得只能默使用正方形，也许你可以在自己的布局中使用垂直矩形甚至圆形！
示例网站
这个概念非常适合为设计机构和摄影师制作网站。如果使用得当，这个概念非常适合创建现代简约的网站设计。
Satie是一个很棒的站点，它向你展示了它是如何工作的。
Park是另一个你可以从中获得灵感来创建作品集网站的例子。
8.精选图片（Featured Photo）
下面的这种布局非常常见，尤其是在摄影界。这里的基本想思路是通过一个大图像显示你的设计或摄影（任何东西），同时可能使用左侧垂直导航。
导航的内容可能左对齐是最合适的，但可以随意尝试使用中心对齐甚至是右对齐，以和右侧的图像进行呼应。
示例网站
当然，这是一个非常普遍的概念。但挑战是，你能用这个概念创造出多大的创意？
以Centrix 为例，看看它如何使用一个人的照片作为整个网站的背景。
或者你可以使用相同的概念来创建电子商务类型的网站，例如Flatsome。
9.混合布局（Power Grid）
混合布局是本文中最复杂的布局，但对于需要包含各种相关内容的页面，它是我见过的最有效的布局之一。从图像到文本和视频，你可以在此布局中放入几乎任何内容，并且保持有序和相关。
关键在于上半部分和下半部分的分界。请注意，这种布局实际上有一个包含一系列矩形的大容器，这个容器为你的空间提供了边界，你放置在里面的所有内容都应该被格式化成一个强大但多样的网格，这与本文开头的高级网格布局不同。
示例网站
新闻网站、杂志和博客使用这种方法来设计布局，他们可以在其中尽可能多地填充信息，而不会造成混乱。
在Newspaper网页设计中，你会在从 BBC 到 CNN、赫芬顿邮报等许多知名新闻网站上看到相同的布局。
10.全屏照片（Fullscreen Photo）
此布局同样比较适合摄影师或者设计师的网站，同时也适用于任何需要通过比较大的视觉来增加吸引力但是内容有限的网站。
将内容放在背景图像上时可能很难阅读，因此这里的基本想法是创建一个不透明（或几乎不透明）的版块区域。
甚至你可以尝试将其分成几个不同的部分。可以通过改变背景颜色、添加一些微妙的垂直线作为分隔线来完成，甚至可以像我上面所做的那样将大盒子分成更小的不连贯的盒子。
示例网站
这种网站布局也是一种常见的设计趋势，可以在从作品集到个人网站的各种网站中看到。
Charles是一个用于商业咨询网站。它使用全屏照片概念为网站创建更引人注目的标题部分。
你也可以使用相同的设计布局来制作其他类型的网站。例如，AppStorm是一个应用登陆页面网站，它展示了你可以通过这种设计理念获得多大的创意。
结论
我想在结束时重申几点。首先，即使页面布局绝对不一定是“一刀切”的做法，但它有一种科学可以在极其庞大的情况下快速轻松地应用。
接下来，上面介绍的布局想法并不主张你设计千篇一律的网站，而只是为你提供一个基本的画布的参考思路，你完全可以在其上构建一个特别独特的成品设计。
最后，成功实施这些想法的关键是要记住它们不是一成不变的。每个都应该适当调整以适合你的特定项目，甚至可以混合和匹配以创造新的想法！
----图文来自：design shack