12列网格的示例和规则，在设计的过程中可以起到非常好的辅助作用
2024-04-27 18:19:00 学考宝 作者：佚名
1、UI设计时，将元素放入列内并在元素间留出相等的呼吸空间。
2、水平上下间距尽量保持一致，尤其是重复元素。
3、处理盒状元素时，添加额外内部填充，避免挤在一起。
4、父元素中较小的元素不受网格规则约束，因此父元素成功定位后，其包含元素亦可拥有自己的布局。
5、内容较少时，无需使用12列网格。
6、大屏幕切换到小屏幕时，注意水槽大小。
一、12列网格的示例和规则
1、UI设计中，我们需要将元素放入列内，并在元素之间留出相等的呼吸空间。主要注意的是不要将元素延伸到水槽中。
2、水平上下间距尽可能保持一致，特别是对于重复元素来说。
3、由于一些盒状元素非常容易在网格内定义，处理开放的元素有时会很棘手。因此，有时候我们还需要添加额外的内部填充以防止它们看起来挤在一起。
4、父元素中较小的元素不受网格规则的约束，只要父元素被成功定位，其中包括的元素就可以有自己的布局。
5、并不是所有的页面都需要使用12列，比如内容不够多的话就无需使用。
6、响应式一般的适配路径是从大屏幕上的12列网格，到小笔记本上的8列网格，再到移动设备上的4列或2列网格。当从大屏幕切换到小屏幕时，要注意水槽的大小，因为它们应该比大屏幕上的小。如果你在更大的屏幕上设置为30px，那么在移动端10或15px就足够了。
二、UI设计怎么运用元素叠加
1、元素叠加是一种常用的设计手法，如果我们不喜欢常规的圆形装饰效果，那就可以把它们叠在一起，就有了更加丰富的视觉表现，如果你觉得画面有些平淡，同样可以把元素进行堆叠，就形成了一种迷幻的神秘感。
2、在左右图文的排版中，如果觉得如今的视觉的效果有些普通，可以把元素放大一些，突出的效果会更加吸引用户的眼球，如果小伙伴们想要增加操作的趣味性，可以做成卡片堆叠的效果，既可以体现内容数量的丰富度，也能够引导我们的用户进行操作。
3、如果你喜欢某样东西，也许你的喜欢是直白的也可能是隐晦的，把文字堆叠在一起，就会有种朦胧的美。
4、把主体放置在框内，叠加上文字，就有了一种文艺的氛围，当然如果你想要增加一些神秘的艺术感，我们也可以使用一些叠加的手法和效果，就可以让我们的整体画面变得有层次感。
