首页 >> 大全

什么是视差?写给新手的滚动视差设计经验

2022-06-19 大全 175 作者:考证青年

滚动页面是一种非常常见的操作。有哪些设计点可以与这种交互行为结合使用?可能这是很多人的知识盲区,赶紧跟着本文学习吧!

设计师应该了解在网页上实现各种效果的能力,以便为用户创造非常有吸引力的视觉体验。

滚动页面是一种非常常见的操作。有哪些设计点可以与这种交互行为结合使用?可能这是很多人的知识盲区,赶紧跟着本文学习吧!

视差滚动效果是当用户滚动页面时,页面中的不同元素以不同的速率移动,创造出接近3D的视觉效果。设计中添加的视听效果为内容带来了更多的生命力,传达了很多纯文本无法捕捉的内容。滚动视差将内容逐级传达以吸引人们阅读,并利用网页呈现出色的视觉效果。

如果您想讲述一个微妙的故事,请考虑使用滚动视差设计

滚动视差设计特别适合讲述一些细腻的内容。随着内容的慢慢推出,设计可以让内容更加生动。滚动视差突出了故事并将您吸引到它的叙述中。优秀的设计可以让每个页面的连接流畅自然,让你在向下滚动页面的过程中更加专注于内容。

我收集了一些非常好的滚动视差设计示例来帮助您设计自己的网页效果。

案例 1:雪崩:The at Creek

案例解析:写给新手的滚动视差设计经验

