您现在的位置是:仙都门户网站>科技>案例解析:写给新手的滚动视差设计经验

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

作者:匿名 时间:2019-10-17 12:45:25 阅读量:4945

滚动页面是一个非常常规的操作。结合这种交互行为,在设计中可以做些什么?也许对许多人来说,这是一个知识的盲区,所以跟着这篇文章去学习吧!

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

滚动页面是一个非常常规的操作。结合这种交互行为,在设计中可以做些什么?也许对许多人来说,这是一个知识的盲区,所以跟着这篇文章去学习吧!

视差滚动效果(Parallax scrolling effect)是在滚动页面的过程中,由不同的元素以不同的速度移动而产生的接近3d的视觉效果。在设计中加入了视听元素,赋予了内容更多的活力,传达了许多纯文字无法捕捉的内容。滚动视差以一步一步的方式传达内容,以吸引人们阅读。它利用网页呈现出色的视觉效果。

滚动视差设计特别适合描述一些微妙的内容。随着内容慢慢展开,内容可以通过设计变得更加生动。滚动视差可以突出故事内容,并吸引你进入它的叙述。优秀的设计可以使每一页的连接自然流畅,让你在滑下页面的过程中更加关注内容。

我收集了一些非常好的滚动视差设计案例,帮助人们设计自己的网页效果。

