6.ChatGPT辅助产品原型设计

1.产品线框图

 

产品原型设计的主要目的：

1. 验证设计方案与产品架构：通过原型设计可以在低成本下构建产品框架，让目标用户在真实环境中体验并提出反馈，检验设计方案是否合理与可行。这可以最大限度减少产品上市的风险。

2. 收集用户反馈与改进产品：通过原型设计可以让目标用户参与设计过程，在使用过程中提出宝贵的意见与建议。这有助于设计师进一步优化产品，提供更加简单与高效的用户体验。 

3. 减少开发成本与缩短产品周期：通过原型设计可以在开发正式产品前验证设计方案的可行性，避免在开发后期出现重大问题从而导致大量资源浪费。这可以最大限度缩短产品上市时间，减少研发投入。

 

原型设计过程中ChatGPT发挥的主要作用：

1. 快速生成线框图或UI参考，加速产品原型设计的构思与思考。 

2. 根据功能或交互描述生成页面框架与信息架构，为设计师指导原型的细节设计。

3. 根据评审反馈与修改意见修订线框图或原型，实现产品设计的快速迭代。

 

产品线框图：

线框图（Wireframes）：线框图是一种低保真度的静态图形表示，主要关注产品的结构和布局。它通常以简单的黑白或灰度图形呈现，强调界面元素的位置、大小和排列方式。线框图通常用于初步概念验证、页面布局和信息结构的设计。如图所示的笔者开发过“我的备忘录”App手机版产品线框图。

 

 

2.产品原型

原型（Prototype）是一个模拟或仿真的产品版本，用于展示和测试产品的功能、交互和用户体验。原型可以是低保真度的，例如纸质原型或简单的线框图，也可以是高保真度的，包括交互式的数字原型。

 

使用ChatGPT辅助原型设计：

ChatGPT是自然语言模型工具，不能直接生成Axure RP 或Adobe XD文件。也就是不能直接制作生成Axure RP 或Adobe XD原型。但是如果想使用ChatGPT自动制作原型可以通过HTML、CSS、JavaScript等Web语言实现，如果依托于具体Web框架更加方便，具体而言移动平台和桌面所使用的框架是不同的。

 

原型设计工具：

1. Axure RP：Axure RP 是一款专注于交互设计和高保真原型的工具。它提供了丰富的交互功能和条件逻辑，可以创建复杂的用户体验流程和原型。

2. Adobe XD：Adobe XD 是一款功能强大的原型设计工具，具有创建交互式原型和界面设计的能力。它提供了丰富的设计工具和资源，可以轻松创建用户体验流程和动画效果。

3. Sketch：Sketch 是一款针对界面设计的工具，广泛用于创建网页和移动应用的原型。

 

 

 

3.使用ChatGPT辅助原型设计

使用ChatGPT辅助制作移动应用原型

jQuery Mobile的优点在于：

轻量级：不占用太多资源，加载速度快；

完整性：包含了很多UI组件和插件，方便开发者快速构建原型设计；

可定制性：提供了多种主题样式，可以根据实际需求进行定制； 跨平台支持：支持多种移动平台，包括iOS、Android、Windows Phone等。

 

 

案例：使用ChatGPT辅助制作“我的备忘录”App原型

案例背景：

“我的备忘录”App是笔者曾经开发的一个App，该App不仅包括iOS平台，还包括Android平台。它的核心功能是添加、删除和查询备忘录信息。

“我的备忘录”App产品的主要功能包括：

增加备忘录

删除备忘录

查询备忘录

 

步骤1.备忘录列表页面

根据线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的原型。

 

向ChatGPT5.4发送请求消息

使用jQuery Mobile帮我绘制手机“我的备忘录”列表页面原型，页面中有一个列表，页面顶部是一个导航栏，导航中的左边是编辑按钮，右边是添加按钮。

 

步骤2.备忘录详细信息页面

根据线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的原型。

 

向ChatGPT5.4发送请求消息

使用jQuery Mobile帮我绘制手机“我的备忘录”详细信息页面原型，页面中有一个文本标签，页面顶部是一个导航栏，导航中的左边是返回按钮。

 

步骤3.备忘录增加页面

根据线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的原型

 

向ChatGPT5.4发送请求消息

使用jQuery Mobile帮我绘制手机“我的备忘录”备忘录增加页面原型，页面中有一个文本输入框，页面顶部是一个导航栏，导航中的左边是取消按钮，右边是保存按钮。

 

 

使用ChatGPT辅助制作桌面应用原型

针对桌面应用原型设计，推荐Bootstrap框架，Bootstrap 是一个流行的开源前端框架，用于快速构建响应式和移动优先的网站和 Web 应用程序。它基于 HTML、CSS 和 JavaScript，提供了一套丰富的组件、样式和布局工具，简化了前端开发的过程。

 

Bootstrap 框架的优点在于

响应式设计：Bootstrap 提供了响应式的网格系统，使得网站能够在不同设备上自动适应并呈现良好的用户体验。

组件库：Bootstrap 包含了大量的可重用组件，如导航栏、按钮、表格、表单、轮播图等，可以方便地在项目中使用，并且这些组件具有一致的样式和交互效果。

样式定制：Bootstrap 具有可定制的样式功能，您可以根据项目需求修改颜色、字体、间距等样式属性，以满足设计要求。

布局工具：Bootstrap 提供了强大的布局工具，如网格系统、响应式工具类和弹性盒子布局，帮助您轻松创建灵活的页面布局。

 

案例：使用ChatGPT辅助制作Todo List原型

案例背景：

Todo List（待办事项清单）应用用于管理自己的待办事宜。Todo List应用的功能如下：

