今天来一点干货，前几天做了一个pc端的网页设计工作，在做之前，学了一下使用栅格化系统做网页设计。
说点题外话，早年做电商设计工作的时候，店铺装修内容，我们那个时候版心一般都做到980，这样保证不管多大的电脑都能看到中间内容。
栅格化系统运用很广泛，不仅仅网页设计能用到，同时做平面设计，宣传册，宣传单都能运用到，还有做ui界面，也可以使用，为什么要用栅格化系统，其实就是为了让你的设计作品，更加的整齐，整洁，有规律。
在做这个项目之前，我通常都是用拉辅助线的方法，做设计。很多人肯定觉得很不专业吧，确实是不专业，但是达到的目的是一样的，只是在细节上，不是更加精致而已。到了我这个阶段，在设计行业工作了6-7年了，也是时候考虑如何把产品设计得更加的专业，精致，向大厂的设计精细度看齐。
在做这个项目之前，也看了一些栅格化设计文章，同时也看了一些相关视频，但是都讲得不清不楚，全是高大上的理论，不知道他在讲什么，也感觉不实用。更不知道如何运用到实际工作中，今天我就跟大家讲一下，我所消化的。
网页栅格系统制作：分有边距的栅格和无边距的栅格，这个怎么分其实你也不需要了解那么清楚，你只要保证你设计的网页，好扩展，统一，易开发即可。
通常设计网页尺寸的总宽度都有1920 1440 1366
我一般做网页使用1920的总宽度比较多，可能是习惯，当然也是经验摸索，用1920做网页设计，也没出现什么问题。
在ps和sketch软件中都可以制作
如果你想用ps做网页设计，制作栅格实际操作：
1， 打开ps
2， 点视图
3， 点新建参考线版面
4， 此时你可以根据你的设定，进行版面设置，做网页版心通常有，980 1000 1200 1280 这个没有严格要求，你做设计的时候，如果有竞品分析，那你就按你的竞品布局来就好。
如果你想用sketch做网页设计，制作栅格实际操作：
1， 打开sketch
2， 视图
3， 布局
4， 布局设置
栅格在设计网页时为什么如此重要？
1， 它可以帮助我们对齐内容，提升页面的一致性和复用性
2， 减少了设计、开发沟通成本
3， 提高可阅读性，具有一定的可拓展性
4， 为客户带来一致的用户体验
计算公式W=(A*n)-i
内容总宽 定义为w
页边距 n
列宽 a
水槽 I
列槽宽 A
是不是很复杂，其实我的理解就是：比如一个网页的总宽度是 1920 ，版心内容做1000 ，两边的边距还有920 ，920除以2 得出左右两边就是460，画布布局就是要这样提前算好，布局好。
网页端 我们通常总宽度是1440
设置参数如下：
iPad端 我们通常总宽度是1024
设置参数如下：
手机ui界面端 我们通常总宽度是750
设置参数如下：
以上是我常用的一些尺寸设计，但是这些不是固定的，你可以根据你自己的想法，或者公司以前的规范来，我做的参数都是我自己实际中运用的，如果有什么不懂的，可以问我，我会把我知道的分享给你们，如果你比我知道得多，也希望你能多多指导一下我。