上一章 Figma的交互基础认识

Figma的页面滚动设置

UX百科编辑部1天前 发布
39人在学·0条笔记
收藏

进入Figma的预览模式时,如果设置了预览的设备类型,那么预览时就会应用该设备的外观,将画布内容置入到设备屏幕中。

在Prototype原型编辑模式下,点击空白位置,则右侧的属性面板会切换成预览效果的设置,包括设备类型、设备外观色、展示方向、背景色、预览效果等。

而在实际设计过程,页面内容的宽度、高度往往会较长,超出预览设备的屏幕显示范围,于是就需要通过滚动手势进行画布内容的平移,查看被隐藏的部分。

如果选中演示画板Frame,则属性设置中会有一个 Scroll Behavior的属性栏,Overflow设置可以选择在预览模式中的滚动方向,包括:

  • No scrolling:不做滚
  • Horizontal:水平滚动
  • Vertical:垂直滚动
  • Both direction:自由滚动

需要注意,如果是整个页面的画板 Frame超出预览的设备的显示区域,那么它即使没有添加滚动设置,也能进行滚动。而这个设置更多是应用在画板内的其它下级 Frame中,比如需要横向平移的组件,我们就可以为它添加 Horizontal水平滚动。(请注意图中 Frame 和内容的尺寸和裁切关系,Frame 的左右边界即卡片滚动的左右边界)

也就是说,一个页面的预览会包含整个页面的垂直滚动(通常不会水平),然后根据下级组件的显示需要,再额外添加水平和垂直滚动方式,实现页面内容的基础交互需要。

除了滚动设置外,下级Frame选中后属性面板还有个 Position位置设置选项,包含:

  • Scroll with patent:随父级画布一起平移
  • Fixed:呆在固定的位置
  • Sticky:在到达顶部后滞留

第一个默认选项不需要介绍,Fixed 设置用于需要固定在画面中的元素,比如页面的底部导航,它不需要随着页面滚动而被划走,所以可以为它添加 Fixed设置。而这个效果会和页面的响应式设置相结合,如果需要底部导航固定在预览窗口的底部,就需要为它添加底部的吸附。

添加Fixed 以后,则页面图层列表会增加 Fixed和Scrolls两个分类,所有添加Fixed设置的图层会被置入到该分类中,且它们处于 Scrolls图层的上方无法变更。只有移除 Fixed选项才能恢复默认的图层列表样式。

Sticky 则是一个比较特殊的设置,它指的是在元素随页面滚动时,到达顶部边缘以后就停下来产生顶部吸附的效果,相对使用场景较少。

39人在学·0条笔记
收藏
已学会
0人已学会
下一篇Figma的页面基础跳转
页面的跳转设置即从页面A跳转到页面B的过程,实现它的方法非常简单,只要把在交互设置模式下,选中要点击的对象,在它的边缘拖拽连线到目标页面即可。 也可以通过右侧的交互设置面板 Ineractions 手动添加,要重点理解交互事件设置面板的选项: 触发方式 Trigger即触发交互事件的交互方式,包含下...
本章笔记
仅看自己
logo