你在设计中使用过几种滚动交互呢？其中巧妙运用的有多少？
接下来我为大家分析三种不同的滚动交互，并告诉大家他们使用的场景以及规则。我希望这些可以在实际工作中，帮助你构建设计。
基础
众所周知，应用滚动交互时有一条总体规则。
规则1
你一次只能在一个轴上应用滚动交互。
通常，该轴是垂直或水平的。垂直滚动是现在app的主流交互形式，水平滚动可以有效的利用信息空间，显示更多的内容。但是，如果将滚动手势应用于多个轴，则会打破边界。
上面的例子（红色方块）显示了一个能够垂直和水平滚动的对象。它成为一个自由形式的对象，比起滚动交互的说法，他应该被称为拖动交互。
小贴士
自由形式对象的滚动也是一个常见的交互。比如我们常用的手机地图，这里我们不做过多延展。今天的主题是如何整合和扩展更传统的滚动手势。向上/向下，左右。
嵌套式滚动
我们可能无法改变单轴的规则，但是我们可以让他错位。将滚动交互扩展到单个轴之外的最稳定的方法是合并滚动组。滚动组允许您同时将垂直和水平滚动手势应用于单个对象。
实际上，嵌套的功能是将两个独立对象的滚动交互应用于第三个对象。下面的案例结构允许“水果”组与“蔬菜”组分别进行滚动，下方接收来自两个滚动交互的手势。
实质上，嵌套滚动使用父子级转换来绕过规则＃1。在上面的例子中，'水果'组垂直滚动，而父级'水果蔬菜'组水平滚动。如果两个组以相同的方向滚动，比如说垂直方向，那么这两个组合就会发生冲突。系统将无法将区分手势。这就是我要讲的滚动交互的第二条规则。
规则2
您无法将相同轴的两个滚动交互应用于同一个对象上。
复合滚动
复合滚动不是专注于实际的滚动交互，而是将该交互扩展到设计的其余部分。
他涉及到动画停止时，滚动交互的位置。在底部示例（左）中，嵌套滚动组允许您滚动浏览不同的鞋子，并滚动浏览每只鞋子的描述。鞋的缩略图随着卷轴滚动。我将鞋子缩略图设置在特定滚动位置。这样一个手势控制着几个不同的设计。
看看另一个例子（右）。同样的动态正在发生，但相反。鞋子图标位于嵌套滚动组中，而鞋子描述不是。你可以看到交互不像左边那样平滑，并且需要更大的手势来激活交互。我可以告诉你，这种特殊的互动经常发生。发生什么时滚动交互不会触发手动动画？假设鞋子出现的触发器是从0px-66px的滚动位置。如果我以某种方式从5px-66px滚动，那么手动动画不会触发。
规则＃3
不要做太多滚动交互。
主动操作
那么滚动与滑动的区别是什么呢？是主动操作。滑动开始并结束。滚动始终处于活动状态。以前的设计大量使用分页滚动来消除这种活跃的动作。下一个设计，我试图突出它。
我重新设计了Medium中的交互体验，将所有的类别内容包含在卷轴抽屉中。您可以下拉打开抽屉，或将其收起，保留信息空间。
我很喜欢这种设计，但是你可能注意到他已经违反了第二条规则。用于打开抽屉的垂直滚动位于主内容的顶部。有时当我向下滚动时，手势打破了内容的边界，导致抽屉自发地打开。
规则2修改
您无法将同一轴上的同一方向上的两个滚动交互应用到一个对象上。：d
希望这些规则会帮助我们更好的工作，而不是禁锢。
如果你喜欢这篇文章，一定要关注我。
本文翻译来自Medium,原文链接https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716
更多UI设计技巧，欢迎来简书关注我
