基于网格设计方法将改善版面设计的15个理由

2018-03-01 10:52:57来源:网络作者:人点击

分享

06.提高多页布局的内聚性

网格是多页布局的可取之处。通过为你的版面布局建立一个强大的网格,这个网格将从一个页面转移到另一个页面、使你在整体版面布局中更容易保持内聚性。

想想一个像滚石这样的网站,它有很多不同的页面,每个页面都有不同的结构和内容组成。如何使每一个页面都能以最好的方式展示,同时始终保持一个连贯一致的布局?

看看下面的图片,将滚石乐队的音乐页面与他们的首页进行比较。通过在网站设计中使用一个四栏的网格结构,每个页面看起来都很有凝聚力、干净和熟悉。

在多页布局中,网格的常见用途是手册设计,例如样本设计指南。由于这些是用于教育目的的手册,它们应该是线性设计的,所以这意味着使用一个网格系统!以下是博斯普鲁斯海峡风格指南,并注意到它在网格上的一致使用。

07.网格将增强你的视觉层次

基于网格设计的一个常见假设是,使用网格意味着将设计的每个元素划分成大小相等的块,几乎完全覆盖。

我们都知道层次结构对于设计的重要性(如果你不这样做的话,一定要按下面列出的理由来解释为什么每个设计都应该至少有三个层次的层次),而网格可以帮助你加快层次结构的进程,并使它变得更容易。

首先,让我们看看web设计。网站设计中使用了一个强大的四列网格,通过将更重要的图像横跨多个列或行来传达层次结构。请注意引导故事“万圣节天空包括死彗星飞越”跨越两列和两排,使其成为网站设计中最引人注目的部分。其他重要的故事也在多个栏目上展开,也引起了人们的关注。

通过使用网格为你的设计提供基础,你可以通过将其扩展到多个列来吸引对某些元素的关注。下面这个例子通过使用规模和网格对齐,将注意力吸引到23和30这样的点上。

08.告别混乱的版面布局

网格是摆脱可怕的、混乱的效果设计的一个奇妙的工具,特别这不是你想要的效果,通过使用边距来做到这一点。

按照非常基本的定义,边距是设计周围的空间。一般来说,你的边距越小,你的设计看起来更紧张和更杂乱,你的边距越大,你的设计就越干净整洁。

看看下面的图表,边缘用深灰色标记。

因此,通过使用网格,你通常也会使用边距,这将有助于保持你的设计更加开放和干净。

使用网格的另一种方式有助于避免混乱,是通过鼓励使用网格和列之间的空格。因为这些都是可调的,但应保持一致的大小,以保持网格的功能。

让我们来看看采用这两种网格功能的设计,以获得有效的结果。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台