（1）用户管理：支持用户注册和登录，可以设置个人信息。

（2）任务添加：用户可以添加新的待办任务，包括名称、描述、期限等。

（3）任务列表：用户可以查看所有待办任务的列表，可以按状态或日期过滤。

（4）任务详情：用户可以查看特定任务的所有详情。

（5）任务编辑：用户可以编辑未完成任务的信息，包括名称、描述和期限。

（6）任务完成：用户可以将未完成任务标记为已完成。已完成任务以完成状态显示在列表。

（7）任务删除：用户可以删除未完成或已完成的任务。已删除任务不会出现在任何列表中。

 

步骤1.页面划分：设计师向ChatGPT5.4发送请求消息

Todo List项目需求如下，请帮我设计划分原型设计所需要HTML页面。
Todo List（待办事项清单）项目用于管理自己的待办事宜。Todo List项目功能需求：
（1）用户管理：支持用户注册和登录，可以设置个人信息。
（2）任务添加：用户可以添加新的待办任务，包括名称、描述、期限等。
（3）任务列表：用户可以查看所有待办任务的列表，可以按状态或日期过滤。
（4）任务详情：用户可以查看特定任务的所有详情。
（5）任务编辑：用户可以编辑未完成任务的信息，包括名称、描述和期限。
（6）任务完成：用户可以将未完成任务标记为已完成。已完成任务以完成状态显示在列表。
（7）任务删除：用户可以删除未完成或已完成的任务。已删除任务不会出现在任何列表中。

设计师向ChatGPT5.4发送请求消息

再帮我绘制页面关系

 

步骤2.页面关系图

ChatGPT以文本的方式返回页面关系，因此它看起来可能不够直观。为了更好地展示页面关系，我们可以让ChatGPT使用PlantUML语言将其绘制页面关系图。

 

向ChatGPT5.4发送请求消息

页面关系如下，请使用PlantUML语言绘制页面关系图。
login.html
↓ 登录
register.html   ←→   profile.html
↓ 注册              ↑编辑个人信息  
task_list.html  
↓ 查看列表        
add_task.html   ←→  edit_task.html
↓ 添加任务             ↑编辑任务
↓         
task_detail.html
↓ 查看详情

　

 

步骤3.生成原型页面

使用ChatGPT来帮助生成页面，需要提供尽可能详细和具体的信息。我们需要明确所需页面的类型、布局、元素组成、颜色等等，这样ChatGPT才能根据这些信息生成准确的页面。

 

向ChatGPT5.4发送请求消息生成“登录页面”

使用Bootstrap框架生成登录HTML页面：
标题：在输入框上方有一个“登录”的标题。
用户名输入框：页面包含一个输入框，显示了用户名“Tony”。
密码输入框：页面包含一个密码输入框，显示的内容为掩码形式的三个小圆点（***）。
登录按钮：下面有一个蓝色的“登录”按钮。
注册链接：在左下方有一条文字链接“还没有账号?点击注册”，提示用户可以注册一个新账号。

 

向ChatGPT5.4发送请求消息生成“任务列表页面”

使用Bootstrap框架生成任务列表页面，页面内容如下：
页面标题：顶部有一个大标题“任务列表”，表明这是一个任务管理页面。
表格布局：
表头：表格的第一行是表头，包含以下列：
#：任务的序号。
任务：任务名称。
优先级：任务的重要程度，使用了不同颜色的小标签来表示优先级。
状态：任务当前的状态，如“进行中...”、“已完成”。
操作：对任务进行操作的按钮，如“删除”和“编辑”。
表格内容：表格中列出了多项任务的具体信息，每一行表示一项任务。
序号从1到4列出。
任务名称为“任务1”、“任务2”等。
优先级列有不同的标签，表示不同的优先级，如“高（蓝色）”、“危险（红色）”、“中（黄色）”、“低（绿色）”。
状态列表示任务的当前状态。
操作列包含“删除”和“编辑”两个按钮，用户可以通过这些按钮管理任务。
添加按钮：页面右上角有一个蓝色的“添加”按钮，用户可以通过这个按钮添加新的任务。

 

向ChatGPT5.4发送请求消息生成“添加任务页面”

使用Bootstrap框架生成添加任务页面，页面内容如下
页面顶部有一个搜索框和一个加号图标，用于输入和添加新内容。在页面中部，有一个标题“添加任务”，下面分为几个部分：

任务名：用户需要输入任务的名称。
优先级：这里选择的是“高”。
任务描述：用户可以在这里输入对任务的描述。
最下方有“提交”按钮，用于确认信息并提交。

 

 

其它ai工具：

ChatGPT  + Stitch + Figma ui界面直接生成

1.Uizard AI   是一款简单易用的工具。它有一个有趣的功能，是能够将手绘草图转换为高保真原型。此功能可让你立即将想法转化为可用的视觉设计

2.Galileo AI  用户能够使用简单的文本提示词，在 Galileo.ai 中生成吸引人的 UI 界面。它使得测试设计构想，然后集思广益进一步迭代变得更加容易。这款工具与 Figma 集成，这进一步增强了其功能，使用户可以在熟悉的平台内，完善其 AI 生成的设计。

3.UX Pilot 采用数据驱动的方法进行 UI 设计。它将 AI 线框图和原型设计，以及分析驱动的建议，结合到了一起。这项独特功能使设计团队能够根据数据创建以用户为中心的设计。

4.Figma 毫无疑问是领先的 UI/UX 设计和协作平台，Figma 与 AI 的整合，进一步增强了它的功能。Figma 的 Ai 功能经历了若干次的迭代和修改，目前才算稳定下来。