如何让你的设计看起来更有说服力？试试网格系统!
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第117篇文章分享
✅通过了解网格系统的组成、网格系统的创建方法和使用准则等内容，系统了解网格系统在设计中的应用，让我们的设计有理有据，更具说服力！
在深入了解网格的类型和使用准则前，让我们先来了解一下网格系统中涉及到的一些基本概念，比如列数、内边距、外边距等等。
1) 列
列(Column)是网格的基础，用来表示内容放置的区域。每一列的宽度以百分比而不是固定的数值来衡量，这样面对不同的屏幕尺寸，可以更灵活地进行设计。
2) 内间距
3) 外边距
4) 字段或模块
5) 界面设计与网格
如果说网格在过去对于印刷必不可少，那么今天网格在数字世界中仍是不可或缺的。
网格是具有列、内间距和外边距的结构系统，其目的是帮助设计师组织界面的内容。
内间距的距离越窄，越会向用户传达「这些内容属于同一组」的感觉。
同理，内间距越宽，看起来越像是不同类型的内容。
需要注意的是，内间距的距离不要太宽，或者比每一列的宽度还宽，容易导致内容之间的留白过大，造成视觉浏览上的不连贯。
此外，外边距的间距遵循与内间距相同的规则。可以灵活调整外边距，以便在内容和屏幕之间留出合适的间隔。
和内间距一样，屏幕中的外边距也不能太宽，这样会压缩页面中内容的展示空间，会让页面看起来很局促。
网格的使用看起来很直观，但在UX或UI项目中使用网格系统仍有一些需要注意的规则。
1）将元素集中在每一列中
上面说到，在设计中常用到的是12列网格系统。那么12列网格为什么被广泛使用呢？主要原因在于12列网格更方便扩展不同的布局形式。
▲ 12列网格可以一行排列两个内容，各占6列网格；一行排列三个内容，各站四个网格；一行排列四个内容，各占3列网格；一行排列六个内容，各占2列网格。
基本上，常用到的页面布局形式在12列网格中都可以实现。
▲ 在每个内容之间留出足够的内边距。这里需要注意的是，内容的两侧要与每一列的边缘重合，而不是与内边距重合。
2）不要将列数作为内容填充
在网格系统下，设计应该填充整个内容的宽度，这样会让界面看起来更规范。
不要让左右两列没有填充内容，让列数作为填充，这样会导致页面的外边距不统一，增加后期的开发成本。
3）可以尝试脱离网格
在设计中，使用从网格中溢出的图像或元素也是可以的。
4）注意内容之间的间距
在网格上放置不同的元素时，确保元素之间的左右间距、上下间距都是一致的，这样会让整个界面看起来更规范。
最后
除了能够改善设计、减轻用户认知负担外，网格系统还能提升设计效率。有了网格我们可以快速衡量元素的间距、边距的精度，简化设计过程。
另外，在规范的网格系统中，界面布局或内容上的修改也会变得更容易。
领取方式：
添加微信, 邀你进设计成长群🌟
🔥文章合集