郑州网站设计：设计新的折叠——网页设计后监测_极简慕枫

郑州网站设计长期以来，设计“折叠”一直是许多网页设计师的首要任务，但是有这么多设备能够显示您的网站，您到底知道它在哪里？我们应该担心吗？本文询问“折叠”实际上有多重要，正在发挥的变量，改变浏览习惯以及您可以采取的措施。最后，折叠之死在我们身上！

折叠的死亡

浏览万维网不再是局限于台式计算机的任务。移动浏览似乎日益增加，并且诸如可用于因特网的电视之类的更多设备变得容易获得。布兰登在他的年度网络大趋势报道中首次提到它，网页设计趋势：2011年版 ......他称之为“折叠之死”，终于在我们身上了。

但这究竟意味着什么？

因为人们观看网络的传统“屏幕”经历了各种各样的爆炸......我们再也不能指望网络冲浪者能够接近19英寸显示器，分辨率介于1024×768和1280×700之间。如今的屏幕有各种形状和尺寸，从iPhone（和小型手机）到60英寸高清电视。这不仅仅是分辨率可以变化很大; 屏幕的宽高比（即使在与iPhone相同的设备上）也会随着手腕的轻弹而改变。当然，网站设计师总是被建议保持网站最重要的信息靠近顶部，但是有很多新的网络浏览者查看网页的方式，内容必须高于其中的定义高度。

在我们超越自己之前，让我们回到旧学校，开始这篇文章......

简介：旧折叠

“放置大胆的介绍，基本信息，诱人的图像和号召性用语的理想区域是最重要的......”

如果你有任何平面设计教育，你可能会熟悉“首屏 ”一词。如果没有，让我们花一点时间来解释一下。

该术语首先用于指传统媒体，准确的报纸。我们的想法是，报纸经常被折叠起来，而且“首页”区域将是读者看到的第一个区域，因此它是一个突出而重要的位置。引人注目的标题和引人注目的图像经常被展示以吸引读者的注意力。

当它在过去的90年代流行时，这句话自然转移到网页设计领域。它或多或少是相同的概念，除了折叠之上的区域是用户可以在不滚动的情况下立即看到的区域（不是那么吸引人，对吧？）。该区域是放置大胆介绍，基本信息，诱人图像和号召性用语元素的理想区域。它也是任何广告的首选空间。

折叠上方的区域是网页设计的顶部，用户可以立即看到而无需滚动。

上面区域的重要性似乎得到了网页设计中常见的“五秒规则”的支持; 表示用户在访问的前五秒内对网站进行判断。可用性专家雅各布·尼尔森（Jakob Nielsen）也建议用户花费高达80％的时间查看首屏信息。

570,690和600像素的三条传统折叠线显示在Webdesigntuts +网站上（按比例缩小以适应帖子）。

过去十年中“折叠”的重要性在其历史背景下不能过分强调......许多设计工作室和营销机构都在讨论激烈争论的问题。花费在市场数据上的大量资金用于预测广告的最佳位置，整个设计被抛到了窗外，因为他们没有最大限度地利用“高于折叠”的空间。在其重要性的高度上，全能折叠被定义为570,590和600像素的三条水平线之一。

低于600像素的一切都是无关紧要的，二线内容......不值得一个有尊严的网页设计师关注自己的努力。

阿福。

现在，在这一点上，你们当中有些人可能会思考甚至大喊（考虑到这个主题似乎引起的辩论的数量），“折叠”是无关紧要的，任何对它的讨论都应该局限于历史书籍。网页设计师被限制在屏幕顶部的一小部分这一概念是荒谬的。我们希望所有网络用户都能滚动，我们可以自由地表达自己，并在尽可能多的空间内创建设计。有些人甚至在展示人们愿意滚动时非常有创意。

