视差效果是番禺最流行的网页设计趋势之一。在这种滚动动画特效的支持下,滚动浏览时,前景的元素和背景会以不同的速度移动,创造出动态而独特的视觉体验。
视觉差异化效果可以在大多数类型的网站中使用,是增强用户参与度、提升用户体验的有效手段之一。视差效果的优点是不需要硬性应用到每一页。同时可以让用户更加关注网页内容,增强整体参与度。
视差效果为网页中的元素提供了距离和深度。换句话说,它给了网页近乎三维的视觉体验,也让网页有了近乎身临其境的体验。
但是视差效果的缺陷很明显,在移动端也不一定好用。在视差效果的具体应用中,有一些技巧和注意事项是不容错过的。在今天的文章中,我们总结了视差效果的五个技巧。
1.使用动态效果显示更改
设计人员可以使用视觉差异效果来显示页面中的变化。这些随着滚动不断运动的元素,可以传达时间、空间、位置之间的关系。
视差效果与网站内容配合使用时,最能显示变化。
在上面的保时捷进化网站中,不同时代的保时捷车型随着时间的变化而展示,背景图片和场景也在变化。如果你仔细听,你会发现音乐会随着时代的变化而演变。
这种设计技巧会驱使用户滚动浏览,因为人们想看看接下来会发生什么变化。有了这个视差滚动时间轴,用户可以从上到下浏览,也很有意思。
Sonance中的视差显示了另一个变化,页面中元素的位置发生了变化。视差效果已经成为网站导航模式的一部分。当用户浏览时,视差效果会告诉用户他们在哪里。
2.鼓励用户滚动浏览
视差效果有利于交互,很大程度上是因为它鼓励用户持续滚动页面,让用户持续参与交互。
很多使用视差滚动的网页会直接在首页说“滚动”,或者使用闪烁的光标来吸引用户的注意力,鼓励用户滚动。《行尸走肉僵尸》的首页,有这样的引导信息。
与其他带有视差滚动的网页设计不同,《行尸走肉》的页面布局是水平的。用户滚动页面时,人物会滚动不同的场景,剧情也会相应发展,挺有意思的。3.运动和色彩
应用视差效果的方法有很多,其中最有趣的一种方法是将不同内容的颜色结合起来,以显示不同的项目和元素。变色和动画结合在一起,通过交互触发,产生全新的体验。
色彩是最有吸引力的设计工具,它在吸引用户注意力方面的效果非常明显。
上面的Werkstatt网页使用白色背景和灰色轮廓来勾勒不同的项目部分。当光标悬停在不同的项目上时,该部分中的项目图片将显示为彩色。这种组合效果并不复杂,但是非常有效,鼓励用户与单个项目进行交互。
露易丝牛仔裤用的是另一种搭配方式。设计师使用不同的颜色来突出不同的活动和不同的主题。当页面滚动时,背景的颜色会发生变化,与前景滚动的图片相匹配。
4.使信息更容易消化
视差效果还可以帮助设计师将更复杂的信息或大块信息分割成小块,更容易阅读和消化。当您设计随页面移动的文本元素时,视差效果的这一特性非常有用。但是在实际操作中,需要仔细考虑内容的载体。
以上两个网页都采用了这种设计理念,只是应用方式略有不同。
梅勒妮大卫的个人页面采用单页设计。她用一半的页面作为导航。当您滚动时,页面的一侧不移动,而另一侧正常滚动。当你读完,自然会切换到下一个内容块。
在Le Duc Restaurant的网站上,设计师根据你的阅读习惯和点餐方式,将菜单分成单独的块。动画很简单,背景中的鱼起到了很好的装饰作用。用户在浏览时可以更好的了解点菜的信息。
5.创造视觉奇迹
视差效果最重要的用途之一是创造独特而逼真的视觉奇观。设计师通过合理的材料搭配、动态效果和不同的设计技巧,创造出生动有趣的视觉体验。
越来越成熟的3D设计,使得接近现实的动漫和设计元素的设计成本更低。和上面的Madwell一样,这些风格接近漫画,但视觉效果和形式感极其突出的元素,在视觉差异效应下产生了类似VR的视觉体验。
西雅图太空针的视差效果是比较经典的设计。当用户浏览时,由于元素之间的移动速度不同,会有一种伪真实的浏览体验。不过这个网站的独特之处在于从下往上浏览,很有意思。当用户通过网站的不同区块到达顶部的餐厅区域时,会觉得餐厅位置很高,城市的天际线与CTA元素相结合,让你不会错过关键信息。这个设计有教育意义,也有风险,但却创造了前所未有的体验,令人难忘。标签
视差效果确实时尚有趣,但正如我们在评价设计趋势时多次说过的,并不一定适合每一个项目。当你在构思网站设计的时候,你要提前了解你的用户和他们的喜好,通过小规模的测试和跟踪分析,知道你的策略是否有效。当你发现视差效果很好的时候,嗯,不妨用它做点有意思的事情。