页设计，是一项处理小型网站的绝佳技巧，甚至有些网站你可能认为一张页面搞不定，也同样适用。从易于维护，到减少带宽占用，使用单页网站的好处不胜枚举。

假如你应对的是个小型网站，通常只有几个页面的那种，可以考虑使用单页设计，看看它是否能简化项目，对用户更加友好。继续阅读，你将了解它的益处，何时使用（或不该使用），还有一些你该遵循的绝佳惯例。

单页设计的益处

很显然，单页设计并非所有项目的理想选择。但假如可能的话，有一大堆理由使用它。

直观易用

默认情况下，用户要浏览单页网站，只要知道如何滚动就行。你也可以加入箭头或其他浏览暗示，但除了少数例外，其实滚动就足以让用户在各部分间穿行。

完全不用担心用户身陷多层导航中，无休止地寻找他们所要的东西。如果页面上有多个部分，页头或其他导航链接通常很有帮助，不过即使没有它们，网站仍然是可用的。

维护起来更快速、更简单

这点并非既成事实，编码良好的单页网站，或许编写起来比多页网站更快。设计过程有时可以花更少的时间，尽管这取决于单页网站的复杂程度。

一旦你脑海中有基本的布局，单页网站还能利用某些特定的设计约束来加快进程。尤其较之于多页网站而言，单页网站各个部分要保持无缝衔接。如果你已经明确哪些能做哪些不能，这类约束的确能加速页面开发。

维护也更简单。当你只需要处理一个页面，维护工作就大大简化了，只要网站本身编码良好。

它迫使你进行简化

这条构筑了上面一点。当你只有一个页面要处理，你不得不把一切简化为它们最基本的形态。不再需要一页页毫无用处的市场宣传。你必须直截了当、开门见山。

更具SEO潜力

高质量的站内链接，是网站在搜索引擎中的表现的重要组成部分。尽管搜索引擎并不是很多网站必须的最大流量源，它们仍然重要。

单页网站的链接总是指向自己。搜索引擎抓取时，这可以增加网站的权重。

叙事的手法促使用户有所行动

单页网站往往从叙事角度出发，这点多页网站可不擅长。这可以促进转换，激发用户采取行动。

人们习惯于聆听故事，不论在线上还是线下，所以这点有着显而易见的用户体验优势。我们儿时就开始阅读和听故事，于我们而言，这是自然而然的事情。

易于组织

再也不需要组织一列列数不清的页面和子页面了。无需多虑每个页面是父级还是子级。也没有庞杂的导航菜单和子菜单。所有都在一页上。是要包含导航链接，还是让用户滚动，这取决于你，就看是否有助于提升用户体验。网站如果有多个页面，是绝对不会这么考虑的。

减少带宽占用

尽管不像从前，对服务器而言已经不成问题，不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用，会赢得流量有限的用户的感激。

消灭了移动版网站

当然，响应式设计不只限于单页网站。但即使采用了响应式设计，网站越复杂，让它适应小屏幕还是愈发困难。单页网站并不复杂，这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变，也更容易成就适用于小屏幕的设计。

要不要用视觉差滚动？

视觉差滚动可能是互联网中发生过的最美妙的事情，也可能是个被滥用的噱头，来蹂躏我们浏览器，这取决于你怎么看。无论你站在哪一方，它似乎近期并不会消失。

就我而言，我希望有时间和地方来实现视觉差滚动。这个效果对于某些单页网站大有裨益，而对于另一些则是噱头，甚至更糟：难以使用。关键是要明确一点，你使用视觉差滚动真的能提升网站的易用性吗，还是因为你觉得它看起来很酷？

如果要使用视觉差滚动，还要考虑一件事，使用Javascript还是纯CSS技术来实现。关于这两个选择，请参见资源部分了解更多信息。

何时使用单页网站，何时不用

虽然有单页网站大有益处，但它们也不是完美的全尺寸适配方案。虽然很多时候单页网站比多页网站更合理，但也有很多时候不应该使用单页设计。

总之，假如你的网站只有少数页面，单页网站或许是最佳选择。将一切浓缩在一个页面上，能让网站整体具有更现代的外观，如果内容精简，那么单页网站可以让它看起来更丰富。

