单页网站设计风潮是怎么回事?


10

我已经看到大量网站将所有内容都放在一个页面上,例如本网站。甚至我在Smashing Magazine上看到的某些列表上的站点都这样做(这样的站点,似乎有一百个站点,其中大多数都使用它)。

作为一名程序员,这种风格使我感到厌烦(出于多种原因,主要是技术原因,其中包括维护,SEO,加载时间等),但更重要的是,我很好奇它为什么如此流行设计师从什么开始?


2
哇!我还没有看到-但是我真的很讨厌。
Farray 2011年

在第一个链接中的效果称为视差。少数网站采用时尚的方式(例如最著名的Nike Better World),不可避免地导致一群人说“我想要一个”,却没有考虑是否适合自己的情况。如果有合理的理由要固定主题范围内许多内容的上下阅读顺序,并且有良好的跳转链接导航辅助功能,则可以使用。
user56reinstatemonica8'9

Answers:


9

有两个单独的趋势。

首先是拥有简单网站的趋势。如果这是一个小册子网站,则可能不需要四个单独的页面。滚动页面更易于使用,浏览和维护。许多iPhone应用程序站点都使用此模型。像许多小型企业一样。许多站点都可以从中受益。

另一个趋势是Flash开发人员最终发现HTML,jQuery和AJAX,并且仍在考虑旧的Flash模式“一个文件=一个站点”。这与第一个趋势不同,因为这是一个大型站点,其中很多内容被压缩到一页数据/交互中。如您所述,此方法具有各种缺点,尽管它们可以用正确的代码克服(确保URL更改/可添加书签,Google可以浏览内容,通过AJAX管理加载时间等)。


3

我认为,一页纸背后的最佳想法之一就是它具有更多叙事方面的内容。我能想到的最好的例子是此页面:订婚/结婚邀请网站。这是一个令人难以置信的网站,它的工作有很多原因,其中一个原因是所有内容都很好地结合在一起。分布在一组页面上不会产生相同的影响。

最初是为了展示IE9制作的演示完全是关于讲故事的。几乎像一本图画书,但具有滚动而不是翻页的功能。因此,它确实是无缝且酷的。这对于制作商务网站并不是很实际,但是它突出了一页式氛围很有用的一个原因。

它也适用于内容不多的较小页面。当我结婚时,我所有的信息都放在一个页面上,因为没有足够的内容来保证一页一页地浏览。构建和维护一个页面站点更加容易,并且加载时间并不是真正的问题。

在业务方面,我认为这是一个更艰难的案例。我认为一个令人难忘的例子是Google推出Nexus手机时-他们是在一个页面上完成的。自从他们推出平板电脑并宣布了Q以来,现在已经不再像这样了,所以我无法链接,但是在一个地方看到所有内容真的很整洁。您可以减少点击次数,并创造更加身临其境的体验

我认为您会看到很多人这样做的例子,这些例子仅仅是为了增强他们的编码能力或尝试利用趋势。但这在设计领域一直存在。考虑到网站的用途时,请将其放在桌子上,并在适当的时候使用它!


2

这有一个好处(我只能想到其中的一个!),即如果要使用Ctrl+ 进行搜索F,则所有内容都在一页上,因此您可以一次搜索整个网站(假设内容是可搜索的) 。

我认为,这在某种程度上源于“不要让用户要求更多内容-只是将内容提供给他们”的概念。像Google,Twitter等一样,当您向下滚动时会自动给出更多结果。

值得一看的是Aza Raskin在2008年发表的GoogleTech演讲“不要让我点击”

整个谈话非常有趣,但此处的相关内容从29分钟开始。在这里,他对Firefox进行了黑客攻击,以便您将所有浏览器选项卡都放在一个连续的垂直滚动页面上。

我想知道这是否是您现在看到的内容的先驱。


1

两个词:用户体验。

如果内容简单明了,基本的投资组合网站不应要求用户单击几个页面来查看他们所提供的内容。

更具体地说,号召性用语是单一的。当网站的目标是:“雇用我”时,如果网站地图不必要地复杂,则该网站可能适得其反。

编辑:下面的一些例子...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/


