火星网校
8点总结如何更好实用栅格系统，令UI设计及前端提升N个档次
发布时间：2024-03-12 19:45:47 浏览量：148次
栅格系统在用户界面设计和前端开发中得到了广泛的应用。然而，并没有多少人能够真正掌握和运用它。今天行家来分享如何更好地使用栅格系统。
看看你周围的好设计，他们中的许多使用光栅系统。您可能非常赞成在界面中使用光栅系统，但没有人告诉您如何使用它们。栅格也用于打印，但在本文中，将重点介绍PC和移动设备栅格系统的设计。
紫色块放内容
内容块包括文本、图片或两者的组合。背景色实际上不是内容元素，除非它用作文本或图片的容器。
上图中的粉红色块充当网格中的列，它们构成内容宽度。一般来说，列的宽度不会改变，但是列的数目从PC上的12列到平板上的8列，然后是移动侧的4列。严格来说，您实际上可以定义所需的任何列宽，但在大多数情况下，网格列宽度设置在60-80px之间。选择正确的列宽是最重要的，因为它是内容宽度的主要决定因素。
水槽的是列与列之间的距离。20px是常见的尺寸设置，在设计块或卡元素的网格时非常重要，例如在进行基于照片的设计时。有些系统随着设备宽度的增加而增加水槽的宽度，但它们也可以保持不变。
边距也称为外部接收器，并且是内容宽度之外的空白区域。为便于设计，外缘随设备宽度的增加而增大。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。
下面将介绍一些基本的指导原则，但要理解在实际设计中没有硬性和快速的规则。
1. 内容元素必须位于若干列上
其核心思想是内容元素必须位于若干列上，你可以任意分割，比如6x2,3x4,4x3。在下面的例子中，我展示了以不同方式设计的信息卡。
不同栅格设计展示
很棒，这看起来很简单对吧。有时，如果希望将内容严格应用于网格布局，则可能不够漂亮，例如下面的示例。
如果我们将所有的内容放在网格上，文本内容看起来会很长，而且最好的位置不是严格地放在任何网格上，这也是可能的，只要我们理解整个元素实际上是一个看不见的、更大的容器。
这也是4x3的布局，只是给了它内部不可见的填充。当这样的设计被赋予开发时，他们可以直观地知道这一点，因此更好地理解如何实际分发内容。
2. 不要将内容元素留在水槽中
内容元素应该要在列宽以内，而不能流出在水槽之外，这样栅格化就变得没有意义了。
3.只要父级元素对齐栅格，子级可以不完全对齐列
有时候，你想把设计和卡片分为两部分，一部分是图片，另一部分是文字。你可能会遇到这样一个尴尬的情况，图片并不完全落在一个专栏上，文本被迫以一种奇怪的方式进行改编。其实不用担心，只要“父”容器对齐栅格，这就没有关系。
父和子内容网格排版
4. 除非有意，否则不要把列作为外部填充
所有重要内容都应与网格列宽度匹配。一开始会很奇怪，因为如果您不习惯使用网格，则可以将网格宽度视为完整的内容区域，因此还需要为其设置一些内部边距。在这一点上，外部距离起到了离开空白空间的作用，它们充当了内部边界。与其在网格中使用列宽度作为内部边距，不如保持与网格的最外层对齐，并使用网格的额外间距作为空白区域。根据代码实现的不同，要么将网格内的内容缩放，边缘距离固定，要么将外部距离与内容同时缩放。
正确的内容填充和不正确使用网格作为边距
所以如果有人说“我需要一个1200px宽的设计”，这并不意味着你的设计就是1200px宽，这其实是说设计内容宽度在1200px的画布内，实际内容占位是960px，这样就会有空间留出外边距。
5.完全出血的元素或纹理图形应设计在绘图板的边缘，并理解为出血柱网格
此页面布局的顶部图片设计为完全出血。
这是一个例外，当背景颜色或图片完全出血时，开发人员将其理解为全屏内容元素。
如果你设计了一个装饰性的元素或者类似的东西，你可以接受它被切断，或者你可以摆脱光栅化的设计。
一些图文的出血设计
页眉和页脚有时有例外，它们不被视为内容的一部分。一些设计将它们固定在浏览器的边缘，而另一些则根据自身的功能和内容，更倾向于保持内容的宽度。将它们保持在内容宽度内的优点是当用户在宽屏显示器上查看页面时，不需要摇动和摇摆;将它们固定到浏览器的好处是它为导航元素提供了更多空间。
6.如何对栅格格布局进行响应
图片来源Intuit
在传统的栅格系统设计中，柱的宽度和水槽的宽度保持不变，但柱的“数”却发生了变化。你为什么要这么做？这是为了使设计更容易。如果在桌面的四列中每列放置一组三张卡片，则在平板电脑上显示两张卡片，在第二行上分解第三张卡。没有必要进行任何调整，因为它已经在第四栏中了。在电话里，答案也很简单。您所需要的就是一张卡，其余的将自动堆放到下面的行中。如果你喜欢，你也可以有创意，选择只在你的手机上显示一张卡片，或者做一个水平滚动。对这些列的修改是对代码的简单引用。
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
固定栅格
固定栅格示意
如果你在开发方面写一个固定的网格，当你从桌面缩小到平板电脑，比如900px浏览器宽度，你就不会看到任何变化，设计就像被切断。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果您继续减少此值，则会发生相同的情况，在达到另一个阈值之前，设计将保持不变。
流动网格
流动网格的示例
现在看看移动网格的特点，当窗口变窄时，内容将动态变化，文本将被包装，元素将被缩小。但是，直到内容宽度缩小到下一个临界值时，这些元素的布局才会改变。
所以我想说的是，设计阈值只是更改布局的参考点。这就是为什么列宽和接收器在网格中不会更改的原因，因为我们希望设计人员在考虑布局时更容易地创建一致性。
混合网格
在实际项目中，通常使用移动和固定网格的组合。该站点通常是移动网格，因为它必须适应各种终端的大小。
7.一些很酷的网格系统。
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽。这里有一些在设计中使用光栅系统的好主意。
Invision’s Genome Project
可以看出，他们的设计故意不使用任何水槽，因此它看起来无缝。
8. 要点总结
本文的目的是提供一些有关如何在响应性设计中使用栅格系统的信息。你要做的最好的事情就是从现在开始注意好的设计是如何将元素对齐的，然后你将开始看到这些模式。在完全理解了栅格的工作原理之后，你们一定能成为一名更好的设计师，因为知道了自己的设计将如何在阈值之间进行转换。这样的规范带来了更加一致和简单的设计，当用户从一个界面流向另一个界面时，这真正提高了产品的质量。建议在您的设计中应用这些网格，并以与开发一起研究落地方式，这将是一个非常好的进步。
图片来自于网络
想学习 上行家
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
