单页网站的展示

WebDesignerDepot员工 经过 WDD员工  |  2010年8月24日

在使用最少数量的页面设计网站时,单页设计可以是将站点分开的创新方法。

单页网站通常使用JavaScript和Flash,以及HTML和CSS在页面上适合更多内容,而不会增加负载时间。

当涉及到单页网站时,必须进行一些特殊考虑,以确保访问者可以返回页面的归属部分而不发出问题,并从任何一个部分导航到任何其他部分。这通常通过粘性标头或每个部分重复导航来实现。

以下网站是单页网站的所有优秀示例。他们’既可用和美观赏心悦目,并充分利用单页格式。

 

Roaaar.

Roaaar.网站包括一个“return to top”每个部分底部的链接,这使得访问者可以轻松返回标题中的导航。

Roaaar..

 

Ricardo Mestre的Duplos

Duplos站点采用不同的方法,将主要内容放在页面底部。导航将您进一步提升页面,而不是降低。

杜普洛斯

 

GRZEGORZ KOZAK.

这里的灯塔图案运行了页面的整个长度,从空间到地面到地面。横幅悬挂在灯塔上的窗户悬挂在窗户上返回导航所在页面的顶部。

GRZEGORZKOZAK.

 

万花筒

万花筒网站在网站的每个部分后面使用不同的背景图像和纹理。这将每个内容区域与彼此的内容区域区分开来。

万花筒

 

丹斯科顿

像这个类似的简短页面,内容尤其很好地工作。当您向下滚动页面时,导航停留在侧栏中。

丹斯科顿

 

Viktor Shvaiko.

本网站使用水平滑块加载新内容,通过其他内容滑动以访问您的页面’ve导航到。无论您的页面如何,导航栏都会停留在顶部’re on.

Viktorshvaiko

 

Jon跑步

像这样的简单的个人资料网站非常适合单页设计。图标和重点颜色对设计添加了更多的视觉兴趣,否则是非常中立的。

jonrundle.

 

杰森里德

使用手风琴效果显示新内容的内容在内容尚未工作’t太长了。所示的报头图像和灰色和橙色配色方案都使网站脱颖而出。

jasonreed.

 

发布型CC.

使用纹理和简单的插图使Tweet CC网站在视觉上吸引人’S也保持简单的单色方案。

Tweetcc.

 

PSD布局

提供直接服务的网站可以以单页格式特别良好工作。那里’没有提供和保持所有信息,在一页中提供并保持所有信息,使潜在客户可以轻松了解他们需要的东西。

psdlayout.

 

丝丝

丝丝网站可以简单地保持事物,并提供具有工具提示的额外信息。白色背景保持最低纲领派和大胆的图标增加了视觉兴趣。

丝丝

 

热门乐队

热门晶体网站采用排版,灰色和红色设计。标题是粘性的,保持页面在页面顶部。

hotmeteor.

 

Mia Makila.

Mia Makila.网站的比例不同于这里包含的大多数其他网站,使用更传统的3列设计。 JavaScript用于在每个类别中显示艺术品。

Miamakila.

 

Costas Theoharis.

本网站使用有趣的滑块效果,每个部分(头部,主要内容和页脚)彼此分开滑动。

Costastheoharis.

 

Javan Makhmali.

这里使用的网格设计是’T经常在单页设计中看到。但是,充满了很多空间,它很好地包括在非常简化的设计中包含许多不同的内容。

javanmakhma.

 

游戏队

这里的设计简单且直接,2列设计适用于页面上的更多内容而不使其看起来很重。

队伍ad.

 

豪尔赫·芬诺

豪尔赫·芬诺 ’S网站将重点放在设计上。导航不存在(滚动除外),联系信息包含在标题和页脚中。

JorgeFino.

 

莫莉yim.

这里’■另一个没有导航的网站。它’虽然,它保持了合理的长度’s not an issue.

莫莉

 

贾斯汀曾

