交互-滚动和固定

使用滚动和固定设计高保真产品原型

为容器添加滚动行为

溢出

当容器内元素的尺寸和位置超出容器范围时,便产生了溢出。例如:

  • 预览图容器尺寸固定为 500 * 500,但容器内包含一张 1000*1000 的图片
  • 列表区域容器尺寸固定为 375 * 600,但容器内包含 20 个列表项,总高度超过 1500
  • Banner 区域容器尺寸固定为 345 * 220,但容器内包含横向排列、间距为 10 的 5 张图片,图片宽高为 300 * 200

滚动

示意图 当容器内元素溢出时,可以为容器添加滚动行为,以便于在原型预览时通过滑动或拖拽浏览容器内的所有内容,例如:

  • 一个可以通过平移查看放大后的照片细节的照片预览器
  • 一个可以上下滚动的短视频列表
  • 一个可以左右切换的头图轮播器

滚动设置方法:

  1. 选中一个容器
  2. 右侧属性面板切换到原型
  3. 按需设置溢出滚动
  • 无滚动(默认),预览时将无法查看到容器内超出容器边界范围的内容
  • 水平,比如头图轮播器
  • 垂直,比如常见的纵向内容列表
  • 水平与垂直,比如放大镜

⚠️ 注意:容器内元素溢出容器不同于容器溢出显示屏幕,后者在预览时也可以滚动预览整个容器,但此时是预览器的滚动行为,而非容器的滚动行为

设置容器内元素的滚动行为

选中容器内的元素,在右侧找到约束属性 - 固定行为;如果所在容器添加有自动布局,此选项不可见 示意图

也可以切换到原型,和溢出滚动一同设置 示意图

随父级滚动

容器内元素会被默认设置为随父级滚动,此时,如果滚动容器,元素会跟随一起滚动 scroll04.gif

固定

此时滚动容器,元素相对屏幕固定 scroll05.gif

吸顶固定

元素会跟随滚动,直到碰到屏幕顶端 scroll06.gif

⚠️ 注意:

  • 请确保元素所在容器添加有溢出滚动效果,否则为元素添加的滚动行为在预览时不会生效
  • 如果容器内同时包含固定和滚动元素,相应元素在左侧图层树上会自动分组

示意图

👉本篇文章对你是否有帮助?👍🏻 有帮助 👎🏻 无帮助,我们期待着你的反馈。