如果你应对的是个小型网站,常日只有几个页面的那种,可以考虑利用单页设计,看看它是否能简化项目,对用户更加友好。
连续阅读,你将理解它的益处,何时利用(或不该利用),还有一些你该遵照的绝佳老例。

单页设计的益处

很显然,单页设计并非所有项目的空想选择。
但如果可能的话,有一大堆情由利用它。

直不雅观易用

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

个人单页html单页网站设计指南 SQL

完备不用担心用户身陷多层导航中,无休止地探求他们所要的东西。
如果页面上有多个部分,页头或其他导航链接常日很有帮助,不过纵然没有它们,网站仍旧是可用的。

掩护起来更快速、更大略

这点并非既成事实,编码良好的单页网站,或许编写起来比多页网站更快。
设计过程有时可以花更少的韶光,只管这取决于单页网站的繁芜程度。

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

掩护也更大略。
当你只须要处理一个页面,掩护事情就大大简化了,只要网站本身编码良好。

它迫使你进行简化

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

更具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设计师,关注互联网,关注科技。
现居杭州,与小伙伴们正在创业途中。
或许不是一名精良的设计师,至少是个快乐的设计师。