毫无疑问，网页设计师和他们的客户之间就“折叠”的重要性发生了很多争论，这可能导致了它的声誉有些不好。一个客户，高估了折叠的重要性，可能会要求所有东西和厨房水槽被挤压并塞进相对较小的空间，网页设计师将感到沮丧，他们无法展示他们的位置，对齐和微妙使用白色的技能空间。

与许多其他设计方面一样，这个问题的关键是实现平衡。显然，将自己限制在屏幕的一小部分会限制你的创造力和设计选择。另一方面，完全忽视'折叠'的想法将是一个错误，你将错过一个潜在的强大的设计技术，我们将在下面看到。

行动中的折叠

制作精美的Kaleidoscope应用程序网站是设计“折叠”的绝佳范例。大标题，介绍性段落，引人注目的图像和号召性用语元素都可以立即显示并可供用户使用。请注意“了解更多”标题下的补充信息如何落在截止点之下。本网站的设计中明确考虑了“折叠”，但向下滚动将显示大量信息和更多详细的设计元素。很明显，该网站的设计者仍然期望用户滚动。

您会发现许多大型网站都实现了类似的设计模式。第一印象的重要性得到了认可，但是更大的区域被充分利用来讲述故事并传达他们需要的信息。“折叠上方”区域通常用于引导和引导用户进一步向下到页面以及设计者希望用户看到的区域。能够吸引用户的注意力，确保他们能够留在网站上并实际寻找新的信息和内容，这确实是一项重要的技能。

在网站设计的顶部附近包含关键信息和号召性用语材料永远是第二天性......但是教条地试图挤压内容以上的内容不再是应该链接你的设计的策略。

但是，如果您亲自访问Kaleidoscope网站，您很可能会有一个不同的视角。您可能会看到更多或更少的网站 - 这是每个网页设计师面临的问题。如果您不知道任何特定访客的位置，您如何设计折叠？有许多不同的因素结合起来确定“折叠区域”区域的物理尺寸。

“新”折叠的问题

Web设计师习惯于不断考虑使用浏览器进行设计。许多怪癖和不一致使我们多年来感到沮丧，他们也在这个难题中发挥作用。每个浏览器将占用不同比例的屏幕，具体取决于浏览器UI的大小和任何其他工具栏。现代浏览器的趋势确实似乎是积极的，因为它们似乎比以前占用更少的空间。Google的Chrome，Safari和Internet Explorer 9的开发人员已经意识到，当用户几乎没有分散网站本身的注意力时，会有更好的浏览体验。

今天，还有如此众多的显示器尺寸和屏幕分辨率组合，它证明几乎不可能实现“一刀切”的网页设计。许多年前，已确定1024x768是最常见的屏幕分辨率，这似乎是大多数设计师仍然设计的。仅WebDesigntuts的分辨率统计数据就证明了设计师的问题规模。

让我们快速浏览一下Webdesigntuts +网站的浏览器分辨率统计数据，以便进行快速案例研究：

Webdesigntuts +的分辨率统计数据显示出比任何单一折叠线都要考虑的更广泛的分辨率。

“你无法保证他们完全使用传统的显示器屏幕。”

该图显示目前正在使用各种各样的分辨率，大部分使用分布在六种不同的尺寸上。正如您所看到的，1024x768屏幕分辨率现在只占一小部分，尽管由于IPad决定使用此分辨率，最近可能会增加。

如果还不够，你真的不知道网络用户有什么尺寸的显示器，现在你不能保证他们使用传统的显示器屏幕。移动浏览的时代非常真实，我们目前正在使用许多不同的设备。让我们重新审视Webdesigntuts的分析统计数据：

正如您所看到的，正在使用许多不同的操作系统，而Android等平台可以集成到各种设备中。基于平板电脑的浏览（随着iPad的发布而爆炸式增长）只会随着许多不同尺寸的平板电脑的发布而变得更受欢迎。各种移动设备也为网页设计师带来了独特的挑战，因为它们可以用于横向或纵向模式 - 这一决定将极大地改变'折叠'线的位置。许多网站现在正努力为Ipad等设备进行“优化”。

