it-swarm.cn

为什么许多网站将每个网页的一半留空?

为什么许多网站将每个网页的一半留空?这不是浪费屏幕空间吗?

一个很好的例子是Stack Exchange Network网站:

Screenshot of UX Stack Exchange with annotations

如您所见,每页两边都有大量空白。

空白会使网站与某些屏幕尺寸兼容吗?
离开空间有助于使网站移动友好吗?
空间是否使页面看起来不那么拥挤,因此可用性更高?
或者,没有正当的理由,人们只是因为没有意识到自己不应该这样做而这样做吗?

我曾经在使用这两种设计的网站上工作,并且没有让用户抱怨这两种方式。

具有空间的网站的示例: 堆栈溢出GitHubFacebook
没有空格的网站示例: AmazonChaseGmail

207
Tot Zam

原因很多,但主要的原因是视觉混乱信息层次一侧,以及结构一致性

视觉混乱

混乱是我们生活中的重要现象,也是用户界面和信息可视化设计中的重要考虑因素。许多现有的可视化系统旨在通过过滤用户看到的对象或信息或使用非线性放大技术来减少混乱,从而使屏幕中心的对象具有更大的显示区域。设计网页,地图和其他可视化效果的技巧通常侧重于显示大量信息的技术,同时通过谨慎选择表示和组织信息的方式将混乱程度降至最低。 [Rosenholtz等,2005]

简而言之:该想法是通过以逻辑方式呈现元素来避免视觉上的负担,从而避免认知上的负担。这种逻辑方式与下一点有关:

信息层次

信息具有层次结构,它是您要显示的内容中最重要的部分。即失败与成功之间的区别。

信息的层次结构是通用的设计原则,应在所有形式的设计中使用,包括电子学习设计。根据定义,它是元素或内容在页面/屏幕上的排列方式,它揭示了重要的顺序(升序或降序)。

看看下面的boxed模型:

enter image description here

如您所见,很显然,大多数人都可以理解层次结构。请注意,在响应模式下,此层次结构将按预期方式堆叠所有元素,因此移动优势非常清楚

现在,将相同的布局转换为全角:

enter image description here(尝试查看完整尺寸)

现在,层次结构1已经消失了,用户的眼睛可能会首先扫描2和3。然后是6和7!基本上,我们最重要的元素位于层次结构之下。我们可以更改它,以便顺序类似于3-1-2-4。然后,当在响应模型上堆叠时(不仅是设备,甚至是屏幕调整大小),我们也会遇到问题,因为3是第一个元素,因此,我们还是在创造问题而不是解决问题。

如您所见,问题很大,而这些只是主要问题。

但是,我们还有UI或布局方面:

结构一致性

假设您有一整页纸。无论如何,它将是100%。对于使用小型笔记本电脑的人来说,是100%;对于24英寸显示器,则是100%。不难发现,笔记本电脑上的人会看到压缩的信息,它具有某种结构,可以以非常特定的方式显示元素,并在屏幕上显示非常特定的信息量。

现在,使用该24英寸显示器的用户将看到截然不同的东西。首先,用户可能会感觉像网球比赛,她的头从一侧移到另一侧。 视觉饱和度和摩擦力当然会非常高。但是信息的垂直显示也将有所不同。参见以下内容:

1366x768enter image description here

现在1920x1200(24英寸显示器) enter image description here

完全不同,是吗?图片已放大(这可能是另一个问题!)并且文本保持其大小,几乎使文本量增加了一倍。现在考虑一下,再乘以已存在的令人难以置信的屏幕尺寸,仍然不存在的屏幕尺寸可能会在接下来的几个月中出现

换句话说:而不是保留控制,而是为了随机性而放弃了

当然,我们说的是一般规则,不是非常具体的情况,所以这里到处都会有例外

最后一点:

我想说明的是,在您的全宽示例中,只有Amazon会使用它,并且花了很多年的时间进行测试(有一篇非常有趣的文章,我现在找不到),其中包含无数的A/B测试。但是在这里,您需要按层次进行工作:他们在销售产品之前无法知道层次,因为大多数产品的近似值weight,所以您将尽最大努力匹配用户的搜索。

