12列网格的示例和规则，在设计的过程中可以起到非常好的辅助作用

一、12列网格的示例和规则

1、UI设计中，我们需要将元素放入列内，并在元素之间留出相等的呼吸空间。主要注意的是不要将元素延伸到水槽中。

2、水平上下间距尽可能保持一致，特别是对于重复元素来说。

3、由于一些盒状元素非常容易在网格内定义，处理开放的元素有时会很棘手。因此，有时候我们还需要添加额外的内部填充以防止它们看起来挤在一起。

4、父元素中较小的元素不受网格规则的约束，只要父元素被成功定位，其中包括的元素就可以有自己的布局。

5、并不是所有的页面都需要使用12列，比如内容不够多的话就无需使用。

6、响应式一般的适配路径是从大屏幕上的12列网格，到小笔记本上的8列网格，再到移动设备上的4列或2列网格。当从大屏幕切换到小屏幕时，要注意水槽的大小，因为它们应该比大屏幕上的小。如果你在更大的屏幕上设置为30px，那么在移动端10或15px就足够了。

二、UI设计怎么运用元素叠加

1、元素叠加是一种常用的设计手法，如果我们不喜欢常规的圆形装饰效果，那就可以把它们叠在一起，就有了更加丰富的视觉表现，如果你觉得画面有些平淡，同样可以把元素进行堆叠，就形成了一种迷幻的神秘感。

2、在左右图文的排版中，如果觉得如今的视觉的效果有些普通，可以把元素放大一些，突出的效果会更加吸引用户的眼球，如果小伙伴们想要增加操作的趣味性，可以做成卡片堆叠的效果，既可以体现内容数量的丰富度，也能够引导我们的用户进行操作。

3、如果你喜欢某样东西，也许你的喜欢是直白的也可能是隐晦的，把文字堆叠在一起，就会有种朦胧的美。

4、把主体放置在框内，叠加上文字，就有了一种文艺的氛围，当然如果你想要增加一些神秘的艺术感，我们也可以使用一些叠加的手法和效果，就可以让我们的整体画面变得有层次感。