降雪:隧道溪雪崩(http://www . nytimes . com/projects/2012/snow-fall/index . html #/?部分=隧道溪)是一个迷人的杰作。这是2012年华盛顿雪崩的悲剧故事。这个故事的每个部分都有自己独立的一页。

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

这是一种多媒体讲故事的方法,揭示了人们在寻求刺激的过程中忽视危险的根本原因。

我们经常喜欢拿千禧一代开玩笑,但这一代确实面临一些重大挑战。千禧一代被描述(https://highline . huffington post.com/articles/en/pool-millennials/)这个网站通过一个年轻人的眼睛向我们展示世界,以便清楚地了解他们面临的挑战。

这个故事是千禧一代的自我报告,以幽默的方式讲述了他们面临的财政困难和其他实际问题。

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

看完网站上的内容,我不禁对千禧一代更加同情。这是一个使用智能有趣的网页设计来联系更多读者的好例子。

对于大多数人来说,世界标准时间并不是一个特别有吸引力的话题。但是扎克霍尔曼建立了一个网站来解释它是如何工作的,以及使用它有多复杂。他的网站风趣幽默,让无聊的理论容易理解。

将在每个分割的内容之间插入一些动态视频背景。这些设计既特别又不无聊。这些惊人的视觉冲突吸引了读者的注意力,让他们对接下来会出现什么样的炫目视觉效果感兴趣。

任何读过无聊技术文章的人都可能睡着。这个案例说明了一件事,那就是创造性的表现形式可以让最无聊的话题变得有趣。对于那些对编程不感兴趣的人来说,这个网站应该被视为非常有吸引力的读物。

慢慢滚动网页设计和艺术史(https://webflow.com/web-design-art-history)就像在博物馆消磨时间一样。每一个内容部分都像一个画廊分支,展示某一时期的时尚趋势。这个网站记录了艺术的演变。

由于网页设计和视觉艺术有一些共同的语言,熟悉艺术史可以激发人们创作优秀的作品。如果你对艺术和设计感兴趣,这个网站将是一个很好的入门网站。

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

互动2.0简介(https://webflow.com/ix2),该网站让读者从网站的初始阶段到现在无需编写代码就能看到创建一个伟大网站的突破。该网站包含许多令人愉快的网络效果。回顾这些历史,人们不禁感叹趋势更新和迭代的速度有多快。

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

从24小时到宇宙的尽头,透视时间滚动(https://wfs2.webflow.io/time-in-perspective)触发动画时间线来显示每个阶段。这是一个很好的例子。网页设计不仅用于营销,也是创新教育的有力工具。

如果月球只有1像素(http://joshworth.com/dev/pixelspace/pixelspace _ solarsystem.html)网站使用水平轴动画带你穿越广阔的宇宙。乔希·沃斯在向女儿解释到达火星需要多长时间后创建了这个网站。他想知道他是否可以用电脑画太空地图。这个网站关注空间的深度,帮助我们了解宇宙的深度。乔希·沃斯用一个像素来描绘月亮,然后展示所有与月亮相关的物体。

这个项目是另一个很好的例子,表明好的设计可以使学习更有吸引力。

我们每天都收到太多的信息。从大量的信息中,我们很难确保知道最新的状况。《华盛顿邮报》对伊斯兰国的追踪(http://www . Washington post . com/WP-SRV/special/world/Islamic-state-tracker/?Noredirect = on)展示了伊斯兰国的历史和当前发展。

在界面的右侧,滚动浏览时间线,而在界面的左侧,故事的位置在地图上突出显示。点击地图上的点,你会看到那个位置的具体情况。将位置映射到每个事件可以加深对每个区域的理解。

马克·吐温有句名言:“解释幽默就像解剖一只青蛙。在这个过程中,你可以学到很多东西,但最终你会把它杀死。”但不幸的是,对他来说,他不能等到数字时代的到来。

前面的许多案例讨论了滚动效果在时间线相关内容中的应用。喜剧表演是一种叙事表演,节奏和构图与真正的笑话一样重要。

《站立喜剧的阿里·王结构》是对黄阿丽最新脱口秀《小眼镜蛇》的分析。它分析节目中的每一个时刻和笑话,以显示最大的笑话在哪里。这是一个关于时间和节奏如何能带来更好的结果的有趣的研究,同时让我们知道为什么阿里黄能成为如此优秀的作家和演员。

我们已经学会了如何使用不同的滚动效果来讲述不同类型的故事以及其中包含的一些设计方法。为了帮助每个人制作自己的滚动视差效果,我收集了一些工具来帮助你。如果你想在你的设计工作中尝试一下,Webflow可能是最好的选择。

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

视差效果被用在“网页设计和艺术史”的网页中来显示这些几何图形。

打开本教程开始产生这种效果。

在设计中使用滚动触发进度条是一种向人们展示他们所处位置并推动他们前进的方式。这个蓝色进度条固定在页面顶部,平滑动画从0扩展到100%。它改善了阅读体验,成为更好的导航工具。

当一个设计有太多静态内容时,阅读会很累。在滚动模式下,动画在长篇故事讲述过程中提供了很好的休息时间。随着内容的淡入淡出,它获得了最好的阅读体验。

这种效果可以应用于文本或视觉效果。我们在图形设计档案中使用这种效果来标记新内容块的开始。

我们在这里提供了一个教程来帮助你理解如何达到这个效果。

当页面上有一个闲置的设计元素时,比如标题,为什么不给它一些活力呢?水平动画唤醒这些沉睡的设计元素,并赋予它们新的生命。用上面给出的例子来说明,水平移动标志着故事的开始,“我们出去”更有吸引力。

我们还在这里提供了一个教程。

水平滚动是一个很好的改变。它将把你的注意力集中在内容上,打破传统的垂直布局。

《自豪与撕裂》是匈牙利历史上的一个网站,它使用水平滚动来突出它所覆盖的不同时期。

回顾我们之前讨论的艺术网页设计和艺术史,我们使用水平滚动作为保持人们活跃和参与的另一种方式。

我们已经给出了一个关于水平滚动的教程,这将使我们能够设计自己的网站。

布丁是阿里黄的原创喜剧网站,有一个关于如何设计“粘性定位”的教程。粘性定位是在设计中暂时放置一个元素,吸引人们的注意力,继续滚动一会儿,它就会固定在页面上的某个位置。我们都是以上教程的粉丝,它以一种易于理解的方式分解了这个过程。这些效果是通过滚动实现的。

(译者注:粘性是css位置的一个新属性,相当于相对和固定的组合。这个属性的表现就是你在现实中看到的吸附效果。)

我们刚刚讨论了粘性定位,制作粘性工具条会有什么效果?

滚动一段时间后,工具条将被固定在某个位置。这种效果对导航非常有用。

这里还为每个人提供了一个小教程,作为参考,以便在他们自己的项目中使用这种效果:https://university.webflow.com/article/position-sticky

网页已经改变了故事的讲述方式。有了动画、特效和互动,阅读不再是被动的体验。滚动视差是一种多媒体体验,可以激发更深层次的思考和理解。它展示了许多仅靠语言无法表达的东西,使读者成为积极的参与者。

原件:https://webflow.com/blog/scrollytelling-guide

作者:杰夫·卡德罗

译者:蔡赟·斯基,公开号码:蔡赟翻译设计

这篇文章由@ Caiyunsky翻译出版。每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

豪博娱乐