页面原型-无限画布
设计方式
持文生界面、参考图片两种种方式设计界面，主要区别如下
| 1. 文生界面 | 2. 参考图片 | |
|---|---|---|
| 输入项 | 文本描述 | 文本描述 + 图片 |
| 生成逻辑 | 按照文本描述生成 | 按照文本描述 + 选中的图片参考项生成 |
| 适用场景 | 有界面你设计需求，但式没有参考 | 参考其他产品的界面样式，并且有额外的要求 |
页面类型
支持web和app两类页面
页面风格
在无限画布模式中，风格是指页面的视觉调性，比如极简风格、可爱风格。通常是使用一段文字来进行描述
你可以选择使用、修改平台预置的风格，也可以借用外部AI工具，去生成你想要的风格描述
使用风格能帮助你更好地设计出想要的页面
- 点击输入框上方风格图标
- 选择风格，自动将风格描述填充到输入框
页面管理
- 无限画布的页面列表由AI分析输入的需求自动生成
- 支持重命名、删除、创建副本；不支持手动创建页面
- 点击页面名称，画布会自动定位聚焦到对应页面
- 页面版本管理功能参见页面原型章节的页面管理中的版本管理
生成列表管理
每次AI生成后，会自动分析出剩余未完成需求，并把这些需求以列表形式展示在生成卡片下
你可以编辑列表需求
-
点击需求后面的编辑图标
-
查看需求详细描述
-
编辑后保存
-
勾选列表需求继续生成
你可以一次性勾选多个需求进行生成
-
放弃这些列表需求
列表中的需求只是AI分析生成的，可能都不满足你的要求，你可以直接在输入框里输入新需求
画布
采用类Figma画布，一个画布中可显示应用中的所有页面
支持按住ctrl+左键缩放
支持按住空格+左键拖动
页面内容
单个页面主要由两部分组成
- 左侧：页面主体；
2.右侧：页面中的默认隐藏元素，如弹窗。
页面布局
默认为自动布局
关于自动布局和绝对定位布局的详细介绍可参见页面原型-页面布局章节
页面编辑
双击页面，进入页面编辑模式
文字编辑
选中文字，再次双击，可直接编辑文字
属性面板
- 属性面板与交互面板切换Tab
- 选中元素名称
- 元素坐标与宽高，仅限元素处于绝对定位布局是可用
- 绝对定位布局与自动布局切换图标
- 自动布局状态下元素的宽高的表现方式
- 锁定元素宽高比例
- 下一级子元素是否更改为自动布局开关，以及属性配置
- 元素基础外观配置
下面对部分属性面板进行详细说明
- 自动布局状态下元素的宽高的表现方式
自动布局容器可以根据子元素的大小/数量变化响应式的调整自己宽高，子元素也可以根据容器的宽高变化响应式的调整自己的宽高。
- 固定
当把自动布局容器设定为固定高度或固定宽度，调整宽高不会改变子元素的布局
设定为固定宽高后，元素的自适应效果会消失
- 填充
当把自动布局容器设定为水平填充或垂直填充时，在保留边距前提下，子元素会在对应方向上充满自动布局容器
- 按内容撑开
当把自动布局容器设定为水平按内容撑开或垂直按内容撑开时，会在保留边距前提下，用最小的宽或高包裹子元素
子元素自动布局开关
该属性配置用于控制元素内部第一级子元素的布局方式，
添加/删除子元素自动布局
- 点击加号，内部第一级子元素的变为自动布局
- 点击减号，内部第一级子元素变为绝对定位布局
方向
方向是指子元素在自动布局容器中的排列方向；
- 水平排列，你可以在水平方向上添加、删除元素
- 垂直排列，你可以在垂直方向上添加、删除元素
间距类型
可以通过设置间距类型，调整子元素在容器内的间距排列方式。
- 固定：指的是子元素之间间距是固定的数值，不管容器大小怎么变，子元素的间距都是固定值。
- 自动：指的是在保留边距的前提下，子元素的间距会尽可能变大去填满容器内的剩余空间。
注意：调整间距后，可能导致自适应失效
边距
边距是指自动布局容器的边界和子图层之间的距离。你可以通过画布/属性面板调整边距
注意：调整边距可能导致自适应失效
- 通过画布调整边距，鼠标悬浮在紫色横线上，当指针变成双箭头后，按住上下/左右拖动调整边距
- 通过属性面板调整边距
对齐
你可以在自动布局容器上设 置子图层的对齐方式。
自动布局容器的间距类型决定你可以使用的对齐方式。
- 当间距类型设置为自动间距时，每个方向只有三种对齐方式：
- 水平方向：顶部、居中、底部。
- 垂直方向：左、中、右。
- 当间距类型为固定时，每个方向有九种对齐方式
- 水平方向：顶部（左中右）、居中（左中右）、底部（左中右）。
- 垂直方向：左（顶部、居中、底部）、中（顶部、居中、底部）、右（顶部、居中、底部）。
**
**
绝对定位布局
绝对位置能够使子图层不受自动布局规则控制，。启用了绝对位置的元素能自由拖动，放置在页面的任意位置。
绝对定位布局没有自适应效果
交互
平台支持手动配置多种交互方式和交互效果
- 选中无限画布中的元素
- 单击右侧交互面板
- 配置交互
交互方式
| 交互方式 | 说明 |
|---|---|
| 点击 | 单击鼠标左键 |
| 悬停 | 鼠标指针悬浮在元素上，但不进行操作 |
| 鼠标移入 | 鼠标指针从外部进入某个元素的范围内 |
| 鼠标移出 | 鼠标指针从某个元素的范围内移出到外部 |
| 鼠标按下 | 鼠标左键被按下但尚未松开 |
| 鼠标抬起 | 被按下的鼠标按键松开 |
交互效果
| 交互效果 | 说明 |
|---|---|
| 打开页面 | 在当前页打开目标页面。可选择当前应用中的页面 |
| 打开蒙层 | 在当前页面上层显示默认隐藏的蒙层，比如弹窗、悬停才显示的元素。只能选择当前页面的蒙层 |
| 关闭蒙层 | 关闭目标蒙层 |
| 返回 | 返回上一个页面 |
| 打开链接 | 在新标签页打开目标链接 |