Snow Fall:at Creek (/2012/snow-fall/index.html#/?part=-creek) 是一部引人入胜的杰作。这是 2012 年华盛顿雪崩的悲惨故事,故事的每一部分都有自己的单独页面。

这是一本引人入胜的读物,配有音频和视频媒体,让您更全面地了解那悲惨的一天到底发生了什么。我们不仅可以阅读相关人员的故事,还可以了解导致雪崩的地形和天气条件。

这是一种多媒体讲故事的方法,它揭示了是什么驱使人们在寻求刺激的旅程中忽视危险。

案例解析:写给新手的滚动视差设计经验

案例2:是(千禧一代的困境)

案例解析:写给新手的滚动视差设计经验

我们经常拿千禧一代开玩笑,但这一代人确实面临一些重大挑战。 are () 这个网站通过一个年轻人的眼睛向我们展示了这个世界,让我们清楚地了解他们所面临的挑战。

这个故事由千禧一代自我报告,以幽默的方式讲述他们面临的财务困境和其他现实世界问题。

这个页面是通过一个怀旧的视频动画游戏呈现的,结合了像素化的图形和一些有趣的视觉效果。它捕捉了千禧一代的复杂情绪,同时也让年轻人更容易理解和阅读。

阅读该页面让我对千禧一代更加同情。这是使用智能、有趣的网页设计连接更多读者的一个很好的例子。

案例解析:写给新手的滚动视差设计经验

案例 3:UTC 用于 &;正确的? (UTC 对每个人来说都足够了,对吧?)

对于大多数人来说,世界时 (UTC) 并不是一个特别引人入胜的话题。但扎克做了一个网站,解释它是如何工作的以及使用它的复杂性。他的网站很幽默,让枯燥的理论很容易理解。

在每个片段之间插入了一些动态视频背景,这些背景被设计为独特而不会令人讨厌。这些令人惊叹的视觉冲突抓住了读者的注意力,让每个人都对接下来会出现什么令人眼花缭乱的视觉效果感兴趣。

任何读过无聊的技术文章的人都可能睡着了。这个案例说明了创意演示如何将最无聊的话题变成有趣的。对于那些对编程不感兴趣的人,这个网站应该是一个非常有吸引力的阅读。

案例解析:写给新手的滚动视差设计经验

案例 4:Web 和艺术(网页设计和艺术史)

案例解析:写给新手的滚动视差设计经验

慢慢浏览网页设计和艺术史 () 就像在博物馆里消磨时间。每个内容部分都像画廊分支一样,显示特定时间段内的趋势。该网站记录了艺术的演变。

由于网页设计和视觉艺术有一些共同的语言,熟悉艺术史可以激发您创作出色的作品。如果您对艺术和设计感兴趣,本网站将是一个很好的入门读物。

案例解析:写给新手的滚动视差设计经验

案例 5:Web 的:2.0(Web 设计历史:交互2.0)

案例解析:写给新手的滚动视差设计经验

采用滚动视差设计,打破传统故事展示的局限,充分利用网页的载体,最大限度发挥创意。

到 2.0() ,该网站将带领读者从网络的最初阶段到无需编写代码即可创建出色网站的突破。该网站包含许多令人愉悦的网页效果。回顾历史,不禁感叹,趋势更新迭代快。

案例解析:写给新手的滚动视差设计经验

案例 6:时间(时间视角)

案例解析:写给新手的滚动视差设计经验

滚动视差设计是讲述线性故事的完美媒介——还有什么比时间流逝更线性的呢?

从 24 小时到宇宙尽头,在 () 中滚动时间以触发动画时间轴,显示每个阶段。这是一个很好的例子,说明网页设计不仅仅用于营销,设计也是创新教育的强大工具。

案例解析:写给新手的滚动视差设计经验

案例 7:如果月亮只有 1 个像素

案例解析:写给新手的滚动视差设计经验

如果月球只有 1 个像素(),则网站使用水平轴动画带您穿越浩瀚的宇宙。 Josh Worth 在向女儿解释到达火星需要多长时间后创建了这个网站,并想知道他是否可以使用计算机绘制空间地图。这个网站在关注太空深处和帮助我们了解宇宙的深度方面做得很好。 Josh Worth 用一个像素表示月亮,然后显示与它相关的所有内容。

这个项目是另一个很好的例子,展示了优秀的设计如何让学习更具吸引力。

案例解析:写给新手的滚动视差设计经验

案例 8:状态(追踪 ISIS)

案例解析:写给新手的滚动视差设计经验

我们每天都会收到如此多的信息,以至于我们很难从海量的信息中了解最新的状态。华盛顿邮报的追踪 ISIS () 介绍了 ISIS 的历史和当前发展。

在屏幕右侧,滚动浏览时间线,而在屏幕左侧突出显示地图上故事的位置。单击地图上的一个点,您将看到该位置的详细信息。将位置映射到每个事件可以更深入地了解每个区域。

案例解析:写给新手的滚动视差设计经验

案例9:单口相声的Ali Wong(Ali Wong的喜剧结构)

案例解析:写给新手的滚动视差设计经验

马克吐温有句名言:“解释幽默就像解剖一只青蛙。你在这个过程中学到了很多东西,但最终你杀死了它。”换句话说,我们已经等不及数字时代的到来了。

前面给出的许多示例都讨论了将滚动效果应用于与时间线相关的内容。喜剧表演是叙事表演,节奏和构图与真实笑话一样重要。

《Stand-Up》的阿里王分析了王阿里最新的脱口秀“眼镜蛇宝宝”,分析节目中的每一刻、每一个笑话,以展示最大的笑点在哪里。这是一项有趣的研究,探讨了时间和节奏如何才能取得更好的效果,以及是什么让 Ali Wong 成为如此出色的作家和演员。

滚动视差设计实现工具

我们已经了解了如何使用不同的滚动效果来讲述不同类型的故事,以及所涉及的一些设计技术。为了帮助您制作自己的滚动视差效果,我收集了一些工具来帮助您。如果您想在设计作品时进行试验,这可能是最佳选择。

1. 在滚动中创建视差

在滚动时以不同的速度移动元素是创建视差的一种方法。视差是一种简单的效果,可以在故事中创建多维动画,促使人们继续阅读。

网页设计和艺术史页面中使用了视差效果来显示这些几何图形。

郑重声明:本文版权归原作者所有,转载文章仅出于传播更多信息之目的。如果作者信息标注有误,请尽快联系我们修改或删除,谢谢。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了