单页网站的另一个普遍案例，就是发布预告页面。它们通常是单页网站，带有新闻邮件的注册表单。多数情况下，发布预告期间面向大众的信息很容易组织在一个页面上，所以，设计这些页面时优先考虑这种风格是很合理的。

产品单一的电商网站，也是单页网站表现优秀的领域。如果你只卖一种产品，无论它是实体或是虚拟的，何必劳烦使用多个页面呢？一个简单的单页网站才是更好的销售工具。

可能你觉得更复杂的电商网站不适合用单页网站，但它仍然可行。当然，有十多种产品的网站中我会避免使用，不过单张页面也足以轻易支撑一个简单的在线商店，通过弹出窗口来承载产品详情和支付流程。

不该使用单页网站的情况十分明确：庞大、复杂，或必须保有海量信息的网站不适合做成单页网站。在这些情况下，使用相对传统的网站结构更加明智。

混合型网站

虽然有大量的单页网站存在，但也有很多混合型网站。它们给人印象是个单页网站，但通过ajax、弹出窗和类似技术，它们事实上包含了多页内容。

网站Dang & Blast就是这方面的绝佳案例。

如果无法让所有东西彻底融入单个页面，这会是和很好的解决方案。

说到单页网站，某些站点用了某种“取巧”的办法。它们的主站是个单页网站，但在其他域名下也有个博客（有时是Tumblr或托管在WordPress.com的网站）。这么做没有问题，它能突出主站的信息，也不用舍弃博客带来的好处。

单页网站的绝佳惯例

优秀设计的多数准则，在单页网站中仍然适用，其实也适用于任何网站设计。还有一些额外的东西需要牢记，其中有些之前已经提到了。

保持简单

设计如果对于你试图表现的内容而言过于复杂，对你和你的用户都没有任何好处。相反，要尽可能简化设计和内容，还能表达出你要的信息。

导航链接还是有帮助的

正因为用户可以通过滚动来浏览你的网站，但并不意味着这是最友好的方式。如果你的网站很长，有很多部分，这点尤其正确。除非有特别好的理由，还是应该加入直达特定部分的链接，来使你的网站更加友好。

分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块，用户才能更容易找到他们所需。

让所有的背景都有所作为

单页网站常常有大幅背景。当然，有时候这些背景很朴素，或带有平铺纹理；不过也有单页网站利用所有的空间来挥洒创意。前面提到了，这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片，如果这样做与内容更相符的话。

单页网站的资源

单页网站的资源成百上千，还包括模版；我们这里重点关注表现突出的几个。

PureCSSParallax Scrolling：Keith Clark的这篇文章阐释了如何通过纯CSS打造视觉差滚动效果。如果你不想用JavaScript（或者不懂）的话，这是个很好的选择。

Skrollr：“为剩下的人准备的视觉差滚动”。这是个独一无二的库，适用于移动端和桌面。不需要jQuery，只有原生JavaScript。

Stellar.js：Stellar.js是另一个简单易用的视觉差滚动库。它提供了很多设置选项和iOS支持。

One Page Website Wireframes：如果你不确定如何构建你的网站，这个单页网站线框图集是很好的出发点。免费下载。这里还有第二集可供下载。

One Page Love：One Page Love是首屈一指的单页网站集合，里面有超过5000个网站案例，并且一直在更新。他们还主打大量模版和其他资源。

Start Bootstrap：Start Bootstrap集成了海量的免费单页网站Bootstrap主题。主题适合机构、自由职业者、作品集、着陆页等等。

One Page Love Templates：除了丰富的网站集合，One Page Love也提供免费和收费的模版。

One Page Mania：One Page Mania提供独特的网站和模版集合，供你下载或购买。

结论

对各种网站来说，单页设计都是非常棒的选择。尽管它们不是小型网站的唯一设计方案，对很多项目而言它都是值得考虑的。思考使用单页设计的理由，然后也思考不用的理由，再做决定。

译者：可乐橙；译文地址：http://colachan.com/post/3418

可乐橙，微信公众号：可乐橙（colachangreen）。UI/UX设计师，关注互联网，关注科技。现居杭州，与小伙伴们正在创业途中。或许不是一名优秀的设计师，至少是个快乐的设计师。

