网格系统在用户体验设计中的应用与规则：何时使用及何时打破网格
编者按：本文来自著名用户体验设计机构NNGroup。高级用户体验设计师 Kelley Gordon 负责撰写本文。对于设计师来说，网格系统并不陌生，但什么时候使用、使用什么样的网格，甚至什么时候打破网格的规则都很重要。这篇文章简要地解释了这一点。这个问题。
如果您曾经去过纽约并在街道上行走过，您就会确切地知道如何从一个区域步行到另一个区域，如何从一条街道步行到另一条街道，因为整个城市都是建立在网格系统上的。在。正如网格的可预测性可以帮助当地人和游客确定方向一样，网页和应用程序中的网格为用户和设计者提供了一个框架。由于网格使用一致的参考点，因此可以为页面提供良好的可读性，并允许用户快速实现其目标。
网格定义：网格由行和列、填充和边距组成，并为页面上的元素和布局提供结构。
网站和界面中最常用的网格有3种不同的结构：列网格、模块网格和分层网格。
在柱状网格中，页面通常分为垂直列，UI 元素和内容与这些柱状列对齐。
模块网格在前者的基础上进一步横向扩展。由交叉的行和列组成的网格允许元素和内容根据较小的模块对齐。这种模块化的网格更适合电子商务和列表页面。 ，比柱状网格更自由。
分层网格是不同的。它与前两者的区别在于行和列的组成并不完全相等，不同网格块的重要性和优先级也不同。最重要的元素和内容占据了网格的最大区域。
这些与网格相关的文章也值得一看：
用案例帮助你掌握相册布局中的网格系统
网格最初是如何使用的？网格系统使用提示：网格系统是一个非常强大的排版工具，可以有效帮助设计者将信息整理得清晰、有条理，而且如果使用得当，不会出现死板和生硬的情况，这是人们经常担心的事情。
阅读文章>
想要用好网格系统，这8个技巧一定要掌握！
大家好，我是彩云。
阅读文章>
B端设计基础指南：网格系统
网格的历史 说到网格的应用，我们可以追溯到很久以前。
阅读文章>
网格构成
网格使用示例
示例 1：分层网格
第一个案例来自《纽约时报》官网的设计。该网站使用分层网格来创建类似于传统报纸的阅读体验。在大的桌面屏幕上，设计者使用两个主柱形成一个分层的网格。最重要的标题占据更大的面积。然后将列分为二级和三级块分类，它们占用较小的列和模块。
示例 2：列网格
第二个案例研究来自维生素公司 Ritual.com。该网站的设计采用了典型的柱状网格来创造有吸引力的视觉体验。在此屏幕尺寸下，相同尺寸的四列形成基本网格。结构上，所有元素几乎严格遵循柱状网格，并且内部边距也非常均匀。它们帮助用户区分不同的产品，而外边距是独立的尺寸，比内边距大得多。
示例 3：模块网格
第三个案例来自著名设计平台Behance。 Behance 使用模块化结构来呈现内容。大尺寸桌面界面下，每排有4个模块。水平方向的padding较大，左右方向的padding和margin完全一样。和以前一样，均匀的边距使整个页面视觉上均匀舒适。
最近无法访问Behance的同学可以阅读下面的文章来解决这个问题：
Behance显示没有访问权限？别担心，还有办法挽救！
大家好，我是Peanut，和大家聊聊设计。
阅读文章>
示例 4：打破网格
我们的最后一个例子来自 Shrine，一个专门研究 Google Material 的网站。这个网站似乎使用了柱状网格，但如果你仔细观察，你会发现内容栏并不遵循网格框架。这样的设计使得整个网站在快速扫描时更具挑战性。有些内容会更容易吸引用户的注意力，而另一些内容则很容易被忽略。这种打破格子的设计只要有正当理由就可以。
使用网格的好处
使用网格对用户和设计者都有好处。
更重要的是，网格不是一个单域概念。设计师和开发人员都在使用这个概念。网格本身就是设计者和开发者之间沟通的桥梁之一。
正确选择并设置网格
如何使用和设置网格对于创建高质量的排版和体验至关重要。
根据您的需要，选择合适的网格。
花更多时间思考什么样的网格布局适合您的网站。如果页面上的某些元素的优先级明显高于其他元素，那么分层网格可能是最合适的布局，例如新闻平台。如果您网站的内容大小差异很大，请考虑使用基本的列网格或模块网格，因为它们提供了足够的灵活性。
花点时间正确设置你的网格。
一旦您决定哪种类型的网格适合您的需求，就该仔细考虑如何设置它了。如果你考虑让你的内容适应不同屏幕尺寸的台式机、平板电脑、手机等多种设备，那么你需要结合响应式设计策略来指定列宽、内边距和边距等参数。在笔记本电脑和台式机屏幕上，12 列网格足以呈现大多数类型的内容。然后随着屏幕尺寸的缩小，网格缩小，断点设置，布局优化。在Sketch和Figma中，系统提供了高质量的预设网格系统，方便您的设计。
始终将内容放置在列内，而不是填充。
当您将元素放置在网格系统中时，请尝试将内容保留在填充周围，以便内容与空白区域清晰分开。
尝试使用 8px 网格。对于大多数常见设备，屏幕的像素通常是 8 的倍数。尝试使用 8px 网格系统，这样在屏幕响应变化时更容易处理。
综上所述
网格系统不仅为设计者提供了高质量的布局结构，也为最终用户提供了良好的可读性，让产品和界面更好地适应各种屏幕。这就是网格，甚至是设计。系统的功能。