发布时间：2021-11-10 分类： 行业资讯
在视差效应的具体应用过程中，有一些不容错过的技巧和注意事项。今天的文章总结了视差效应的五种应用技术。享受〜
视差效果是最受欢迎的网页设计趋势之一。在此滚动动画效果的支持下，前景的元素和背景将在滚动时以不同的速度移动，从而创建动态且独特的视觉体验。
视差效果可用于大多数类型的代购源码网站，它是增强用户参与度和增强用户体验的有效手段之一。视差效果的好处是它不需要在每个页面上使用。它还鼓励用户更多地关注网络内容并提高整体参与度。
视差效果允许网页中的元素彼此具有距离和深度。换句话说，它为网页提供了近乎三维的视觉体验，这也为网页提供了近乎身临其境的体验。
然而，视差效果的缺点也是显而易见的，并且在移动侧并不总是那么容易使用。在视差特效的具体应用过程中，有一些不容错过的技巧和注意事项。今天的文章总结了视差特效的五种应用技术。
1.使用动态来显示变化
保时捷
Sonance
设计师可以使用视差效果来显示页面中的变化。这些随滚动移动的元素传达了时间，空间和位置之间的关系。
当视差效果与代购源码网站内容一起使用时，它们是显示更改的最佳方式。
在上面的保时捷进化代购源码网站中，不同时代的保时捷车型随着时间的推移而出现，背景场景也随之改变。如果你仔细聆听，你会发现音乐会随着年龄的增长而发展。
这种设计技术将驱动用户滚动浏览，因为每个人都希望看到接下来会发生什么变化。通过这种视差滚动+时间线，用户可以从上到下浏览，看它也很有趣。
Sonance网页中的视差显示了另一个变化，页面中元素的位置发生了变化。视差效果成为代购源码网站导航模式的一部分，当用户浏览时，视差效果告诉用户他们在哪里。
2.鼓励用户滚动浏览
行走死
Firewatch
视差效果有利于交互，很大程度上是因为它鼓励用户不断滚动页面，允许用户继续参与交互。
许多使用视差滚动的网页将直接在首页上显示“滚动”或使用闪烁的光标吸引用户的注意力并鼓励用户滚动。本指南包含在The Walking Dead Zombiefied的首页。
与其他视差滚动网页设计不同，The Walking Dead Zombiefied的页面布局是水平的。当用户滚动页面时，角色滚动浏览不同的场景并且故事发展，这非常有趣。
3.运动和色彩
WERK
意向书
有许多方法可以应用视差效果。最有趣的应用之一是结合颜色和不同的内容来显示不同的项目和元素。通过交互组合并触发颜色变化和动画，以创建全新的体验。
色彩是最具吸引力的设计工具，它在吸引用户注意力方面非常有效。
上面的Werkstatt页面使用白色和灰色轮廓来勾勒出不同的项目部分。当光标悬停在不同的项目上时，该块的项目图像将显示颜色。这种组合并不复杂。 ，但非常有效，鼓励用户与单个项目进行交互。
Lois Jeans使用另一种搭配方法。设计师使用不同的颜色来突出不同的活动和不同的主题。当页面滚动时，背景的颜色会发生变化，使图像与前景滚动相匹配。
4.使信息更容易消化
梅尔技术
Ledur
视差效果还可以帮助设计人员将更复杂的信息或大量信息分成更小的部分，使其更易读，更容易消化。当您设计随页面移动的文本元素时，此视差效果功能非常有用。但是，在实际操作中，您需要仔细考虑内容的载体。
以上两个网页使用这个设计概念，但应用程序略有不同。
Melanie David的个人页面使用单页设计。她使用了一半的页面进行导航。滚动时，页面的一侧不会移动，另一侧会正常滚动，当您完成阅读时，它会自然切换。转到下一个内容块。
在Le Duc餐厅的代购源码网站上，设计师根据您的阅读习惯和订购将菜单分成不同的块。动画非常简单，背景鱼扮演非常装饰的角色，用户在浏览时可以更好地理解订单信息。
5.创建视觉奇观
Madwell
西雅图太空针塔
视差效果最重要的用途之一是创造独特，富有想象力的视觉奇观。设计师通过声音材料匹配，动态效果和不同的设计技术创造逼真，有趣的视觉体验。
越来越成熟的3D设计使卡通和近乎逼真的设计元素的设计成本降低。像上面的Madwell网页一样，这些风格接近卡通，但视觉和形式感觉是非常突出的元素，视差效果是产生类似于VR的视觉体验。
西雅图太空针塔的视差效果采用更经典的设计，由于元素之间的移动速度不同，因此在用户导航时创建逼真的浏览体验。然而，这个代购源码网站的独特之处在于它是从下往上看的，非常有趣。当用户通过代购源码网站的不同部分到达顶级餐厅区域时，他们会感受到餐厅的位置，城市天际线和CTA元素将被组合在一起，这样您就不会错过关键信息。这种设计具有教育性和风险性，但它确实创造了令人难忘的前所未有的体验。
结论
视差效果非常时髦和有趣，但正如我们在对设计趋势的无数评估中所说的那样：它不一定适合每个项目。当您考虑设计代购源码网站时，您需要提前了解您的用户及其偏好，并使用一系列小测试和跟踪分析来确定您的策略是否有效。当您发现视差效果具有良好效果时，您可以使用它来做一些有趣的事情。
原作者：CARRIE COUSINS
原文地址：https://designshack.net/articles/layouts/parallax-effects-compared/
译者：陈子木
翻译地址：http://www.uisdc.com/parallax-effects-compared
本文由@陈子木授权，未经作者许可，禁止转载。
该地图来自Pexels，基于CC0协议
