当前位置:首页 > 新闻中心 > 解决方案
2015年网站设计新模式:单页滚动设计,让你网站增色添彩责任编辑 :李飞    文章来源 :星翼创想(www.iswweb.com)    发布时间 :2015-10-12    阅读次数:4444

2015年是一个网站设计行业的迅猛发展的时代,自从HTML5技术诞生后,这几年来几乎是一直有股十分狂热的浪潮地影响这网站建设行业,但直至今年,建站行业才真正有了质的飞跃。 目前来讲,在技术上,几乎所有的新制作的网站都已经趋向于用HTML5来构建了,而在设计上,为了配合html5的展示,网页设计的效果也变化很大。扁平化、单页滚动等等设计理念都非常火爆。以前人们总希望把网站建成非常多的页面,一是利于搜索引擎收录,二是那样看起来网站更丰富。但这些,在2015年设计新浪潮里,统统被甩掉了,现在的设计,更喜欢用单页滚动式的手法来做,现在,用户只需轻轻滚动鼠标滑轮,就可以浏览所有内容了。


如此一来,全新设定下的长滚动页面的设计似乎拥有了更多的可能性,不拘一格的设计手法可以令长滚动页面焕发出不同凡响的生命力。今天我们搜集了20个独具匠心的单页滚动页面,它们在页面布局、导航设计上另辟蹊径。如果你正在寻找设计精巧而走心的网页,那么这次的案例会让你眼前一亮。

We Are Top Secret

独辟蹊径!20个精巧走心的单页滚动网页设计案例

We are top secret 在导航设计上还是蛮温和的,设计师并没有采用醒目的向下滚动箭头提醒,也没有显著的滚动特效,仅仅在底部用一个小巧的“Scroll down”提示访客,并且融入度极高。

Fixed Group

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Fixed Group 的页面设计极为炫酷,导航栏被隐藏在左上角的汉堡图标中。为了引导用户向下滚动,设计师在页面的底部放置了一个超窄的箭头,看起来非常有趣。页面中轻微的折叠效果也在“引诱”用户滚动页面。

Giampiero Bodino

独辟蹊径!20个精巧走心的单页滚动网页设计案例

这个网页在用户体验上也做的非常突出,对触摸屏设备的兼容尤其不错。设计师突出了页面托拽浏览的特征,可以纵向滚动也可以横向滚动。

Lois Jeans

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Lois Jeans的页面设计清新而充满活力,巧用撞色并通过错落的文字营造乱中有序的美感。常驻于顶部的导航栏便于用户定位,设计师并未使用单页中常见的翻页提示。

Think Less Love More

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Think Less Love More 是一个比较先锋的网页项目,其中极具特色的交互是它的重要特征。它并未使用常见的横向或者纵向滚动,而是要进到“里面”去。探索的时候,你需要点击放大或者缩小的按钮,用鼠标滚轮或者手指都可以轻松操作。

Weltrade

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Weltrade 营造了华丽而晦暗的场景,作为一个着陆页,无论是桌面端还是触摸屏都可以轻松操作,不过页面中散落的菱形按钮,最好的操作介质还是手指。

The Boat

独辟蹊径!20个精巧走心的单页滚动网页设计案例

许多网站要讲述故事的时候,喜欢采用精致的插画来强化用户体验,而这个页面也正是如此做的。向下滚动是最简单也是最直觉的交互方式,所以这个页面没有翻页指示。

Well Storied

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Well Storied 采用了大量的圆形控件来提升导航的交互性,这类非常规的页面设计常常会给用户留下极为深刻的印象。

Urban Walks

独辟蹊径!20个精巧走心的单页滚动网页设计案例

尽管Urban Walks 采用了常见的单页设计方式,用右侧的小圆点来作为翻页指示,但是整体的配色和细节设计非常到位,堪称教科书式的网页设计。

House of Borel

独辟蹊径!20个精巧走心的单页滚动网页设计案例

House of Borel 的设计真的是简单到极致了,能省略视觉元素都被设计师移除了,甚至包括导航。整个着陆页就只有一个标题,几个按钮和一组动效。而最后这个部分,需要你使用鼠标或者手指与之进行交互。

Melanie F Lookbook

独辟蹊径!20个精巧走心的单页滚动网页设计案例

这个街拍风格指南网站拥有相当不错的交互动画,你可以选择自动滚动也可以手动控制滚动速度,然后点击十字标识来查看产品的图片,价格,搭配,如果你喜欢,可以立刻点击购买。

La Region des Musees

独辟蹊径!20个精巧走心的单页滚动网页设计案例

背景图片是整个网页最具有视觉冲击力的部分,有趣的是页面的菜单设计,它正好处于整个页面的顶部,棱角分明的字体还带有明显的装饰性。

Giacomorelli

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Giacomorelli 的页面为你提供了十分有趣且难以忘怀的用户体验,当然,如果你在平板上浏览可以更好的感受到它的特色。

Born

独辟蹊径!20个精巧走心的单页滚动网页设计案例

这个并不是传统意义上的长滚动单页,不过页面的展示性极强,每个项目都拥有一个极具视觉冲击力的大图。点击查看每个项目的时候,你会看到一个闪动的字母O,和Born中的第二个字母对应。

Nothing but Thieves

独辟蹊径!20个精巧走心的单页滚动网页设计案例

黑暗系的设计总是这么迷人。向下滚动就可以发现设计者想要展现的东西。

Planetary Scientist

独辟蹊径!20个精巧走心的单页滚动网页设计案例

典型的单页设计,点击右侧的小圆环同样可以操作,但是远没有鼠标滚轮或者手指滑动来的畅快。这个页面的风格颇为文艺,配色微妙而值得学习。

Shaker Brand

独辟蹊径!20个精巧走心的单页滚动网页设计案例

为了不让用户迷惑,设计师还是添加了一个小小的箭头来指示方向,但是也仅止于此。简单直接,你需要做的就是向下滚动到底,看看设计团队到底为你准备了一个什么样的东西。

Relatos Salvajes

独辟蹊径!20个精巧走心的单页滚动网页设计案例

设计师精心设计的页面承载着内涵丰富的故事,吸引着访客去探索。没有明显的控制中心和菜单一类的设计,你可以充分享受浏览故事的有趣旅程。

Brice Darmon

独辟蹊径!20个精巧走心的单页滚动网页设计案例

这个页面是设计师Drice Darmon 的作品展示页,当你滚动页面的时候会发现各个元素的运动都富有物理惯性,配合着轻微的视差设计,整个页面简单而有质感。

Little Big Room

独辟蹊径!20个精巧走心的单页滚动网页设计案例

Little Big Room 页面使用的是视差滚动设计,只不过滚动方向是横向的。设计师并没有采用常规的滚动条来提示位置,而是用了一个圆圈来标识进度。

看了这么多的精彩案例,你是否也希望拥有一个自己的单页滚动式网站呢,那么立即联系深圳市星翼创想网络科技有限公司的建站客服,提交你的建站需求,索取网站方案吧! 建站客服QQ:1207104362



文章转载请保留网址:http://www.iswweb.com/news/solutions/1507.html