网格系统总结:从初识到应用

网格系统总结:从初识到应用

目录:

1.什么是网格

2.为什么要使用网格

3.网格系统中都包括什么

4.如何制作网格系统

5.如何使用网格系统

6.总结

“网格”简单来说就是一些横竖相互垂直的线,将页面分为各种“列”或“模块”。这种系统开始是书面书籍的辅助线,在打印版式中备受青睐。它可以把页面分成许多区域,将文字或图片变成“设计元素”填入其中。避免让设计师在大空白页上抓瞎。

就好比画素描面部时候的“三庭五眼”。也是需要提前画出比例辅助线,再在其中画出细节。鉴于平面设计和界面设计当中有很多的共同点,通过后续演化,这种技术已完美的移植到了互联网线上产品当中。网格系统也已成为界面设计当中不可或缺的辅助技术之一。

①梳理页面

网格是一种可以梳理结构的利器。它可以让显示的信息更加规整且平衡。用户希望可以快速的梳理出页面当中的信息。如果页面过于杂乱,影响了用户的认知速度,后果就是会直接关闭页面离开。

②响应式设计

现在人们会用多种不同设备去查看页面内容。如果不按照一些标准或框架去约束设计,当网页被缩小放大时,其中的内容就会变得异常混乱。对于用户来说,在阅读体验上是灾难性的。同样也会给开发人员带来很大的麻烦。

dribbble


如果将网格当做标尺,对页面进行很好的切分布局,那么在这种“一致性”的标准下,可以大大减少开发的成本。这种“一致性”,也让整套页面看下来更有节奏,因为用户的眼睛一直在被无形的框架引导着。无论页面的大小如何变,框架依然会让页面保持整齐。

③效率性设计

一整套页面都用同样的框架来设计,可以让我们不再为调整细节而消耗时间。可以很好地做到重复性使用,大大提高设计效率。在对接项目的时候,对接人也可以按照标准快速上手。后期修改或改版时,也有规律可循。

④专业性体现

当甲方因不满意而让我们修改页面的时候,有一部分原因是我们没有很好地表达出自己的想法,没有让甲方充分理解我们的思考过程。当页面附带上网格且添加了说明,这种严谨专业的形式势必会减少沟通成本,让对方更加了解我们的设计思路,有理有据体现专业性。

既然是系统,那就不可能是简单的几根辅助线这么简单了。网格系统中,主要包括的元素有“宽度”、“列”、“水槽”以及“边距”。

①宽度

内容区域宽度,是我们的主要设计区域。但也有一些特殊的设计,比如悬浮的装饰、内容的延展等等,是可以合理超出内容区域宽度的。不过,核心内容需要在宽度内显示。

别对映像研出手官网


有一种网格被称作“网格之王”,也被叫做“960网格”,它的内容区域宽度是960像素。原理是现代显示器至少支持1024×768像素分辨率,而960可整除2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320和480等数字。这使其成为一个高度灵活的数字,且有更高的延展性。因此,被称作“网格之王”并不为过。

https://960.gs/  有很多关于“960网格”的内容


现在,显示器的屏幕尺寸越来越大,“960px”的经典尺寸在某些领域网站的页面中显得有些力不从心。比如视频类网站、电商网站、工作室网站等等。这些网站很多都强调视觉冲击力或者是信息量巨大。因此,个人认为网站的宽度还是要“具体内容具体分析”。需结合所属领域或展示内容,以及公司规范来制定具体内容区域宽度。

awwwards.com


国内的设计类网站宽度一般在1200-1400px;视频类网站在1600-1800px不等;电商类网站在1200px左右,可供参考。


②列

最常使用的列数是12列、16列等,每列宽为60-80像素。但列数和列宽的数值并不是绝对固定,和设备以及展示内容有很大关系。比如在PC端上是16列,到了平板上就会变成8列,手机端又变成6列或4列。像一些个人网站、图库网站并没有那么多的内容,可能仅需4列就足够了。而后台页面因为展示内容非常多,信息量大。因此,可能会需要更多的列数。

③水槽

水槽是列与列之间的间隔,最小间距不小于8像素。常用的间距有8px、10px、20px等等,数字并不固定,和列一样需要匹配具体内容。列+水槽的组合,也可被称为“栅格”。


④边距

边距是内容区域之外的内容。我们左右拉伸一个页面,内容区域与两边边界始终有一段留白区域,保护着内容不与显示器边界挤在一起。这个边距一般是不能放任何内容的(特定的装饰元素除外)。类似于印刷品中的“出血”。数值并不需要太多,一般在10-20px左右。而移动端的左右边距尺寸在20px-40px不等。

①公式

假设内容区域宽度为W,列宽为a,列数为n,水槽/外边距宽为i

那么可得W=(a*n)+(i*n)-i  

因为a+i=A

所以W=(A*n)-i  

例:

当我们使用12列网格设计,每一列网格宽为80px,水槽宽为20px;套入公式可得W=(80+20)*12-20=1180   内容区域的宽度为1180像素。得到了公式,我们只要填入相对应数值,就可以得出其他的数值。

另一种情况:

我们可以设定内容区域为整数值,外边距为20px;在前端开发时,可以使用css中的Margin属性挤出外边距。这样可以保证宽度的整数值尺寸。

像素范官网


②工具

a.PS参考线设置

新建画布——视图——新建参考线版面——调整数值

b.Sketch参考线设置

新建画布——view(视图)——Layout settings(布局设置)——调整以数值

c.网站Grid.Guide

右上角调整宽度、列数、外边距即可。


③注意事项

a.如果不确定宽度、列数等参数,我们可以先画草图,并通过观察测量相关主流产品寻找灵感。

b.时刻考虑自适应的问题,要考虑页面在不同宽度以及移动端时候的状态。网格系统要时刻保持并使用。

c.不能为了网格而网格。我个人也接触过一些页面的源文件,发现里面的网格虽然规范,但与实际内容并不匹配。所以,网格是手段,而不是目的。


①8点网格

建议我们的设计元素都要是8的倍数。因为,大多数流行的屏幕尺寸都可以被8整除。“8”这个数字在开发人员那里更容易理解,且更有说服力。同时,用8作为设计的最小单位是可以除尽的。8/2=4、4/2=2、2/2=1;而其他数字比如6或者10,只能除一次。再缩小就会出现半像素的情况。iOS的@1x,@2x,@3x图,用 8 为基数可减少出现是奇数造成一像素偏移模糊的情况。


②网格类型

a.流动网格

当窗口缩放时,内容等比例缩小。到达临界值时,内容排版会改变。

b.固定网格

固定网格,列宽和水槽宽不会改变。当窗口缩放到达临界值时,内容条目的排版会发生改变。

c.混合网格

混合网格,页面缩放时,内容并不是等比例缩放。在不同的页面宽度,会有不同的缩放比。


③模块布局

通过网格的制作,给我们的页面提供了约束后的空间。我们可以在这样规整后的空间中,进行各种模块化的分布设计。


④设计边界

核心设计内容要在网格系统内。同时,设计内容的边界与网格的边界是一致的。如果设计边界不与网格边界对齐,就会出现多余的留白。

内部的水槽不推荐放设计元素。水槽不仅仅是网格的间隔,同时也是设计元素的间隔。


⑤保持创意

网格系统虽然可以让我们的设计更便捷、更有效率、更有一致性,但这也带来了同质化的问题。如今同属性的网站或APP,比如电商类、视频类页面的排版都很相似。虽然,确保了整体的规范以及专业性,但是页面变得不再那么新颖。这不仅需要我们在视觉上更加吸引眼球,在排版布局上也要下功夫。必须在两者之间找到平衡。


1.什么是网格:一种帮助设计师梳理页面并提供合理约束的手段。

2.为什么用网格:效率、规范化、延续性、专业性。

3.网格系统中都包括什么:内容宽度、列、水槽、外边距。

4.如何制作网格系统:ps新建参考线版面、sketch--view(视图)--Layout settings(布局设置) 、网站Grid.Guide

5.如何使用网格:设计元素均用8的倍数、模块化设计、外边界与内间隔、保持创意。

网格系统是帮助我们更好完成设计的方法,而不是制约我们的工具。规范化、专业性都十分重要,但对于设计来说我们的创意更不能丢失。网格系统帮助我们更有效率的进行设计,给我们节省了调整细节以及复用等问题的时间,这样就可以让我们更好的在排版上下功夫。

参考文章

1.http://printingcode.runemadsen.com/lecture-grid/

2.https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

3.https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

4.https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

5.https://www.carbondesignsystem.com/guidelines/2x-grid/basics/

推荐阅读更多精彩内容