在 Adobe XD 中创建滚动组

通过 Adobe XD 中的滚动组，您可以在画板中定义独立于画板其余部分而单独滚动的区域，以创建水平或垂直滚动效果。设计 UI 元素（如图像轮盘、产品滑块或交互式地图）时，使用滚动组十分方便。

阅读以了解如何在 XD 中使用水平、垂直以及水平和垂直组合的滚动组。

确保熟悉 XD 中的设计、原型和共享模式。

限制

滚动组在设计规范中不起作用。作为变通方法，可在单独的画板中添加滚动组，并将其作为设计规范的一部分进行发布。

创建水平滚动效果

想要创建水平滚动的轮盘原型？观看此动画插图并按照以下步骤学习如何创建水平滚动效果。

1. 在“设计”模式中，选择要转换为滚动组的对象。
   
2. 单击“属性检查器”中的 图标。视区自动调整其尺寸以提供即时预览体验。您还可以使用 ⇧⌘H（在 macOS 中）和 Shift+Ctrl+H（在 Windows 中），以创建水平滚动效果。
   
3. 要预览水平滚动效果，请选择 。
   

创建垂直滚动效果

想要创建垂直滚动的轮盘原型？观看此动画插图并按照以下步骤学习如何创建垂直滚动效果。

1. 在设计模式下，选择要转换为可滚动组的对象。
   
2. 选择属性检查器中的 图标以上下滚动。视区自动调整其尺寸以提供即时预览体验。您还可以使用 ⇧⌘V（在 macOS 中）和 Shift+Ctrl+V（在 Windows 中），以创建垂直滚动效果。
   
3. 要预览整个垂直滚动效果，请选择 。
   

创建水平和垂直滚动效果

创建对象时，将水平和垂直滚动效果相结合很有用，这样一来，您创建的对象可实现各个方向滚动（例如，交互式地图）。观看此动画插图并按照以下步骤操作。

1. 在设计模式下，选择要转换为可滚动组的对象。
   
2. 选择属性检查器中的 图标。视区自动调整其尺寸以提供即时预览体验。您还可以使用 ⇧⌘D（在 macOS 中）和 Shift+Ctrl+D（在 Windows 中），以创建水平滚动和垂直滚动组合效果。
   
3. 要预览整个水平和垂直滚动效果，请选择 。
   

了解详情

要详细了解 XD 中的水平和垂直滚动组，请观看此视频。

观看时长：6 分钟

提示和技巧

现在，您已了解如何在 XD 中创建水平和垂直滚动效果，下面是一些实用提示和技巧：

• 在 Windows 和 Web 上预览原型时，请使用触控板、鼠标滚轮，然后通过单击并拖动来检查水平和垂直滚动效果。
• 在 macOS 预览中，使用触控板和鼠标滚轮，通过单击并拖动来检查水平和垂直滚动效果。
• 将滚动组与组件状态和操作类型（如叠加、自动制作动画和滚动至）组合。
• 使用填充，为滚动组添加更好的偏移控件。
• 在设计中创建多级滚动时，请使用嵌套滚动组。

后续操作？

我们已向您介绍了如何创建水平和垂直滚动效果。您可以进一步学习如何创建交互式原型，并将其与设计人员或利益相关者共享，以便获取相关反馈。

有疑问或想法？