行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

发布

11

阅读时间

ProtoPie 的交互库简介

ProtoPie 5.0 带来了交互库。你原本就可以构建交互组件,但现在你可以将其打造成一个完整的交互设计系统,与团队共享。

达伦·贝内特, ProtoPilot 创始人

库(Libraries)一直是用户长期呼吁的功能,很高兴它终于来了。那么让我们来看看 ProtoPie 是如何解决可复用交互的共享与管理问题的,以及它可能会如何改变你在组织中处理原型设计的方式。

交互库概览

ProtoPie 中的交互库会让你立刻感到熟悉,因为它与 Figma、Sketch 等工具有一些相似之处。不过,这里的最大区别在于这些组件是可交互的。这实际上让你能够构建一个可完整运行的设计系统,供你的设计团队使用;类似于真实代码设计库的使用与管理方式。


The new revamped component panel showing libraries


全新改版的组件面板,展示了各类库

不过也有一些差异。例如,库文件不能像普通 Pie 文件那样保存到本地。相反,它们会从 ProtoPie Cloud 同步到 ProtoPie Studio。将更改发布到 Cloud 后,你或其他团队成员就可以使用这些交互库。

这里值得一提的是,交互库功能会因你使用的是 Free 还是 Pro 套餐而不同。使用 Free 套餐时,你可以创建仅供自己原型使用的个人库,但由于库文件无法实际保存到你的电脑中,因此你不能与其他设计师共享该库。若要共享库,则需要 Pro 套餐。

对此有一种变通方法:将组件库作为普通 Pie 文件创建,因为 ProtoPie 5.0 提供了 导出为新库(Export as New Library) 功能。通过这种方式,你无法获得更新联动能力,但仍然可以在团队之外使用你的库。对自由职业设计师来说,我认为这绝对是刚需。

使用交互库

与你的团队账号关联的所有交互库都可以在改版后的组件面板中访问。在组件面板中,你有以下功能:

  • 本地组件

  • 此 Pie 中使用的组件

  • 团队库

  • 个人库

  • 公共库

本地组件

你可以把它理解为 4.0 版本中组件面板的当前形态。保存在这里的任何组件都只能在创建它们的那个 Pie 中访问。

Pie 中使用的组件

当你将一个组件拖入场景时,它会被添加到这个部分。你可以用它快速查找并添加你在当前 Pie 中已经使用过的组件,以便添加更多实例。你还可以通过对组件执行 Ctrl/右键并选择 转到实例(Go to Instance) 来导航到该组件的实例。你也可以 添加到当前场景(Add to Current Scene)

团队库

在这里你会看到所有团队库列表。点击某个库即可进入。你会注意到有一个返回按钮,可带你回到主组件列表。你也可以通过点击 + 来创建新的团队库。

个人库

这些库关联到你的个人套餐;如果你在团队中,则关联到你的个人空间。只有你可以访问这些库。

公共库

这些库由 ProtoPie 官方构建并提供,包括 Material Design UI Kit 和 iOS UI Kit 的库。这些库与你创建的交互库不同,因为它们是锁定的。这意味着你无法查看其内部实现,但可以在自己的项目中自由使用。与所有组件一样,它们使用 SendReceive 来传递消息,因此你可以用它们来触发响应并构建交互式 UI。有关 Send 和 Receive 的更多信息,请参阅我之前的文章 ProtoPie components 101


The revamped components panel showing libraries


改版后的组件面板展示了各类库

你可以使用正斜杠将组件组织到分组中,例如 Buttons/My Button。

每个分组都可通过切换展开三角图标进行折叠/展开。你还可以将交互库以缩略图网格或列表形式查看。如果名称较长,列表视图会更有用,因为在 网格(Grid) 视图下名称会被截断,而列表视图不会。

你还可以按名称在所有交互库中搜索条目。我特别强调“搜索”,因为这里没有筛选功能,所以当你进入某个库并输入搜索词时,实际上会收到来自所有库的结果。刚开始这可能会让人困惑,所以先告诉你,目前就是这样工作的。

库更新

在组件面板中,位于列表/网格视图切换按钮与固定面板按钮之间的是库更新按钮,其图标是一本书中带有闪电符号。你可以随时点击该图标打开更新面板;当有更新发布时,此图标上会出现一个低调闪烁的小点,提示你有更新。


