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

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

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 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 面板界面

获得最佳效果的提示

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

连接嵌入式

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

自动布局属性

自动布局提供了丰富的自定义选项来构建布局,确保功能性与美观性兼具。这些属性包括调整大小、方向、布局对齐以及高级设置。

调整大小属性

调整大小属性用于控制子图层及其父容器如何响应内容或布局变化进行调整。可在右侧面板的下拉菜单中分别对宽度和高度单独应用这些设置。将鼠标悬停在某个调整大小选项上时,会在画布中高亮显示其效果。

固定

保持对象大小恒定,不受其内容变化影响。

自适应

在考虑内边距和间距大小的同时,调整父容器的尺寸以适配其子元素。

填充

拉伸子对象以匹配父容器的大小。

固定

保持对象大小恒定,不受其内容变化影响。

自适应

在考虑内边距和间距大小的同时,调整父容器的尺寸以适配其子元素。

填充

拉伸子对象以匹配父容器的大小。

固定

当宽度或高度设置为 固定 选项时,无论子图层如何调整大小,父框架都会保持其绝对尺寸。


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}

包裹内容

自动布局(AL) 父级设置为 包裹 时,父框架会动态调整其尺寸,以精确适配其子图层的尺寸。


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}

填充容器

当子级设置为 FILL 时,其尺寸会调整为填满父级尺寸内的可用空间,使其相对于父级尺寸变化。


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}

方向属性

方向属性定义了子对象在自动布局容器中的排列方式,为各种设计场景下的布局结构提供灵活性。

垂直(默认)

将子对象按垂直方向堆叠对齐。

水平

将子对象按水平方向一行对齐。

换行

当容器空间不足时,将对象移到新的一行或一列。

垂直(默认)

将子对象按垂直方向堆叠对齐。

水平

将子对象按水平方向一行对齐。

换行

当容器空间不足时,将对象移到新的一行或一列。

布局属性

布局属性可对自动布局容器内子图层的对齐(Alignment)、内边距(Padding)和间距(Gap)进行精细控制。这些设置可确保设计更加精致且一致。

对齐

确定子对象在容器内的定位方式(例如:左上、居中、右下)。

内边距

定义容器边缘与其子对象之间的空间。

间距

设置子对象之间的间隔,可调整为固定或动态。

对齐

确定子对象在容器内的定位方式(例如:左上、居中、右下)。

内边距

定义容器边缘与其子对象之间的空间。

间距

设置子对象之间的间隔,可调整为固定或动态。

自动布局与约束

不带自动布局的容器包裹带自动布局的子容器时,会根据垂直或水平约束产生特定交互。

垂直约束

如果自动布局容器被分配了 Top & Bottom (T+B) 或 Scale,则自动布局容器的高度必须为 Fixed。将自动布局容器改回 Hug 会将垂直约束重置为 Center

水平约束

当自动布局容器被分配了 Left & Right (L+R)Scale 时,自动布局容器的宽度会被设置为 Fixed。将自动布局容器调整为 Hug 会将容器的水平约束重置为 Center

这些调整确保了自动布局容器与非自动布局容器之间的交互逻辑清晰,从而提供可预测的工作流。

高级设置

自动布局还提供了更多高级设置,以增强布局的灵活性和可定制性。这些选项允许你在设计中针对特定元素和行为进行定制。

忽略自动布局

“忽略自动布局”功能允许你为选定对象绕过自动布局规则,从而在不影响整体容器结构的情况下进行手动调整。设置为“忽略自动布局”的对象可以独立设置约束,在保持容器中其他元素自动布局属性的同时,为特殊布局场景提供灵活性。


{'_type': 'localeString', 'en': 'Ignore Auto Layout', 'ja': 'Ignore Auto Layout', 'ko': 'Ignore Auto Layout', 'zh': 'Ignore Auto Layout'}

图层顺序控制

通过多种选项可以轻松管理堆叠顺序:

  • 图层面板:直接在面板中拖动图层以重新排序。

  • 键盘快捷键:使用方向键调整堆叠顺序,以实现精确的图层控制。

  • 鼠标交互:在画布上点击并拖动对象,以交互方式重新定位它们。

实例覆盖

带有自动布局的组件实例支持选择性调整,在不修改主组件的情况下提供灵活性。

  • 调整大小:对调整大小数值的修改仅限于现有选项;无法添加新的固定值。

  • 对齐、间距和内边距:这些属性可在实例中自定义。

  • 方向:实例中不支持方向更改。