ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

ProtoPie MCP

Getting Started

Studio MCP Introduction

Studio MCP Installation & Setup

Code MCP Introduction

Code MCP 安装与设置

Dev View

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

连接嵌入式

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

菜单

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

ProtoPie MCP

Getting Started

Studio MCP Introduction

Studio MCP Installation & Setup

Code MCP Introduction

Code MCP 安装与设置

Dev View

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

连接嵌入式

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

组件

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

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

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

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

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

使用组件

在场景中创建组件

在 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

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

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