Sketch栅格系统介绍

互联网产品设计通常需要一个团队多个设计师协同完成，那么在大型项目中如何让各位设计师协作的更高效，sketch 这个设计工作软件就能很好保持设计的输出质量更好，下面一起来看一看Sketch栅格系统介绍吧：

什么是栅格系统

栅格系统英文为 Grid Systems，也有翻译为网格系统。

定义：运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。

1. 栅格

栅格最早起源于平面设计。1692年法国为提高印刷水平，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。

2. 网页栅格

包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。

3. 为什么要使用栅格

通过栅格的使用，可以用逻辑解释商业设计的细节问题。
设计内容都应该有所依据，当其他人质疑时，可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性，让内容更具可读性；可以快速校准元素的位置，让画面更平衡；可以模块化地管理元素，让版面更有层次感。

4. 栅格基础七要素

最小单位
需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增。
网页端最小单位：10
移动端最小单位：3、4、5

• 网页端：12列、24列（常用等分列数，当然不是固定的，需要根据自己的内容设定列数）
• 移动端：6列（常用等分列数）

• 计算公式：L = W / N
• 大列宽包含：列宽和水槽

5. 安全边距

除了使用水槽的0.5倍，还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20，使用0.5倍，安全边距为10；水槽是20，使用2.0倍，安全边距为40。

栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格，而不要被栅格所束缚。

6. 各种公式汇总

N 是自定义设置的列数。

以上就是Sketch栅格系统的全部内容介绍了，关于更多Sketch教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。