网格设计的5种类型,快速提升工作效率!(三)


三、网格的五种类型

1. 基线网格

基线网格由文本所在的位置定义。它有助于为读者创造良好的阅读体验,尤其是在有大量文本的地方。

在网页设计中考虑基线网格至关重要,考虑一下行间距如何影响页面的可读性。如果间距太紧,用户很可能会放弃阅读并离

开网站。

 

2. 手稿型网格

手稿型网格也称为单列网格,是最简单的网格结构之一,适用于大型连续文本和图像。本质上它是大型矩形框,内容占据大

多数空间。

 

3. 多列网格

多列网格有助于分解文本、照片和插图,使用的列数越多,网格的排布就越灵活。

每列之间的空间称为栏间距,它们的大小应保持一致。

并非所有的多列网格都必须对称。在很多博客网站中就运用了非对称的网格形式,主要内容占据页面三分之二的区域,其余

三分之一可能是包含作者的信息的侧边栏。

 

4. 模块化网格

模块化网格与多列网格相似,不同之处在于行数增多。模块化网格多用于比较复杂的布局中,为页面提供灵活的内容格式

例如Everlane网站就使用模块化网格来组织商品的选择。

YouTube主页是另一个使用模块化网格的示例。除了左侧的边栏提供常用链接外,所有视频内容都被组织到一个4列的模块

化网格中,以最大限度地增加用户在滚动时可以浏览的视频数量。

 

5. 分层网格

分层网格在网页设计中最常见。这些网格的目的是按重要性排列元素。

首先将最重要的对象放在页面上,然后灵活地围绕它们使用列、行和模块来帮助组织内容。

新闻和媒体相关类网站倾向于使用这种类型的网格来吸引用户对某些文章的关注。例如上图纽约时报的主页就使用了分层网

格结构。

>