王尘宇

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

若是你应对的是个小型网站，通常只有几个页面的那种，可以思量使用单页设计，看看它是否能简化项目，对用户加倍友好。继续阅读，你将领会它的益处，何时使用（或不应使用），另有一些你该遵照的绝佳老例。

单页设计的益处

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

直观易用

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

完全不用忧郁用户身陷多层导航中，无休止地寻找他们所要的器械。若是页面上有多个部门，页头或其他导航链接通常很有辅助，不外纵然没有它们，网站仍然是可用的。

维护起来更快速、更简朴

这点并非既成事实，编码优越的单页网站，或许编写起来比多页网站更快。设计历程有时可以花更少的时间，只管这取决于单页网站的重大水平。

一旦你脑海中有基本的结构，单页网站还能行使某些特定的设计约束来加快进程。尤其较之于多页网站而言，单页网站各个部门要保持无缝衔接。若是你已经明确哪些能做哪些不能，这类约束简直能加速页面开发。

维护也更简朴。当你只需要处置一个页面，维护事情就大大简化了，只要网站自己编码优越。

它迫使你举行简化

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

更具SEO潜力

高质量的站内链接，是网站在搜索引擎中的显示的主要组成部门。只管搜索引擎并不是许多网站必须的最大流量源，它们仍然主要。

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

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

单页网站往往从叙事角度出发，这点多页网站可不善于。这可以促进转换，引发用户接纳行动。

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

易于组织

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

削减带宽占用

只管不像早年，对服务器而言已经不成问题，不外想想近年来有若干用户通过移动装备接见你的网站。削减网站的带宽占用，会赢得流量有限的用户的感谢。

祛除了移动版网站

固然，响应式设计不只限于单页网站。但纵然采用了响应式设计，网站越重大，让它顺应小屏幕照样愈发难题。单页网站并不重大，这是一定的。运用响应式设计总体来说更容易。简化导航和类似改变，也更容易成就适用于小屏幕的设计。

要不要用视觉差转动？

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

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

若是要使用视觉差转动，还要思量一件事，使用Javascript照样纯CSS手艺来实现。关于这两个选择，请参见资源部门领会更多信息。

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

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

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

单页网站的另一个普遍案例，就是公布预告页面。它们通常是单页网站，带有新闻邮件的注册表单。多数情形下，公布预告时代面向民众的信息很容易组织在一个页面上，以是，设计这些页面时优先思量这种气概是很合理的。

产物单一的电商网站，也是单页网站显示优异的领域。若是你只卖一种产物，无论它是实体或是虚拟的，何须劳烦使用多个页面呢？一个简朴的单页网站才是更好的销售工具。

可能你以为更重大的电商网站不适适用单页网站，但它仍然可行。固然，有十多种产物的网站中我会制止使用，不外单张页面也足以容易支持一个简朴的在线商铺，通过弹出窗口来承载产物详情和支付流程。

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

混合型网站

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

网站Dang amp; 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提供怪异的网站和模版聚集，供你下载或购置。

结论

对种种网站来说，单页设计都是异常棒的选择。只管它们不是小型网站的唯一设计方案，对许多项目而言它都是值得思量的。思索使用单页设计的理由，然后也思索不用的理由，再做决议。

(责任编辑：网络)