对于Google,他们使用boxed模型,并将内容向左对齐,左侧留有很小的空白。尽管确实是未登录用户的登录页面具有全角元素,但LinkedIn主页是装箱并居中。但是,如果您密切关注,即使在该页面上,其他所有内容也都是boxed

134
Devin

正文的最佳行长被认为是每行50-60个字符,包括空格(“ Typographie”,E。Ruder)。其他资料显示最多可以接受75个字符。

来源

保持网站整洁(简单)是一种设计趋势,但它也具有可用性值。噪音更少,用户可以更轻松地找到东西。

但是,为内容添加最大宽度主要是为了提高可读性。只要看一看 reddit ,您就会注意到为什么行长很重要。

85
Paul van den Dool

用户应立即看到的信息量有一个合理的限制

如果视图中填充的信息多于用户可以吸收/理解的信息,那么它将变得不堪重负。 这取决于内容的种类 和信息的显示方式。

这不是留出空白空间,而是使用所需的空间量,而不是更多。

用您的示例说明这一点:

enter image description here

由于网站可以使用滚动条,因此无需在单个屏幕上放置尽可能多的信息。

现在,如何分发内容?

enter image description here

enter image description hereenter image description here

根据站点的不同,内容可能居中或左对齐(最后一个可能是由于从左到右阅读)。还有另一种选择,不是在容器的边界中分配空间,而是在元素内部分配空间。如果容器内有几列并且每侧都有一个侧边栏,则这种布局可能会很有用。换句话说,值得的是,如果有足够的列,并且在某些时候,每个元素(每行)的一致性将由于信息相距太远而开始破坏。当我们达到这一点时,我们将继续以以前的任何方式添加该空白区域。

enter image description here

76
Alvaro

关于空白的学术研究

