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

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

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

目录

什么是栅格系统

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

如何用栅格系统布局页面

影响网页设计的两大因素

GridGuide工具介绍

一、栅格系统

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

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

其实也没那么玄乎,我给网页栅格系统这样定义的:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。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列。

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

第一步:确定页面宽度,比如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工具介绍

5.1GridGuide介绍

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

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

网页包含4大版块内容

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

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

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如何用栅格布局页面

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

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

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

THE END
1.常用的网页制作软件有哪些网站制作工具大全→MAIGOO知识网站模型设计工具 常用的网页制作软件有哪些 1、Dreamweaver 就目前来说,使用最多的静态网站的制作工具有dream weaver,软件直接搜索就可以找到并下载了。 经过重新设计的ui dream weaver更加的好用。 它默认支持代码模式和设计模式,也可以两种模式同时打开,方便即时的查看网页效果。 https://www.maigoo.com/goomai/189945.html
2.8款热门网页制作工具,轻松打造专业网站!快速搭建网站工具如今,随着技术的发展,越来越多的智能网页设计工具涌现,使得即使没有编码基础的人也能轻松创建和设计网站。在本文中,我们将为您介绍2025年最受欢迎的网页设计工具。选对合适的网页制作工具,将大大简化您的设计过程,让您的创作之路更加顺畅! 免费网页设计工具https://blog.csdn.net/2408_89491999/article/details/144286318
3.8款常用的网页制作工具,别找了,都在这儿!过去,由专业人员使用HTML、CSS和Javascript等代码来手动编写和构建网站,现在有越来越多更智能的网页制作工具予以协助,让任何人都可以实现零代码基础也能随心所欲地建立和设计网站。本文,我们会向你介绍2022年热门的网页制作工具。相信制作网页工具一旦选对,你的设计之路将更轻松! https://pixso.cn/designskills/wangyezhizuogj/
4.掌握常用网页制作工具,打造专业网站除了上述工具外,Photoshop等图像处理工具在网页设计中也发挥着举足轻重的作用。精心设计的图片和图形不仅能够吸引访客的目光,还能够提升网站整体的视觉效果。结合中企动力专业的设计团队,我们可以将这些视觉元素无缝整合进网站中,打造出独特的品牌形象。 在掌握了这些常用的网页制作工具后,再配合中企动力的专业服务,无疑可https://www.300.cn/xxzx/25807.html
5.7个在线设计的网页界面设计工具大推荐!今天来啦!好的网页界面设计工具能够帮助设计师翻倍提升生产力,轻松把想法变为现实,让设计工作更加得心应手。今天一共分享7个在线设计网页界面设计工具,它们分别是:即时设计、Sketch、Webydo、Webflow、InVision studio、Justinmind 、Marvel ,一起来看看吧! 点击图片使用同款在线设计网页界面模板https://js.design/special/article/online-design-of-web-interface.html
6.7000字超多神器!腾讯设计师也在用的高效设计工具优设网近年来界面设计工具不断推陈出新,一些新兴的实用界面设计工具渐渐走进设计师们的视野,逐步改变着设计师的工作模式。作为互联网设计师,效率至上的工作原则敦促我们不断尝试新工具,建立新的工作模式。本文将回顾界面设计工具的发展历程,并着眼界面设计工具的发展趋势,为大家推荐一些新兴、高效的界面设计工具,涉及UI、动效设https://www.uisdc.com/design-tools
7.打造梦幻设计?看这25款优质渐变色网页就够了Webflow是一个简洁的在线网页设计工具,无需代码,只需要简单拖拽,设计师或者产品经理即可快速实现设计。 本身作为一个设计工具,它的网站设计还是非常具有特色的。渐变色在Webflow网页设计中并非主要角色,而是作为点缀用在不同的功能板块。浅色系的渐变柔和而不张扬,在各功能板块中既是背景,又是配色,和网站整体的极简设计https://maimai.cn/article/detail?fid=1401878475&efid=9P6ASU9u3rVejoDSzQNuVg
8.网页制作教学设计1、生评:从网页设计上,美观程度上,知识落实上重点评价。 2、师评:对学生作品进行评价,并对其它学生的评价加以更完整的解释。 四、总结 我们这节课主要是利用了表格来设计网页,以使来美化我们的网页,通过绘画作品的展示,学习更多的知识。 网页制作教学设计2 https://www.ruiwen.com/jiaoxuesheji/6417066.html
9.支持网页快速排版CSS代码一键生成的在线设计工具用户体验现在作为很多工作的重中之重,设计师们更要把用户体验放在第一位,如果你曾经尝试过想把你的板面调整到最适合阅读的状态,就会知道多么令人抓狂。但是懒人总是会创造出新科技,国外开发者为我们带来了今天要讲的协助设计网页排版及字型等相关属性的便利工具。 https://cloud.tencent.com/developer/article/2082799
10.在线PSPS软件网页版,ps在线图片处理工具photopea稿定设计PS是一款专业精简的在线ps图片处理软件,免下载、免安装,直接在浏览器打开网页版就可随时随地用它修正,调整和美化您的图片。https://ps.gaoding.com/
11.5款小白也能操作的免费电商工具,让你的网页设计脱颖而出一个好的网页可以吸引消费者,让消费者记住公司和品牌文化,使公司在竞争中脱颖而出。制作网页是一个相对麻烦的事情,您可以选择专业的设计师设计网页,但是设计费用往往比较高,并且与设计师的沟通过程会浪费很多时间。本文就为大家介绍5款免费的电商工具,操作简单,可以让你在短时间内设计出一个优质的网站。 https://www.cifnews.com/article/34864
12.2011年7月全国自主考试(网页设计与制作)真题自考2011年7月全国自主考试(网页设计与制作)真题及答案,历年真题 一、单项选择题 (本大题共25小题,每小题1分,共25分) 在每小题列出的四个备选项中只有一个选项是符合题目要求的,请将其代码填写在题后的括号内。错选、多选或未选均无分。 1.下列属于“编程型”网页制作工具的是( ) https://www.educity.cn/zikao/28156.html
13.分享13款优秀的网页线框图设计和制作工具心得技巧网页制作当你开始做一个项目的时候,用线框图把你的想法勾勒出来非常重要。这是你把想法变成际成果的必要步骤,通过绘制线框图原型才能决定怎么样做更合理。今天这篇文章收集了13款超级有用的优秀网页线框图工具分享给大家,这些工具能够帮助你做出优秀的线框图。 https://www.jb51.net/web/69919.html
14.常用的网页制作工具Flash Flash是一种交互式动画设计工具,用它可以将音乐,声效,动画以及富有新意的界面融合在一起,以https://www.hxsd.com/wenda/65119/
15.高效快捷的专业网页原型设计工具墨刀新一代原型设计工具,支持一屏内完成网站页面原型设计、需求文档编写及团队成员协作,支持便捷绘制、拖拽交互、真实预览体验,提供海量素材及高效协作功能,轻松上手,不止于快。https://modao.cc/feature/webpage.html
16.html5可视化开发工具html5可视化html5可视化设计工具HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具。目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时。HTML5前景好,来学HTML5技术的人也是与日俱增。但零基础的人要学习HTML5技术的时候,往往不知道HTML5开发要用到什么样的开发工具?这些问题都是零基https://www.fanruan.com/bw/html5-2
17.PhotoShopCS2的亮点和功能详细介绍Adobe PhotoShop CS2是Adobe出品的一款功能齐全、应用广泛的图象处理专用工具,能够用以广告设计、产品摄影、ps修图、网页设计、后期修饰等领域。Photoshop 是由Adobe出品,英语全名是Adobe Systems Inc,创立于1982 年,是广告宣传、包装印刷、出版发行和Web行业首屈一指的图形创意、出版发行和显像软件开发企业,另外也是全世界https://www.yutu.cn/news_33611.html
18.101种最热门的EdTech工具Buncee 被用作课堂演示工具,用于回顾和介绍符合课程标准的内容。此外,Buncee还能记录学生的学习模式和“踪迹”,包括选修的书籍报告、研究项目、数字故事、基于项目的学习、感兴趣的项目和创造的时刻。有了Buncee易于使用的创作画布,学习只需要一个拖拽动作,整个过程变得简单有趣。https://36kr.com/p/829435155242882.html
19.网站设计软件下载网站美化软件网页设计软件网站设计软件里面有很多专业性的软件,有免费版可以进行下载,工具众多功能强大,可以快速设计出需要的网站,制作出有出色使用体验的界面,内部有众多模板可以进行参考,更加方便用户操作,设计更加简单,快来试试吧!http://www.downyi.com/key/wangzhanshejiruanjian/
20.设计神器NoisePainter!简便易用的在线模拟油画效果生成器Noise Painter是由作者@亚赛大人制作的一款数据可视化网页工具,可以模拟油画笔刷,将上传的图片以油画的方式重新描绘。 网页特点 如此效果惊艳的应用有哪些亮点功能呢~跟着小编一起来探索! 效果随意控制 网页将绘制图形的过程演变为一笔笔的绘制过程,使用者可以在任何一个步骤点击保存,绘制过程有趣治愈同时也让使用更加方便https://uiiiuiii.com/software/332310.html
21.搜索引擎优化指南教程自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,因此,站长在建站前,就要考虑好页面布局如何能适应多屏幕浏览,这样移动设备可以通过原网址来浏览桌面站点,看到的是自动适应屏幕大小后的网站。尽管这种方式使得域名统一了,但如果对于结构复杂https://www.williamlong.info/archives/4431.html
22.美图秀秀免费在线P图抠图拼图美图秀秀网页版在线图片照片编辑制作美化修改处理工具提供在线拼图,在线改图修图,在线P图,在线美颜,在线ps照片,另外还提供图片美化、人像美容、添加文字、批量处理图片大小、证件照换底色、图片压缩等好用的功能,还有海报设计、平面设计、广告设计、贴纸素材、边框等丰富https://pc.meitu.com/