大家好，今天给大家带来一套比较不错的单页制作课程。

本套课程作者在9年多时间里，一直专注于单页网站制作、优化、推广和单页营销方面的研究，并带领一批学员通过单页网站销售产品，实现网上成功创业！

什么是手机版单页网站

手机版单页网站，是用Html5代码编写的纯静态独立页面网站，自动适应手机、台式电脑、平板电脑的用户屏幕观看，完美展现产品和项目内容，用户体验好。

在单页网站里面，可以添加文字、图片、视频、动画、客服系统、订单系统、分享系统、流量统计系统等等功能，使单页网站功能强大、内容丰富多彩！

本套“单页网站制作教程”，是由作者根据多年的实战经验总结，原创开发录制而成，教程系统全面、简单易学、上手快速，即使是0基础的新手朋友，也能快速学会。

手机版单页网站能做什么

1.产品展示

单页网站是一个独立的页面，不存在分散目标客户注意力的信息。页面简单直接，从头至尾展示产品信息。让目标客户最直观的的全方位了解你的产品，达到快速成交的目的。

2.服务展示

如果你有一技之长，想通过提供自己的技术服务来赚钱，只需要制作一个单页面，把自己当特长展示出来，留下联系方式，做好网站推广，就有客户主动找上门。

3.竞价推广

用竞价推广是当前大流量入口之一。竞价推广排名快，效果好，利润高。而竞价推广的落地页，全部用的自适应竞价单页面，自动适应手机和电脑用户屏幕，完美展示产品信息，

4.做信息流

信息流属于竞价推广的一种，是把广告信息展示在百度和360旗下相关联平台上面，访客点击信息流链接进入单页面，进行产品展示和客户转化，完成产品销售。

单页网站强大优势

1.制作超级简单

单页网站模板，可做任何编辑和排版。包括修改文字内容、更换图片、更换视频、修改背景颜色以及订单系统。只要会打字会做图片，就可以实现自己动手不求人，制作出精美的符合你要求的单页网站，实现销售产品网络赚钱的目的！

2.全方位展示产品

单页网站因为没有网站的固定框架和固定表格限制，也没有分散目标顾客注意力的信息。可以轻松的添加文案、图片、视频、见证和订单系统，全方位展示你的产品，达到快速成交的目的！

3.吸引目标客户注册

单页网站很容易吸引访客注意力，在页面上添加客户注册系统，通过设置免费赠品方式，很容易获得访客联系信息，方便后期对潜在客户进行后端培养和产品销售。

4.易被搜索引擎收录

因为单页网站，是精心设计和布局的，有着良好的用户体验和网站优化，更容易被搜索引擎搜录，带来好的排名！

5.单页网站安全性高

单页网站没有后台管理，如果有人想攻击你的单页，他只有攻陷整台服务器，才能拿到控制权。但是服务器都是放在专业的IDC机房，有高级防火墙和杀毒软件防护，还有专业的技术人员维护，难度可想而知。

6.单页网站管理方便

单页网站只有简单的文字信息、图片资料、视频和其他代码组成。即使网站程序坏了，恢复数据也就几分钟的事情。需要修改内容，只需要在电脑上面编辑完成，用FTP软件上传，覆盖掉前一个单页即可。

手机版单页制作教程介绍

手机版单页网站制作教程，包含“单页制作”和“单页优化”2部分视频内容，是由作者总结9年多建站实战经验，原创开发的高清视频课程。旨在帮助想用单页网站，在网上卖产品的朋友，实现网上赚钱的梦想！

本套手机版单页网站制作课程，共有21课时，通过精心排版、录制、剪辑，时间控制在15分钟左右，只讲干货不说废话。

单页网站制作视频，全部是高于720P高清视频，由浅入深、循序渐进讲解，简单易懂，即使零基础的朋友，都能轻轻松松学会单页网站制作。

想要学习的话，可以私聊视频内容！

言

单页应用（Single Page Application）越来越受web开发者欢迎，单页应用的体验可以模拟原生应用，一次开发，多端兼容。单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户体验的一种综合技术。

SEO

