分享网站建设知识
推动网站应用价值

提供短小精焊并有价值的建站知识分享。

网格系统的前世今生
2019-10-16 20:10:28

网格系统简介&发展历程

 

网格系统(又称栅格系统)是利用垂直与水平的参考线,将画面简化成有规律的格子,再依托这些格子作为参考以构建秩序性版面的一种设计手法。通过构建网格系统,我们可以有效地控制版面中的留白与比例关系,为元素提供对齐依据。

 

网格系统最早运用于平面设计,其风格工整简洁,在二战后大受欢迎,并逐渐成为出版物设计的主流风格之一。

后来网格系统也已经被运用到网页设计中,它以规则的网格阵列来指导和规范网页中的空间布局。网格系统的使用,可以让网页的信息呈现更加美观、易读、严谨和一致,同时也更具可用性。

现在网格系统再次被广泛运用到移动端UI设计中,尤以谷歌 Material Design 的 8 点网格备受推崇。

 


 

为什么要使用网格系统? 

 

很多时候你会发现同样是简单的页面排版,自己做得就是没有一些大厂的 App 看着舒服和美观,很有可能就是因为它们有一套基于网格系统的严格布局规范,而你仅仅是基于自己的感觉和一些版式基础去做排版。使用网格来规范你的设计意义不仅限于此:

1.保持设计的一致性,规范性。

2.更好的打造设计的信息层级,确保设计结构的组织分明、结构明晰,降低用户阅读门槛,更好地引导用户。

3.允许按比例设计,便于组织不同元素之间的平衡感和节奏感。

4.网格系统一般都很灵活,这样就可以在需要时自由调整。

5.规则少而明确,这让你设计起来更轻松,在网页和APP中对于开发者也会更友好。

 

 


 

如何用网格系统做版式设计?

 

网格的划分并没有固定规则,有些人习惯先将内容大致编排完之后再根据版面结构套用网格规范,也有些人习惯事先定好网格架构,并在已有架构下编排内容。下面我们就进一步了解网格系统的组成和分类,以及如何用使用网格来排版。

 

1.确定版心

版心是指天头、地脚和左右页边距所包裹的区域。设置版心会让版面更具条理性,同时也保证了内容的识别度。常见的版心有如下几种: 

 

等宽版心:四周天头、地脚、周右边距均等值,多产用于单幅平面版式。

对称版心和非对称版心:一般用于需要装订的页面板式,就不在此展开叙述。

当然也可以不拘泥于以上这些,而是根据自己的需要自由设定。

 

一般要根据项目的气质调性以及内容多少来确定版心留白大小,版心面积小给人雅致宁静的感觉,版心面积大,会给人热闹、丰富的印象。通常所有的元素都应该在版心内排版,但也不是绝对不能超出版心。在已有规则下,还是可以把部分重要性低的元素放置到版心之外,从而为画面带来动感和张力。

 

 

2.划分网格

划分好版心,接下来需要决定项目合适的网格类型。

 

a.网格的类型有很多,以栏的数目可以分为通栏网格、双栏网格、三栏网格、四栏网格…

通栏网格仅适用于小卡本的版面;一般版面越大,需要分栏数目越多,分栏越多,行文长度也越短、约易读。

如五栏网格就适用于较为轻松、休闲的内容;但如是需要仔细阅读的内容,则要适当减少分栏数量,保证阅读流畅。

 

b.比例网格是通过运用美学比例(如黄金分割)划分栏宽的;

重叠网格则是在统一版面中重叠使用两种或者两种以上网格形式(但他们的版心、栏间距大多是一致的)。

 

 

c.模块网格是现代设计中最常用到的一种网格形式,通过添加横栏来规范元素在版面中的高度和位置,让版面的变化性更强。

 

3.编排内容

网格结构规划好后,就可以编排版面内容了。版心内的各个要素只要与网格结构相互对齐布置,就会与页面和整体保持一个稳定的比例关系。

对于报纸、杂志、书籍等大量文字的设计,还要做到对齐基线(文字的顶端与网格顶端对齐,文字的底端与网格底段对齐)

而对于少量文字的版面,并不需要规范的过于细致。 但网格也不是排版中的万能药,版面中所有元素的位置大小都要有一个比例依据,具体的编排形式还是要靠审美来决定的。尤其要注意留白也是版面中的元素,不要把所有网格都填满。

 

 

4.添加点缀

内容编排好后,就可以把页码、栏题、优先级不是特别高的信息以点缀的形式依次编排到画面中,版面就编排完成了。

 

 


 

不要让网格系统限制了你的设计

 

网格系统是提供秩序性的工具,它为设计者提供了版面骨架,使得编排过程变得更加简单,为版面中元素添加了连贯性和精确度。但网格的规划并没有固定规则,还是需要根据实际内容决定的,要学会灵活应对,而不是限制你的设计。

 