2
如果所有人都可以向下滚动,我会对此表示更多同意,但这既不是其一般功能也不是其意图。几个滚动到一边,许多根本没有显示可滚动的证据,实际上,它们被设计为看起来像多页,从而使您的理论无所适从。
Shauna

Shauna,尽管我熟悉水平滚动的网站,但不熟悉您所指的其他网站。但是,我可以指出的是我正在谈论的那些问题中的一半。(请参见上面的编辑)
Joel Glovier 2011年

1

从SEO角度来看,一页的网站设计是一种时尚。

这可能会破坏您的SEO性能,尤其是当您在竞争激烈的商业背景中工作时。我知道平面设计师很少考虑到这一点,另一方面,客户对SEO的了解不足,但是如果您向SEO专家咨询,他们会说相同的话。

我的小费?请您的SEO专家进行关键字研究,并概述您的网站结构。

您可以在Search Engine Land上了解更多信息,这些人非常了解SEO;)https://searchengineland.com/single-page-websites-seo-182506


0

看起来这是一种尝试,使所有内容都“超前”-这是普通短视观众停留的宝贵区域。各种可用性研究都表明了这一点,所以人们尝试将“重要”的东西放在那里。看起来这位设计师觉得“一切都那么重要”。


让我感到困惑的是,我所看到的这样做的站点数量。这里的碎杂志列表我提到,我放弃了它大约三分之一的一路下跌,因为他们是一个所有这样的:smashingmagazine.com/2011/04/19/...
绍纳

0

我认为这并不比使用最新的引人注目的技巧来吸引人们阅读网站更重要。

以@Shauna的链接文章中的Nike网站为例。老实说,跑鞋设计和这些跑鞋的广告还剩下很多创新吗?如果他们想要视差,则可以很容易地将该内容放置在小册子或Flash中。相反,由于新的导航方案,它们可以添加漂亮的视差效果,而不会带来Flash负担。

我什至会猜测Smashing Magazine网站上有HTML5 / CSS教程,该教程显示了如何执行此操作,从而产生了所示的网站。


否决票?是的,那很公平。这不是我最好的答案之一。当我写那封信时,我觉得我有点大打气。
菲利普·里根

耸耸肩我没有足够的代表在这个网站上投票,所以不是我。
Shauna

我给了它一个赞誉,以取消它,因为您似乎来自一个好地方;)
thomasrutter 2012年

0

我实际上认为您链接的第一项(漂移条)有一个很酷的因素:运动时看起来不错。

在我真正单击菜单链接之一之前,这对我没有任何意义,现在我看到动画是整个构想的唯一推动力。类似于老式的大力水手或迪斯尼卡通,这种老式的3面相机效果。

我认为该页面上的可滚动性要么是错误,要么是他们无法摆脱的功能。


0

一个问题是它可能会受到客户的欢迎!这些站点可以追溯到新发布产品的闪存微型站点的时代,视差目前似乎正在完成这项工作。对于产品微型网站,我认为它们很好,对于实际上具有内容的网站,它们绝对不适合。我认为另一件事是,设计师喜欢展示他们的最新信息并且“与时俱进”,拥有流行的新时尚技术的网站看起来会很有益处。以上所有内容都覆盖了类似站点中的Internet。


0

我认为您在标题中几乎回答了您的问题-也就是说,这是一种时尚。

就像几年前出现Javascript(然后是AJAX)并且人们在用它做各种花哨的事情一样,对Jquery和CSS 2/3的更好支持以及浏览器中更好的渲染速度刺激了新一轮的新尝试。布置由于某些较旧的浏览器而在过去可能不太实用的网站。

但是,就像CSS,Javascript和AJAX一样,时尚将逐渐成熟和成熟,并随着时间的推移变得更加磨练,令人愉悦和有用。 您的第一个示例是令人发指的滚动混乱滚动(如果您从一开始就按“图库”),就很容易引起头痛。以我的拙见,它已经走得太远了,而且还不够流畅,无法证明与正常人分开是正确的。这并不意味着所有使用类似技术的网站都是不好的。

设计师必须尝试使用​​新技术做事的新方法,这一点很重要。我暂时不会建议不要尝试这种方法。但这就是它-实验。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.