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

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

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

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

We Are Top Secret

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

Fixed Group

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

Giampiero Bodino

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

Lois Jeans

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

Think Less Love More

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

Weltrade

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

The Boat

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

Well Storied

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

Urban Walks

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

House of Borel

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

Melanie F Lookbook

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

La Region des Musees

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

Giacomorelli

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

Born

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

Nothing but Thieves

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

Planetary Scientist

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

Shaker Brand

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

Relatos Salvajes

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

Brice Darmon

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

Little Big Room

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

【那些充满异域风情的网页设计】

《狂拽酷炫！20个来自美国最优秀的网页设计》
《KEEP CALM & DESIGN！26个来自英国最优秀的网页设计》
《严谨而浪漫！20个来自德国最优秀的网页设计》
《情迷西班牙！20个来自西班牙最优秀的网页设计》
《时尚雅致！25个来自法国最优秀的网页设计》
《请多关照！20个来自日本最优秀的网页设计》

原文地址： onextrapixel
优设译者： @陈子木