|
网页栅格系统像谜一样的困扰着众多网页初级设计师，关于网页栅格系统是网页设计的一套标准的布局设计方法！ 从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 目 录 什么是栅格系统 主流网站如何使用栅格系统 如何用栅格系统布局页面 影响网页设计的两大因素 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://ide/ 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 如何用栅格布局页面 首先评估下内容，选取一种最适合自己内容的栅格方案，下载后放在设计软件里设置出栅格系统就可以了，如果没有可以自动生成的功能，也可以自己绘制。
其实栅格系统了解后是不是感觉也挺简单的，最重要的一点，这里再啰嗦一句： 「栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格，而不要被栅格所束缚了，注意灵活运用，！ |
|
|
