页面原型

停止更新提示

页面原型模式已停止功能更新，推荐使用无限画布模式进行设计。

功能开关

你可以在个人设置中开启或关闭页面原型模式：

1. 点击右上角用户头像，进入个人设置
2. 在功能开关选项中，找到"页面原型模式"
3. 点击开关按钮即可开启或关闭该功能

关闭页面原型模式后，新建项目时将不再显示页面原型选项。已创建的页面原型项目仍然可以正常访问和编辑。

---

设计方式

支持文生界面、参考图片、图片复刻三种方式设计界面，主要区别如下

	1. 文生界面	2. 参考图片	3. 图片复刻
输入项	文本描述	文本描述 + 图片	图片
生成逻辑	按照文本描述生成	按照文本描述 + 选中的图片参考项生成	按照图片生成
适用场景	有界面设计需求，但是没有参考	参考其他产品的界面样式，并且有额外的要求	复刻其他产品的界面和内容，还原精度比参考图片高

页面类型

支持设计web端、移动端页面设计

风格

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

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

自定义风格

移动端

桌面端

模板

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

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

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

移动端

桌面端

页面管理

1. 支持手动新增、创建副本、删除页面、收起/展开页面列表

下方图片为鼠标悬浮时，显示收起页面列表图标

2. 页面版本管理

每在对话框中聊天一次，就会生成一个新的页面版本，你可以对页面版本进行如下操作

• 你可以在对话框或者右上角下拉框选中不同版本，进行页面版本切换。主界面内容也会随之改变
  • 如果你觉得AI修改了页面后效果不满意，需要在原页面上重新修改，此时就可以切换到老版本，重新输入修改需求，AI会在老版本基础上进行修改

• 设为演示版本

点击卡片右上角设为演示版本按钮，设置成功后，每次进行应用演示时，显示的都是该版本

• 收藏当前版本

点击卡片右上角收藏该版本，卡片和版本下拉框中会加上星标，方便查找

• 删除版本

你可以点击卡片上的删除图标删除不想要的版本

页面布局

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

什么是自动布局

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

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

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

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

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

2. 元素放置没有既定规则，可以放置到任意位置，如下图所示

自动布局优点

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

• 调换元素位置时，会自动调整布局
  • 选中列表或其他地方的元素
  • 按住鼠标左键，拖动到目标位置（虚线即表示目标位置）

---

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

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

自动布局缺点

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

页面编辑

需要亲手微调每个细节？没问题！GemDesign 提供强大直观的手动编辑模式，让你像使用传统设计工具一样进行精准控制，确保每一个元素都完美符合你的要求。

视频演示

如何使用

1. 进入编辑模式：
   • 点击输入框的 “编辑”图标或者切换顶部编辑tab，进入编辑模式。
   • 
2. 选中目标元素：
   • 点击画布上的文字、图片、按钮、形状等元素
   • 注意：页面中部分元素是在JS代码中动态生成的，不支持手动编辑
3. 修改：

   • 调整位置：

     • 选中元素后，直接拖拽即可移动位置
     • 点击上下箭头图标可以实现元素同级移动
     • 

   • 调整元素横间距 如图所示，希望调整搜索栏中搜索框之间的间距，该如何操作 操作如下：

     • 选中这些元素外框
     • 鼠标放置到间距中间的红色横条上，鼠标指针变成左右箭头图标
     • 按住鼠标左键左右拖动改变间距 (

   • 调整元素垂直间距

     • 同理，若调整上下菜单间距，只需要选中整个菜单，鼠标放置到间距中间的红色竖条上，按住鼠标左键上下拖动改变间距
     • 

   • 修改文字内容：

     • 双击文字元素或者点击编辑图标，输入新内容。

     • 

   • 更改颜色 & 背景：

     • 选中元素，点击 “填充” 设置元素背景颜色
     • 

   • 替换图片：

     • 选中图片，点击 “图片” 上传本地图片替换
     • 

为什么手动编辑不可或缺

• 终极控制权： 对设计的每一个像素拥有完全掌控，满足专业设计师的精细要求。
• 精准高效： 对于明确的、可视化的调整（如对齐某个元素、微调某个颜色值），直接操作往往最快。
• 符合规范： 确保最终设计稿100%符合品牌指南或开发规范。
• 直观体验： 所见即所得的编辑方式，符合用户对设计工具的基础预期和操作习惯。
• 免费编辑：手动编辑不消耗积分

风格继承

设计一个页面很棒，但设计多个风格统一、元素一致的页面才是常态！菜单栏、品牌色、按钮样式、字体规范……难道每个新页面都要小心翼翼确保丝毫不差？

在GemDesign 可以不用这么麻烦！

基于首个设计好的“样板页”，创建新页时一键继承其风格与元素，并锁定你指定的不变内容！

视频演示

如何使用

1. 创建你的“样板页”：
   • 精心设计好第一个页面（比如首页、核心功能页），确保它包含了你想在整个应用中保持一致的关键元素（导航栏、配色方案、按钮样式、字体、图标风格、页脚等）。
2. 创建新页，引用样板页：
   • 当你要设计下一个页面时，在新建页面的输入框中点击“+”号选择样板页。

3. 输入
   • 在输入框中，描述不变部分和变化部分，如：“保持参考页面的顶部导航栏、菜单、页面风格不变，中间显示区域修改成产品详情”
4. 生成新页面：
   • GemDesign 会自动分析“样板页”的结构样式，以及输入要求，生成一个新页面

举个例子

1. 你设计好了首页作为“样板页”，包含了：顶部蓝色导航栏、橙色圆角按钮、特定字体组合。
2. 设计商品详情页时，引用首页作为样板页。
3. 开始设计详情页：在输入框中输入：保持参考页面的顶部导航栏，按钮样式、字体组合不变，中间显示区域全部替换成商品详情，点击发送生成即可

---

边距：

边距是指自动布局容器的边界和子元素之间的距离。（页面原型和应用原型的布局方式皆为自动布局，无限画布中切换成绝对定位布局）

你可以对上、下、左、右的边距分别设置不同的值。

调整边距方式：

1. 选中自动布局容器，并使鼠标悬停在容器上，四周出现粉色横杠
2. 鼠标悬停在粉色横杠，变成黑色箭头
3. 按住鼠标左键，往上下/左右方向拖动即可调整边距

注意：调整边距后可能导致自适应消失

---

间距

间距是指自动布局容器中子元素之间的距离

调整间距方式：

1. 选中自动布局容器，并使鼠标悬停在容器上，子元素之间出现红色竖线
2. 鼠标悬停在红色竖线上，变成黑色箭头
3. 按住鼠标左键，往上下/左右方向拖动即可调整间距大小

注意：调整间距后可能导致自适应消失