行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

滚动 / 分页

你可以在容器的属性面板中调整其滚动或分页属性。要在容器内启用滚动或分页图层,请从图层面板将它们拖入目标容器。

滚动

此选项可启用水平或垂直滚动。为确保滚动交互顺畅运行,请确保子图层延伸到滚动容器的边界框之外。


{'_type': 'localeString', 'en': 'container scroll'}


{'_type': 'localeString', 'en': 'container scroll'}

属性

方向

手指移动所朝向的区域

过度滚动

你可以选择开启或关闭当用户滚动过远时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置显示内容

方向

手指移动所朝向的区域

过度滚动

你可以选择开启或关闭当用户滚动过远时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置显示内容

分页

分页是指容器会根据所选方向(水平或垂直)按与其高度或宽度等效的距离进行吸附。


{'_type': 'localeString', 'en': 'Paging'}


{'_type': 'localeString', 'en': 'Paging'}

属性

按 [Container] 分页

容器每次移动的距离相当于其自身的宽度

按 [Custom] 分页

你可以设置自定义分页宽度。例如,当容器内的图层有外边距时,这会很有用

方向

手指移动的方向

过度滚动

你可以选择开启或关闭当用户滚动过头时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置开始显示内容

按 [Container] 分页

容器每次移动的距离相当于其自身的宽度

按 [Custom] 分页

你可以设置自定义分页宽度。例如,当容器内的图层有外边距时,这会很有用

方向

手指移动的方向

过度滚动

你可以选择开启或关闭当用户滚动过头时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置开始显示内容

滚动与分页用例

了解如何在常见场景中高效利用滚动和分页。探索如何为移动端和桌面端应用创建垂直和水平滚动视图。掌握正确配置滚动属性的方法,并为与滚动相关的交互选择合适的触发器和响应。

亲自体验这些原型并下载它们,以便查看其交互效果。此外,浏览我们的教程,了解创建每个原型背后的分步流程。

在下方找到你需要的用例:

浏览社交媒体应用

就像如今大多数社交媒体应用的工作方式一样,你可以创建水平和垂直滚动来浏览不同的个人资料和照片。了解如何为滚动视图添加边距,以保持与你的应用类似的 UI(滚动末尾留有空白)。


{'_type': 'localeString', 'en': 'browsing through a social media app'}

亲自试用该原型

学习如何一步步创建此原型。

消息应用中的垂直滚动

在消息应用或电子邮件收件箱中上下滚动查看消息。创建一个滚动容器,并学习如何设置自定义的初始滚动位置(例如,从底部开始)。


{'_type': 'localeString', 'en': 'vertical scroll in a messaging app'}

亲自试用该原型

学习如何一步步创建此原型。

循环滚动轮播

就像在线购物网站或视频流媒体平台上的图片画廊一样,你可以创建幻灯片。了解如何使用 分页容器创建轮播视图,以及如何在滚动时使用变量交替图片名称。


{'_type': 'localeString', 'en': 'looping scroll carousel'}

亲自试用该原型

学习如何一步步创建此原型。

滚轮选择器

创建你自己的滚轮选择器来选择日期、时间等。滚轮选择器可让你非常快速地上下滚动浏览多个选项。它非常有用,尤其是在选项列表可能超出屏幕可用空间而无法完整显示时。


{'_type': 'localeString', 'en': 'wheel picker'}

亲自试用该原型

学习如何一步步创建此原型。

从中间开始滚动与分页

让你的页面从中间向左、向右两侧滚动。了解如何设置正确的容器属性来实现这一点。


{'_type': 'localeString', 'en': 'scroll paging from the middle'}

亲自试用该原型

学习如何一步步创建此原型。

无限分页滚动

让你的页面在两个方向上无限滚动。了解如何使用分页容器对页面进行分组,并使用范围触发器启用无限滚动。


{'_type': 'localeString', 'en': 'infinite paging scroll'}

亲自试用该原型

学习如何一步步创建此原型。