如果感觉你的灵感被束缚在这些条条框框里面了,建议你从网格系统中跳出来,用自己的创意去设计,按照自己的经验来排布元素,然后再切出网格系统,稍做调整即可。如果网格系统和你的原创设计出入过大,不能有效协调,那么建议换一个网格试试,或者自己设计一个网格。是先做设计还是先建立网格,这就像先有鸡还是先有蛋的问题,本没有标准答案。

 

 


 

网格系统与 Web UI

 

现如今,网格已经几乎是所有网页设计的基础。相继出现的诸多 CSS 网格框架,几乎成了网页设计的标准。由于网页内容复杂,分类繁多,再加上诸多控件,网格的参考线一般也比较复杂和多样,它更像是版式设计中的重叠网格。这些隐形的线条帮你确定元素要怎么放置,帮你确保不同的控件在页面上堆叠而不会显得突兀不协调,有助于保持页面的组织性,创造出空间的节奏感和视觉的流畅感。

 

科普一下960px网格系(http://960.gs/), 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局。960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等。

 

 

但网格系统不意味着循规蹈矩,一味按照网格线来进行布局。网格系统一般都很灵活,这样就可以在需要时自由调整。就拿响应式设计来说,灵活性是其最大的特点。网页设计感兴趣的同学可以自行拓展阅读了解一下,再此就不展开讲述了。

 

 


 

网格系统与 App UI

 

人们常常是以很近的距离查看手机屏幕的,移动设备的屏幕分辨率越来越高以满足人们对高清画面的需求。 为了确保所有元素在用户设备上显得清晰明了,这就要求你创建的每个UI元素都应与像素网格对齐。除了对齐像素,还要遵循一些排版原则和格式塔原理将界面元素有序整合到手机屏幕中,让界面更具有节奏感,让信息层级更明晰。

一些平台的设计指南专门针对 4 或 8 点的网格进行调用,从而使该系统成为一个自然的契合点。尤其是谷歌的 Material Design 问世之后,8 点网格被越来越多得用在移动UI设计中。 

 

为什么是 8 点网格?

8 点网格规则是一个 以 8dp 为单位,利用 8 的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的一种通用的栅格规则。栅格系统的最小单位是 8dp,一切距离、尺寸都应该是 8dp 的整数倍。

 

为什么用 8 而不是 5 或 7 呢?

Android系统有 1.5 倍大小的设备,如果图片尺寸为奇数,则会出现半像素和虚边的问题。比如将一个 5px 的方格缩放到1.5倍,就会产生 0.5px 的边缘。用8这样的偶数就让缩放变得很简单,并且能够适用于大部分的情况。

 

为什么用 8 而不是 6 或 10 呢?

因为目前主流的屏幕尺寸大部分都是 8 的整数倍。即使某些屏幕边长像素不是 8 的倍数,在设计中仍然可以尽量做到自定义元素的长、宽、margin 以及 padding 都是 8 的整倍数来维持设计的一致性。

 

 

 

Material Design 中的 8 点网格

以下是一些常见的尺寸与距离:

另外注意 56dp 这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按 56 的整数倍来设计。

还有非常多规范,不详细列举,遵循 8dp 网格很容易找到适合的尺寸与距离。

 

△Airbnb 8-Point Grid

 

△Uber 8-Point Grid

 

 

8 点网格的价值所在

对于设计师:有限制的规则让设计更高效,减少不必要的争论,确保更高的统一性。

对于团队:简单的规则让设计师和工程师保持高度统一,减少不必要的沟通。工程师在这样的系统下就能够更快速的识别一个 8dp 的间隔,而不需要每次都进行测量。

对于用户:它们相信的品牌会给他们带来高度的一致性。和半个像素的模糊边缘说再见吧。

 

如何高效利用 8 点网格?

1. 建立网格并对齐网格

几乎所有设计软件都有「对齐到网格」的选项。如果你的设计绝对符合这套系统的话,设置好相应的网格选项并对齐绝对会给你很大的帮助。所以,你要先确保你打开了「对齐到网格」选项。

 

△Sketch中设置8px为基准的网格

 

 

2. 确定你自己的增量习惯

大多数设计软件都可以调整移动增量值,我喜欢把我的大增加值(按住command移动的增量)从默认的 10 调整到 8,这会方便很多。

 

△在sketch中调整键盘增量

 

3. 快捷键

很多应用程序都有快捷键,可以让你在设计时快速移动元素、调整大小。记住这些快捷键,配合网格使用可以大大提高你的效率。

 

 


 

写在最后

 

但学会了网格系统就不一定就可以排出优秀的设计作品,熟记了 Material Design 的各种参数也不一定就能做好 UI 设计。想要熟练掌握好网格系统的相关知识,达到灵活运用的程度,必须经过大量的优秀作品解构和专项知识训练,以及提升自己的审美能力和版面把控力。

分享该编文章:

免责声明:本站部分文章由本网用户编辑转载并发布,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容![声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。本站拥有对此声明的最终解释权。

相关资讯: