15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 深度好文!如何用栅格系统布局网页界面

深度好文!如何用栅格系统布局网页界面

时间:2023-09-29 00:12:01 | 来源:网站运营

时间:2023-09-29 00:12:01 来源:网站运营

深度好文!如何用栅格系统布局网页界面:

网页栅格系统像谜一样的困扰着众多网页初级设计师,关于网页栅格系统是网页设计的一套标准的布局设计方法!

从维基百科查到栅格的定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。







目 录

什么是栅格系统

主流网站如何使用栅格系统

如何用栅格系统布局页面

影响网页设计的两大因素

GridGuide工具介绍







一、栅格系统

栅格系统 英文为 Grid Systems,也有翻译为 网格系统。

定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。




其实也没那么玄乎,我给网页栅格系统这样定义的:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。1692年法国为提高印刷水平,以方格为设计基础,将一个印刷版面分成上千个小格,这就是最早的栅格雏形。再后来,慢慢演变成运用固定的格子设计版面的平面设计风格。不过对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。








1.1 网页栅格

这里所说的包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。




1.2 为什么要使用栅格

通过栅格的使用,可以用逻辑解释商业设计的细节问题。

设计内容都应该有所依据,当其他人质疑时,可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性,让内容更具可读性;可以快速校准元素的位置,让画面更平衡;可以模块化地管理元素,让版面更有层次感。







1.3 栅格基础七要素

1.3.1最小单位

需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。

网页端 最小单位:10

移动端 最小单位:3、4、5










1.3.2 总宽度 / W

总宽度:对整体布局进行规范,且还可以保证设计尺寸的统一性。

界面设计要有具体尺寸,由于内容多少不确定,所以高度没有办法定死,但内容区的宽度是可以定的。







1.3.3 列数 / N

列数是界面总宽度设定好后,纵向等分成几列。




网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数)




移动端:6列(常用等分列数)










1.3.4 大列宽/ L

把界面总宽度等分成几列,每一列的宽度即为大列宽。

计算公式:L = W / N

大列宽包含:列宽和水槽










1.3.5 水槽 / G

相邻两个列宽之间的间隔是水槽。

水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。










1.3.6 列宽 / C

把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。













1.3.7 安全边距/ M

界面左右保证可读性和美观度的合适的空隙就是安全边距。

Sketch里设置水槽后,安全边距是水槽的0.5倍。

计算公式:M = G / 2







安全边距:

除了使用水槽的0.5倍,还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例:水槽是20,使用0.5倍,安全边距为10;水槽是20,使用2.0倍,安全边距为40。







各种公式汇总:

N 是自定义设置的列数
















综上所述,在Sketch里设置栅格,定义好3个数值即可,总宽度、列数、水槽,这三个内容定义好数值后,其他内容就会自动计算,一个栅格就生成了。







如果没Sketch,也可以在AI生成一个栅格!










栅格计算方式

已知:

宽度(W) 列宽(a) 列数(n) 间距宽度(i) 列数+间隙(A)








公示如下:

方式一

W=(a×n)+(n-1)* i







方式二

因为:列数+间隙为A

也可得(A×n)-i=W




AI操作方法

1.比如950PX为类,模拟浏览器背景1920,新建主要区域950px;










2.选中950矩形,进行对象—路径—分割为网格
















3.输入总宽,列宽就可以自动帮你计算了







通过AI也可以做个简单的栅格系统,可以尝试一下!










二、主流网站如何使用栅格系统




2.1 电商网站

看一下两个主流电商如何使用栅格布局页面,进一步加深对栅格系统使用的了解。







(左 淘宝 & 右 京东)




淘宝布局


下图包含:

第一张图为完整内容展示布局

第二张为浏览器缩小时内容展示布局




淘宝布局分为4列内容:1、2、3、4,第二张缩小后,内容3则被隐藏。










栅格布局:

第一张图完整内容展示布局:网页总宽度为1200,列数为24,水槽为10;

第二张图浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。




在第二张图栅格布局里,隐藏4列,内容2宽度变窄占10列,其他内容不变。










栅格布局设定后,可以很方便计算出每个模块内容的宽度










栅格的列数,根据具体内容设定。内容模块较多,建议等分列数多一些,容易布局;如果内容模块较少,等分列数也可以少一些,就像淘宝可以等分成24列,也可以等分成12列。













栅格布局设定为12列,每个模块内容的宽度和上面等分成24列的宽一样













京东布局

下图包含:

第一张图为完整内容展示布局

第二张图浏览器缩小时内容展示布局




京东布局和淘宝布局一样分为4列内容:1、2、3、4,在被缩小的情况下,内容3被隐藏。










栅格布局:

第一张完整内容展示布局:网页总宽度为1200,列数为24,水槽为10;

第二张浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。




在被缩小的图二的栅格布局里,隐藏4列,其他内容不变。
















京东栅格布局,每个模块内容的宽度如下图













再来强调一下:栅格的列数,根据具体内容设定。京东网页等分成24列,也可以等分成12列。













栅格布局设定为12列,每个模块内容的宽度和上面等分成24列的宽一样













三、如何用栅格系统布局页面

第一步:确定页面宽度,比如1920、1800、1600、1366、1280等等




第二步:分析内容等分的复杂度,如果内容简单只需要3、4等分,12列的栅格系统即可。如果有较多不等分的可能,还是建议采用24列的栅格系统,可灵活设置。




第三步:根据内容布局页面,确定模块之间是否有“间隔”,间隔尺寸是多少,6px、8px、10px、12px、20px选一个方便计算、方便记忆和整除的数值即可。就像过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12,15,是不是突然发现设计其实是一道数学题。







3.1 网页举例

根据具体内容,使用方格布局整个页面。

Sketch栅格设置,这里的总宽度1190是内容设计的实际宽度,设计页面宽度是1920,因为有些内容展示选用居中布局方式,两边留白。



















四、影响网页设计的两大因素




分辨率和浏览器








4.1 什么是分辨率?

比如1920*1080px,整个屏幕可以看成是由很多小方格子组成,一个像素就是一个小格子,横向有1920个小格子,竖向有1080个小格子。




电脑屏幕是14寸还是15寸的,尺寸不变,电脑分辨率是可变的,在同一个屏幕上,分辨率越大画面就越精细,反之就越模糊。当下比较流行的屏幕分辨率:1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。




注意:

关于分辨率,可以选用适合自己团队的分辨率尺寸,我们团队是梳理出所有产品的分辨率的使用情况,及团队产品设计的特点,选取2-3个作为后续统一使用的尺寸。







4.2 浏览器

设计网页时要考虑好浏览器,主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。

因为不同浏览器工具栏高度不同,如果设计内容需要在小屏幕上展示,就要考虑到打开浏览器默认页面及全屏页面的高度展示情况,如果浏览器所占高度较多,那么内容展示区域就被压缩了,所以就要考虑将最重要的内容尽量放在上面。

下面来看看最近一年浏览器市场份额占比情况。










五、GridGuide工具介绍

网址:http://grid.guide/




5.1 GridGuide介绍

首先来认识下「GridGuide」她是帮你在设计里创建完美栅格的一个工具。(用她而不是它,是因为GG如果是个人,应该是个聪慧伶俐的大美人吧~)




使用方式:输入3个数值,自动生成所有可使用的栅格最佳组合方案。打开网页,她长这样













网页包含4大版块内容







关闭与栅格操作无关的信息,如下图点击「Dismis this message」可隐藏产品介绍内容







关掉产品介绍后,显示如下图










5.2 如何设置栅格

之前我们也有介绍过,栅格系统设置只需要设置3个数值即可,是「总宽度、列数、水槽」而「GridGuide」工具,设置的是「总宽度、列数、水槽的几倍(也就是左右两侧安全边距)」,如下图










输入「总宽度、列数、水槽的几倍」3个数值后,自动生成所有可使用的栅格最佳组合方案,如下图







自动生成的栅格,会计算出每个方案「列宽、水槽」的数值







上图设置的内容,「水槽的几倍」为0,以第一个方案为例,水槽为12,12*0=0,所以安全边距为0,如果「水槽的几倍」设置为1.0就会生成下面这些方案










「水槽的几倍」设置为1.5又会生成下面这些方案







「水槽的几倍」可以选择设置为0、0.5、1.0、1.5、2.0等倍数。

刚才设置「水槽的几倍」为1.5不变的情况下,再设置下「总宽度、列数」这些数值,看看又会变化出哪些神奇的方案呐,如下图













5.3 如何用栅格布局页面

首先评估下内容,选取一种最适合自己内容的栅格方案,下载后放在设计软件里设置出栅格系统就可以了,如果没有可以自动生成的功能,也可以自己绘制。







其实栅格系统了解后是不是感觉也挺简单的,最重要的一点,这里再啰嗦一句:

「栅格是辅助页面布局的,所以需要根据实际内容灵活的使用栅格,而不要被栅格所束缚了,注意灵活运用,!




相关文章

我要进群

2019UI设计面试资源大礼包(第三期)

UI设计进阶干货 - 应用图标

UI设计进阶干货 - 动效

UI设计进阶干货-闪屏

UI设计进阶干货-引导页

UI设计进阶干货-注册登录

UI设计进阶干货 - 首页

UI设计进阶干货 - Banner

UI设计进阶干货-列表页

UI设计进阶干货 - 适配&标注

UI设计进阶干货 - 切图&命名

UI设计进阶干货-重阳节闪屏赏析

关键词回复:



关键词:布局,系统,界面,深度

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