案例1)Snow Fall: The Avalanche at Tunnel Creek (发生在隧道溪的雪崩)
Snow Fall: The Avalanche at Tunnel Creek (http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) 是一部引人入胜的杰作。这是2012年华盛顿雪崩的悲惨故事,这个故事的每个部分都有自己独立的页面。 这是一份引人入胜的读物,配有音频和视频媒体,可以让大家更全面的了解那悲惨的一天到底发生了什么。我们不仅能读到相关人员的故事,还能了解导致这次雪崩的地形和天气条件。 这是一种多媒体讲故事的方式,它揭示了本质原因,是什么促使了人们在寻求刺激的过程中不顾危险。
案例2)Millennials are screwed(千禧一代的困局)
我们经常都喜欢拿千禧一代来开玩笑,但这一代确实面临着一些重大的挑战。 Millennials are screwed(https://highline.huffingtonpost.com/articles/en/poor-millennials/)这个网站通过一位年轻人的眼睛向我们展示了这个世界,以便清楚地了解他们所面临的挑战。 故事是由一位千禧一代的自述,用一种比较幽默的手段讲述了他们所面临的财务困境和其他现实问题。 这个网页是通过怀旧的视频动画游戏,结合像素化的图形和一些有趣的视觉效果来呈现的。它抓住了千禧一代人的复杂情感,同时也是为了让年轻人更容易接受和阅读。 读了网页上的内容,不禁让我对千禧一代产生了更多的同情。这就是一个很好的例子,使用智能,有趣的网页设计来连接更多的读者。
案例3)UTC is enough for everyone... right?(UTC对每个人来说都足够,对吗?)
案例5)The History of the Web: Interactions 2.0(Web设计历史:交互2.0)
滚动视差设计的使用打破了传统故事展示的局限,充分使用网页这种载体将创意发挥到极致。 Introduction to Interactions 2.0(https://webflow.com/ix2) ,这个网站带着读者围观了从web最初始的阶段一直到现如今不会写代码也能创造出很棒的网站的突破。网站里包含了许多令人愉悦的网页效果,回看这些历史不禁感叹,趋势的更新迭代是有快啊。
案例6)Time in Perspective(时间透视)
滚动视差设计是讲述线性故事的完美媒介——还有什么比时间流逝更线性呢?从24小时直至宇宙的尽头,在 Time in Perspective(https://wfs2.webflow.io/time-in-perspective) 滚动触发动画时间轴,显示每一个阶段。这是一个很好的例子,使用网页设计并不仅仅是为了营销,设计同时也是创新教育的有力工具。
案例7)If the Moon Were Only 1 Pixel (如果月球只有一个像素)
If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 网站使用的是一种横轴动画,带你穿越浩瀚的宇宙。Josh Worth在向女儿解释到达火星需要多长时间后创建这个网站,他想知道自己是否能用电脑来绘制太空地图。这个网站很好的聚焦于空间的深度,帮助我们理解宇宙的深邃。Josh Worth用一个像素代表了月球,然后显示了与其相关的一切物体。 这个项目是另一个很好的例子,说明好的设计可以让学习变得更有吸引力。
案例9)Ali Wong Structure of Stand-Up Comedy(Ali Wong的喜剧结构)
马克吐温有句名言:“解释幽默就很像解剖一只青蛙,你在这个过程中是能学到很多,但最终你却把它杀死了。”但遗憾的是,对于他来说,没能等到数字时代的到来。 之前给出的很多案例都在讨论把滚动效果应用于时间轴相关的内容。喜剧表演是一种叙事性的表演,节奏和组合的重要性与真正的笑话一样。 Ali Wong Structure of Stand-Up Comedy(https://pudding.cool/2018/02/stand-up/) 是对Ali Wong最新脱口秀《Baby Cobra》的分析,它分析节目中的每一个瞬间,每一个笑话,以显示最大的笑点到底在哪里。这是一个关于时间和节奏如何能够带来更好效果的有趣研究,同时也让我们了解到Ali Wong为什么能成为如此出色的作家和演员。
当页面上有一个闲置的设计元素时,比如标题,为什么不给它一些活力呢?水平动画唤醒了这些沉睡的设计元素,给予它们新的生命。以上面给出的例子来说明,水平移动标志着故事的开始,“Let's go outside”更具有吸引力。 这里我们也提供了一份教程(https://university.webflow.com/article/horizontal-movement-on-scroll).
水平滚动
水平滚动是一个不错的改变,它会让你的注意力集中到内容上,并打破传统的垂直布局。 Proud and Torn(https://proudandtorn.org/)是一个关于匈牙利历史的网站,使用水平滚动来突出它所涵盖的不同时代。