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

时间: 2024-10-26 05:30:51

20个精巧走心的单页滚动网页设计案例的相关文章

有哪些提升单页滚动体验的高级技巧?

  扁平化已成主流,简约风随处可见,全景大图+单页设计也已经成为了高大上的代名词.随便结合几种大势所趋的设计手法似乎就能成就一个逼格爆棚的好网站,打磨细节似乎已不必要,真的是这样么?细节里面蹲满了魔鬼.今天,来自 VTEX Lab 的UI/UX设计师Rodrigo Muniz 撰文反思了单页滚动设计中的用户体验问题,如果你也是细节打磨强迫症患者,这篇文章就是你的药-- 我们已经看过太多这样的网站了,高清细腻的大图背景横跨屏幕,填满你的视野.是的,大家都喜欢这样的范儿,这也是时下流行的设计趋势.可

20个2013年最值得关注的网页设计趋势

在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇想法.在今天这篇文章中,我将与大家分享2013年里20多种网页设计的全新趋势走向. 设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈.观念上这些趋势代表了在网页设计社区最受喜爱的点子.可是当提到设计团队时,就会想到设计师拥有他们独立的观点,所以要有保留的接受这些想法. 1.响应式布局 响应式

PS网页设计教程XXII——在PS中创建单页复古网页布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

简单大气的单页网页设计案例赏析

  这个网站以天空星座为主题,再用色彩营造出一种神秘的气氛,但其特点并不在此,而是在网站的导航设计中.大多数单页网页的导航会设置在顶部,或是首屏的底部,很少会放在侧边.由于单页式的网页设计想要体现的就是大气整洁,所以肯定会选用宽屏,而侧边导航又会减少页面的视觉宽度,因此侧边导航很少会在单页网页中出现.用户点击导航后,页面就会随之变化,简洁明了. 这是一个小学的介绍网站,显示的案例是网站的整个页面.网站整体简短可爱,手绘的设计风格和鲜亮的黄色更是充满了童趣.为了不让页面显得过于臃肿,设计师把导航拆

网页设计视觉体验:WEBJX收集国外滚动效果网页设计案例

文章描述:网页设计中30个惊人的滚动效果. 近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求.滚动效果被越来越多的国外网站所应用,成为网页设计的热点趋势.在本文中,将为你展示网页设计中30个惊人的滚动效果,厌倦了千篇一律,呆板网页设计的你也不妨一试. Peter Pearson Campaign Monitor Buero-Buero Lewers Siebennull Kalendiar [1] [2] [3] [4] [5]  下一页

20个新颖绝妙的全屏导航网页设计

  如译者@十萬個為什麽 所说:隐藏式菜单和极简式导航栏最近正处于风口浪尖,相比之下,全屏菜单多数时候几乎都适用于所有项目.因为它灵活易变,能够提升而非破坏用户体验.直接看优秀案例 >>> 与其他用户界面细节一样,菜单的设计也在随着当今的潮流改变.一些变化能带来积极的效果,改善用户体验,还有一些却会破坏有利的形象.追随潮流是件棘手的事,尤其是在菜单上. 比如,隐藏式菜单和极简式导航栏最近正处于风口浪尖.但是,它们并不适用于所有网站.相比之下,全屏菜单多数时候几乎都适用于所有项目.后者正在

20个令你脑洞大开的 3D TOUCH 概念设计案例

  iPhone 6s 和6s Plus 的压敏屏幕所带来的3D Touch 让iPhone 的交互多了一个全新的维度,交互从不再局限于2D平面手势,按压操作的加入使得手机交互进入了3D的维度.交互层次的提升让操作拥有了更大的潜力和截然不同的操作模式. 除了轻点.轻扫.双指开合这些熟悉的 Multi‑Touch 手势之外,3D Touch 还带来 Peek 和 Pop,为iPhone 的使用体验开拓出全新的维度. 手机的屏幕对于不同力度的按压进行识别,并且作出不同的交互反馈.快速轻拍是大家习惯性

20个以细腻动画取胜的优秀网页设计

  动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦.在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下. 目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力. 网页设计中如何合理使用动画效果呢? 我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了

超实用的单页网站设计指南

  这篇好文将给同学们科普何时能用单页网站,设计时有哪些技巧,有哪些优秀范例可以借鉴,以及文末推荐一大波专业的单页网站资源,干货份量绝对足,充电时间到 >>> @十萬個為什麽 :单页设计,是一项处理小型网站的绝佳技巧,甚至有些网站你可能认为一张页面搞不定,也同样适用.从易于维护,到减少带宽占用,使用单页网站的好处不胜枚举. 假如你应对的是个小型网站,通常只有几个页面的那种,可以考虑使用单页设计,看看它是否能简化项目,对用户更加友好.继续阅读,你将了解它的益处,何时使用(或不该使用),还有