设计元素似乎无处不在,它们以许多不同的方式出现并做出各种反应——上下移动,左右移动,甚至以对角线移动。现在还有人使用网格吗?
所有这些设计方案都让我们重新思考网格及其在现代网站设计中的应用。网格真的“死”了吗?但是为什么这么多项目看起来像从网格中设计出来的?过去几年有什么根本性的变化吗?
这是一个相当复杂的话题(也没有一个非常明确的答案)。
网格在网站设计中的历史(History of Grids in Website Design)
网格是一个古老的概念,可以追溯到图形设计中。使用垂直和水平对齐来促进组织,对于确保可读性和设计层次非常重要。
当我们开始制作网站时,在印刷设计中经常使用的网格系统被应用到互联网上,你会在大多数图形和视觉布局中发现一些关键类型的网格:
· 列网格:将页面进行对齐的垂直划分。在网站设计中最常见的网格是12列网格。12列网格很受欢迎,因为它可以以多种方式进行细分以获得最大的灵活性,分为12、6、4、3、2或1列部分,这些部分都是均匀间隔的。
· 模块化网格:垂直和水平列的组合,构成元素的模块。它们通常用于对网页上的卡片元素进行排序。
· 砖块网格:类似于模块化网格,但扩展到允许不同形状或大小的元素,例如两列或两行大小的卡片仍然适合网格。
· 基线网格:将文本列对齐的水平线,就像你在带有线的纸上写字一样。
· 手稿/阅读网格:决定文本位置的一列。这个网格的左右边距通常相等,但并不总是如此。可以把它想象成博客上的一个文本栏,只是去掉了侧边栏。
· 像素网格:微小的正方形网格,每个网格为一个像素,这在图标设计中很常用。
· 分层网格:不规则的网格,创建元素的层次结构,但可能只有设计师知道。这种类型的网格可能是我们正在寻找的标准答案。
网格已经消亡了吗?(Are Grids Dead?)
我们相信网格并没有消亡。并且,我们传统的完美数学概念可能是对网络有“增效”作用。
响应性以及如此多的网页设计和纵横比使得网格必须根据设备大小、视窗和其中的内容来收缩、折叠和扩展,这太复杂了。
即使在视觉上没有明显的网格的地方,也可能有。你可以这样想:
· 开发人员必须开发一个网格来确定设计如何以及在哪里从桌面转向移动设备,反之亦然。
· 网格系统看起来几乎无法辨认,但其功能和目的一直在发挥作用。
· 设计师在进行网页设计时经常使用网格系统,只是你看起来可能并不存在。
诚然,有些类型的网格在网站设计中使用得很少。例如,基线网格只对多列文本元素很重要,而多列文本元素正变得越来越不常见。像素网格对于网页设计师来说太小了。
模块化和砖块网格则几乎无处不在(特别是如果你有一个带有博客、图片库或任何类型的分组设计元素的网站)。
最后,分层网格已经成为网站设计的主要元素。有时候你需要看整个页面,而不是一次只看一个视觉区域。Visme博客是这样描述它的:“层次网格设计的目的是按照重要性来组织元素。它仍然被称为网格,因为模块仍然设置在网格内。分层网格可以自由设置,也可以以模块化网格为指导”。
为什么如此多的网站看起来没有网格?(Why Do So Many Websites Appear to Not Have Grids?)
你可能认为网格已经消亡的原因是你已经越来越少在网站设计中看到他们。但在大多数情况下,网站设计使用网格——即使它是灵活的——以一种重复的方式用于整个网站。
通常情况下,这可能包括一个看起来只有一列的Banner,接着是一个有两列的屏幕,然后是一个有三列的屏幕,然后是另一个只有一列的区域。当你想到它们时,所有这些组合可能会令人眼花缭乱,但它们都是同一个网格的一部分——通常是12列!
从层次的角度来看,设计师正在创建内容的块、行和列,这些内容在所有屏幕尺寸上都是按重要性顺序排列的。多列元素在小屏幕上分解成单列,这都是网格的一部分。
你通常可以用网格来区分一个网站,因为你或多或少能感觉到它们。即使没有视觉或可感知的网格,物品也具有一定的层次结构和排列方式。
还有一点:即使你尝试着在没有网格的情况下进行设计,也有一些网格是天生存在的,不管你喜不喜欢(比如三分法,甚至是12列)。我们的眼睛经过训练,可以发现这些分组和相似之处,从而创建视觉组织。
这一切意味着什么?即使你没有计划或看到它,网格的一些感知总是存在的。基于几个世纪的设计理论,与它一起工作可以创造视觉和谐。
总结
UX Planet对网格系统的看法是这样的(我们完全同意):
“……创造性约束是非常有价值的。约束不是限制我们的创造力,而是给我们一个起点,让我们可以自由地去探索可能的解决方案。创造性约束的价值就是为什么最好的设计师总是坚持从定义项目需求的强有力的设计概要开始工作。......网格系统为布局和视觉组织提供了约束,这同时减少了设计师可用的选择项,但也开辟了大量受约束的可能性。即使是一个简单的模块化网格也可以容纳数千个布局选项”。
综上,你应该已经知道答案了——网格无疑没有消失。
----图文来自:design shack