这里的导航有点不同。而不是将带回到顶部的按钮或每个屏幕上的导航,每个项目和内容区域旁边包含按钮,以向上或向下屏幕。那里’还有顶部的导航栏,跳到每个主要部分。

Mepholio.

 

莫苏斯塔

临时网站是使用单页网站的好时机。此站点使用JavaScript为每个加载新内容“page” on the site.

莫苏斯塔

 

Chirag Solanki.

此站点上的导航将主导航和链接结合在每个部分的末尾,将访问者返回到页面顶部。图示的涂鸦将每个部分链接在一起,给出整个页面的连续性感。

Chiragjsolanki.

 

Deluge Studios.

Deluge Studios.网站的布局是这里最独特的特色之一。两列提供五个内容区域,全部与顶部导航相关联。包括较小的主要内容部分“sidebar”-Style列使得页面明显缩短。

德鲁布鲁斯

 

第5阶段工作室

第5阶段工作室网站短,没有导航。“Read more”链接滑出有关每个项目的更多信息,而其他内容保存在其中“sidebar”.

Stage5Studio.

 

smartcube..

smartcube..网站使用粘性标题始终使用屏幕上的导航。它还使用1-和2列布局的组合,具体取决于内容。

smartcube.

 

eclectique设计

这里的内容部分是由独特的背景纹理区分。排版在整个页面中将所有内容拉到一起,并且JavaScript用于显示其他产品而不占用更多空间。

eclectiquedesigns.

 

内部秘密到iPhone应用程序

这是此处特色的较长单页网站之一。它使用带有导航的粘性标题,使其容易从一个部分到任何其他部分。

iphoneAppsecrets.

 

杀死漏油

保持慈善网站,如此短暂,而且几乎肯定会增加捐赠的数量。粗体排版,图形图像和捐赠形式的底部都在一起工作。

killthespill.

 

艾米莉Whitesmith.

这里’■另一个站点在页面底部启动。点击“find out more”链接向上滚动页面到投资组合区域。模态窗口有每个织物的特写镜头。

EmilyWhitesMith.

 

传单

App网站非常适合单页设计,因为它们通常具有有限的内容,并且仅为屏幕截图或两个图像。

传单

 

Hayley Smith.

这里’另一个很长的页面。导航在每个部分的顶部重复,并且在滚动时,徽标幻灯片。

海莱斯史密斯

 

Conway Anderson.

Conway Anderson.网站使用滑块(用于约和联系信息)和模态窗口(用于工作)来显示内容。简单,基于网格的设计和单色配色方案保持简单且现代的观看。

Conwayanderson.

 

丹尼尔莫尔

丹尼尔莫尔’S站点简单,内容最小,没有导航。 2列设计在网站上组织不同类型的内容,并保持更短。

Danielmoir.

 

每天拿铁

预启动网站非常适合单页设计,如此显示。那里’没有足够的内容尚未证明多页网站。

Latteperday

 

蜂箱市场

这里’另一个更长的单页网站。明亮的黄色背景和蜜蜂插图将整个站点系在一起,导航在每个部分的顶部重复。

thebeehivemarket.

 

Rubidine.

Rubidine.网站使用粘性标题,其中透明背景与每个单独的内容部分混合。

Rubidine..

 

jakub szymanski.

此站点使用JavaScript加载新内容并在页面上滑动。在家之后出现粘性页脚“page” with a “return to top” link.

Jakubszymanski.

 

Tyler Termini..

Tyler Termini..’S网站很短,只有在标题中的导航。因为它’它不是很长的一页’S不是一个问题必须滚动回顶部(或只是滚动每个部分而无需使用所有导航)。

Tylertermini.

 

Josh发件人

这里的灰度颜色方案看起来很棒。在悬停过来时,显示的工作进入全色,并且当点击颜色模态窗口时,使用更大的版本打开。

Joshsender


专门为WDD编写和编译 卡梅隆查普曼.

您对单页网站最喜欢什么?有任何收藏夹’T file在这里?请在下面的评论中分享…