创建可滚动画板

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

了解如何创建可滚动画板。

在创建 XD 设计时,有时画板的长度不足以容纳您的内容。 通过根据设计需求加长画板并选择选项,可垂直滚动画板以适应不同的设备尺寸。

在设计可滚动的下拉列表或网站时,垂直滚动可帮助您模拟滚动效果。 但是,在设计多面板界面、地图和水平图库时,可以使用滚动组添加新交互级别。

可滚动画板

创建垂直滚动

在预设画板上:向下拖动画板的最低点,使其长度超过设备屏幕的长度。 虚线表示可滚动内容的起始位置。 

虚线和可滚动的内容
虚线和可滚动的内容

“设计”模式下的“属性检查器”中选择以下选项:

  • 滚动:选择“垂直”“无”。 
  • 滚动时固定位置:选择此项可将元素固定在某个固定的位置,以免随内容一起滚动。 
  • 视区高度:指定查看画板所凭借的视区高度。 

您可以应用垂直滚动效果来上下移动画板的内容。

自定义大小的画板上的垂直滚动
画板上的垂直滚动

在原型模式下连接画板。

“原型”模式下的“属性检查器”中选择以下选项:

  • 保留滚动位置:在保持前一个画板中位置的同时过渡到下一个画板。 有关更多详细信息,请查看此 Twitter 帖子。 
  • 滚动时固定位置:将设计元素固定到固定位置,避免它们随内容一起滚动。 
保留滚动位置
保留滚动位置

滚动时固定位置
滚动时固定位置

要预览画板,请选择“桌面预览” 。 拖动预览窗口以查看垂直滚动条

示例和样本文件

要用预设画板创建垂直可滚动的下拉列表?

  1. 使用选择工具单击画板名称或在画板之间拖动。 还可在图层面板中单击某个画板名称以在“文档”窗口中选择它。
  2. 要加长所选画板,请向下拖动该画板的最低点。 虚线表示画板的原始高度。
  3. 要在画板上预览滚动,您可以通过使用“桌面预览”选项在 XD 中直接预览。

请下载样本文件并亲自尝试,或者观看此视频以了解更多信息。

观看时长:1 分钟。

在为桌面或移动设备构建设计时,您是否希望仅在滚动时看到网站的某些部分,并固定设计元素使其不浮动?观看此视频,详细了解可滚动画板和固定元素。 

观看时长:1 分钟。

您还可以查看 XD 社区,了解更多这样的教程和示例文件。

提示和技巧

要在设计中创建水平滚动效果,请使用滚动组。 滚动组方便您为内容窗口创建原型,该窗口可以水平、垂直或双向滚动。


相关资源

有疑问或想法?

询问社区

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