如何使用响应式网格

本篇文章将介绍PC端和移动端的Web响应网格设计,在深入探讨问题之前,让我们先了解一下有关响应式网格的术语。

如何使用响应式网格

字段元素(field element)是您的设计模块,无论是文本,图像还是两者的组合。除非背景颜色是文本/图像的容器,否则背景颜色不会真正算作字段元素。

如何使用响应式网格

列(columns)是构成设计内容宽度的较粗的彩色块。字段元素应位于一定数量的列上。传统上,在设计系统中,列宽不变,但列数从台式机上的12更改为平板电脑上的8,移动设备上为4。您可以使用任何字面值,但是大多数网格的列宽为60–80px。选择最适合您的列宽是最重要的,因为它是内容宽度的主要决定因素。

如何使用响应式网格

边距(gutters)也称为外部装订线,是内容宽度之外的空白空间。边距随着设备宽度的增加而增加, 移动设备上的边距通常为20–30像素,而平板电脑和台式机之间的差异很大。无论选择什么作为边距,都将是收缩浏览器时允许的最小空白空间。从这一点开始扩展浏览器时,在下一个断点之前将有更多的空白。

响应式网格的基本准则

1.字段元素必须位于一定数量的列上

您可以按照自己的喜好将其拆分成6和6、3、4、4、3等。示例是一个配置文件卡,它位于不同数量的列上。

如何使用响应式网格

如何使用响应式网格

有时候,如果您实际上将它们完美地放在网格上,它们会看起来会太宽。请参见下面的经典“操作方法”模式:

如何使用响应式网格

如何使用响应式网格

如果我们将它们放在网格上,则文本会延伸得太长。

如何使用响应式网格

如何使用响应式网格

2.不要将字段元素留在边距范围内

您的元素应位于列内,而不要侵犯到边距范围。

如何使用响应式网格

3.可以将元素嵌套在不与网格对齐的字段中,只要父字段本身位于列上即可

现在有些时候,您想用图像和文本将设计或卡片准确地分割成一半,在这种情况下,您会遇到这种尴尬的情况,即图像不落在列上,文本被强制容纳在其中。不用担心,只要整体模块位于列中即可。

如何使用响应式网格

如何使用响应式网格

4.留出边距

您所有重要的内容都应适合内容宽度。因为如果您不习惯使用网格,您会感觉到网格就是画板,并且需要在设计中添加填充。这就是侧边距的确切用途,它们是设计的额外填充。根据其编码方式,网格内的内容将开始按比例缩放,并且边距将固定不变,或者边距将与内容同时缩放。

如何使用响应式网格

如何使用响应式网格

因此,如果有人说“我需要一个1200px宽的设计”,那并不意味着您的设计实际上就是1200px宽。这意味着您的内容宽度位于960px的画板中,大约为960px,因此您仍有空间留出边距。

5.完整的出血元素(bleed elements)或纹理图形应从画板的一端到另一端

这是规则4的例外-当您的背景颜色或图像已完全出血时。在这种情况下,您可能希望在模型中将其拉出网格。

如何使用响应式网格

如何使用响应式网格

如果您有图像装饰需要渗出页面,并且可以将其进行剪切,这时候也可以脱离网格。

如何使用响应式网格

如何使用响应式网格

页眉和页脚有时也可以有自己的例外,它们不被视为内容的一部分。有些设计将它们固定在浏览器的边缘,有些则希望将其固定在内容宽度内。这完全取决于具体情况。

响应式网格是如何工作的

如何使用响应式网格

如何使用响应式网格

在传统的设计网格中,列宽和装订线保持不变,只是列数发生变化。如果一组三张卡片分别放在台式机的4列中,那么在平板电脑上,您将显示两张卡片,然后包裹第三张卡片,以便在第二行显示。您无需进行任何大小调整,因为您已经知道它位于四列中。在移动设备上,答案也很容易,您只需要出示一张卡,其余卡堆在卡下即可。如果需要,您也可以发挥创意,并选择仅在移动设备上显示一张卡片,或进行水平滚动。这些断点是代码中的参考点。

实际上,网络必须针对任何浏览器宽度进行渲染。举例来说,假设您有一台大型显示器,可以看到1600像素宽的内容,台式机设计为1200像素宽,平板电脑为768像素宽,而移动设备为360像素宽。因此,现在您所看到的是一种设计,其内容宽度略小于1200像素,并且有很大的余量,因为您使用的是大型显示器。但是,当您的浏览器缩小1像素(1199像素)时会发生什么情况?

固定网格(fixed grid)

如何使用响应式网格

如果您的开发人员编写了固定的网格,那么当您从台式机扩展到平板电脑时,您将到达下一个断点(breakpoint),并且大量的边距会缩小,直到下一个断点。文字不会自动换行,图片不会动态更改。如果您的开发人员在确定所有尺寸时都不太谨慎,则可能会错过断点,并且您的设计可能会被切断。但是等到达到768px的断点后,设计就会迅速安装到位,并且平板电脑看起来也不错。如果缩小到最小,则将发生相同的情况,直到达到另一个断点为止,您的设计将保持不变。

流体网格(fluid grid)

如何使用响应式网格

随着窗口的缩小,事物将动态变化,文字会自动换行,元素会越来越狭窄。但是,在您到达设计的下一个断点之前,这些元素仍然不会更改布局。

混合网格(hybrid grids)

在体验中结合使用流体网格和固定网格也是一种常见的做法。由于设备尺寸多种多样,当移动尺寸减小时,网页通常很不稳定。

总结

本文提供了有关如何在响应式设计中使用网格的一些指导。了解网格的工作原理可以帮助我们成为更好的设计师:确保设计合理,像素完美,将会为我们带来更一致性和简洁的设计,特别是在实际项目运用中,它能帮助提高最终产品的质量。

本文由 新媒体之家 作者: 美国交互设计资讯 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
0

发表评论