常见交互

使用3D旋转创建滚轮选择器

使用联动和3D旋转，为滚动选择器的用户体验增添细节。

Abhas Sinha, User Experience Designer @ Microsoft

August 15, 2023

使用3D旋转创建滚轮选择器

介绍

滚动选择器非常直观且被广泛使用。当您在网页表格中选择出生日期，或者从小列表中选择项目时，常常会用到滚动选择器。您只需在选择器中滚动到需要的项目！
滚动选择器非常易于使用和理解，带来愉快的用户体验！在本文中，您将学习如何使用 ProtoPie 的「联动」和「3D旋转」功能创建滚动选择器，以提供丰富的视觉效果。

您将学到什么

  1. 使用滑页容器层创建滚动视图
  2. 通过使用变量获取滚动值
  3. 使用「联动」和「3D旋转」基于滚动值添加丰富的视觉表现
  4. 使用「自动加载」设置每个选项的初始旋转角度
最终，您将能够制作出这样的效果！
1
无交互的源文件 含交互的源文件

分步说明

1. 使用滑页容器层创建滚动视图

创建一个可滚动的基础组件。
  1. 添加一个滑页容器层，将其尺寸设置为327 x 216，以覆盖场景中的白色框。为了方便使用，将该容器重命名为 Paging 滑页。
  2. 选择所有的月份图层，将这些图层拖放到滑页容器层中。这就是一个将在容器内滚动的列表。
2
💡 在设置 Paging 滑页容器层容器尺寸时，注意必须将高度设置为216，原因如下：
  • 它将在滚动过程中使每个选项在容器中居中显示。每个月份图层的高度为72，在滑页容器层中，同时可以看到三个图层，即3 ✕ 72，所以高度是216。
  • 它将成为屏幕上唯一可以被用户滚动触摸的区域。
3. 选择 Paging 滑页容器层容器，在属性面板中更改以下设置。
3
  • 将滚页方式从容器层更改为自定义，值设为72。这样做可以使每个滚动间隔（滚页）等于72，直接对应于每个月份图层的高度72。这样一来，就确保了每个月份图层在滚动过长中全完对齐。
  • 将滚页至设为72，这样做就会在场景开始时把滚动的数值偏移到72。由于列表中的第一个月份是六月（高度为72），72点的偏移将使第二个选项（七月）显示为选中状态。
4. 在列表的尾部添加一个额外边距，以便最后一项（十二月）可以显示在滚轮的中心。为此添加一个矩形，命名为 Margin 边距。
将 Margin 边距图层放于 Paging 滑页容器层内，并将尺寸设为217 ✕ 72，与其他月份图层相同。这将使十二月出现在中心位置。
此外，将 Margin 边距图层的透明度设置为0，使边距不显示在列表中。
4
5. 选择 Paging 滑页容器层，并在属性面板中勾选切剪子层。这将隐藏容 器框外的所有内容。
5

2. 通过使用变量获取滚动值

为了进一步进行交互，需要了解用户滚动列表的距离。为此，将使用一个变量，并让它监听和存储滚动值。以下是具体步骤：
  1. 创建一个仅适用于当前场景的变量，命名为 Scroll。这里必须添加仅适用于当前场景的变量，因为我们将给该变量设置表达式，而只有适用于当前场景的变量才能设置表达式。
  2. 选择 Scroll 变量，在属性面板中勾选变量中使用表达式。
  3. 填入表达式 'Paging'.scrollOffset。Paging指 Paging 滑页容器层容器，scrollOffset 指返回其当前的滚动值。
6
4. 点击变量的调试图标，在预览窗中实时查看变量的值。再次点击调试图标可以在预览窗中隐藏滚动值。
7

3. 使用「联动」和「3D旋转」基于滚动值添加丰富的视觉表现

这一步是让原型看起来更逼真的秘诀。以下是具体步骤：
  1. 选择 Paging 滑页容器层容器，添加一个「联动」触发，并在属性面板中将值设置为 Scroll 滚页。
8
2. 添加一个「3D旋转」反应，对象选择 June 图层。
9
在「3D旋转」反应的属性面板中，使用以下数值：
  • 在范围1的起始位置，当 Paging 的滚动值为0时，June 图层的3D旋转角度为0，即保持平面状态。在范围1的结束位置，当将 Paging 滚动到72时，June 图层应该旋转到35度的角度。
  • 将旋转方向设置为向上。
这样，当Paging从0滚动到72时，June将从0º逆时针旋转到35º，实现向上旋转的效果。
3. 同上，为 July 图层添加一个「3D旋转」反应。这次需要在 Paging 向上滚动时将图层向上旋转，并在 Paging 向下滚动时将图层向下旋转。为了实现这个效果，将使用两个范围。
  • 范围1，设置当 Paging 从0滚动到72时，将 July 图层从-35º旋转到0º。由于这里使用了负角度（-35º），因此将方向设置为向上。
  • 范围2，设置当 Paging 从72滚动到144（即72 ✕ 2,，因为 July 是第二个项目），将 July 图层从0º旋转到35º，将方向设置为向上。
10
4. 需要对每个月份图层重复此操作。
请查看含交互的源文件 ，确保联动的数值设置正确。

4. 使用「自动加载」设置每个选项的初始旋转角度

正如预览窗所示（或上面的录屏），每个月份图层的旋转角度会在0的位置瞬间发生变化。例如，当September图层首次出现在屏幕上时，可以看到它是从平面状态变为旋转状态。
这是因为上面已经为每个图层定义了特定滚动范围的3D旋转，但当原型开始时，September 等图层位于该范围之外。当它们进入该范围时，3D旋转会立即发生，所以会显得有些突兀。
从视觉上来说，这种效果不太流畅，但是可以很容易地修复！以下是具体步骤：
  1. 添加一个「自动加载」触发。
  2. 在「自动加载」触发下添加一个「3D旋转」反应，对象选择 June 图层。将旋转方式更改为旋转至，并将值设置为35，方向为向上。最后，将持续时间设置为0。
12
💡 将持续时间设置为0 会在场景开始时立即将图层旋转到35度。我们希望这个效果是及时的，这样用户就不会在场景开始时看到一个动画。
3. July 图层在场景开始时已经处于0角，所以不需要设置开始值。对于 August 图层和之后的每个图层，需要重复以上步骤，只需将旋转至的值设置为 -35。
13
4. 完成了! 打开预览窗测试原型。
14

太棒了！

做得好！您已经学会了如何创建滑页容器层，并通过使用变量设置其初始值和实时滚动值。您还学会了如何使用「联动」触发和「3D旋转」反应来应对滚动值。最后，还学会了使用「自动加载」触发来设置场景以及它所带来的效果。
恭喜您，已经完成了本节教程的学习，对ProtoPie 功能的掌握又更近一步！欢迎扫码加入ProtoPie 官方 QQ用户交流群 (69980214)，和各行各业UI/UX设计师讨论如何用ProtoPie 提高工作效率，一起互相帮助解决问题吧。
对该交互的制作还有问题？联系我们