网格系统在用户体验设计中的应用与规则:何时使用及何时打破网格

日期: 2025-01-08 22:04:05 |浏览: 36|编号: 64248

友情提醒:信息内容由网友发布,本站并不对内容真实性负责,请自鉴内容真实性。

网格系统在用户体验设计中的应用与规则:何时使用及何时打破网格

编者按:本文来自著名用户体验设计机构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 网格系统,这样在屏幕响应变化时更容易处理。

综上所述

网格系统不仅为设计者提供了高质量的布局结构,也为最终用户提供了良好的可读性,让产品和界面更好地适应各种屏幕。这就是网格,甚至是设计。系统的功能。

提醒:请联系我时一定说明是从铂牛网上看到的!