删格化网页设计 第1篇
确定好基准屏幕、原子单位后，我们就要来了解栅格设计的一些基本要素了。在做栅格的时候，我们需要明白几个关键词：屏幕分辨率、设计尺寸、内容宽度、水槽、列宽、页边距、留白
我们来看看图
1、屏幕分辨率，我们上面也讲了，由于设备的不同，导致市场上使用着各种分辨率的尺寸，具体什么是分辨率就不讲了。只是我们在做设计之前，需要了解我们的用户屏幕分辨率的使用情况
2、设计尺寸，前面说了，根据用户的使用情况，选一个合适的设计尺寸，这个是随着用户的使用情况变化而变化的，通常设备更新没那么快，所以暂时建议采用比较通用的设计尺寸。1920*1080
3、内容宽度，我们在设计的时候，并不是确定好设计尺寸了就在这个尺寸内铺满设计内容。毕竟我们的用户的屏幕分辨率各不相同，为了更好的满足绝大多数用户，我们要确定好设计的内容宽度。因为我们前面已经确定好基准设计尺寸了，那我们的内容宽度就根据这个基准尺寸来确定。具体的宽度需要根据各自业务来定。一般内容宽度1200px/1440px
4、水槽（Gutter），水槽就是列和行的分割间距，水槽越大页面布局间距就越大，水槽越小页面就越紧凑。水槽的宽度是8n，也就是水槽可以以8为基本单位去增加或减小。为了减少设计决策成本，我们会事先设定好一系列水槽宽度，并定义好每个宽度对应的使用场景，然后根据每个场景使用对应数值就可以了。比如8、16、 24、32 、40。根据实践经验，正常情况下，两个模块间距（水槽）的值为24时，视觉上是最为舒适。比如Ant design中的设计水槽就是24px
5、列宽，目前有两种比较主流的等分方式是12等分与24等分。列是栅格系统纵向排布依据，列数越多纵向排布内容就可以越细致，但是版面内容就会变的更稠密，内容更碎。
6、页边距，就是设计内容到边框的间距，也可以理解为到屏幕边框的间距
7、留白，留白的目的是让我们的设计有一定的呼吸韵律，不能过于紧凑。当然，我们可以把所有空白的地方都统称为留白，但是我们这里就简单的描述为具体内容到模块之间的距离。
看了这么多是不是有点懵逼，那我们继续简化下，因为有的时候页边距和留白是合二为一的，主要还是根据你们自己设计的风格来定。
看了这么多是不是有点懵逼，那我们继续简化下，因为有的时候页边距和留白是合二为一的，主要还是根据你们自己设计的风格来定。
由于a+i=A，
可得：W=(A×n) – i
网格宽度=（一个栅格单元宽度xn）-水槽
比如，本设计尺寸以1440px为基础，那么两边间距设为24，从而得出W=1440 - 24 - 24 = 1392，水槽宽度也定为i=24=8x3，设置为12列：
W=（A x 12）-24
A=（1392+24）÷ 12 = 118
a= 118 - 24 =94
小结
栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格，而不要被栅格所束缚。
在 Sketch 里设置栅格，定义好3个数值即可，总宽度、列数和水槽，这三个内容定义好数值后，其他内容就会自动计算，一个栅格就生成了。
删格化网页设计 第2篇
首先来看看，2018pc端的屏幕尺寸占比（虽然已经过去两年了，但大体环境差别不是很多，未来屏幕分辨率只会向着更高的分辨率前进）。
从图中可以看出，目前国内 PC端用户屏幕分辨率排名前三的分别是19201080、1366768、1400*900；他们三者之和为，占了很大的比例。低分辨率的PC基本都是传统企业采购的老师台式机显示器。除此之外个人电脑，互联网企业电脑最高分辨率都在1920X1080以上。当然在实际当中我们依然要根据我们网站的目标用户群体和网站的定位来确定我们设计的版心宽度多少较为合适。通常为960px/1200px/1440px。少数特殊尺寸1500px或通栏
根据比例来看，1440的尺寸处于中间位置，如果以它为基准设计，最终向上向下响应适配后，相对误差最小，从而给用户带来更好的浏览体验。Ant design设计规范也采用1440作为基准尺寸（Ant design是蚂蚁金服开源的一套设计规范，做过规范的同学应该不陌生。其实很多时候，我们可以直接拿来用，没必要另外造车轮，还没别人做的好）。
删格化网页设计 第3篇
拿到一个网站的设计需求时，先确定是不是要单独开发移动版网站，因为响应式布局固然兼顾了手机端，但受加载速度、手机浏览器、自由度等等的影响，如综合电商之类页面复杂的网站如果不做单独的移动站，单纯依靠响应式布局，在手机端的表现很不理想，所以，如果会开发移动版网站的话，恭喜设计师，你需要的只是栅格化设计，也就是广义上的栅格系统。绝大多数的工作流程是设计师把方案交付给前端，前端再考虑实现方法。现在，这种工作流程需要优化一下，即在开始设计前与开发人员的一次深度沟通。提前沟通的好处在于，你了解他们的工作方式，而通过沟通，设计师需要获得的更重要的一点信息是，网站是不是需要做成响应式，这是后面建立栅格系统的关键。
响应式设计只是网页设计的一个折中方案，依赖于项目实际情况进行选择。对于设计师来说，如果没有必须的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。
1、企业产品类，单一的介绍几种产品为主
2、功能型网站
3、不拘泥形式的设计
针对这三个具有代表性的案例，栅格化设计是没有必要的。理由很简单，栅格的优点也是缺点，规范意味着统一，也意味着限制。在以上的案例中，无需用栅格来限制设计师的灵感，毕竟这个社会，还是需要设计感的。
但绝大多数情况下，推荐栅格化设计。尤其是图文混排、版块很多的网站，栅格化设计会让内容杂乱无章的页面呈现清爽感。
删格化网页设计 第4篇
方式二
因为：列数+间隙为A
也可得(A×n)-i=W
AI操作方法
1.比如950PX为类，模拟浏览器背景1920，新建主要区域950px；
2.选中950矩形，进行对象—路径—分割为网格
3.输入总宽，列宽就可以自动帮你计算了
通过AI也可以做个简单的栅格系统，可以尝试一下！
二、主流网站如何使用栅格系统
电商网站
看一下两个主流电商如何使用栅格布局页面，进一步加深对栅格系统使用的了解。
（左 淘宝 & 右 京东）
淘宝布局
下图包含：
第一张图为完整内容展示布局
第二张为浏览器缩小时内容展示布局
淘宝布局分为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，是不是突然发现设计其实是一道数学题。
网页举例
根据具体内容，使用方格布局整个页面。
Sketch栅格设置，这里的总宽度1190是内容设计的实际宽度，设计页面宽度是1920，因为有些内容展示选用居中布局方式，两边留白。
四、影响网页设计的两大因素
分辨率和浏览器
什么是分辨率？
比如1920*1080px，整个屏幕可以看成是由很多小方格子组成，一个像素就是一个小格子，横向有1920个小格子，竖向有1080个小格子。
电脑屏幕是14寸还是15寸的，尺寸不变，电脑分辨率是可变的，在同一个屏幕上，分辨率越大画面就越精细，反之就越模糊。当下比较流行的屏幕分辨率：1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。
注意：
关于分辨率，可以选用适合自己团队的分辨率尺寸，我们团队是梳理出所有产品的分辨率的使用情况，及团队产品设计的特点，选取2-3个作为后续统一使用的尺寸。
浏览器
设计网页时要考虑好浏览器，主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。
因为不同浏览器工具栏高度不同，如果设计内容需要在小屏幕上展示，就要考虑到打开浏览器默认页面及全屏页面的高度展示情况，如果浏览器所占高度较多，那么内容展示区域就被压缩了，所以就要考虑将最重要的内容尽量放在上面。
下面来看看最近一年浏览器市场份额占比情况。
五、GridGuide工具介绍
网址：http://ide/
GridGuide介绍
首先来认识下「GridGuide」她是帮你在设计里创建完美栅格的一个工具。（用她而不是它，是因为GG如果是个人，应该是个聪慧伶俐的大美人吧~）
使用方式：输入3个数值，自动生成所有可使用的栅格最佳组合方案。打开网页，她长这样
网页包含4大版块内容
删格化网页设计 第5篇
现在，我们公式算法搞清楚后，我们就来进行排版设计。以12栅格系统为例，一个12栅格系统可以根据业务需要被等分或者不等分，比如，1：1：1、1：2：1、2：5：5、3：4：5、1：1：1：1，具体采用哪种比例的组合需要我们根据自己业务需求来定，我们此处所说的比例实际上就是具体内容的宽度。当然，如果你栅格是24，那么你的比例会更加细致，排布也更多变
前面我们看了顶部导航的设置方式，侧边导航也是一样的，原理懂了就好办了。比如，我们以Ant design的设计为参考样式