我们都在浏览网页时遇到过它们，其中许多例子都令人惊叹，单页网站是现代网络的典范，其中所有需要说明的东西都可以放在一个文档中。虽然单页布局选项可能导致无限滚动的超大文档，但一系列使用现代标准和技术(如CSS3和Ajax)的聪明机制已经出现，提供了一种简单地根据需要提供信息的方法。本文针对的是使用HTML、CSS和JavaScript的单页网站;我们跳过了只使用flash的网站的讨论，从技术上讲，这些网站也可以归为单页网站。
一次就够了
这是可以理解的，并不是每一种类型的网站都适合“一页统治所有”，然而，这是一个普遍的趋势，特别是在投资组合的网站展示了某些网站可以从一个简单的，但仍然是多方面的，单一的页面中受益。一个网站可以用一个页面创建的想法似乎很疯狂，但随着我们的行业转向提倡简单易用，单页网页设计已经成为一个可行和有效的选择。
CSS Zen Garden是一个带有多层有趣位的单一页面的经典示例。
趋势与磨难
虽然传统的多页设计总是有它的一席之地，但单页网站也有一些优势，可以为你自己的项目提供一些潜在的用途。
构建一个完全独立的站点的能力需要一点时间来适应，需要更多的思考和计划。你必须回答的问题有:
- 是单页满足项目要求还是多页更好?
- 你如何组织内容?
- 导航是如何工作的?
- 我需要哪些内容，哪些可以省略?
单页网站的好处
单页设计比多页网站有以下优点:
- 不刷新页面导航站点时(内容要么在页面中，要么使用Ajax加载)
- 用户体验可以得到改善，因为在内容中导航快而且反应更迅速而不是去一个新的网页
- 更易于维护因为你只需要维护一个网页
- 你可以设计质胜于量-不必为不同类型的网站内容设计多个页面布局，你可以专注于一个可靠和高质量的设计
- 你的谷歌网页排名适用于整个站点
- 更高的核心内容密度搜索引擎蜘蛛
- 区别从大多数其他网站;单页网站不太常见，因此会给你的网站访问者留下印象(这就是为什么他们会留下印象)在投资组合网站上很受欢迎）
- 简单的解决方案简单的“宣传册”网站服务于一个产品(如iPhone应用程序)或一个目的(如
设计师的作品)
- 为web应用程序设计的首选解决方案移动网络
页面加载后，就没有其他东西要下载了。
单页网站的缺点
单页设计与多页网站相比有以下缺点:
- 潜在的大文件大小页面的
- 的要求脚本或CSS3支持如果你想脱颖而出
- 跨栏Through元素会变得更棘手(对于可访问性而言)，因为一个页面上可能有很多内容(尽管对于使用标题和其他最佳实践的结构良好的标记来说，这不是一个大问题)
- 生产设计更多耗时因为它涉及更多的思考和创造力，能够把所有东西都放在一个页面上，并设计出一个伟大的交互设计
- 这一页可以写很多加载时间更长如果你有很多内容
文件大小是一个需要解决的重要问题，尤其是在使用Flash时。事实是，无论何时实现特定的设计模式，都有可能无法让每个人都满意。虽然单页网站可以做到100%的可访问性和高可用性，但在某些情况下，单页网站对你来说并不是一个好的选择。例如，像亚马逊这样的电子商务网站无法成功地完成一个页面的网页设计，因为它有大量的内容——这没关系，因为当这些类型的网站有多个页面时效果会更好。
生产理论
在我们看一些可爱的单页设计之前，有必要花点时间解释一下用于生成这样一个网站的各种机制。你的重点应该是保持文件大小尽可能小，并以一种周到的方式呈现和结构你的网页。想想用户流程和交互设计——用户如何在页面的各个部分之间移动?
这里有一些用于单页网站的技巧。重要的是要注意它们并不相互排斥，所以您可能会发现自己将它们组合使用。
手动滚动
传统单页设计实现的第一种机制是在页面上显示所有内容，这些内容有逻辑地结构化并按节布局。
人们浏览内容的方式很简单，就是使用网页浏览器的本地滚动条。虽然这种方法实现起来很简单，因为它只是一个普通的网页，没有特殊的交互，但它也可能是最无聊的选项。
不需要花哨效果的网站可以很容易地制作出简单而漂亮的单页布局。
CSS3交互
下一个在单页网站上导航内容的机制是CSS3。使用最新版本的CSS规范，超越现有CSS2选择器的能力允许更独特的单页面体验。最值得注意的是，你可以做有趣的，互动的事情通过使用CSS的动画转换属性来处理内容:目标而且:检查伪类。例如，使用的能力目标:伪类(结合锚的链接)给你一个选项，使目标部分不同的颜色或给它一个不同的背景图像。
使用CSS3伪选择器，我们可以形成一个强大的跨浏览器“嵌板”系统。
JavaScript
最后，我们有了优秀的老JavaScript，它自web早期以来就为我们提供了广泛的功能。随着web开发JS框架的流行jQuery在美国，替换页面上现有内容的能力从未如此简单，随着Ajax的兴起，根据需要调用内容在消除页面刷新需求方面具有更大的潜力。但是请注意，远程加载的内容存在可访问性和SEO问题。
你也可以使用JavaScript使用动画滚动到网页的各个部分——这是手动滚动和使用的一个进步锚的链接．例如，查看jQuery ScrollTo插件．你可以通过Laco Janic的作品集看到流畅的滚动(点击主要导航链接，如“身份&打印”或“关于”)。
虽然对于没有脚本编写知识的可怜人来说这不是一个选择，但使用JavaScript肯定是这三种方法中最灵活和最健壮的方法。
jQuery在其他脚本框架中提供了易于实现的内容交换。
展示单页网页设计
现在我们已经完成了设计人员和开发人员创建单页网站的一般方法，值得看看一些伟大的单页网页设计以获得灵感。也许这些设计会给你一些想法和灵感!
相机+
Webdots
梨托管
Playmation
Enrichmint
罗勒Gloo
Fran-boot
牛奶和蜂蜜
启动列表
埃里克•约翰逊
你好,的故事
沙发制作
Eclectique设计
可怕的美元
Elementic交互
Richard Turnbull设计
James Lai创意
蒂姆·云顿
10 20概念
鱼市场
前段录像
银背大猩猩
设计师Zee
泰勒目的地
亚伦加藤
乔妮Korpi
莫莉严
Lataka
杰森·里德
Josh Minnich
单页网站适合你吗?
网络的伟大之处在于它在不断地发展，从原则上讲，我们构建设计的方式将根据用户的口味和需求的变化来塑造自己。对轻量级、紧凑、自包含的网站和web应用程序的需求是由于移动网络只会增加单页网站的部署。所有单页布局都可以看起来完全独特。
虽然不是每个人都喜欢，但它们在你的网页设计项目中是非常值得考虑的。
