2015年的新网络布局想法

2015年网页布局四大新兴趋势：分屏、无容器布局、块状网格和单屏网站

要点：

• 文章指出了2015年出现的四大网页布局趋势：分屏、无容器布局、块状网格和单屏网站。
• 分屏布局用于突出两个同等重要的功能或表达二元性概念，而无容器布局则侧重于内容，利用颜色和排版来创建层次结构而不是结构本身。
• 块状网格是创建响应式网站的多功能工具，其模块可以根据屏幕尺寸进行调整。但是，使用这种布局区分内容可能是一个挑战。
• 单屏网站以响应式适应屏幕的背景图像为主，通常采用极简设计且没有滚动条。由于空间有限，这种布局需要清晰的内容层次结构。

每年都会出现新的网页设计理念，而一些旧的趋势则逐渐消失。在接下来的几个月里，我们无疑会看到视频背景、瓷砖和动画故事书的流行度暂时增加，仅举几例。

另一方面，几乎可以肯定的是，早在2010年就出现的响应式网页设计将在未来相当长一段时间内仍然是我们设计的核心。

当然，这并不意味着所有网页都必须转向共同的标准化结构。相反，与以往相比，差异化、灵活性和实验的空间可能会更大。

我们确定了四个趋势或总体方案，我们认为这些趋势将在未来一年主导布局设计。您可以从这些模型中获得灵感，但最佳设计通常是在您将灵感作为创意的起点时产生的。

以下是这些趋势。

分屏布局

我们所说的“分屏”是指那些屏幕通常被垂直部分分成两部分（通常大小相同）的网站。

将页面这样划分主要有两个原因：

1. 显示两个重要特性。
2. 表达二元性概念。

当公司必须推广具有两个同等重要特性或变体的产品或服务时，通常会出现第一种情况。由于网站通常会按重要性顺序堆叠元素，因此在这种情况下，更传统的布局可能不合适。

另一方面，将屏幕分成两列可能是展示同一系统两个不同方面（例如，对发布者和读者都有利的发布系统）的最佳方式。

这样，就不需要区分主要特征和次要特征，读者会立即关注重要的内容。

第二个原因源于这样一个事实，即有时设计师需要传达二元性的概念。在这种情况下，将屏幕分成两部分会创建两个空间，可以在其中关注不同的主题，甚至关注两个不同的产品。此外，这种风格使您能够突出某种现实的相反特征。

Desktime https://www.php.cn/link/d45b6d92e35ff59d3f5a1861e431d581

我们将看到的第一个示例是Desktime（一家在办公共享领域运营的公司）的首页。他们将页面分成两部分，以便同时满足已经拥有办公室的人和正在寻找办公室的人的需求。

因此，他们使用“垂直分割”来使他们的服务中两个同等重要的功能获得同等的时间。他们采用的风格有效且实用，而且非常简洁明了。做得好！

注意：自从我截取这张截图以来，Eight&Four已经进行了重新设计。

Eight&Four https://www.php.cn/link/ad100897c6f809081d942836af421f86

第二个例子来自Eight&Four，这是一家数字营销公司。他们的主页也分成两部分，设计基于白色和平面颜色之间的对比。这里的划分用于表达公司拥有的所有一系列不同功能。

“垂直分割”风格也取决于“&”的存在，它减弱了分割效果。

无容器布局

几乎从设计开始，设计师就一直在使用诸如框、形状和线条之类的元素来划分和包含设计中的内容。例如，考虑标题或页脚是如何始终被设计成与其余内容在视觉上分离的。

一种新的趋势正在兴起，其核心思想是取消任何图形结构，转而采用更自由开放的风格。

这种趋势与极简主义有一些共同之处，但它也更进一步。事实上，极简主义通常仍然使用简单、线性的结构，而这种新的“无容器”风格则完全剥夺了任何视觉包装。

内容本身成为关注的中心，信息的层次结构由颜色选择、位置和深思熟虑的排版来决定，而不是由框和结构来决定。

Foreword https://www.php.cn/link/93bb49ede783ed9c09b650c9234be21a

正如您从首页看到的，Foreword是一家位于纽约和巴黎的互动机构。他们的网站取消了任何包含元素，用户的注意力在这里由颜色和字体来集中。

特别是，他们巧妙地运用排版来提供最重要的公司信息。颜色主要用于突出其他可点击的声音。很明显，这个网站除了在各个方面都具有响应性之外，还极其简洁。

块状网格

我们无需在此指出，网格结构可以成为创建响应式网站的一种非常有效的方式。在这种情况下，每个模块将包含特定内容，例如标题、图像或文本。

模块通常用于网站的首页，但可以在其他页面中开发以满足需求。

每个模块的尺寸设计为灵活的，它将适应屏幕尺寸。这使得强大的“网格布局”成为一个非常通用的工具，它可以同样有效地用于网站和移动应用程序。

然而，这种方法的挑战之一是，如果您创建许多相同大小的模块，则可能难以区分最有趣的内容和较旧、不太重要的项目。

事实上，如果许多块的大小相同，用户的注意力可能不会被任何特定项目所吸引。为了避免这个问题，一种新的方法是根据模块包含的内容创建不同尺寸的模块。

注意：自从我截取这张截图以来，Greats也进行了重新设计。

Greats https://www.php.cn/link/2fe37bd25993870f5a38563dd25b1d05

Greats是一家位于纽约的公司，主要通过其网站销售男鞋。他们的网站是他们的展示橱窗，因此每一个细节都经过仔细研究和考虑。

