???位??: 主页 > 香港挂牌 >

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

???:2019-09-22 21:47???:未知 ????:admin ???:??
滚动页面是一个很常规的操作,结合这个交互行为可以在设计上有哪些可以发挥的点呢?可能这对很多人来说,算是一块知识盲区,那么就跟着这篇文章一起来学习吧! 设计师应该要了解网页上各种效果的实现能力,才能给用户创造出非常吸引人的视觉体验。 滚动页面

  滚动页面是一个很常规的操作,结合这个交互行为可以在设计上有哪些可以发挥的点呢?可能这对很多人来说,算是一块知识盲区,那么就跟着这篇文章一起来学习吧!

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

  滚动页面是一个很常规的操作,结合这个交互行为可以在设计上有哪些可以发挥的点呢?可能这对很多人来说,算是一块知识盲区,那么就跟着这篇文章一起来学习吧!

  视差滚动特效是用户在滚动页面的过程当中,页面中不同元素随之进行不同速率的运动,所营造出的接近3D的视觉效果。设计中增添音频和视觉为内容赋予了更多的生机,传达出许多纯文字无法捕捉到的内容。滚动视差以步步推进的方式传达出内容,以吸引人们阅读,它利用了网页的优势呈现出非常棒的视觉效果。

  滚动视差设计特别适合用来叙述一些细腻内容,随着内容慢慢铺开,通过设计能使得内容变得更加鲜活。滚动视差能够突出故事内容,并把你吸引到它的叙述中。优秀的设计能够使得每一页的衔接自然流畅,使你在下滑页面的过程中更加专注于内容。

  我收集了一些非常好的滚动视差设计案例来帮助大家设计出属于自己的网页效果。

  Snow Fall:The Avalanche at Tunnel Creek(是一部引人入胜的杰作。这是2012年华盛顿雪崩的悲惨故事,这个故事的每个部分都有自己独立的页面。

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

  这是一种多媒体讲故事的方式,它揭示了本质原因,是什么促使了人们在寻求刺激的过程中不顾危险。

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

  故事是由一位千禧一代的自述,用一种比较幽默的手段讲述了他们所面临的财务困境和其他现实问题。

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

  读了网页上的内容,不禁让我对千禧一代产生了更多的同情。这就是一个很好的例子,使用智能,有趣的网页设计来连接更多的读者。

  对大多数人来说,世界标准时间(UTC)并不是一个特别吸引人的话题。但Zach Holman做了一个网站,解释了它的工作原理以及使用时的复杂性。他的网站风趣幽默,把枯燥的理论讲的通俗易懂。

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

  任何读过枯燥技术文章的人,都可能会昏昏入睡。这个案例在说明一件事,那就是富有创造力的展现形式可以将最枯燥的话题变得有趣。对于那些对程序设计不感兴趣的人来说,这个网站应该算是一份非常有吸引力的读物了。

  慢慢滚动鼠标浏览网页设计和艺术史()就像真的是在一座博物馆里消磨时间(译者注:我滑了好久)。每一个内容区间都像一个画廊分支,展示了某一段时间内的流行趋势。这个网站,记录了艺术的演变。

  由于网页设计和视觉艺术有一些共通的语言,熟悉艺术史可以启发自己创作出优秀的作品。如果你对艺术和设计感兴趣,这个网站将会是一份很好的入门读物。

  滚动视差设计的使用打破了传统故事展示的局限,充分使用网页这种载体将创意发挥到极致。

  Introduction to Interactions 2.0(,这个网站带着读者围观了从web最初始的阶段一直到现如今不会写代码也能创造出很棒的网站的突破。网站里包含了许多令人愉悦的网页效果,回看这些历史不禁感叹,趋势的更新迭代是有快啊。

  滚动视差设计是讲述线性故事的完美媒介——还有什么比时间流逝更线小时直至宇宙的尽头,在 Time in Perspective(滚动触发动画时间轴,显示每一个阶段。这是一个很好的例子,

  案例7:If the Moon Were Only 1 Pixel (如果月球只有一个像素)

  If the Moon were only 1 pixel(网站使用的是一种横轴动画,带你穿越浩瀚的宇宙。Josh Worth在向女儿解释到达火星需要多长时间后创建这个网站,他想知道自己是否能用电脑来绘制太空地图。

  Josh Worth用一个像素代表了月球,然后显示了与其相关的一切物体。这个项目是另一个很好的例子,说明好的设计可以让学习变得更有吸引力。

  我们每天接收到的信息太多了,从海量的信息中,我们很难保证知道最新的状态。华盛顿邮报的追踪伊斯兰国()展示了伊斯兰国的历史和当前发展。

  右侧的界面,滚动可以浏览时间轴,而在界面的左侧则在地图上突出显示故事发生的位置。点击地图上的点,你就会看到那个位置的具体情况。

  案例9:Ali Wong Structure of Stand-Up Comedy(Ali Wong的喜剧结构)

  马克吐温有句名言:“解释幽默就很像解剖一只青蛙,你在这个过程中是能学到很多,但最终你却把它杀死了。”但遗憾的是,对于他来说,没能等到数字时代的到来。

  Ali Wong Structure of Stand-Up Comedy是对Ali Wong最新脱口秀《Baby Cobra》的分析,它分析节目中的每一个瞬间,每一个笑话,以显示最大的笑点到底在哪里。这是一个关于时间和节奏如何能够带来更好效果的有趣研究,同时也让我们了解到Ali Wong为什么能成为如此出色的作家和演员。

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

  这种效果可以应用于文本或者视觉效果,我们在Graphic design archive中使用这种效果,标志着一个新的内容块的开始。

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

  Proud and Torn是一个关于匈牙利历史的网站,使用水平滚动来突出它所涵盖的不同时代。

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

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

  (译者注:sticky 是css position中的一种新增属性,相当于relative和fixed的结合体。这个属性的表现就是现实中你见到的吸附效果。)

  滚动一段时间后,侧边栏就会固定在某一个位置,用这种效果来做导航实在是非常好用。

  线上课程 文案小白只要掌握这些实用方法,就能轻松写出80-90分的好文案

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

(???伪???admin)
???????:
哈尔滨WEB前端课程 什么是web网站设计
服务评价  | 诚聘英才  | 友情链接  | 联系我们  | 投诉建议
版权所有:
棣欐腐鎸傜墝| 涓鑲栦腑鐗| 鏉鑲栭珮鎵嬭鍧| 寮濂栫粨鏋| 璐㈢鐖疯鍧| 涓鍝佸爞楂樻墜| 涓鑲栦腑鐗| 棣欐腐鎽囬挶鏍戣鍧| 鐧藉璁哄潧| 璐㈢楂樻墜璁哄潧|
?顙???'???????????????????????????