跳到主要内容

页面原型-无限画布

设计方式

支持文生界面、参考图片两种方式设计界面,主要区别如下

1. 文生界面2. 图片参考
输入项文本描述文本描述 + 图片
生成逻辑按照文本描述生成按照文本描述 + 选中的图片参考项生成
适用场景有界面设计需求,但没有参考参考其他产品的界面样式,并且有额外的要求

页面类型

支持web和app两类页面

风格与模板

如果觉得AI生成的界面样式容易千篇一律,AI味十足,有时候重复生成几次,样式还不可控,碰到这种情况可以试试GemDesign提供的风格功能。你可以精确配置页面的主题颜色、圆角、间距、阴影,也可以直接引用系统提供的风格。

选定风格,输入需求,只需等待几分钟即可获得一个设计非常在线的原型页面

我们精心准备了上百套覆盖不同场景的高保真模板,涵盖后台管理、电商页面、营销活动等常见类型。

克隆成新页面:看到心仪的模板,可以一键克隆,快速开始新的设计,避免从零搭建的重复工作。

借用模板风格:喜欢某个模板的整体氛围,你可以直接使用该模板的风格作为新页面的视觉参考,让优秀的版式布局和视觉语言为你所用。

页面管理

  • 无限画布的页面列表由AI分析输入的需求自动生成
  • 支持重命名、删除、创建副本;不支持手动创建页面
  • 点击页面名称,画布会自动定位聚焦到对应页面
  • 页面版本管理功能参见页面原型章节的页面管理中的版本管理


列表管理

每次AI生成后,会自动分析出剩余未完成需求,并把这些需求以列表形式展示在生成卡片下方

你可以

  • 编辑列表需求
    1. 点击需求后面的编辑图标
    2. 查看需求详细描述
    3. 编辑后保存

  • 勾选列表需求继续生成

你可以一次性勾选多个需求进行生成

  • 放弃这些列表需求

列表中的需求只是AI分析生成的,可能都不满足你的要求,你可以直接在输入框里输入新需求

画布

采用类Figma画布,一个画布中可显示应用中的所有页面

支持按住ctrl+左键缩放;支持按住空格+左键拖动


页面内容

单个页面主要由两部分组成:

  1. 左侧:页面主体;

2.右侧:页面中的默认隐藏元素,如弹窗。


页面布局

生成的所有页面默认布局方式都是自动布局

什么是自动布局

自动布局的元素之间的相对位置关系由系统自动计算。当内容增减或容器尺寸变化时,元素会自动调整位置和间距,保持整体结构完整。

举一个简单的例子来说明一下

  1. 自动布局的元素在结构上存在层级关系
    • 四个灰色的矩形在视觉上包含在蓝色矩形内部,并且在层级结构上也是包含的关系
  2. 四个灰色矩形不能任意拖动,只能按照既定规则自动排列

与自动布局相对的为绝对定位布局,传统设计软件如axure等都采用这种布局方式

  1. 视觉上四个灰色矩形包含在蓝色矩形内,但是实际结构上是平行的

  1. 元素排列没有既定规则,可以放置到任意位置,如下图所示

自动布局优点

  • 可以通过调整文本内容来控制容器大小

  • 调换元素位置时,会自动调整布局


  • 添加、删除元素时,会自动调整布局

  • 自动适应不同分辨率,而绝对布局在不同分辨率下可能会排版错乱不可用

自动布局缺点

元素的排列必须遵循页面的排列规则,无法像绝对定位布局一样任意拖动

页面编辑

双击页面,进入页面编辑模式

文字编辑

选中文字,再次双击,可直接编辑文字

快捷编辑

选中元素,单击右键会出现快捷编辑指令

选中上层元素选中目标元素层级结构的上以及父元素
设为/取消绝对定位切换元素的布局方式
上移/下移元素在同一层级之间上下/左右调换位置
复制复制当前元素,并放置在后方/下方
删除删除当前元素
设为积木将当前元素保存到积木库
设为全局积木将当前元素保存到积木库,并且后续生成页面都会使用该元素作为参考

