10 个坚如磐石的网站设计布局
布局既是网页设计中最简单的方面之一，也是最棘手的方面之一。有时，设计师可以在几分钟内设计出令人惊叹的布局，有时，同一个设计师可能会在一天中的大部分时间里为同样的任务而苦苦挣扎。
每个项目都是独一无二的，都需要独特的解决方案，但我发现记住一些坚如磐石和令人难以置信的多功能对齐很有帮助，这样当我陷入困境时我可以摆脱困境。
当您无法找出在页面上排列内容的最佳方式时，下面的十种布局应该足以帮助您度过最糟糕的情况。
保持简单
页面布局既是艺术又是科学。创造具有视觉吸引力和独特性的东西需要艺术家的眼睛。但是，有一些非常容易遵循的准则，您可以使用它们来创建适用于任意数量案例的可靠布局。这些原则包括选择并坚持对齐、正确构建空白以及通过大小、位置等突出重要元素。
设计师常常对布局过程过于强调。我们倾向于在处理一个项目时认为它需要在各个方面都完全独特才能值得我们花时间和客户花钱。
然而，如果您仔细浏览一下网络，您会发现情况不一定如此。美观的网站通常使用相当简单且毫无独特之处的布局。确实，我们设计师最惊叹的页面通常来自打破常规的奇特网站，但普通客户只想要有用、干净和专业的东西。
1. 三盒
这可能是列表中最简单的布局。事实上，您可能会认为它太简单了，无法满足您自己的需求。如果是这种情况，如果您真正考虑一下这种安排的用途，您会感到惊讶。
三框布局的特点是一个主图形区域，下面是两个较小的框。其中每一个都可以填充图形、文本块或两者的混合。此布局中的主框通常是一个 jQuery 滑块，能够显示您想要的尽可能多的内容！
顶部的轮廓形状可用于徽标、公司名称、导航、搜索栏以及网站上常见的任何其他信息和功能内容。
这种设计非常适合作品集页面或任何需要展示一些示例图形的内容。每个图像都可以是一个链接，指向一个更大、更复杂的图库页面。在本文后面，我们将看到如何进一步混合这个想法。
示例网站模板和主题
这是一个很容易上手的概念。但您可以通过使用预制模板在此类设计中取得先机。您可以在热门市场中轻松找到大量使用这些布局的 HTML 模板和 WordPress 主题。这里只是几个很好的例子。
Hurst是一个 HTML 网站模板，它非常有效地使用了三框布局。正如您在此示例中所看到的，布局可以很好地突出业务及其产品，而不会给设计带来混乱。
Bloom是 HTML 模板的另一个很好的例子，它使用设计概念来创建有吸引力的作品集设计。此设计充分利用屏幕来创建一个组织良好的网站来展示您的作品。
2. 3D截图
随着开发人员不断创建无穷无尽的 Web 应用程序集合，下面看到的 3D 屏幕截图布局或其某些变体变得越来越流行。基本思想是在页面顶部添加标题，然后添加一些应用程序的风格化预览。这些通常带有反射、浓重的阴影、大的背景图形，甚至是复杂的装饰，例如爬满屏幕截图的藤蔓，但核心思想总是非常简单。
我看到这个技巧经常使用的另一个地方是预建主题。在这些情况下，设计师正在销售库存布局，并且确实需要他/她的占位符图形脱颖而出，没有什么比一些奇特的 3D 效果更酷和现代了！
示例网站模板和主题
虽然有很多方法可以只使用 CSS 来创建 3D 效果，但在网站中创建酷炫的类似 3D 标题的最佳和最简单的方法是使用像Slider Revolution这样的 WordPress 插件。它可以让您发挥想象力，在网站上创建令人着迷的 3D 幻灯片和交互式对象。
例如，We Build是一个 WordPress 主题，它利用Slider Revolution 插件在其网站模板上创建令人惊叹的交互式部分，并具有类似 3D 的设计。
或者您可以制作一个像这样的纯 CSS 3D 图像滑块。
3. 高级网格
您将在本文中看到的许多布局都遵循相当严格的网格对齐方式。然而，在大多数情况下，他们并不简单地建议一个充满统一缩略图的页面。例如，下面的布局混合了图像的大小以避免冗余。
与三个框的示例一样，页面上方有一个主要图形。接下来是对统一缩略图网格的想法进行简单的修改。该空间将允许水平跨度四个正方形，但我们合并了前两个区域，以便页面的左半部分与右半部分不同。
正如我们在第一个布局中提到的，块不一定是图像。例如，您可以将其想象为左侧的文本块，右侧的方形图像。
示例网站模板和主题
您可以采用多种方法来设计基于网格的网站。Bootstrap 和 Foundation 等框架就是为这些类型的网站制作的。然而，高级网格布局主要在作品集网站设计中流行。
Leedo是一个很好的例子，展示了如何使用高级网格布局制作一个干净的作品集网站。
极简主义HTML 作品集模板以不同的方式使用网格设计来展示其作品集库。
您可以将这个概念变成您自己的概念。
4. 特色图片
有时，您没有足够的内容来容纳充满图像的页面。那么，如果您想展示一个图标、照片甚至“&”等符号，该怎么办？下面的布局是一个非常简单的解决方案，非常受欢迎，并且由于没有干扰而阅读起来非常好。
结果是一个大胆、简约、干净的页面。它所传达的信息是强有力的，不容错过，只需确保您的图形足够好，能够如此突出！
示例网站模板和主题
特色图形概念是网站设计中最常用的趋势之一，尤其是在商业和产品登陆页面网站中。
Lamira是一个 WordPress 主题，向您展示如何有效地利用这一趋势在网站主页上推广您的产品。它非常适合展示和展示您最好的产品。
这个概念也非常适合商业网站。FinWin HTML 网站模板使用该策略来使企业业务人性化。
5. 五盒
五盒布局只是三盒布局的演变。所有相同的逻辑都适用，只是经过修改以容纳更多内容。它也可以很容易地是四个盒子，这取决于你想展示什么。这也让你看起来在设计上花了更多的功夫！
显然，当您添加到布局时，次要项目会变得越来越小，因此对于大多数用途来说，五个盒子可能会接近极限。
就像三框布局一样，这种布局非常通用，几乎可以在任何类型的网站上使用。切换它的想法包括添加大背景图形、圆角、添加阴影和/或反射，或者甚至可能向较小的缩略图添加交互元素。您可以轻松添加按钮，使它们水平滚动。
示例网站模板和主题
“五个盒子”是一个非常疯狂的概念，你不会像以前那样经常看到它了。但你会到处遇到一个网站，它非常出色地使用了这种策略。
ECOSHOP是一个用于电子商务商店的 HTML 模板，它使用五个盒子的概念来创建一个很酷的网格状主页设计。
您也可以将它用于博客和作品集网站，Voku HTML 模板就是一个很好的例子。
6.固定侧边栏
到目前为止，我们看到的所有网站都有顶部水平导航。另一个流行的选项当然是垂直导航，它有助于在页面左侧创建强大的垂直列。通常，这是一个固定元素，当页面的其余部分滚动时，它会保持在原来的位置。这样做的原因是为了可以从网站的任何位置轻松访问导航。
其余内容可以借鉴此列表中的其他布局之一。请注意，我再次修改了三框布局，这次是四框布局。阅读完本文后，请再次查看所有布局，并思考如何混合和匹配这些想法来创建新布局。
示例网站模板和主题
固定侧边栏是作品集网站设计中常用的设计。对于简历风格的个人网站来说，它对于添加类似个人资料的部分特别有用。
Sonex是一个漂亮的作品集 HTML 模板，具有固定的侧边栏。它允许您以创造性的方式添加菜单和社交频道链接。
Moler HTML 模板将向您展示另一种使用固定侧边栏概念的方法。
7. 标题及图库
每个人都喜欢好的画廊页面。从布局的角度来看，还有什么比这更简单的呢？您所需要的只是一个坚实、统一的图像网格，以及一些放置标题和可选副标题的空间。这里的关键是让你的标题大而大胆。请随意使用它作为创意点，并包含脚本或一些疯狂的字体。
此示例使用压扁的矩形来镜像下面的真实站点，但是可以并且应该对其进行修改以适应您所展示的任何内容。这里的重点是让您跳出框框思考，而不是默认的正方形，也许您可以在自己的画廊中使用垂直矩形甚至圆形！
示例网站模板和主题
这个概念非常适合为设计机构和摄影师制作网站。如果使用得当，这个概念非常适合创建现代简约的网站设计。
Satie是一个很棒的 HTML 模板，它向您展示了它是如何完成的。
Park是您可以从中获取灵感来创建作品集网站的另一个示例。
8. 精选照片
下面的布局非常常见，尤其是在摄影界。这里的基本想法是使用一个大图像来显示您的设计或摄影（任何真正的东西），并附有左侧垂直导航。
左对齐的导航功能可能是最强的，但您可以随意尝试居中甚至右对齐以补充照片的直边。
示例网站模板和主题
当然，这是一个非常常见的概念。但挑战在于你如何利用这个概念发挥创意？
以Vcard 网站模板Centrix为例。看看它如何使用一个人的照片作为整个网站的背景。
或者您可以使用相同的概念来创建更好的电子商务网站，例如Flatsome WordPress 主题。
9. 电网
电网是本文中最复杂的布局，但对于需要包含各种相关内容的页面来说，它是我见过的最有效的布局之一。从图像和音乐播放器到文本和视频，您可以将任何内容塞入此布局中，并且它保持强大。
关键在于上面预览的下半部分。请注意，实际上有一个大容器，其中包含一系列矩形。该容器为您提供了空间的边界，并且您放置在其中的所有内容都应该采用强大但多样化的网格格式，这与本文开头附近的高级网格布局不同。
示例网站模板和主题
新闻网站、杂志和博客使用这种方法来设计布局，可以在不造成混乱的情况下填充尽可能多的信息。而且效果也很好。
报纸WordPress 主题是众多使用网格布局的博客主题之一。您还会在 BBC、CNN、赫芬顿邮报等许多知名新闻网站上看到相同的布局。
10.全屏照片
列表中的最终布局是另一种非常适合摄影师的布局，但适用于任何具有大的、有吸引力的背景图形来显示和有限内容的网站。
当内容放在背景图像上时，阅读内容可能非常困难，因此这里的基本思想是创建一个不透明（或几乎不透明）的水平条，它位于图像顶部并用作链接的容器，复制、徽标和其他内容。
不要将栏用作一个非常宽的内容区域，而是尝试将其分成几个不同的部分。这可以通过改变背景颜色、添加一些微妙的垂直线作为分隔线，甚至像我上面所做的那样，将大盒子实际上分成较小的断开的盒子来完成。
示例网站模板和主题
这种网站布局也是一种常见的设计趋势，在从作品集到个人网站的各种网站中都可以看到。但它在企业和商业网站上最受欢迎。
Charles是一个用于商业咨询网站的 HTML 模板。它使用全屏照片概念为网站创建更引人注目的标题部分。
您还可以使用相同的设计布局来制作其他类型的网站。例如，AppStorm是一个应用程序登陆页面网站，它展示了您可以如何利用此设计概念发挥创意。
结论
上面提到了一些关键点，我想在结束时重申一下。首先，尽管页面布局不一定是“一刀切”的做法，但它是一门科学，可以快速、轻松地应用于极其广泛的情况。
接下来，上面提出的布局想法不需要导致看起来都一样的千篇一律的网站，而只是为您提供一个基本的画布，在其上构建一个非常独特的最终设计。
最后，成功实施这些想法的关键是要记住它们并不是一成不变的。每个都应该进行更改以适合您的特定项目，甚至可以混合搭配以创造新的想法！
