Sketch web design 之栅格布局
时间：2023-09-06 03:12:01 | 来源：网站运营
时间：2023-09-06 03:12:01 来源：网站运营
Sketch web design 之栅格布局：众所周知，现在的响应式Web设计已经普及，所以做Web Design的时候一定要考虑响应式，而响应式设计的基础概念就是栅格布局，以前在PS上做栅格布局还是比较麻烦的，有了Sketch以后，利用自带的栅格功能就能满足需求，下面我们以构建1200px Container的栅格为例。
选择View／Canvas／Layout Settings呼出设置页面我们来解释一下这些设置分别是什么：- Total Width就是Container的值，我们设定为1200px;
- Offset表示栅格的偏移量，我们只要设定完成以后按Center按钮即可，会自动居中；
- Number of Columns就是栅格数，我们默认设置为12个；
- Gutter on outside是非常重要的设置，勾选以后才能跟前端的栅格算法匹配。
- Gutter Width就是栅格之间的间距，我们设定为30px；
- Columns Width就是栅格的宽度，我们设定为70px；
综上设置我们可以得到一个
Container为1200px，栅格宽度为70px，栅格间距为30px的一个栅格布局，要做栅格布局的时候直接按照比例调整设置即可：
设计师一开始了解栅格布局可能会有些困难，因为实际上栅格左右两边各有15px的间隔是肉眼无法识别的（也就是说在大多数情况下，你的内容都应该放在1170px的区域范围内，两边各加15px才是1200px），所以做栅格比例的时候会经常搞错，采用这种栅格方法以后又简单又不容易出错，推荐大家使用。
在线咨询
