发布

5

阅读时间

ProtoPie 4.3:通过嵌套组件实现更高的灵活性

通过在组件内部使用其他组件,实现更灵活的交互式原型设计。

弗雷多·谭, 增长负责人

又到了发布 ProtoPie 更新的时候!在几个月前于 ProtoPie 4.0 中引入组件之后,我们此后收集到的一个主要功能需求就是嵌套组件。当然,在组件的基础上继续构建并引入嵌套组件对我们来说非常合理。所以我们来了!

有趣的是:我们发布了带有交互库ProtoPie 5.0

除了嵌套组件之外,ProtoPie 4.3 还包含了许多其他很棒的功能。Send/Receive 消息自动补全,以及固定场景和组件面板的选项,将让你在使用组件以及在场景与组件间切换时更加轻松。对 iOS 系统状态栏和背景模糊的支持,也会让你的原型更加逼真。

今天就开始使用 ProtoPie 4.3,你将看到这些变化,并希望它们会让你非常开心。下面我们来重点介绍其中一些最重要的内容。

介绍嵌套组件


introducing protopie components


在几个月前发布组件之后,你现在可以使用嵌套组件了。

首先,什么是组件?组件是可在你的原型中重复使用的图层与交互的已保存集合。你可以将任意一组图层和交互转换为组件。通过使用组件,你可以避免不必要的重复工作,提高每个场景的可读性,并最终加快原型设计工作流程。

现在,ProtoPie 允许你在一个组件内部使用另一个组件,在创建包含大量组件的原型时提供更高的灵活性。


example of using components in protopie studio


如你所见,我们在 Month Drop Down 组件内部使用了多个组件。


example-of-prototype-using-protopie-components

使用嵌套组件的示例原型

你可以在组件层级的任何级别覆盖嵌套组件。父组件可以覆盖子组件,依此类推。这与你在已使用的设计工具中的组件体验非常相似。

如果你熟悉在 ProtoPie 中使用组件,那么你一定也熟悉 Send 响应和 Receive 触发器。由于组件与场景是隔离的,Send 响应和 Receive 触发器最初用于在组件与组件外部对象之间创建交互。

随着嵌套组件的引入,我们做出了一些改动。现在你可以在 Inside Pie 下选择以下通道:

  1. Parent — 父组件;如果没有父组件,则为场景。

  2. Child Component — 你当前所在组件中的任意子组件。

  3. Current Scene — 使用该组件的场景。

  4. Current Component — 仅当前组件,不包含任何子组件(如果有)。


the channels using the send response and receive trigger for components


在组件中使用 Send 响应和 Receive 触发器时可选择的通道。

我们的文档中阅读更多关于如何使用组件的内容。

如果你对此有任何疑问,请与我们联系,并告诉我们我们可以如何帮助你!

iOS 背景模糊

为了实现 iOS 和 iPadOS 上著名的模糊效果,我们新增了一个名为 iOS Background Blur 的图层,以及一个名为 Background Blur 的响应。

在 iOS 13 和 iPadOS 13 上,你将能够使用基于 Apple 人机界面指南的全部 13 种模糊效果。在 iOS 12、iPadOS 12 及更低版本上,你只能使用 3 种默认模糊效果。


background blur for iOS in protopie


ProtoPie 4.3 现已支持 iOS 背景模糊。

查看示例

系统状态栏

为了让你的原型在智能设备上更具真实感,我们新增了在 iOS 和 Android 上使用系统状态栏的能力。你甚至可以按场景调整系统状态栏内容和背景的颜色。

你不再需要通过先从 SketchFigmaAdobe XD 导入静态状态栏来伪造这一效果。

固定场景和组件面板的选项

在引入嵌套组件后,你很可能会更频繁地使用组件。这会导致在场景和组件之间进行更多切换。现在你可以固定场景面板和组件面板,从而始终一眼看到场景与组件的概览,并更快地在场景和组件之间切换。


option to pin the scene and component panels


当场景面板和组件面板都已固定时。

其他功能与改进

  • Send/Receive 消息自动补全

  • 吸附到像素

  • Color 响应中的公式支持

  • 新的设备边框,例如 iPhone 11 Pro 和 Google Pixel 4

  • 组件及对应场景中的导航按钮

  • 复制交互

顺便问一句,你读过我们关于如何在远程工作时最大化你的原型设计效率的文章吗?