是的,空格用于提高可读性并减少视觉混乱[[1][2]

屏幕上显示的对象越多,眼睛和大脑必须处理 [[3]有了空白空间,我们减少了处理页面所需的注意力资源。但是,太多(超过50%)会对可读性和用户满意度产生负面影响 [[4]

空白会使网站与某些屏幕尺寸兼容吗?

并不是的。如果页面没有空白(并与内容堆叠在一起),则在为不同的分辨率设计时,如何为不同的分辨率放置页面的所有元素将成为一个巨大的问题。

离开空间有助于使网站移动友好吗?

好吧,不完全是。在移动分辨率下,您会注意到没有太多的空白。由于手机上可用的屏幕空间有限,它们具有不同的布局结构。


参考文献:

[1] Chaparro B.等,阅读在线文本:四种空白布局的比较,2004年

[2] Coursaris C.和Kripintris K。,网络美学和可用性:对空白影响的实证研究,2012年

[3] S. Luck和E. Vogel 视觉工作记忆的特征和连接能力,1997年

[4] Bernard M.,Chaparro B.和Thomasson R。,在网络上查找信息:空格的数量真的很重要吗?,2000年

18
Kristiyan Lukanov

作为一名Web开发人员,我在为我制作的网站发表讲话时表示:我们并未设计用于宽幅显示。当您扩大浏览器的宽度(或CSS背景颜色是什么)时,空白是默认设置。

在台式机和移动设备上设计和开发可响应且可扩展的网站的成本已经很高。我们的分析表明,超过90%的用户以小于1400像素的分辨率查看我们的网站。

归根结底,花时间和金钱为<10%的用户以大于1400像素的分辨率浏览我们的网站进行设计和实现是不值得的。

相关: https://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

18
y3sh

因为有些人像我一样浏览,所以将显示器旋转90°。

enter image description here

其他人正在使用640 * 480分辨率和8位色的平板电脑,手机和Win 3.11。最好的网站通常被设计为在所有设备上看起来可读,而在其他设备上看起来并不好看任何特定的设备。

6
dotancohen

如果内容自然那么宽,则一定要使页面宽。因此,例如,一张大桌子如果使用了所需的宽度,将比使用狭窄的栏更有用。我过去曾经全屏使用过Google文档电子表格,这很有用。

但是,正如其他人所说的那样,在难以阅读之前,文本行的长度是有限制的。这是因为当您的眼睛向左移动时,很难找到下一行的开始,因此文本列应该只有这么宽。

没有宽网页的另一个论点是,我没有购买大型显示器,只是为了看到更多的任何一个网站。随着屏幕变大,人们最大化最大化窗口的可能性越来越小,因此浏览器的范围也就不那么广泛了。

我买了一台大显示器(实际上是两个并排的大显示器,如果我的机器可以驱动它们,我会拥有更多的显示器),以便可以并排安装多个窗口,浏览器,编辑器等。这样一来,我不必在应用程序之间不断切换,只需要从一个应用程序切换到另一个应用程序即可,这使事情变得更加高效。对于像stackexchange这样的网站,这通常是最正确的,这些网站通常用于工作环境中,人们在同一时间从事其他工作。对于娱乐网站来说,几乎可以肯定它的重要性要小得多。

因此,与任何可用性问题一样,请考虑用户正在使用的上下文。您的站点是他们唯一要查看的内容,还是仅仅是他们所做的一部分?您真的可以确定吗?例如,您是否已记录该信息?

即使这是他们唯一要做的事情,将它们放到屏幕上也没有任何意义,除非它们确实有一定用途。否则,它们只是噪音,会降低您实际上希望他们查看的东西(或者确实是他们想要查看的东西)的噪音。因此,如果它真的有用,请继续。但是,不要仅仅为了它而填充空间。

4
Peter Bagnall

使用引导程序可以轻松找到并更改该设计,示例在此处: http://getbootstrap.com/css/#grid-example-fluid

UI的简单答案是,段落宽度可以与眼睛从左到右进行的无力移动量相提并论,也可以与一张纸相媲美。

通常,段落的可读区域应不超过平均大小的手。

3
user96861

看到这个问题以及对该主题的兴趣,我感到非常惊讶。在我看来,这似乎是有关“空白空间是否浪费了空间?”这一古老辩论的一部分。

我认为这是一个神话,有许多论点支持空白是成功设计的关键的观点。

限制内容主要块的宽度并具有布局空白的最重要论点是,它使设计更有用并帮助用户聚焦最重要的元素。我可以根据经验告诉您,我只是在页面中留下了很多信息,以至于我永远找不到所需的信息。看到屏幕上的信息真是筋疲力尽,我不明白如何集中精力在中间一栏,左侧和右侧的文字。

我知道这有点主观,但是在页面上包含大量信息的页面上,我感到开发人员不想花费更多的时间来添加带有“更多”按钮或综合重要内容。感觉就像一种惩罚,感觉很便宜。

空格有助于:

  • 专注于最重要的内容;
  • 提高阅读理解力;
  • 创造简约和优雅的外观和感觉。

在本文 为什么空白对于UX设计至关重要 中,我发现了一个有趣的观点:

事实证明,空白可以将理解力提高多达20%。(...)

空格有助于创建思维导图。(...)

空白的力量来自人类注意力和记忆力的限制

更新:更具体地说,除了在左边和右边都留有边距之外,另一种方法是增加列数或增加主框的宽度。

第一种选择的问题在于,难以区分重要信息的优先级,而第二种选择则难以阅读具有较大宽度的文本。

提出了一个很好的参数来限制列的宽度 here ,此参考很重要,需要提及:

内容是否有理想的行长?

引用“ Web样式指南-创建网站的基本设计原则”中的一段内容。

文本布局的理想行长基于人眼的生理状况。

在正常的阅读距离下,视野的弧度只有几英寸,大约是精心设计的文本列的宽度,或者每行约12个单词。研究表明,随着行长度开始超过理想宽度,阅读速度会降低,保留率会下降,因为读者需要使用眼睛和颈部的肌肉来跟踪从一行的结尾到下一行的开头。如果眼睛必须在页面上移动很远,读者很容易迷失方向,必须寻找下一行的起点。定量研究表明,适当的行长可以显着提高文本的可读性。

Web样式指南–创建网站的基本设计原则Patrick J. Lynch和Sarah Horton第2版,第97页。

2
Madalina Taina

我想说视野发挥作用。您可以轻松地阅读一张纸,并且网站的宽度大约相同。这样,您在阅读或解析页面时不必在水平方向上移动头部。

另外,即使您尝试减少空白,那么您将如何做呢?这不一定容易。大多数问题已经很短了。 2页彼此相邻?在inifinte滚动或一般滚动中如何工作?

2
HopefullyHelpful

我已经阅读了上面所有的答案,但没有发现任何提及可能出现的响应问题的地方。

尽管我仍然没有获得“移动优先”的设计,但是如果您要设计一个响应式的Web应用程序,则相同的内容必须看起来从320px到..都不错。我主要是在使用仪表板,因此需要大量空间,但是大多数时候我仍然无法拉伸太多内容,因此无法在所有分辨率层上很好地响应。

请始终记住,容器宽度越长,内容将以较小的分辨率层堆叠,而这些分辨率中内容块的高度越大。例如,宽度为1920px的容器中的一行文本在移动屏幕视图上消耗的高度为140px-这是小手机屏幕高度的30%,并且不包括浏览器用户界面。我目前在21:9 3440x1440px屏幕上。想象一下项目在屏幕上从一侧到另一侧伸展。更不用说有时候我不得不转头看桌面到另一侧! :D

这是一个示例: https://jsfiddle.net/cjj1Ln36/1/

根据经验,大于1400px的像素是一个过大的杀伤力,尤其是对于丰富的内容(例如标题,文本和图表的组合)而言。通常,在较高的分辨率下进行的逻辑操作是在列中拆分内容,但是,根据分辨率和经验的不同,根据分辨率,这些列最终可能变得太贫瘠或太密集。两个代码块包含相同内容的可能性也极低-在动态网站中可能无法预测,因此一列的内容可能很密集,而另一个则很稀疏。

对于照片丰富的网站,情况甚至更糟。

a)如果照片使用的全容器宽度为1400px,但必须保持相同的比例,例如4:3,则它很可能会占据屏幕的所有高度,并且很可能会超过它。

https://jsfiddle.net/mg965au8/1/

b)如果照片是在文字的侧面使用的,则从1400px的分辨率降低到照片可以坐在文字上方的分辨率(例如> 768px),很可能内容开始太稀疏,并且缩小时可能会超过图像的高度。我创建了一个小提琴来说明这个问题。尝试将分辨率从低分辨率扩展到最大1400像素(无需容器即可想象!)。所有浏览器宽度看起来都不错吗?可能不是。

https://jsfiddle.net/2xnt3mk2/

另外,上面所有其他人所说的-太压倒性的,等等

1
scooterlord

尤其是在文本较多的网站中,与全角的文本墙相比,文本窄的列更易于阅读。另外,如果文本不是小说,您会发现一半以上的文本行没有达到全角,因此会产生令人不快且不均匀的“文本污点”。

想想如何在(物理)小说和字典中显示文本。字典通常显示在两列中。因为它很重要,它使读者可以更好地关注正在阅读的内容。保留小说中的所有单词不是那么重要,也没有那么困难,因为我们假设读者已经对故事感兴趣了。

简而言之:如果一次只获得很少的信息,则人类的注意力跨度较差,并且可以更好地保持专注。

0
ecc

它还取决于内容类型,其大小以及用户与屏幕的距离。

对于视频,带有大照片或演示文稿的仪表板-全屏显示是最佳选择。

对于文本内容和中小型图片,至关重要的是要考虑舒适的感知范围。

对于距坐姿使用者50至65厘米(20至26英寸)距离的普通PC或笔记本,无需从左至右移动眼睛,舒适的感知范围将有多大?

眼睛太贵重,很快就会疲劳,因此人们倾向于固定从2D运动到1D运动的较大自由度,并垂直滚动页面并使眼睛保持固定位置。

垂直滚动页面使人们更容易,因为从左到右来回移动眼睛,并重新固定当前/下一个内容的垂直位置。如果某些内容放置在主要感知范围之外,则可能会丢失。

结果,页面的整体视觉印象可能会受到影响。

0
Doc