新增:智能动画 — 为您的原型添加动效。 了解更多

跳过导航

创建滚动效果

上次更新于 2024 年 5 月 7 日
阅读时间:2 分钟

滚动效果使您能够创建更接近于最终产品的逼真原型。例如,使用滚动区域,您可以创建模拟列表、卡片行,甚至可以向任何方向移动的地图的应用程序原型。使用滚动画板,您可以增加正在使用的画板模板的高度,这意味着您的原型将拥有足够的空间向下滚动一个包含大量内容的长页面。

创建滚动区域

观看课程

创建滚动区域

您可以在画板内添加水平、垂直或多方向滚动区域,以在原型中创建逼真的可滚动 UI 元素。

首先为您的可滚动内容创建一个符号。接下来,创建该符号的实例,转到检查器中的“原型”选项卡,然后点击“设为可滚动”。最后,选择是要使符号水平垂直滚动,还是同时向两个方向滚动(多方向)。

当您将符号或组设为可滚动时,我们会为其添加一个特殊的剪切蒙版。这将控制滚动区域的大小以及在开始滚动之前可见的图层。要调整可见的滚动区域,请返回检查器中的“原型”选项卡,并在画布上选择您的可滚动组

您将在左侧和右侧的选择上看到一组滚动手柄(用于水平滚动),顶部和底部(用于垂直滚动),以及所有四个侧面(用于多方向滚动)。点击并拖动手柄以调整滚动区域的可见区域。

如果您发现您的组超出画板边界,我们建议您使用符号实例而不是组。

您可以手动调整包含可滚动组的边界,即使是从没有调整大小手柄的边缘也可以。为此,选择您的可滚动组或符号,打开“原型”选项卡,点击“选择可滚动蒙版”图标前进箭头,然后向任何方向调整滚动区域的边界。

请注意,您目前无法使用Alpha 蒙版来创建滚动区域。

如何在原型中创建和自定义滚动区域

创建可滚动画板

创建可滚动画板

观看课程

首先在工具栏中打开“插入”创建并为原型将在视口中显示的固定窗口选择一个“模板”。或者,创建您自己的画板模板用作滚动画板。

接下来,增加画板模板的高度(检查器中的预设尺寸将显示星号*以指示您已调整其大小),并添加将在视口中滚动的额外图层。

最后,预览预览您的原型以查看调整大小的画板及其中的图层如何在视口中滚动。

请确保使用画板模板创建可滚动画板。如果您尝试使用自定义画板,则您的原型不会在应用、Web 应用和 iOS 应用中滚动。此外,请记住,可滚动画板仅适用于垂直布局。

您可以创建并添加固定元素到您的滚动原型中,例如选项卡和菜单栏。

An image showing how to create a vertically scrolling prototype

如何创建一个垂直滚动的原型