“Greats”选择了网格布局的实用性。他们用模块行堆叠了他们的主页，每个模块都包含一双鞋。所有模块的大小都相似，它们的形状是隐含的，而不是严格地标记出来。事实上，用户被鼓励忽略除鞋子展示之外的任何其他内容。

单屏网站

我们在过去 6 个月中看到的最后一个趋势是那些以响应式始终适应屏幕的背景图像为主的网站。通常，这些网站非常简洁，并且肯定倾向于极简主义的设计感。

然而，这种设计趋势的标志性特征是它们缺少滚动条：换句话说，这些网站几乎总是对其UI采用“单页应用程序”方法。

由于可用内容空间有限，设计师应该牢记非常清晰的内容层次结构，并且在包含不太相关的信息时应该特别有鉴别力。

在大多数情况下，图像（或者甚至是视频）主导着设计，留给其他设计理念的空间非常有限。它可以展示产品，也可以简单地用来唤起一种情感化的、电影般的氛围。

Shamballa Jewels https://www.php.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

“Shamballa Jewels”是一家销售一系列珠宝的公司。该网站有一个主页，由一个独特的页面组成，其中展示了他们的一些作品。没有滚动条，网站的导航由屏幕顶部的菜单提供。

我真正喜欢这个网站的是背景一直在变化。事实上，适合整个空间的图像与垂直分屏交替出现。

上面的例子表明，出色的、有效的设计不需要与我们看到的4或5种最常见的布局模式相绑定。每一个都抵制了从我们看到的流行网格/框架的熟悉性和安全性开始的冲动——并因此获得了很好的结果。

这是否意味着更常见的网页布局不起作用？

当然不是。但正如马克·吐温所说，“对于拿着锤子的人来说，一切看起来都像钉子。”

确保你看到的是钉子。

(以下为原文FAQ部分的伪原创，保持了原意，并进行了语句调整和词语替换)

网页布局设计的常见问题

Q：有哪些现代网页布局设计趋势？

A：现代网页布局设计趋势不断发展变化。一些流行的趋势包括极简主义设计、非对称布局、分屏布局和移动优先设计。这些趋势侧重于创建用户友好的体验，提供简单的导航和引人入胜的内容。它们还强调视觉吸引力，使用大胆的色彩、独特的排版以及高质量的图像和视频。

Q：如何使我的网站布局更具吸引力？

A：要使您的网站布局更具吸引力，请关注用户体验。这可以通过确保您的网站易于导航，并具有清晰的菜单和链接来实现。使用高质量的图像和视频来吸引用户的注意力。此外，确保您的内容与目标受众相关且有趣。加入互动元素，如测验或投票，也可以提高参与度。

Q：移动优先设计在网页布局中的重要性是什么？

A：移动优先设计是一种设计策略，它优先考虑为移动设备设计，然后再为台式机或其他设备设计。这很重要，因为越来越多的人正在使用他们的移动设备访问互联网。移动优先设计确保您的网站在所有设备上都能看起来不错并正常运行，从而提供更好的用户体验。

Q：如何在网页布局设计中有效地使用颜色？

A：颜色在网页布局设计中起着至关重要的作用。它可以设定情绪、传达情感，甚至影响用户行为。为了有效地使用颜色，请考虑您的品牌标识和目标受众。选择一个反映您的品牌并吸引您的受众的调色板。使用对比色作为文本和背景，以确保可读性。此外，使用颜色来突出网站上的重要元素或信息。

Q：排版在网页布局设计中的作用是什么？

A：排版是网页布局设计中必不可少的元素。它不仅传达信息，还设定网站的基调和个性。选择易于阅读并反映您品牌风格的字体。使用不同的字体大小和粗细来创建层次结构并引导用户的注意力。此外，确保文本和背景之间有足够的对比度以确保可读性。

Q：如何在网页布局设计中加入多媒体元素？

A：多媒体元素（如图像、视频和音频）可以增强用户体验，使您的网站更具吸引力。使用与您的内容相关的优质图像和视频。考虑使用背景视频或动画来增加视觉趣味性。此外，谨慎使用音频，并为用户提供播放、暂停或调整音量等控制功能。

Q：网页布局设计中有哪些常见的错误应该避免？

A：网页布局设计中应避免的一些常见错误包括布局杂乱、导航不良、字体或颜色过多以及未针对移动设备进行优化。此外，避免使用低质量的图像或视频，并确保您的内容易于阅读和理解。

Q：如何提高我的网站布局的可用性？

A：要提高网站布局的可用性，请确保您的网站易于导航，并具有清晰的菜单和链接。在整个网站中使用一致的布局和设计元素。此外，确保您的网站加载速度快且针对移动设备进行了优化。为残疾用户提供辅助功能，例如图像的替代文本和视频的字幕。

Q：留白在网页布局设计中的作用是什么？

A：留白或负空间是设计中元素之间的空间。它可以用来创建平衡、引导用户的注意力并提高可读性。留白还可以使您的设计看起来简洁现代。但是，务必策略性地使用留白，不要留下太多空白空间，以免使您的设计看起来不完整。

Q：如何保持我的网页布局设计新颖和最新？

A：要保持您的网页布局设计新颖和最新，请随时了解最新的设计趋势和技术。定期更新您的内容，使其与受众相关且有趣。此外，考虑每隔几年重新设计您的网站，以保持其现代感和吸引力。

以上是2015年的新网络布局想法的详细内容。更多信息请关注PHP中文网其他相关文章！