一直以来，搜索引擎优化（SEO）是开发者容易忽略的部分。SEO是针对搜索（Google、百度、雅虎搜索等）在技术细节上的优化，例如语义、搜索关键词与内容相关性、收录量、搜索排名等。SEO也是同行、市场竞争常用的的营销手段。Google、百度的搜索结果是重要的用户入口，腾讯云（www.qcloud.com）有30%左右的流量来自搜索引擎。因此SEO在品牌、营销、用户量的纬度是非常重要的基础能力。

那么单页应用与传统直出页面在SEO方面有哪些不同之处呢？

单页应用的优点

1. 更好的用户体验，让用户在web感受natvie的速度和流畅；
2. 经典MVC开发模式，前后端各负其责。
3. 一套Server API，多端使用（web、移动APP等）
4. 重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交；

对搜索引擎不友好

单页应用实际是把视图（View）渲染从Server交给浏览器，Server只提供JSON格式数据，视图和内容都是通过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容，需要有完整的HTML和内容，单页应用架构的站点，并不能很好的支持搜索。

如果站点在用户体验和搜索友好权衡时，如果我们做到更好的体验，也做到友好的搜索支持，既是一箭双雕。

URL中的哈希（#号）

单页应用只有一个页面，视图的变化通常是通过路由（route）来驱动，首先，我们先来谈一谈单页应用的URL中的#号，很多采用单元结构王皓咱的URL都出现了这个符号。

#号在浏览器的URL中是一个锚点，在当前页改变#号的参数，页面会跳转到锚点所在的位置，通过JavaScript我们可以获取到#号后的参数：

1 2 

location.hash // 获取URL hash location.hash = "#list" //改变URL hash

改变#号后的参数，页面并不会重载，于是大多数的单页架构网站，都在URL中采用#号来作为当前视图的URL地址，例如：

1 2 3 

example.com/#index //首页视图 example.com/#list //列表页视图 example.com/#list/1 //id为1的列表信息的视图

Backbone.js就是通过改变#号参数来组织视图，这里有一个demo可以很直观的体验URL的变化。

看过这个demo，你获取会发现很熟悉的符号#!，Twitter曾在URL使用这个标识。这个标识是Google提出。（AJAX 抓取：网站站长和开发人员指南1：

因为复杂的单页架构页面，对Google来说抓取比较困难，于是给开发者制定一个规范：

1. 网站提交sitemap给Google；
2. Google发现URL里有#!符号，例如example.com/#!/detail/1，于是Google开始抓取example.com/?_escaped_fragment_=/detail/1；

_escaped_fragment_这个参数是Google指定的命名，如果开发者希望把网站内容提交给Google，就必须通过这个参数生成静态页面。

根据上面的demo，我简单示例一下Google要抓取的页面的样子:

http://119.28.4.22/?escapedfragment_=/detail/1

如此以来，就需要Server通过生成静态的内容以便Google抓取。

以下将简单介绍，单页架构，爬虫访问根目录时如果配置Server端的路由。

判断爬虫

当Google访问119.28.4.22/#!/detail/1时，会自动转化成http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx为例：

1 2 3 

if ($args ~ _escaped_fragment_) { rewrite ^ /api; }

/api为后台服务的接口，已nodejs为例，代理设置如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 

upstream nodejs { server 127.0.0.1:3000; } location /api { proxy_set_header X-Request-URI $request_uri; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header Port $server_port; proxy_pass http://nodejs; proxy_redirect off; }

如此，我们便将Google的访问重写到/api这个接口，然后在Server的/api处理请求把静态内容输出即可。

sitemap

Gogole的这个规范，必须有sitemap支持，因为有可能单页架构的站点，索引页面也是JavaScript渲染的。提交sitemap时，不用关注_escaped_fragment_这个参数名，只提交带哈希符号的URL即可，例如：

1 2 3 

http://119.28.4.22/#!/detail/1 weekly 0.5

结语

技术潮流的步伐很快，单页应用，URL哈希处理也没渲染的方式实际上已经流行了很久，在国外很多用户数据较好的情况下，开发者会选择HTML5 History API的pushstate特性开发，在URL中抛弃#!。但是IE6、7等低端浏览器用户情况较多的网站，#能够很好的兼容。关于采用HTML5 History API来架构单页应用的方案，也欢迎讨论。

文章来源：腾讯isux