原型的固定和滚动

溢出行为

在制作原型时,可以通过为容器设置溢出行为来实现演示时的滚动效果。通过选取不同的滚动方式,可以实现纵向列表、横向列表、照片墙或互动地图等交互效果,构建出更复杂或更高保真度的原型。

设置方法

当容器中有元素超出了容器所框选的范围时,在原型模式下选中该容器,则可在右侧属性面板中的“溢出行为”栏进行设置,以便展示滚动效果。

“溢出行为”包含“无滚动”、“水平滚动”、“垂直滚动”、“水平 & 垂直滚动” 4 个选项,默认选项为“无滚动”。

  • 无滚动:页面不会滚动展示,超出容器框选范围的元素不会在演示时被看到。
  • 水平滚动:当有元素在水平方向超出了容器的框选范围时,设置该选项,可以在演示时水平滚动页面,以便展示所有内容。
  • 垂直滚动:当有元素在垂直方向超出了容器的框选范围时,设置该选项,可以在演示时垂直滚动页面,以便展示所有内容。
  • 水平 & 垂直滚动:当有元素在垂直方向和水平方向均超出了容器的框选范围时,设置该选项,可以在演示时在水平方向和垂直方向滚动页面,以便展示所有内容。

img

演示滚动时位置固定

在演示长设计稿时,使用演示滚动时位置固定的功能,可以规定某个元素在页面滚动时位置不跟随页面发生变化,来模拟“吸顶”或“吸底”效果。

设置方法

约束的方向决定了元素固定的参照方向。在设计模式下,选中要固定的元素,在确定了需要固定的元素的约束方向后,在右侧属性面板的「约束」栏中,勾选“演示滚动时位置固定”即可。(如下图中 A 所示)

此时在左侧图层面板,会多出“固定内容”与“滚动内容”两个分组,该元素会被归入“固定内容”分组。(如下图中 B 所示)

img

演示效果

通过上述步骤,我们已经为元素设置好了位置固定,接下来在进行原型演示时,就可以看到即使整体页面滚动,但设置了位置固定的元素依然可以保持位置不变。

  • 当演示设备的尺寸小于画布中容器的尺寸时

img

  • 当为容器设置了溢出行为时img