页面原型-无限画布
设计方式
支持文生界面、参考图片两种方式设计界面，主要区别如下
| 1. 文生界面 | 2. 图片参考 | |
|---|---|---|
| 输入项 | 文本描述 | 文本描述 + 图片 |
| 生成逻辑 | 按照文本描述生成 | 按照文本描述 + 选中的图片参考项生成 |
| 适用场景 | 有界面设计需求，但没有参考 | 参考其他产品的界面样式，并且有额外的要求 |
页面类型
支持web和app两类页面
风格与模板
如果觉得AI生成的界面样式容易千篇一律，AI味十足，有时候重复生成几次，样式还不可控，碰到这种情况可以试试GemDesign提供的风格功能。你可以精确配置页面的主题颜色、圆角、间距、阴影，也可以直接引用系统提供的风格。
选定风格，输入需求，只需等待几分钟即可获得一个设计非常在线的原型页面
我们精心准备了上百套覆盖不同场景的高保真模板，涵盖后台管理、电商页面、营销活动等常见类型。
克隆成新页面：看到心仪的模板，可以一键克隆，快速开始新的设计，避免从零搭建的重复工作。
借用模板风格：喜欢某个模板的整体氛围，你可以直接使用该模板的风格作为新页面的视觉参考，让优秀的版式布局和视觉语言为你所用。
页面管理
- 无限画布的页面列表由AI分析输入的需求自动生成
- 支持重命名、删除、创建副本；不支持手动创建页面
- 点击页面名称，画布会自动定位聚焦到对应页面
- 页面版本管理功能参见页面原型章节的页面管理中的版本管理
列表管理
每次AI生成后，会自动分析出剩余未完成需求，并把这些需求以列表形式展示在生成卡片下方
你可以
- 编辑列表需求
- 点击需求后面的编辑图标
- 查看需求详细描述
- 编辑后保存
- 勾选列表需求继续生成
你可以一次性勾选多个需求进行生成
- 放弃这些列表需求
列表中的需求只是AI分析生成的，可能都不满足你的要求，你可以直接在输入框里输入新需求
画布
采用类Figma画布，一个画布中可显示应用中的所有页面
支持按住ctrl+左键缩放；支持按住空格+左键拖动
页面内容
单个页面主要由两部分组成：
- 左侧：页面主体；
2.右侧：页面中的默认隐藏元素，如弹窗。
页面布局
生成的所有页面默认布局方式都是自动布局
什么是自动布局
自动布局的元素之间的相对位置关系由系统自动计算。当内容增减或容器尺寸变化时，元素会自动调整位置和间距，保持整体结构完整。
举一个简单的例子来说明一下
- 自动布局的元素在结构上存在层级关系
- 四个灰色的矩形在视觉上包含在蓝色矩形内部，并且在层级结构上也是包含的 关系
- 四个灰色矩形不能任意拖动，只能按照既定规则自动排列
与自动布局相对的为绝对定位布局，传统设计软件如axure等都采用这种布局方式
- 视觉上四个灰色矩形包含在蓝色矩形内，但是实际结构上是平行的
- 元素排列没有既定规则，可以放置到任意位置，如下图所示
自动布局优点
- 可以通过调整文本内容来控制容器大小
- 调换元素位置时，会自动调整布局
- 添加、删除元素时，会自动调整布局
- 自动适应不同分辨率，而绝对布局在不同分辨率下可能会排版错乱不可用
自动布局缺点
元素的排列必须遵循页面的排列规则，无法像绝对定位布局一样任意拖动
页面编辑
双击页面，进入页面编辑模式
文字编辑
选中文字，再次双击，可直接编辑文字
快捷编辑
选中元素，单击右键会出现快捷编辑指令
| 选中上层元素 | 选中目标元素层级结构的上以及父元素 |
|---|---|
| 设为/取消绝对定位 | 切换元素的布局方式 |
| 上移/下移 | 元素在同一层级之间上下/左右调换位置 |
| 复制 | 复制当前元素，并放置在后方/下方 |
| 删除 | 删除当前元素 |
| 设为积木 | 将当前元素保存到积木库 |
| 设为全局积木 | 将当前元素保存到积木库，并且后续生成页面都会使用该元素作为参考 |
属性面板
- 属性面板 与交互面板切换Tab
- 选中元素名称
- 元素坐标与宽高，仅限元素处于绝对定位布局是可用
- 绝对定位布局与自动布局切换图标
- 自动布局状态下元素的宽高的表现方式
- 锁定元素宽高比例
- 下一级子元素更改为自动布局开关，排列方式、对齐方式、间距配置、边距配置
- 元素基础外观配置
下面对部分属性面板进行详细说明
- 自动布局状态下元素的宽高的表现方式
自动布局容器可以根据子元素的大小/数量变化响应式的调整自己宽高，子元素也可以根据容器的宽高变化响应式的调整自己的宽高。
- 固定
当把自动布局容器设定为固定高度或固定宽度，调整容器宽高不会改变子元素的布局
设定为固定宽高后，元素的自适应效果会消失
- 填充
当把自动布局容器设定为水平填充或垂直填充时，在保留边距前提下，子元素会在对应方向上充满自动布局容器
- 按内容撑开
当把自动布局容器设定为水平按内容撑开或垂直按内容撑开时，会在保留边距前提下，用最小的宽或高包裹子元素
子元素自动布局开关
该属性配置用于控制元素内部第一级子元素的布局方式，
添加/删除子元素自动布局
- 点击加号，内部第一级子元素的变为自动布局
- 点击减号，内部第一级子元素变为绝对定位布局
方向
方向是指子元素在自动布局容器中的排列方向；
- 水平排列，你可以在水平方向上添加、删除元素
- 垂直排列，你可以在垂直方向上添加、删除元素
间距类型
可以通过设置间距类型，调整子元素在容器内的间距排列方式。
- 固定：指的是子元素之间间距是固定的数值，不管容器大小怎么变，子元素的间距都是固定值。
- 自动：指的是在保留边距的前提下，子元素的间距会尽可能变大去填满容器内的剩余空间。
注意：调整间距后，可能导致自适应失效
边距
边距是指自动布局容器的边界和子图层之间的距离。你可以通过画布/属性面板调整边距
注意：调整边距可能导致自适应失效
- 通过画布调整边距，鼠标悬浮在紫色横线上，当指针变成双箭头后，按住上下/左右拖动调整边距
- 通过属性面板调整边距
对齐
你可以在自动布局容器上设置子图层的对齐方式。
自动布局容器的间距类型决定你可以使用的对齐方式。
- 当间距类型设置为自动间距时，每个方向只有三种对齐方式：
- 水平方向：顶部、居中、底部。
- 垂直方向：左、中、右。
- 当间距类型为固定时，每个方向有九种对齐方式
- 水平方向：顶部（左中右）、居中（左中右）、底部（左中右）。
- 垂直方向：左（顶部、居中、底部）、中（顶部、居中、底部）、右（顶部、居中、底部）。
绝对定位布局
绝对位置能够使子图层不受自动布局规则控制。启用了绝对位置的元素能自由拖动，放置在页面的任意位置。
绝对定位布局没有自适应效果
交互
平台支持手动配置多种交互方式和交互效果
- 选中无限画布中的元素
- 单击右侧交互面板
- 配置交互
交互方式
| 交互方式 | 说明 |
|---|---|
| 点击 | 单击鼠标左键 |
| 悬停 | 鼠标指针悬浮在元素上，但不进行操作 |
| 鼠标移入 | 鼠标指针从外部进入某个元素的范围内 |
| 鼠标移出 | 鼠标指针从某个元素的范围内移出到外部 |
| 鼠标按下 | 鼠标左键被按下但尚未松开 |
| 鼠标抬起 | 被按下的鼠标按键松开 |
交互效果
| 交互效果 | 说明 |
|---|---|
| 打开页面 | 在当前页打开目标页面。可选择当前应用中的页面 |
| 打开蒙层 | 在当前页面上层显示默认隐藏的蒙层，比如弹窗、悬停才显示的元素。只能选择当前页面的蒙层 |
| 关闭蒙层 | 关闭目标蒙层 |
| 返回 | 返回上一个页面 |
| 打开链接 | 在新标签页打开目标链接 |