
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
栅格系统的学习与应用是每一位UI设计师都应该熟练掌握的一个设计能力,而本文我们就通过案例分析来简单了解一下,栅格系统设计网页都有哪些注意事项。
除非有意,否则不要把列作为外部填充
所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪,因为如果不习惯使用网格,可能会把网格宽度当成全部内容区域,所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用,它们充当了内边距。不要在网格内部利用列宽当成内边距,而是要与网格外面保持对齐,利用网格外的间距来当做留白区域。根据代码实现方式,要么网格内的内容按比例缩放,边距固定,要么外边距与内容同时缩放。
完全出血的元素或纹理图形应该设计在画板边缘,并理解为出血的列网格,这是一个例外的规则,当背景颜色或者图片在完全出血的情况下,开发同学会把它理解为一个全屏的内容元素。
如果设计的是装饰元素之类的内容,可以接受它被裁切掉,此时也可以脱离栅格化的设计。
页眉和页脚有时也有例外,它们不被认为是内容的一部分。有些设计将它们固定在浏览器边缘,有些则喜欢保持内容的宽度,这取决于自身功能和内容的情况。将它们保持在内容宽度内的好处是,当用户在宽屏显示器上看页面时,不需要来回扫视;将它们固定在浏览器上的好处是可以为导航元素提供更多的空间。
栅格化布局如何做到响应式
在传统的栅格化系统设计中,列的宽度和水槽的宽度是保持不变的,只是列的“数量”发生变化。为什么要这么处理呢?这是为了让设计更简单。在手机上,答案也很简单,只需要一张卡片,其他的就会自动堆到下面的行中。如果你愿意,也可以变得有创意,选择只在手机上显示一张卡片,或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。
固定栅格
如果开发那边写了一个固定栅格,当你从桌面缩小到平板电脑,就像是在900px的浏览器宽度时,你不会看到任何变化,设计就像是被剪掉了一样。但当达到768px临界点时,设计马上就会改变,平板电脑上的显示效果就会好起来。如果继续减小这个值,同样的事情也会发生,在到达另一个临界值之前,设计看起来都是不变的。
流动网格
现在来看看流动网格的特点,当窗口缩小时,内容将动态的发生变化,文本会进行换行,元素也会变窄。然而,这些元素在内容宽度缩小到下一个临界值之前,布局是不会变化的。
所以我想说的是,设计的临界值只是一个更改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的原因,因为我们想让设计师在考虑布局时能够更容易地创建一致性。
混合网格
在实际项目中,使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格,因为它要去适应各种不同终端的大小。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销,赚更多好礼。