原型是模拟最终产品的交互式模型。它们用于在开发前测试和验证想法。
在 Penpot 中，你可以用不同的原型连接来链接画板，并配置交互的触发方式、动作和动画。原型可在查看模式中播放。
(视频略)
在 Penpot 中原型化交互最简单且最常用的方法就是连接看板。按照以下简单步骤添加交互：
- 选择一个画板或画板内的某个图层。
- 打开右侧边栏中的 Prototype 标签。
- 点击并拖动连接节点，把它连接到目标画板。
- 在交互面板中选择触发器、动作和动画。
- 如有需要，添加更多交互。
- 打开查看模式，测试原型流程。
连接可以从整个画板开始，也可以从画板中的某个图层开始。一个图层可以有多个交互。
一次交互通常包含以下部分：
- 源画板或源图层。
- 连接节点。
- 目标画板。
- 触发器。
- 动作。
- 动画。
- 动画方向。
- 缓动。
- 持续时间。
- 偏移或覆盖层选项。
触发器定义什么时候执行交互。可用触发器包括：
- Click：点击元素时触发。
- Mouse enter：鼠标进入元素区域时触发。
- Mouse leave：鼠标离开元素区域时触发。
- Mouse down：按下鼠标按钮时触发。
- Mouse up：松开鼠标按钮时触发。
- After delay：经过指定延迟后自动触发。
动作定义交互触发后会发生什么。
Navigate to
Section titled “Navigate to”导航到另一个画板。这是最常见的原型动作，用于在屏幕之间移动。
Open overlay
Section titled “Open overlay”打开一个画板作为覆盖层。覆盖层适合用于菜单、弹窗、提示框或临时面板。
(视频略)
您有几种用于定位叠加层（Overlay）的预设（居中、左上、右上……），但您也可以进行手动定位。只需选择“手动”（Manual）选项，然后将“幽灵框”（一个与目标看板大小相同的区域）拖动到您希望显示叠加层的位置。
还有几个选项可以方便地模拟典型的叠加层行为：
- 点击外部时关闭：如果用户在其区域外点击，则关闭叠加层。
- 添加背景叠加：添加一个不透明度为 20% 的黑色背景。
Toggle overlay
Section titled “Toggle overlay”切换覆盖层的打开和关闭状态。
Close overlay
Section titled “Close overlay”关闭当前覆盖层。
Previous screen
Section titled “Previous screen”
它会返回到上一个显示的看板。此操作通常用于返回按钮，尤其是当同一个屏幕可以从不同的源头访问时。
Open URL
Section titled “Open URL”打开一个外部网址。
动画定义从一个状态到另一个状态时的视觉过渡。
Dissolve
Section titled “Dissolve”
使用淡入淡出效果在画板之间切换。
可配置项包括：
- 缓动。
- 持续时间。
滑动动画会将目标帧移入或移出视图。
选项：
- 移入 / 移出。
- 方向（右、下、左、上）。
- 缓动。
- 时长。
- 偏移效果。
偏移效果意味着源看板会轻微淡出，并与目标看板向相同的方向移动。
用目标画板推动当前画板，形成页面切换效果。
可配置项包括：
- Direction：推动方向。
- Easing：缓动曲线。
- Duration：持续时间。
设计项目通常需要为不同的设备和用户旅程定义多种不同的应用场景。用户流（Flows）允许您在同一个页面内定义一个或多个起点，以便您更好地组织和呈现您的原型。
用户流由交互的起始看板来定义。在视图模式（View mode）下可以独立选择不同的用户流。在视图模式下，每个用户流都有其专属的可分享链接。
起点是被选择作为用户流（Flow）第一个屏幕的看板。您可以将某个看板设置为起点，仅仅是因为您希望该看板在视图模式下首先显示，但您也可以设置多个起点来定义不同的用户旅程。
创建起点有以下几种方式：
- 自动：当从一个尚未连接的看板（意味着它不属于任何现有用户流）创建连接时，该源看板将被自动设置为用户流的起点。
(视频略)
- 通过原型侧边栏：在选中某个看板的情况下，点击“+”按钮将其设置为用户流的起点。
(视频略)
- 通过看板菜单。
一个文件可以包含多个流程。每个流程都有自己的起始点，并会在查看模式中作为独立入口显示。
查看模式中的流程
Section titled “查看模式中的流程”在查看模式中，流程会出现在侧边栏中。你可以选择要播放的流程，并从它的起始画板开始测试。
滚动时固定元素
Section titled “滚动时固定元素”您可以在演示视图中滚动时固定图层的位置。这在原型化固定页眉、导航栏和悬浮按钮时非常有用。
选择一个元素，并勾选 “固定位置（滚动时）” 选项，该选项位于设计侧边栏（右侧）的 “约束”（Constraints）部分内。
启动视图模式（View Mode）即可查看具有固定滚动位置的元素。