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

7.3.1

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

针对移动平台原型设计，笔者推荐使用jQuery Mobile框架，jQuery Mobile是一款基于HTML、CSS和JavaScript的开源移动端UI框架，它的设计初衷是方便开发者创建移动Web应用。它提供一些预先设计过的UI组件和方便的JavaScript插件，可用于快速构建移动端的交互界面。

jQuery Mobile的优点在于以下几个方面。

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

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

●可定制性：提供多种主题样式，可以根据实际需求进行定制。

●跨平台支持：支持多种移动平台，包括iOS、Android、Windows Phone等。

使用jQuery Mobile可以让我们专注于原型设计本身，而不用重复编写UI组件，可提高开发效率。同时也可以较好地满足用户对移动应用的交互和视觉体验需求。

7.3.2

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

下面通过一个案例介绍如何使用ChatGPT辅助制作移动应用App原型。

案例背景

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

“我的备忘录”App产品的主要功能如下。

●增加备忘录。

●删除备忘录。

●查询备忘录。

我们的设计师针对不同的平台绘制了相应的设计线框图，图7-1所示的是手机版本的“我的备忘录”App，而图7-4和图7-5所示的是平板电脑版“我的备忘录”App。

▲图7-4 平板电脑版“我的备忘录”App横屏线框图

图7-5 平板电脑版“我的备忘录”App竖屏线框图

具体步骤如下。

1.设计和制作备忘录列表页面原型

根据图7-1所示的线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的备忘录列表页面原型。

设计师向ChatGPT发送如下请求消息。

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

ChatGPT的回答如下。

以下是示例代码，使用了jQuery Mobile框架，包含一个导航栏和一个备忘录列表：

复制上述代码，将代码保存后使用浏览器打开，结果如图7-2所示。

2.设计和制作备忘录详细信息页面原型

根据图7-2所示的线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的备忘录详细信息页面原型。

设计师向ChatGPT发送如下请求消息。

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

ChatGPT的回答如下。

以下是示例代码，使用了jQuery Mobile框架，包含一个导航栏和一个备忘录详细信息页面：

复制上述代码，将代码保存后使用浏览器打开，结果如图7-6所示。

图7-6 备忘录详细信息页面

3.设计和制作备忘录增加页面原型

根据图7-1所示的线框图，我们可以使用ChatGPT帮助设计和制作基于HTML页面的备忘录增加页面原型。

设计师向ChatGPT发送如下请求消息。

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

ChatGPT的回答如下。

以下是示例代码，使用了jQuery Mobile框架，包含一个导航栏和一个备忘录增加页面：

复制上述代码，将代码保存后使用浏览器打开，结果如图7-7所示。

图7-7 备忘录增加页面

7.3.3

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

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

Bootstrap框架的优点体现在以下几个方面。

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

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

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

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

7.3.4

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

下面再介绍一个案例，该案例是基于桌面应用的原型设计，本小节介绍一下如何使用ChatGPT制作桌面应用原型。

案例背景

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

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

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

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

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

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

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

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

原型制作过程如下。

1.页面划分

整理好用户需求后，可以使用ChatGPT帮助划分页面。

动手示例

设计师向ChatGPT发送如下请求消息。

Todo List项目需求如下，请帮我设计划分原型设计所需要的HTML页面。

Todo List（待办事项清单）项目用于管理自己的待办事宜。Todo List项目功能需求：

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

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

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

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

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

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

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

ChatGPT的回答如下。

1.登录页面login.html：用于用户登录，校验用户名和密码。

2.注册页面register.html：用于新用户注册，填入用户名、密码、邮箱等信息。

3.个人中心页面profile.html：用户可以查看和编辑个人信息，如用户名、密码、邮箱等。

4.任务列表页面task_list.html：展示所有的任务列表，可以过滤状态和日期，包含任务名称、状态、期限等信息。用户可以在此页面添加、编辑和删除任务。

5.添加任务页面add_task.html：用于添加新任务，填入任务名称、描述、期限、优先级等信息。添加成功后跳转到任务列表页面。

6.任务详情页面task_detail.html：展示特定任务的所有详细信息，用户可以在此页面将任务标记为已完成。

7.编辑任务页面edit_task.html：用于编辑选定任务的信息，如名称、描述、期限等。编辑成功后跳转到任务详情或列表页面。

还可以让ChatGPT根据项目需求绘制页面关系（页面之间的跳转）。

动手示例

设计师向ChatGPT发送如下请求消息。

再帮我绘制页面关系。

ChatGPT的回答如下。

页面关系如下：

2.绘制页面关系图

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

动手示例

设计师向ChatGPT发送如下请求消息。

页面关系如下，请使用PlantUML语言绘制页面关系图。

ChatGPT的回答如下。

@startuml

login.html-down-> register.html：登录

register.html <--> profile.html：注册

profile.html-up-> task_list.html：编辑个人信息

task_list.html-down-> add_task.html：查看列表

add_task.html <--> edit_task.html：添加任务

edit_task.html-up-> task_list.html：编辑任务

task_list.html-down-> task_detail.html：查看详情

@enduml

复制上述代码，预览结果如图7-8所示。

图7-8 页面关系图

3.生成原型页面

在进行原型页面设计时，为了让页面看起来更加漂亮，我们通常会依赖于一些前端框架。其中，Bootstrap是一个非常不错的框架，它可以方便地制作出漂亮的页面。

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

设计师向ChatGPT发送如下请求消息。

使用Bootstrap框架生成登录HTML页面，用户ID、用户密码和登录按钮，还有一个注册链接。

ChatGPT的回答如下。

复制上述代码，将代码保存为login.html，然后使用浏览器打开login.html，结果如图7-9所示。

图7-9 登录页面

重复上述步骤生成其他页面，图7-10所示的是任务列表页面，图7-11所示的是添加任务页面。其他页面不再赘述，读者可以在本书配套代码中找到。

▲图7-10 任务列表页面

图7-11 添加任务页面