在 Adobe XD 中创建滚动组

上次更新日期: 2023年2月10日

了解如何创建独立于画板其余部分单独滚动的滚动组。

通过 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 预览中,使用触控板和鼠标滚轮,通过单击并拖动来检查水平和垂直滚动效果。
  • 将滚动组与组件状态和操作类型(如叠加自动制作动画滚动至)组合。 
  • 使用填充,为滚动组添加更好的偏移控件。
  • 在设计中创建多级滚动时,请使用嵌套滚动组。

后续操作?

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

有疑问或想法?

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。 我们很乐意倾听您的心声并欣赏您的创意作品。