行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

教程

7

阅读时间

ProtoPie 训练营:不到 2 小时掌握核心基础

通过 Darren Bennett 的 ProtoPie Bootcamp 课程,你会惊喜地发现,不到 2 小时你就能独自做出各种原型。

弗雷多·谭, 增长负责人

我们的团队已建立了ProtoPie School,你可以在这里免费获取从 A 到 Z 学习如何使用 ProtoPie 的内容。我们对内容进行了精心编排,学习者可以按照自己的节奏、在自己的时间学习。但我们也理解,有时候要腾出足够的精力来掌握一个新工具并不容易。

这就是为什么我们还想分享由来自 ProtoPilot 的 Darren Bennett打造的ProtoPie Bootcamp。它唯一的重点就是速度——旨在帮助你快速上手。

不到 2 小时,你就会惊讶于自己能够自信地用 ProtoPie 制作出的原型。

课程内容

前 9 个视频将教你如何创建极其逼真且动态的原型。最后 2 个视频是额外内容,展示如何让你的作品可复用、可扩展。

  1. 导入

  2. 创建交互

  3. 滚动与分页

  4. 条件

  5. 场景

  6. 文本输入

  7. 变量

  8. 公式

  9. 检测功能

  10. 组件

  11. 消息

1. 导入

学习如何将你的设计从 Figma、Sketch 或 Adobe XD 导入到 ProtoPie。

ProtoPie 并不是你设计工具的替代品。相反,ProtoPie 是与 Figma、Sketch 和 Adobe XD 配合使用的。把 ProtoPie 想象成花生酱,把前面提到的工具想象成果酱。它们单独都很美味,但放在一起呢?天作之合。

请跟随以下素材学习:

2. 创建交互

学习对象、触发器和响应是如何工作的。利用这三者,创建你的第一个交互。

延续前面的比喻,创建你的第一个交互有点像咬下花生酱果酱三明治的第一口。你在这里学到的是基础。你将要制作的每一个交互——无论大小、条件式还是动态式——都遵循同一个概念模型。

请跟随以下素材学习:

3. 滚动与分页

学习如何为你的原型添加滚动和分页。

滚动与分页是现代移动应用和网页设计中的主力功能。很可能你总是至少需要两者中的一个作为原型的基础。了解如何使用滚动和分页,把一堆静态图层变成交互内容。

请跟随以下素材学习:

4. 条件

学习如何让你的交互具备条件逻辑。

ProtoPie 的魅力在于你可以让原型根据特定条件来运行。与其局限于一条固定的“理想路径”,ProtoPie 中的原型更贴近真实,能够覆盖你想到的各种现实场景。

请跟随以下素材学习:

5. 场景

通过一个实际示例学习如何以及何时使用场景。

场景类似于 Figma 中的顶层框架(frame),以及 Sketch 和 Adobe XD 中的画板(artboard)。你可以通过连接场景来实现点击跳转过渡。虽然点击跳转式原型并非 ProtoPie 的主要用途,但你可以了解如何以及何时使用多个场景。

请跟随以下素材学习:

6. 文本输入

学习如何获取真实文本输入,并将该输入用于交互。

重要的是,用户与原型的交互方式应当与真实产品一致。文本输入常常被忽视和低估,但它是你可以添加到原型中的功能。而且不止于此——你还可以利用这些输入创建动态交互。

请跟随以下素材学习:

7. 变量

学习如何使用变量并存储可复用信息。

简单来说,变量是用于存储数值的容器。之所以称为变量,是因为它们的值可以不断变化。一个简单例子是更新计数器。其他用例还包括存储输入的姓名、保存购物篮中的商品数量,或记住银行账户中的总金额。可能性是无限的。

请跟随以下素材学习:

8. 公式

学习如何在不具备编程知识的情况下使用公式。

你可能在一些应用中见过公式,例如 Microsoft Excel 或 Adobe After Effects。公式是用于实现动态交互的单行指令。可以说,公式听起来可能很“代码化”或复杂,但其实并非如此。只要掌握一点知识,你就能创建出令人惊叹的交互——那些你原以为只有工程师才能帮你实现的效果。

请跟随以下素材学习:

9. 检测功能

学习原型中的任何变化如何触发一组响应。

Detect 是你工具库中最有用的触发器之一。原型中的任何变化,不管是什么,都可以触发一组响应。这个对象移动了吗?这个按钮被点击了吗?变量发生变化了吗?

请跟随以下素材学习:

10. 组件

学习如何复用你的交互并制作组件。

一旦你发现了 ProtoPie 的强大之处,你可能会想知道如何创建可复用的图层和交互集合。ProtoPie 中的组件类似于 Figma 中的组件或 Sketch 中的符号。不同之处在于,ProtoPie 中的组件包含交互。你将 UI 元素组件化得越多,制作原型就越快。

请跟随以下素材学习:

11. 消息

学习如何让组件彼此“通信”。

在组件的语境下,消息用于让组件彼此通信,以及与其所在场景通信。比如一个搜索组件。搜索组件需要与场景中的其他 UI 元素协同工作。然后,将输入的搜索词作为消息发送到场景,并根据收到的消息触发相应响应。

请跟随以下素材学习:

想了解更多?


Total ProtoPie: learn advanced prototyping without code.


通过 Total ProtoPie 课程全面掌握 ProtoPie 的方方面面。

对 ProtoPie 感到兴奋并想进一步深入?欢迎查看Darren 的深度课程 Total ProtoPie,他将在 7 小时内教你关于 ProtoPie 的所有知识。另外,也可以看看 Darren 在Patreon 上的独家 ProtoPie 教程

加入ProtoPioneers 社区,你可以提问,并向像 Darren 本人这样的 ProtoPie 专家学习更多。