Web设计中损坏网格布局的介绍

作为狂热的互联网用户，我们喜欢一个很好的网格。网格布局以我们的眼睛和大脑自然理解的方式安排内容，允许我们快速有效地摘要文本和媒体 - 这难怪大多数网站使用它们。

如果您想抓住机会并推动您网站上的设计信封，您可能想要尝试破碎的网格布局反而。

损坏的网格不是每个网站的完美解决方案，而是那些想要在其页面中注入更多个性和原创性的人可以在布局本身中这样做。在本指南中，我们将学习如何打破标准网格布局，支持不同的东西。

但首先，让我们查看标准网格布局可以在网页设计中完成的内容，所以我们知道我们实际上要在这里打破了什么。

什么是网格布局？

在Web设计中，网格布局是一种结构化和组织页面内容的方式，如文本，图像，按钮和其他元素。网格布局将网页分成相等宽度的列。将元素放置并在这些列边界内对齐。

网格布局更多的是概念而不是定义的方法。要实现网格布局，设计人员遵循特定的网格系统，这是一组特定规则，用于格式化网格。

今天使用许多网格系统，其中最受欢迎的是12柱变体之一960个网格系统。

图像源码

该系统将页面的宽度划分为12列，每个60像素宽，由20像素空间分隔。设计师不完美地指的是列之间的空格为“排水沟。

网格系统如960非常非常普遍 - 他们通知了绝大多数网站的设计。虽然很难获得精确的数量，但我向你的10个最频繁的网站中的至少九个可能追随网格布局在一定程度上。对于函数网格的清晰剪切示例，看起来不仅仅是我们的博客页面：

dota2雷竞技

但为什么网格在第一个地方如此流行？网格布局使网络设计师和Web开发人员能够：

• 更快且容易地构建页面，不必每次都重新打开轮子。
• 组织不同类型和大小的页面元素。
• 调整元件的间距和尺寸整齐地配合在一起。
• 安排毫不费力地帮助用户的内容扫描并导航页面。
• 遵循既定的惯例，用户在浏览时会期待。

所有这些因素都使网格成为网页设计的经验和真正的方法。它足够灵活，可以适应任何类型的内容，而刚性足以让网站直观和可导航。

但是，没有规则说您的网站需要遵循网格布局。如果您不害怕从惯例中获得更多创建和突破，以构建突出的网站，请考虑“打破网格”。

什么是破碎的网格布局？

损坏的网格布局是一个网页布局，无论是传统网格布局的一些标准。这可能意味着调整列宽和/或行大小，重叠和堆叠元素，动画或其他技术，超出网格系统的规定

损坏的网格布局允许设计人员从事具有独特但视觉上的页面安排的用户。如果您想提供令人难忘的经验并将您的在线业务区分开，损坏的网格是实现这一目标的一种设计方法。

与标准网格布局一样，损坏的网格布局不是一组硬规则 - 您可以通过几种方式打破网格。在下一节中，我们将讨论最常见和有效的构建虚拟网格网站的技术。

如何创建损坏的网格网络设计

打破网格通常不均是指窗口抛出所有与网格相关的概念。有时甚至对既定技术的微妙变化也可以借给一些额外的视觉诱惑。

始开始时，损坏网格设计的最佳方法是首先在网格系统中构建一个页面，如960，然后通过CSS或图形界面工具调整网格的造型来产生原件。

您可能更愿意预先绘制想法，或者进入盲目和实验 - 无论哪种方式，它更容易从预构建网格上工作而不是风格从头开始放置元素

以下是您可以对传统网格的一些更改，以提升您的网站以外的普通行和列：

不同的对齐

通过采用不对称性并改变页面元素的垂直对齐方式，使网格布局的直接途径是通过拥抱和改变垂直对齐方式。它与将元素放在网格中的内容一样简单，然后更改列宽度。此基本方法违反了用户的期望，即文本图像应左，右或中心对齐。

扎拉在他们的网站上做了很好的工作，如下所示。请注意，每列宽度如何变化，列元素之间的偶尔重叠：

图像源码

分层

“分层”是一个花哨的术语，用于制作页面元素彼此重叠。当不同的元素交叉路径时，用户无意识地假设它们与具有深度的单个视觉项相关并处理它们。

在没有看起来凌乱的情况下，图层可能具有挑战性地实施 - 一些素描调整和实验将有助于生产有效地打破电网的凝聚力。

澳大利亚招聘公司大理石在他们的主页上实现简单但有效的分层 - 主要标题“所有关于人民”。坐在搜索表单前面，连续地引起这两个元素。

图像示例

容器

而不是将页面元素部分重叠，而是可以尝试放置相关文本，图标和/或纽扣完全在图像或块元素内。通过这种方法，块元素用于包含其子元素并将它们团结在一起。容器是分解网格的自然方式，同时保持内容组织。

在下面的示例中，某些容器括在一起多个元素，包括图像，文本，链接和纯色。虽然存在重叠和不对称，但很清楚哪个元素是相关的。

图像源码

空白

空白是一个隐藏的网页设计英雄。没有内容块之间的一些呼吸室，平均网页将令人困惑和压倒性。

在网格实验中，不要害怕在空格上调用拨号，并强调只有一两块内容。夸大的边缘绘制完全针对您的特色元素，是您标准网格布局的宽敞替代品。

下面的视觉投资组合网站展示了其非居中的图像，反对白色背景，随着滚动而进入帧的散射图像。这种最少的方法可以帮助用户专注于特色的艺术品，避免我们经常看到的疲劳行列呈现，经常在线图像显示。

图像源码

排水沟

网格系统倾向于通过向网格中的每列添加边缘来创建它们的排水沟。例如，在960网格系统中，每栏在任一侧具有10个像素的边距，其在相邻列之间创建20像素宽的换流器。

沟槽对于大多数基于网格的网站来说是必不可少的，用于添加空格和限制杂乱，但您可能会尝试与他们一起玩，以查看您可以创建的效果，甚至完全拨打它们。

从加拿大设计公司乘坐这个分拆网站搅拌机媒体- 它的瓷砖以明显的网格安排，但根本没有排水沟。毛毡纹理效果有助于创建类似的审美。如果您将这种方法采用损坏的网格，请始终选择对比背景颜色以建立清晰的边框。

图像源码

插图

与您的童年着色书可能教导的人不同，可以在线之外绘制 - 只需确保您的插图是故意和雅致的。横跨网格和/或重叠的边界的图纸可以为您的访客习惯的清洁剪裁，将一些欢迎的变化带来。

这种意大利海鲜品牌的说明是一种喜悦。它具有动画的海洋生活插图，即移动视差和跨栏边界。在我看来，它与冰冻的鱼网站一样有趣。

图像源码

脱离网格

正如我们所看到的那样，破碎的网格通常不会完全放弃电网概念。相反，它们通过微妙的调整提供了替代品种的格式。在想象您网站的未来布局时，请考虑这些方法中的每一种方法，并查看您或您的设计团队是否可以在CSS中实现实施。

另外，请记住，破碎的网格仍然坚持网络设计原则尽管他们的创造性自由。无论如何，您的网站应该简单，移动响应，可访问，可轻松导航，在审美选择中一致。你不需要放弃一个令人愉悦的用户体验，以脱颖而出。