时尚精致的单页滚动类网页设计欣赏

大漠孤烟1912

大漠孤烟1912

2016-02-16 18:06

有了下面这个时尚精致的单页滚动类网页设计欣赏设计作品,不懂时尚精致的单页滚动类网页设计欣赏的也能装懂了,赶紧get起来装逼一下吧!

单页滚动也算是目前网页设计中一个独立的类别了,导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多,毕竟导航栏的部分应该是包罗万象并且常驻页面的。而汉堡菜单的存在让导航具备了更优秀的隐藏性,摆脱了滚动条、分页和复杂的下拉框,让页面更整洁,为视觉设计留下更大的空间,留住了用户。

另外非常值得注意的一点是,即使导航设计足够隐蔽,用户也不会在页面间迷失,他们比我们设计时所设定的普通用户要聪明太多。网页出现的20多年来,大家已经习惯了自上而下的浏览,在没有额外的标志提醒和导航存在的情况下,用户也会下意识向下滚动,这也是单页设计和无导航设计出现的重要先决条件。开发者充分利用单页和视差的特征,让页面更加生动自然,也更符合触摸屏设备。聪明的设计师们将移动端不易于交互的元素去除之后,页面设计更加统一,兼容性更强。

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

We Are Top Secret

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Fixed Group

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Giampiero Bodino

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Lois Jeans

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Think Less Love More

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Weltrade

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

The Boat

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Well Storied

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Urban Walks

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

House of Borel

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Melanie F Lookbook

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

La Region des Musees

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Giacomorelli

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Born

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Nothing but Thieves

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Planetary Scientist

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Shaker Brand

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Relatos Salvajes

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Brice Darmon

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

Little Big Room

时尚精致的单页滚动类网页设计欣赏,PS教程,图老师教程网

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

展开更多 50%)
分享

猜你喜欢

时尚精致的单页滚动类网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
时尚精致的单页滚动类网页设计欣赏

20个漂亮的单页滚动视差网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
20个漂亮的单页滚动视差网页设计欣赏

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

10组时尚单页风格的网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
10组时尚单页风格的网页设计欣赏

详细解析如何设计简约的网页单页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析如何设计简约的网页单页设计欣赏

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

精选国外创意纵横的单页网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
精选国外创意纵横的单页网页设计欣赏

精选时尚的鞋帽服饰类网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
精选时尚的鞋帽服饰类网页设计欣赏

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

国外气质出众的黑色系网页设计欣赏

国外气质出众的黑色系网页设计欣赏

精选Garbett设计师平面设计作品欣赏

精选Garbett设计师平面设计作品欣赏
下拉加载更多内容 ↓