用ChatGPT設(shè)計(jì)UI：輕松幾步幫你搞定界面原型
用ChatGPT能设计UI吗？能！
这会是一个精心设计吗？本文将回答这个问题，并提供一些实用的技巧，以及如何在使用ChatGPT 4 o时最大化利用UI设计。
ChatGPT UI生成器简要演变这不是我第一次尝试用ChatGPT生成UI设计。第一次用这个工具尝试做这件事是在2023年，当时它还没有内置图像生成器。所以我主要用它来想布局设计。
使用ChatGPT设计落地页之前，我们讨论了如何使用ChatGPT构建移动应用程序。在本文中，我们将利用这个工具来设计一个等。来看看uxplanet.org当将DALL·E集成到ChatGPT中的下一次尝试时，效果并不理想，主要是由于DALL·E 3生成的图片中包含乱码文字。
大约2023年由AI生成的UI设计
使用ChatGPT 4一步一步设计UI的简明指南OpenAI最近更新了ChatGPT的重要功能，现在ChatGPT可以生成复杂的UI设计，其中包含真实的文本。
生成UI设计的过程始于一个良好的提示。我将设计一个名为Foodiez（虚构的应用程序）的食品配送App的主屏幕，并为此使用Markdown格式的提示。
为什么用 Markdown？
Markdown 自带内容层次结构（如 ## 标题），逻辑分组 UI 部分，并提高了人类和 AI 模型的可读性。
# Foodiez – 当地食品配送（iOS UI设计）
为名为Foodiez – 当地食品配送的iOS应用设计一个简洁现代的移动端UI界面。布局应包含以下部分：
---
## 1. 状态栏（顶部）
- **样式**：标准的iOS布局（顶部安全区）
---
## 2. 标题部分
- **居中Logo**：Foodiez
- **字体样式**：中等粗细，小尺寸
- **颜色**：橙色文字
---
## 3. 位置与搜索行
- **左**：位置指示器（洛杉矶）
- **右**：通知图标（圆形，32px）
- **下方**：带有占位符（搜索餐厅或菜品...）的搜索栏
- 圆角，浅灰色背景
- 搜索图标左对齐
---
## 4. 精选餐厅轮播
- **样式**：水平滚动的卡片，有圆角和柔和阴影
### 轮播卡片内容
- **卡片1**
- 标题：寿司大师
- 副标题：*20–30分钟 • 免费送餐*
- 图片：寿司照片缩略图
- **卡片2**
- 标题：披萨米娅
- 副标题：*15–25分钟 • 5元送餐费*
- 图片：披萨照片缩略图
---
## 5. 过滤行
- **过滤器筛选**：
- 配送时间 – 例如，“30分钟以内”
- 菜系 – 例如，“所有类型”
- 评分 – 例如，“4星或以上”
---
## 6. 附近热门餐厅列表
### 布局
- 垂直堆叠的重复项
### 餐厅卡片内容
- **左**
- 餐厅图片（圆角，64x64）
- **中**
- 名称（例如，汉堡区）
- 副标题：菜系 + 配送时间（例如，*汉堡 • 20–25分钟*）
- 评分：星级图标 + 评分（例如，⭐ 4.7）
- **右**
- 收藏图标（♡ 描边）
- **底部行**
- 配送费（例如，5元送餐费）
- 促销标签（如有）：今日享10%折扣
---
## 7. 底部导航栏
- **标签**（顶部图标，底部标签）：
- **首页**
- 状态：激活（选中）
- 样式：高亮图标和标签（橙色）
- **搜索**
- 状态：未激活（未选中）
- 样式：默认灰色图标和标签
- **订单**
- 状态：未激活（未选中）
- 样式：默认灰色图标和标签
- **个人主页**
- 状态：未激活（未选中）
- 样式：默认灰色图标和标签
- **间距**：等间距
- **填充**：包含底部安全区域在使用ChatGPT进行UI设计时，撰写提示是最具挑战性的部分之一。我建议你不要从零开始。相反，利用ChatGPT来分析现有的设计。参考现有设计可以帮助ChatGPT更好地理解风格偏好、视觉密度和语气氛围。这有助于让AI的输出更贴近你的实际设想。
因为我正在设计一款外卖应用程序，我可以将同类的其他应用程序作为参考，比如DoorDash、Postmates、Uber Eats。只需找到这些应用中的一个界面并提交给ChatGPT，附上提示“描述这个界面。”有三种方法可以获取现有应用程序的界面设计：
- 在您的设备上安装该应用程序，然后截个屏；
- 在线查找高保真的应用界面 mock 图（例如，下面我分享的是来源于官方媒体包的 DoorDash 页面截图）；
- 使用类似 Mobbin 的服务，这是一个汇集了大量现有应用界面设计的平台，可以下载特定应用的最新界面截图。
DoorDash 是美国一款流行的送餐应用程序。这里展示的是这款应用的关键页面，其中就包括我可以用来自行参考的主页。
一旦你得到了ChatGPT的回复，你可以对其用Markdown格式进行格式化。以下是一些实用技巧，用Markdown格式编写提示语或指令：
✅ 描述布局设计、目的、风格以及平台（iOS vs Android vs Web）。
✅ 如果你想寻找特定的外观，请明确指出视觉风格（例如，圆角图标，32px）。
✅ 使用编号的节。 这将给布局构建提供清晰的顺序。这将有利于你和AI。
✅ 使用加粗（例如，文本）来强调。 这将增强清晰度。尽量一致地使用Markdown样式（例如，在我的例子中，我使用加粗来表示一个部分的顶级属性）。
✅ 最多使用3级Markdown层级。 使用超过3级（#、##、###）可能会分散意图，GPT可能无法正确解析这种复杂的层级结构。
✅ 提供风格和功能行为的清晰描述。 清晰解释某些元素应该如何呈现和工作（例如，“ 可水平滑动的卡片，圆角，柔和阴影 ”）。这是整个过程中最难的部分，因为你需要清楚地理解该元素的外观和功能。
💡 小贴士: 不用自己动手写 Markdown，你可以把刚才提到的小技巧复制粘贴到 ChatGPT 的输入框里，然后让 ChatGPT 根据这个提示来帮你把输入的纯文本转换成 Markdown 格式。
一旦你将提示提交给ChatGPT 4，生成图像的过程就会开始。生成图像的过程比较慢（至少对于ChatGPT Plus用户来说）——通常需要一到两分钟的时间。有趣的是，OpenAI为图像生成器加入了一种怀旧的效果——图像从上到下逐渐“加载”出来。这让我想起了互联网早期的日子，那时候网速慢，所有图片都是从上到下加载的。
ChatGPT中图像生成的过程是怎样的？
下面就是我们用我们的提示让ChatGPT生成的设计结果，这是未经处理的输出。
这是ChatGPT生成的设计
提供的提示和生成的输出之间有很大的关联性，但还是有一些地方需要修正，例如：左上角的“Los”应该改成LA或Los Angeles，底部标签栏中的“Orders”重复了两次。
这是给ChatGPT的一个后续请求，尝试解决这些问题。
去掉底部标签栏中的“订单导航”选项，并将左上角的“Los”换成“LA”以下是ChatGPT生成的内容（原文）（请注意：我没有裁剪图片；仍然是未编辑的原始输出）。
设计的第一次迭代。
正如你所见，ChatGPT将“Los”改成了“LA”，但未能移除多余的“订单”选项（它却将底部标签栏中的“订单”一并删除了）。它还引入了一些细微的UI设计变化，例如更改了图像和文字排列，以及某些UI控件的样式（如“所有类型”项）。
💡 小贴士: 您可以请ChatGPT对刚刚生成的设计提出改进建议。下面是一个给ChatGPT的提示示例：
我们在哪些方面可以改进，比如层次结构、视觉平衡或可访问性？
与ChatGPT合作的UI设计流程比如说，可以建立一个新的UI设计流程，其中AI工具发挥重要作用。这是我构思阶段使用的步骤。
- 确定你想要构建的界面（UI设计目标）。 这个屏幕是干什么的？（例如，引导页面、仪表盘、结账页面）谁在使用它，他们需要采取什么行动？
- 撰写并验证提示（确保它与你的UI设计目标吻合）。 清晰、结构化的提示应包括：平台（例如，iOS、Web），布局组件（例如，英雄组件、列表、导航），视觉风格（例如，极简风、趣味风、暗模式），品牌语调或感觉（例如，高端、友好、Z世代）。写完提示后，大声读一遍！
- 将你的提示提交给ChatGPT以可视化你的设计。
- 查看AI生成的设计，看看它是否符合你的心意。 问：这是否符合我的目标和流程？布局和清晰度是否合适？操作是否直观？有没有感觉不对的地方？
- 优化提示并重复上述过程。
如果你在寻找一个能生成最终像素完美的设计方案，ChatGPT现在还不能满足这个需求。但如果你想快速尝试和测试各种想法，ChatGPT就非常合适。
记得你还需要在 Figma 中优化你的设计。你可以通过两种方式来实现。一种是将 ChatGPT 生成的设计作为参考，从头开始在 Figma 中重新构建设计，另一种是使用类似 Codia 的插件，这些插件可以将图像转换为可编辑的 Figma 设计。
原始设计图（由ChatGPT生成的原始图）以及Codia基于此图生成的Figma布局。
用AI来做氛围编程令我越来越清楚的一点是，我们快速构建产品的方式正在越来越明显地发生变化。我相信在不久的将来，我们会把花在 Figma 这样的工具上的时间减少，而更多的时间会花在像 ChatGPT 和 Claude 这样的工具上。甚至可能对于许多产品设计任务而言，Figma 中那种逐像素调整的工作将变得过时，我们将通过 AI 生成不仅设计，还包括代码的内容。
我个人非常喜欢Cursor AI这个工具，我分享过用它创建了一个简洁但功能齐全的移动和网页应用的经验。
[用Cursor AI进行Vibe编码：用Cursor AI进行移动开发]仅用几分钟时间构建iOS应用 用Cursor AI进行Vibe网络开发如何仅用几分钟用Cursor AI构建React web应用
可以试试Interaction Design Foundation，它提供涵盖用户体验设计全流程的在线课程，从基础到高级。
灵活进度的用户体验设计课程，在线由设计专家创建。加入全球超过187,868名学生的行列…www.interaction-design.org更多详情，请访问 全球最大的设计社区
此帖子含推广链接
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
