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

发布网友 发布时间:2024-10-23 12:53

我来回答

1个回答

热心网友 时间:6分钟前

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

声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。
E-MAIL:11247931@qq.com