排水沟 - 具有背景或边框的列的填充和边距

平面设计 网站设计 css
2022-01-23 23:09:42

当列(或框,或任何布局模块)的形状清晰可见,因为它有自己的背景或边框时,推荐的排水沟设计指南是什么?

通常人们会在框的边缘和它的文本之间放置一些空间。但是从哪里召唤这个空间呢?通过扩大框,或缩小文本

为了说明,这里有一些(但不是全部)选项......

在此处输入图像描述

(此外,我可以使用具有任意数量的列和任意宽度的任何网格 - 这仅作为示例 - 每次布局跨越排水沟时都可以提出实际问题。)

我已经写了一堆关于基于网格的布局的文章,但到目前为止,我只看到了一篇解决这个问题的文章: Khoi Vinh 的Nudge Your Elements

我错过了什么?还是根本没有明确的指导方针?

由于基于网格的布局的动机之一是提高全局对齐的感觉,我想人们可能会争辩说,这个决定取决于什么需要更多的对齐;盒子,还是里面的东西?

除非我误读,否则 Khoi Vinh 在他的文章中主张选项 3。

我发现自己在选项 3 和选项 6 之间来回切换。选项 3 的框对齐,但它的文本感觉局促。但是使用选项 6,最终结果既不是 box 也不是 text 对齐(尽管有人可能会说 text-edge 和 box-border 之间的隐式中间是现在对齐的“东西”)。

超越网络,我阅读的书籍设计和页面构建规范也没有谈到这个问题。我可以看到佳能如何适用于绝大多数“透明背景上的黑色字母”书籍印刷,但是一旦为页面布局添加颜色(或反转黑白方案),装订线问题又回来了。

嗯,我想问题是;在我说明的选项之间进行选择是否有任何指导方针- 或者我是否冒险超越了设计师法,这只是关于“看起来和感觉良好”的问题?

3个回答

任何时候使用网格时,都必须始终如一地使用它,除非有一个元素(通常在给定页面上不超过一个)出于充分的理由违反它 - 使其脱颖而出或改变页面的气氛. 对比度必须大胆且经过深思熟虑才能完成。(我所说的“工作”是指它看起来不像是一个错误。)

严格遵守的网格是和平的。几乎没有紧张感;事物会出现在眼睛期望它们出现的地方,并且读者永远不会受到惊吓或感到不舒服。

在这种情况下,如果你的背景稍微违反了网格,就像 #4 一样,它看起来像是一个错误。这很尴尬。完全没有排水沟将盒子挤在其他柱子上。反对文本的开放引导,它设定了开放的期望,这显然是错误的。

0 不提供对比,因此第二列与其余列没有区别。在某些情况下,这就是你想要的。

#5 和 #6 中的“半装订线”示例重新定义装订线,使其更窄。他们实际上在水平和垂直方向上重新定义了整个网格,因为在这种情况下,装订线最终与行间距完全相同。这对文本本身不利,但可以与框一起使用。但是,在 #6 中,与顶部和底部相比,文本两侧的空白区域不成比例。这很尴尬和不舒服,因为它没有任何意义。#5 会更可取,因为空白区域分布更均匀。出于同样的原因,#3 优于#2。

总的来说,我会同意 Lauren 的观点,并推荐 #3 作为你的最佳选择。无论列数如何,这也是最好的一般情况。

有规则。如果你有充分的理由,它们当然可以被打破,但任何时候你这样做都必须是有目的的、大胆的并且清楚地“按设计”。Helvetica Black 与 Georgia 作品搭配,因为它们是不同的;投石机与 Verdana 搭配使用会刺激神经,因为它们并没有足够的不同。一个横跨一列半的大红色方形盒子可以工作;稍微偏灰的不会。

我投票支持选项 3。灰色框的边缘是垂直定义列的内容,因此不能违反这些线(没有理由)。所有三列的装订线应该相同,因此在灰色框中插入文本。选项 2 的插图有点太深了。

这就是我习惯于在印刷品上做的事情,所以它在网络上看起来也“正确”。

如果这是用于网页设计,如果您担心跨浏览器的一致性,我强烈建议您不要在水平方向使用任何填充。不同的浏览器对 div 和 padding 的处理方式不同,以至于演示可能会中断。

无论您采用哪种方式,都只能水平使用边距。它需要添加一两个类来获得您想要的确切布局(例如,一组边距用于 div,另一组用于段落),但从长远来看,它更可靠。不过,垂直填充通常不是问题。