A flashing red dot showing that there are updates to a library you are using


闪烁的红点表示你正在使用的某个库有更新

打开该面板后,你会看到每个已更新组件的列表。你只会收到你在原型中实际使用过且发生更改的组件更新。其他组件会自动更新。目前你无法通过这个面板知道具体改动了什么。没有并排对比,也没有版本控制备注。如果你有库访问权限,可以打开交互库查看组件;或者进入 Cloud 查看版本说明。也许在未来更新中,我们会看到备注功能,我认为那会非常有用。你可以一次更新所有组件,也可以选择逐个更新。


The library update panel


库更新面板

库所有者与成员

在云端,ProtoPie 的交互库有自己独立于项目之外的空间。团队中的所有成员都可以使用在团队空间内创建的所有库。你可以将团队成员添加到团队库中,以赋予他们编辑权限。如果某个团队成员未被添加到列表中,他们仍然可以从 ProtoPie Studio 的组件面板使用交互库。


Libraries in ProtoPie Cloud


ProtoPie Cloud 中的库

属性面板中的组件

如果你选中一个组件,你会注意到属性面板新增了一些内容。除了能够 转到主组件(Go to Master Component) 之外,你现在还可以替换组件。

点击组件下拉菜单可访问所有库中的所有组件,以及当前 Pie 中已使用的组件。这里有搜索功能帮助你找到所需内容,或者你也可以通过嵌套弹出菜单逐层导航。相关组件(Related Component) 区域会显示同一分组中的组件,例如按钮。


Grouped components show up as related for easy access


分组组件会作为相关项显示,便于快速访问

替换组件时,它们不像 Sketch 那样受尺寸约束。这意味着任何组件都可以与任何其他组件互换。如果尺寸相同,就会完美替换;如果不同,则会变为被替换组件的尺寸。

组件指南

很明显,库功能正在推动设计系统思维。为了让这些库的使用者理解组件如何工作及其具备哪些特性,新增了 组件指南(component guide)。该指南让组件创建者能够记录组件的工作方式。可记录的属性包括:

  1. 描述

  2. 变量

  3. 输入消息(Message In)

  4. 输出消息(Message Out)


The guide panel showing component features


指南面板显示组件特性

Send 与 Receive

你可以将 Send 和 Receive 结合使用来扩展组件功能。你可以从组件发出消息,并使用 Receive 触发器拦截消息,再添加你希望的响应。例如,你可以创建一个开关组件,并在开关开启时发送一条消息。

反过来也成立:向组件发送消息,并通过 Receive 触发器触发内部交互,例如将组件内部的某个标签栏项设为激活状态。要了解更多 Send 和 Receive 的信息,请参阅我的文章 ProtoPie components 101

覆盖变量

此外,除了 Send 和 Receive 之外,ProtoPie 5.0 还新增了将组件内部变量设为可覆盖的能力。你可以在 ProtoPie 的属性面板中访问变量覆盖。这是一个非常强大的功能,让你能够为组件设置在内部计算并使用的值。以下示例中,我创建了一个下载指示器组件,通过这个简单的变量覆盖,我就能控制下载指示器速度。


Using variable overrides in the properties panel


在属性面板中使用变量覆盖

转换现有组件

如果你已经在使用组件,那么你可能已经(像我一样)有一个包含一组组件的 Pie 文件。如果是这样,那就是好消息:在文件菜单下有一个 导出为新库(Export as New Library) 功能。打开你的 Pie 并运行该命令后,会创建并打开一个新的库文件。若要让团队可访问,只需像发布其他库一样发布它。

最后想法

以上就是全部内容。这是一个改变游戏规则的功能,现在它让管理应用的设计系统变得异常容易。我们越来越多地看到设计工具朝着更强协作能力发展;当然,对于交互设计工具而言,“一次性”原型如今可以被完整可用的交互设计工具包所取代。

如果你正在围绕成熟产品、按增量路线图持续交付,那么交互库已经让 ProtoPie 成为你产品设计工具库中的“必备工具”。

想看如何使用 ProtoPie 的视频,请查看我的 YouTube 频道 ProtoPilot