新折叠设计策略

因此，对于所有这些变量，如何才能知道“折叠”在哪里？

事实是你做不到。由于存在如此多的变量，几乎不可能准确地知道折叠线的位置。快进只需一两年，我们可能会看到更多的屏幕环境变化。这一切只是意味着以前的600px设计建议不再能够安全地依赖。看起来追求像素完美只会让你感到沮丧。

移动设备在Webdesigntuts上为读者细分。

一种更明智的方法是设计一般的，基于比率的折叠，将景观和肖像导向的浏览考虑在内......

这不仅需要设计传统的折叠，还需要在页面下方进行第二次折叠。这样的折叠不需要传统的设计，但对使用移动设备和平板电脑的人来说会有额外的好处。通过使用近似比率而不是依赖于固定像素测量，虽然它肯定不太准确，但您仍然应该相对安全。

我们认为，关键在于不要过分关注“折叠”本身，而是试图将您的核心信息保持在“安全区”内，同时保持整体的质量设计。理想情况下，您应该在移动设备上测试设计，但如果并非总是可行，则可以使用许多模拟器。

适应各种监视器的最佳设计策略将是那些在整个设计中具有既定层次感的设计策略。这意味着站点的核心消息应该从该站点的任何“扩展”中明显看出 - 更详细的信息和内容应该是可读的，因为它在页面上的重要性。

排版，色彩理论，布局和格式塔等其他设计原则在这方面也发挥着重要作用，因此网页设计师可以很好地完善这些已建立的实践。事实上，“传统折叠的死亡”为设计师提供的一个重大新机会可能是回归核心设计原则......留下严谨，教条和荒谬的布局概念，支持古老的设计理论。

更大的图片

来自W3学校网站的数据。

“...在研究中，他们发现76％的用户滚动，尽管屏幕高度很高，但仍有很多用户滚动到底部。”

Webdesigntuts网站的统计数据有助于查看（主要是因为我们有相关的详细数据），但它肯定不代表整个互联网，对吧？即使我们从W3学校官方网站查看官方浏览器显示统计数据，也会出现类似的趋势。

当然，来自这两个网站的数据并不代表整个互联网浏览受众...但是通过查看墙上的文字，很容易确定这不仅仅是一个边缘事件，它是一种新的模式那是新兴的。将此与新设备的销售和显示器行业的发展相结合，对于任何想要消除传统折叠神话的人来说，它都是坚如磐石的弹药。

此外，已经进行了许多研究，揭示了折叠的重要性，即使它确实存在也是如此。结论：即使您使用固定的显示器尺寸（即：1024 x 768），网上冲浪的人不仅可以看到折叠......他们经常将大部分时间花在那里！

结论

郑州网站设计我们在本文中已经讨论了很多，所以让我们总结一些关键点。

在现代网页设计方面，传统的“折叠”设计概念似乎有些过时。我们已经看到，变量的组合和许多人的浏览方法的变化意味着不能安全地建立“折叠”线的固定位置。网络用户也非常愿意滚动; 特别是对于诸如IPad之类的多点触摸设备，这使得任务非常直观。

然而，这并不意味着应该完全忽视'折叠'。“折叠”仍然可以成为任何设计中的有效元素。毫无疑问，第一印象确实在网页设计中占有一席之地，而且这个空间不仅可以用来捕捉你的观众，还可以在网页的下方吸引他们。保留此区域以获取最重要的信息，同时向您的客户保证访问者仍会在页面的下方看到该段落。

由于没有迹象表明移动浏览速度正在减慢，因此也可以为使用面向纵向设备进行浏览的人设计第二条“折叠”线。它不应该以任何方式损害您的设计，只会给那些使用此类设备的人带来额外的好处。

郑州网站设计你们有什么感想？你还在尝试设计折叠吗？我们的设计师是否已经意识到这些变化，是否是我们需要接受教育的客户？