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),所以做栅格比例的时候会经常搞错,采用这种栅格方法以后又简单又不容易出错,推荐大家使用。