![]()
本文已获原文作者授权翻译并发布。
如今的网页设计已不再是静止不变的了。有了先进的原型工具和动画软件，设计师也可以探索更多的动态 Web 体验。滚动效果就是我们在一些互动网站上经常看到的一种。基于一些由滚动触发的动画库，打造动态Web 的滚动体验变得更加容易。你可能看到过一些交互式网站在用户向下滚动时加载更多内容的那种酷炫体验。自己在设计时也尝试着一些滚动特效来加强体验。在研究了一些，自己也做了一些利用滚动效果的项目，我决定收集我所学到的来跟大家来分享。
![]()
01 保持滚动
想让你的用户在你的页面上呆的更久？增加一些滚动效果可以吸引你的用户探索和持续浏览。特别是一些长而无趣的内容时，滚动的效果可以让他们更专注，能在你的页面上停留更长的时间。https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study
http://paletteforyourpalate.com/exhibit 02 分割内容
把内容分割成一些小节，给新的小节增加转场，这可以给用户一种视觉线索。也可表示小节的结束和新小节的开始。![]()
03 三维导航
滚动可以赋予事物新的纬度。不仅仅是垂直的上和下。也可以是拉近和拉远，甚至是透视进一个物体。他创造了一种三维体验。
![]()
http://accord.trafficdemos.com/
04 引导视线
人类的眼睛总是被运动的物体所吸引。当改变不同物体出现的顺序时，你可以引导用户视线关注到你想他们关注的地方。BlackRock: Investor Pulse
https://www.blackrock.com/corporate/insights/investor-pulsehttps://designers.at.finsweet.com/http://antonandirene.com/
05 保持静止
滚动不仅可以带来移动，也可以让物体静止在页面的某处，这样用户就可以呆在同样的章节处也可以浏览更多的内容。Redesign of KarimRashid.com
http://work.antonandirene.com/karimrashid/2/![]()
https://stories.readymag.com/mollino/
06 放大或缩小
改变物体的大小或者缩放可以改变焦点，为将要出现的内容作准备。这种变化也可以很顺滑和有趣。![]()
https://www.apple.com/apple-card/
07 旅程导航
使用滚动可以作为一种旅程或故事的引导方式，特定的叙述方式可以让内容更好理解，并且互动起来更有趣。
08 视差滚动
视差在打造交互式网站上已经是一种非常流行的技术了。它可以创造出非常逼真的 3D 体验。通过控制从后到前不同图层的移动速度，它可以模拟出物体在用户变换视角时的真实变化。http://www.firewatchgame.com/
![]()
好了，现在有这么多方式可以使用滚动效果，那这意味着越多越好吗？什么情况下要避免使用呢？
01 分散注意力
动效可以引导注意力。然而我们并不希望滚动分散用户需要注意的地方。如果动效分散了目标内容，这时候就并不适合使用了。
02 不同的品牌识别
动效增加了设计的特色。为了打造和谐一致的浏览体验，我们不应该囊括不同的品牌和调性。举个例子来说，元素弹跳出现在页面中一般来说就不适合严肃的商业网站。 03 可用性问题
和界面设计一样，避免可用性问题在动效设计中也是非常重要的。你知道并不能因为动效问题分散了用户对关键信息的注意，更不要说导致了一些可用性的问题了。
04 太多了
少即是多，这里同样适用。当所有东西都在屏幕上动来动去还变化着形状，这还不如没有动效。尽量避免在一屏中或者页面中使用太多动画和特效。
05 造成不适
如果添加的效果让人头晕和难受，那最好是不要使用了。特别是使用3D效果，看起来的确很酷炫，但是在某些情况下也可能引起不适。
06 如果没有需要的话
最后，如果本身并不需要滚动效果的话，就并非一定要增加。在设计中尝试不同效果还有探索不同效果带来的可能性是非常有趣的，如果没有对旋转或缩放这些效果没有什么诉求，保持页面原有的样子就好。
原文地址：
https://uxplanet.org/best-practices-to-use-scrolling-effects-with-examples-a448ac761bb9
![]()