行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

组件

组件可让你保存一组图层和交互,使其能够在整个原型中重复使用。选择你想复用的图层和交互,将它们转换为组件,并在各个场景中创建实例。

以下是组件为何能带来颠覆性改变:

  • 消除重复工作:无需再反复重建相同元素和交互。组件让你一次创建、处处复用,节省宝贵的时间和精力。

  • 提升可读性:使用组件后,你的场景会更整洁、更易理解。你可以用组件实例代替冗余元素,让原型设计更有条理、更高效。

  • 加速工作流:通过复用组件,你可以快速搭建并迭代原型。修改原始组件后,所有实例都会自动更新,确保整个设计保持一致。

使用组件

在场景中创建组件

在 ProtoPie 中,将图层转换为组件非常简单。请按以下步骤操作:

  1. 选择图层:选择你想转换为组件的单个图层或多个图层。

  2. 点击“组件”图标:在工具栏中找到组件图标并点击。或者,你也可以右键单击所选图层,然后在上下文菜单中选择转换为组件

  3. 大功告成!组件已准备就绪:ProtoPie 会自动基于所选图层及其对应交互创建组件。原始图层会被该组件的一个实例替换。


{'_type': 'localeString', 'en': 'creating component from a scene'}

直接创建组件

组件也可以从零创建。打开左侧的组件面板并点击加号图标。这会创建一个空组件,你可以开始自定义。


{'_type': 'localeString', 'en': 'creating component directly'}

添加组件实例

你可以将组件面板中的组件拖拽到当前活动场景的画布上,以创建组件实例。


{'_type': 'localeString', 'en': 'adding component Instances'}

编辑组件

编辑主组件

要编辑主组件,必须先进入组件编辑模式。要激活此模式,请在组件面板中点击某个组件,或右键单击该组件的实例,然后在上下文菜单中选择“编辑主组件”


{'_type': 'localeString', 'en': 'editing master component'}

编辑主组件与编辑场景类似。你可以创建、修改和删除组件的图层、变量、触发器和响应。你所做的更改会应用到该组件的所有实例。

完成组件编辑后,你可以点击“完成”按钮,或点击屏幕左上角的左箭头按钮(←)返回场景。或者,你也可以在面板中点击任意场景进行导航。


{'_type': 'localeString', 'en': 'return to scene'}

编辑实例

在 ProtoPie 中,修改组件实例的子图层属性同样非常轻松。具体如下:

  • 轻松覆盖:当你更改组件实例中某个子图层的属性时,本质上是在覆盖该特定属性。这些覆盖仅对该实例生效,不会影响主组件。这样你就能在保持核心组件结构的同时,独立自定义每个实例。

  • 保留修改:即使你修改了主组件,实例中已覆盖的属性仍将保持不变。这意味着你可以放心地进行尝试和迭代,而不必担心丢失自定义内容。

  • 一键重置:想恢复到原始设置?没问题!右键单击实例并在上下文菜单中选择“重置覆盖”。所有覆盖都会被清除,实例将恢复到原始状态,再次与主组件保持一致。


{'_type': 'localeString', 'en': 'editing instance'}

用作主组件

你可以将组件实例与其主组件关联。这样无需进入组件编辑模式,也能通过编辑实例来编辑主组件。


{'_type': 'localeString', 'en': 'link with master'}

变量覆盖

你还可以覆盖变量的初始值。可在主组件中的变量里启用“可覆盖”选项。启用后,你就可以在组件实例的属性面板中修改变量值。


{'_type': 'localeString', 'en': 'variable overriding'}

分离组件实例

分离会断开与组件的连接,并将实例转换为容器。你可以在属性面板或上下文菜单中执行此操作。使用前请确保你已在Labs中启用该功能。

通过上下文菜单分离组件

  1. 右键单击实例

  2. 点击分离实例


{'_type': 'localeString', 'en': 'Right click on a component instance, and click on Detach Instance to detach it from the component.'}

在属性面板中分离组件实例

  1. 选择一个组件实例

  2. 点击属性面板中的分离实例图标


{'_type': 'localeString', 'en': 'Click on Detach Instance in the property panel to detach an instance from its component.'}

实例分离后,分离后的交互名称会自动添加 Detached_ 前缀。你可以轻松识别某个交互是否来自分离实例。


{'_type': 'localeString', 'en': 'Easily identify whether an interaction stems from a detached instance or not.'}

交换组件实例

在右侧属性面板中,你只需点击几下,即可轻松将任意组件实例替换为另一个组件。


{'_type': 'localeString', 'en': 'component swap component'}

组件分组

可通过组件名称中的斜杠“/”来创建或拆分分组。例如,第一个组件名称为“Button / Primary / Normal”,第二个组件名称为“Button / Secondary / Normal”,它们会如下所示被分组。


{'_type': 'localeString', 'en': 'component grouping component'}

准备好将你的原型设计技能提升到新高度了吗?

加入Digital Dashboard Masterclass,掌握资源组织、可复用组件创建以及智能逻辑实现等专业能力。

如果你想学习如何减少重复工作、高效构建并轻松扩展交互,欢迎加入最新的Mobile Game prototyping masterclass

掌握这些高级知识后,你可以将更多精力聚焦在关键任务上,把项目提升到新层次,最终打造出精致且稳健的成品。

不要错过这个提升技能并成为原型设计专家的机会!