跳到主要内容

创建适合所有屏幕的网格

Create a grid that adapts to all screens

创建网格比使用基本模板或设计更多

我想你可以说我是一个习惯的生物。每次我开始新的响应式网页设计项目,我将相同的网格复制到我的工作文档中:20px列结构,基线网格为20px。我亲切地称之为“野餐毯”,因为它让我想起了我妈妈过去常常在草坪上放的红白相间的棋盘。

您可能也会认为它是在桌布上发现的非严肃披萨关节中的图案。而不是红色,我使用青色,但无论如何,它的目的很简单,为构建组织良好的设计提供基础。

在过去几年中,谷歌引领了使用8px网格的趋势,包括Spotify在内的其他品牌也迅速加入。

作为消费者,我们的眼睛有一些方法可以快速,轻松地理解布局中元素的功能

虽然这从迎合移动屏幕的实用角度来看是绝对有意义的,并且使用的类型尺寸和领先数量是4的倍数,但8px标准并没有为布局留下任何空间来呼吸。

通过具有更多空间的网格,元素可以更加分散,这对于为最终设计添加视角至关重要。

我会给你一个很长的故事,关于我在积分和皮卡中设置印刷网格的早期故事,但正是这种方法让我在数字领域内完成了这个课程。

作为消费者,我们的眼睛有一些方法可以快速,轻松地理解布局中元素的功能:我们首先使用比例来确定层次结构,然后立即评估这些元素之间的负空间。

当然,类似的信息类型应该紧密分组,并与不相关的类型保持清晰的分离。设置具有较少描绘的网格使我们能够强调这种空间对比度,因为它允许元素之间的距离很远,同时仍然在相关内容或功能之间留下充足的呼吸空间。

一个8px网格直到你进入16或24等倍数才能实现这一点。虽然数学上这些尺寸有效,但使用标准设计工具(如Photoshop或Sketch)时,基数10更容易处理,因为这意味着你不要需要开发自定义设置。

网格规则

在设置网格时,我将逐步完成我的典型过程。我将首先介绍一些要记住的关键规则。

从一开始就考虑所有设备

通常我们急于开始使用我们的设计理念,我们将在以后介绍移动设备,或者从桌面适应平板电脑。我从经验中知道,这根本行不通。如果您从第一天开始就不计划所有内容区域,那么设备之间的内容要求的变化可能会被忽略,用户反馈也是如此。

首先设置导航

“可行区域”有点用词不当,因为许多设计师认为它意味着整个屏幕。事实上它没有。允许侧导航,右导轨等落在核心网格区域之外,并且可以是任何宽度,只要它们仍然允许统一大小的内容区域。

不要专注于屏幕尺寸

许多设计师过于专注于创建一个网格,无缝填充他们所针对的内容区域的100%。这是徒劳的任务,并且意味着零灵活性,因为布局适应各种屏幕尺寸,无论大小。

相反,请专注于为您需要包含的内容创建适当大小的结构,并允许此安全区域位于画布大小内。这种方法与书籍设计有相似之处,其中页面大小不是焦点,而是其中的可用区域。

保持列宽一致

这对于我创建统一网格系统的方法至关重要,该系统将尽可能少地进行设计调整,从而扩展到所有设备。

Create a grid that adapts to all screens

保持列宽一致易于在各种不同设备上工作

不是更改设备的列宽,而是宽度应保持不变,列数应根据视口而变化。当视口变得太小而无法显示完整列时,该列会从布局中移除自身,并且内容区域的位置会根据其缺失进行调整。

利用负空间

保持列宽标准意味着您也可以保持恒定的内容区域尺寸。考虑一下:在台式计算机上读取正文的舒适宽度是720px。在1,440px宽的布局内,左侧和右侧留下360px的排水沟。您可以将这些导轨用于相关内容或广告,甚至可以将其打开以吸引读者的注意力。调整平板电脑时,只需将每侧掉落208px,左右两侧的内容区域为152px,无需额外的设计工作。

在考虑移动设备的情况下计划列宽

如果您使用的是“一致列”方法,那么记住移动屏幕只是桌面视图宽度的四分之一到三分之一是有帮助的。在为您的大型视口创建内容块时,请在流程的早期考虑这一点。如果您使用已经符合此宽度限制的内容块,则在设计移动视图时将需要更少的调整。

将电视视为平板电脑

Create a grid that adapts to all screens

标准12列网格包括基线网格,主柱结构和细分的20px列

将电视视为可用的最大媒体通常令人兴奋,但设计电视屏幕实际上更类似于平板电脑的设计。这是因为元素需要足够大才能从整个房间读取。因此,尽管具有较大的像素密度,但电视更好地被认为是1,024px宽。

坚持网格,即使你打破它

“打破网格”一词应该适用于您的视觉系统的复杂性,而不是根据您最初的20px野餐毯定位元素。当您打开网格图层时,您应该看到每个元素都有一个主页 - 要么停留在网格线上,要么正好位于两个网格线之间。

挥手告别排水沟

如果您正确规划布局,则不需要装订线(就像在传统的打印布局中一样)。相反,请确保元素的大小使其不符合下一列,并允许下一列中的元素对齐到左侧。一开始会觉得不自然,但随着时间的推移,它会成为您在构思布局时所考虑的事情。

20PX网格的优点

在某些情况下,根据您的类型大小选择,您可能会破坏网格。 8px网格符合以四的倍数出现的字体和前导计数。 20px基线并不像这种方法那样强烈,但仍能有效运作。关键的解决方法是空间。

根据类型应准确落在基线上的原则,该系统允许在线之间包含更多的前导。使用奇数类型时,这有助于提高易读性并为布局增加更多变化。

构建网格

每个人都以不同方式创建网格图层。我更喜欢将我的设置设置为Photoshop中自己的图层集,其中一层用于“野餐毯”,另一层用于列。为了创建野餐毯我开始使用40px x 40px文档,并在左侧放置一个垂直的20px x 40px色谱柱,在底部放置一个水平的40px x 20px色谱柱。

我用近纯青色(#00bff3)对它们进行着色,并给它们20%的不透明度。这种颜色选择在大多数文件中都很突出。然后将该图层平铺成可以应用于主PSD中的图层的图案,这样我就可以轻松调整其高度。

Create a grid that adapts to all screens

Photoshop中的标准网格设置:将20px网格应用为图案,将列结构应用为上面的矢量图层

对于列,我通常在主PSD中创建一组矢量形状,这些矢量形状是适当的列宽。根据设计的颜色,这些颜色可以是绿色(#00ff00)或红色(#ff4040),并设置为50%不透明度。

我通常保留元素的临时对齐指南,不要将它们用于网格结构之类的东西。我不想冒着混淆核心网格系统临时指南的风险。

一些设计师抱怨说这个系统会破坏他们的流程,因为他们无法轻易地在Photoshop的另一层下工作。虽然这可能是真的(有一些解决方法,例如锁定图层),您最终会感受到系统,距离会感觉自然,并且您不会经常打开网格。

保持一致

按照这种网格设置方法,您可以快速进入设计的令人兴奋的部分:创建。您将开始将您的视觉系统视为通用的,并在您开始之前自然地设想您的布局将如何适应。对导航条或按钮等各种元素的大小的猜测会更少,内容块会感觉到基础和一致。

我喜欢与他人分享这种方法,因为这意味着我们可以分工并确保标准的,高质量的结果。我很想知道这种方法对你有用吗!

本文最初发表于网络杂志问题281。在这里购买

话题



翻译字数超限