跳过导航

创建滚动效果

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

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

创建可滚动画板

创建滚动画板

观看课程

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

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

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

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

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

An image showing how to create a vertically scrolling prototype

如何创建垂直滚动原型

创建滚动区域

创建滚动区域

观看课程

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

首先,为您的可滚动内容创建一个符号。 接下来,创建一个符号实例,转到检查器中的 原型 选项卡,然后单击 设为可滚动。 最后,选择您是否要使符号水平、垂直或双向(多向)滚动。

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

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

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

您可以手动调整包围可滚动组的边界,甚至从没有调整大小手柄的边缘调整。 为此,请选择您的可滚动组或符号,打开 原型 选项卡,单击 选择可滚动蒙版 图标 向前箭头,然后向任何方向调整滚动区域的边界。

请注意,您目前不能使用 alpha 蒙版来创建滚动区域。

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