设计师就业衔接班!45天 PS、AI、AE 从入门到入行 详情戳>>>
现在有很多刚入行的设计师可能已经不知道什么是滚动视差了。没关系,只要你花 5 分钟体验下本文提到的优秀案例,你肯定会停不下来,还附上教程唷
在视差滚动网页的设计上,无论是移动端还是桌面端,如今的设计师都有了足够深入的探索,并且对于功能和体验上的挖掘,都有了比较成熟的经验。无论是导航悬停式的滚动还是水平滚动和分屏3D特效,视差滚动这一设计趋势已经深刻地影响到了如今的UI设计。
视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效支撑之下,前景的元素和背景会在滚动浏览时以不同的速度运动,营造出动感又独特的视觉体验。
网站中的内容再好,总得让用户能看到,才有价值,而矛盾在于,首屏的空间始终是有限的。所以,我们总希望用户能够滚动页面向下看,从某种意义上来说,长滚动页面和无限滚动的设计,如此地受欢迎,就是因为它贴合了用户下意识滚动浏览的习惯,也符合内容的创建者希望被用户看到的需求。
出于对新交互模式的探索和技术的发展,曾经网页设计中的许多禁忌,现如今反而成为了越来越受欢迎的趋势,网页中的滚动交互,就是如此。作为一项基本的交互方式,滚动交互并不是一成不变,它正将新的技巧和新的规则纳入其中,逐步演进。
长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,它们的流行并不是巧合。当用户向下滚动的时候页面的时候,所需要的内容与信息会自然的呈现出来,在此过程中通常不会涉及到额外的、多余的交互。
如果你仔细观察那些最新的使用了视差技术的网页,你会发现这些网站所采用的视差设计已经似是而非了。这些网页中的可动元素非常之多,但是并非动画;配色风格和视觉元素趋近于扁平风,并且借用了来自Material Design的物理隐喻,融合了许多微妙的交互细节。
单页滚动也算是目前网页设计中一个独立的类别了,导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多,毕竟导航栏的部分应该是包罗万象并且常驻页面的。
在内容一定的情况下,屏幕越小,页面自然就越长。长滚动页面的兴起并不是没有理由的,移动端对桌面端市场份额的挤压,可穿戴设备等小屏幕的流行,所有的这些变化都在促使这一趋势更加流行。
编者按:今天这组视差网站个个别出心裁,每一个都会让你体验到不同的视觉之旅,卖萌打滚小清新,冷艳高傲御姐范,都齐活了,握紧鼠标进来瞧。Aquatilis ExpeditionDAN ParisTrading CultureIce and skyGiampiero Bodino30uNicolas TarierSavse SmoothiesBORNShaker BrandDragoneIntroducing Squarespace 7Relat...
动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画,从最简单的基础效果到富有开创性的展示结果。
@腾讯ecd 星旧:作为未来网页设计的热点趋势之一的“滚动视差”在近年来被越来越多网站所采用,特殊新颖的展示模式也让许多用户眼前一亮。网络上也如雨后春笋一般出 现了很多像《30个让人兴奋的视差滚动网站》、《60个视差滚动网站赏析》…
以前我们通过优秀字体、配色让网站变得舒服,现在我们通过视差滚动让网站拥有由上至下一站式的视觉震撼效果,访客只需滑动鼠标滚轮就能体验到,你可以利用今天提供的这25款免费的视差滚动插件轻松实现,每款插件都有提供Demo,设计师们来感受一下。科普一下:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
目前这种视差滚动效果被越来越多的国内外网站所应用,成为网页设计的热点趋势。通过一个很长的网页页面,其中利用一些令人惊叹的插图和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
大多数传统的网页都是直愣愣的竖直水平的设计。不过现在,斜线网页设计与视差滚动设计(译者注:一种特殊的网页形式呈现形式,其基础原理是让多层背景以不同的速度搬动,形成立体的感觉,带来卓越的视觉体验)正在挑战这一传统。
视差滚动是最近出现的一个比较火的站点视觉效果,适用于做整站(mini-site)也可以做小动画。通常来说,要使用JavaScript和CSS手工编代码来实现视差滚动效果。
感谢作者详尽的总结,帮助非常的大。
写的好详细!太棒了!设计字体一直是我头疼的问题
明人不说暗话,我是来看小姐姐的
训练营怎么加入,想和你们一起造字。
视觉和交互等设计的整体都不错,唯独不爱的是显示同状态朋友,假如我看到同状态的,让我第一反应就是比较反感,我会修改,甚至删除自己的状态。心理上我希望自己特立独行,不需要有人和我一样。
感谢作者详尽的总结,帮助非常的大。