属性面板

  1. 属性面板与交互面板切换Tab
  2. 选中元素名称
  3. 元素坐标与宽高,仅限元素处于绝对定位布局是可用
  4. 绝对定位布局与自动布局切换图标
  5. 自动布局状态下元素的宽高的表现方式
  6. 锁定元素宽高比例
  7. 下一级子元素更改为自动布局开关,排列方式、对齐方式、间距配置、边距配置
  8. 元素基础外观配置

下面对部分属性面板进行详细说明

  1. 自动布局状态下元素的宽高的表现方式

自动布局容器可以根据子元素的大小/数量变化响应式的调整自己宽高,子元素也可以根据容器的宽高变化响应式的调整自己的宽高。

  • 固定

当把自动布局容器设定为固定高度或固定宽度,调整容器宽高不会改变子元素的布局

设定为固定宽高后,元素的自适应效果会消失

  • 填充

当把自动布局容器设定为水平填充垂直填充时,在保留边距前提下,子元素会在对应方向上充满自动布局容器

  • 按内容撑开

当把自动布局容器设定为水平按内容撑开或垂直按内容撑开时,会在保留边距前提下,用最小的宽或高包裹子元素

子元素自动布局开关

该属性配置用于控制元素内部第一级子元素的布局方式,

添加/删除子元素自动布局

  • 点击加号,内部第一级子元素的变为自动布局
  • 点击减号,内部第一级子元素变为绝对定位布局

方向

方向是指子元素在自动布局容器中的排列方向;

  • 水平排列,你可以在水平方向上添加、删除元素

  • 垂直排列,你可以在垂直方向上添加、删除元素

间距类型

可以通过设置间距类型,调整子元素在容器内的间距排列方式。

  • 固定:指的是子元素之间间距是固定的数值,不管容器大小怎么变,子元素的间距都是固定值。
  • 自动:指的是在保留边距的前提下,子元素的间距会尽可能变大去填满容器内的剩余空间。

注意:调整间距后,可能导致自适应失效

边距

边距是指自动布局容器的边界和子图层之间的距离。你可以通过画布/属性面板调整边距

注意:调整边距可能导致自适应失效

  • 通过画布调整边距,鼠标悬浮在紫色横线上,当指针变成双箭头后,按住上下/左右拖动调整边距

  • 通过属性面板调整边距

对齐

你可以在自动布局容器上设置子图层的对齐方式。

自动布局容器的间距类型决定你可以使用的对齐方式。

  • 当间距类型设置为自动间距时,每个方向只有三种对齐方式:
    • 水平方向:顶部、居中、底部。
    • 垂直方向:左、中、右。

  • 当间距类型为固定时,每个方向有九种对齐方式
    • 水平方向:顶部(左中右)、居中(左中右)、底部(左中右)。
    • 垂直方向:左(顶部、居中、底部)、中(顶部、居中、底部)、右(顶部、居中、底部)。


绝对定位布局

绝对位置能够使子图层不受自动布局规则控制。启用了绝对位置的元素能自由拖动,放置在页面的任意位置。

绝对定位布局没有自适应效果

交互

平台支持手动配置多种交互方式和交互效果

  1. 选中无限画布中的元素
  2. 单击右侧交互面板
  3. 配置交互

交互方式

交互方式说明
点击单击鼠标左键
悬停鼠标指针悬浮在元素上,但不进行操作
鼠标移入鼠标指针从外部进入某个元素的范围内
鼠标移出鼠标指针从某个元素的范围内移出到外部
鼠标按下鼠标左键被按下但尚未松开
鼠标抬起被按下的鼠标按键松开

交互效果

交互效果说明
打开页面在当前页打开目标页面。可选择当前应用中的页面
打开蒙层在当前页面上层显示默认隐藏的蒙层,比如弹窗、悬停才显示的元素。只能选择当前页面的蒙层
关闭蒙层关闭目标蒙层
返回返回上一个页面
打开链接在新标签页打开目标链接