上一章我们聊到了如何让ChatGPT帮助进行产品层级的功能模块设计（具体可参见上周的文章《让GPT成为产品助理，帮你写产品文档（功能模块篇）》），让我们再回顾一下GPT在产品设计层面能做的事：
- 产品层级
- 提供/补充产品功能模块
- 功能层级
- 完善功能边界场景
- 提供基础流程逻辑
- 提供/优化文案提示语
- 页面布局
- 样式设计探索
本周我们着重来看看GPT在页面原型设计的功力，除了功能层面的模块划分，GPT是否会做页面框架的划分。我会按下述提问的流程，来一步步引导ChatGPT给出页面框架：
- 定义功能
- 给出多个样式方案，评估选取
- 选定适合的样式，细化布局
我们将围绕“设计一款游戏内社交工具的群聊广场发现页”的产品需求，来基于上述流程最终得到产品原因的页面结构。
一、定义功能
为了让GPT能基于你所描述的功能去设计页面，首先需要让它知道你的功能结构是什么样的。我们可以直接把根据需求调研或用户访谈整理的功能结构喂给GPT，或者如果在毫无头绪的情况下也可以让GPT直接帮我们生成功能列表。
在这篇文章里，会采取后者的方式：让GPT一条龙帮我们完成整体的产品原型页面设计。
提问Prompt：
我现在想设计一个群聊广场的发现页，用在游戏社交工具里，类似Discord的自建server类型。
目标：为了提升玩家活跃，让玩家更容易找到自己偏好的组织，增加玩家之间的粘性。
背景：现在的社交工具已经完成了自建群聊的功能，建立群聊的时候需要输入群聊名称、群聊头像，玩家建好群聊之后可以邀请自己的好友加入群聊，但是暂时不支持搜索群聊。
基于上述目标的描述，请提供群聊发现页的功能设计。
从上图可以看到，GPT给出了群聊发现页的基础结构，包含群聊标签、群聊搜索、群聊推荐等功能。 让GPT给出功能或记住我们给的功能结构，是为了让它在后续的页面设计里记住这些内容 。 （补充知识点：ChatGPT对文本的记忆是 以模式和规则的形式存储的，它会根据输入的问题或指令来检索和提供相关的信息。但是当对话过长，可能过早的对话内容细节GPT会丢失。简单从算法层面上解释，越近的内容的获取权重越高）
二、样式方案评估
接下来就到了我最爱的方案评估环节，让GPT出多个方案，我来拍板用哪个。（可能是作为产品经理的我在产品评审环节受虐太多，现在反向来虐GPT找平衡）。
提问Prompt：
请结合上述功能结构，给出群聊广场发现页的多种设计样式，并简述优缺点。
GPT给出了多种不同样式的组合方案，如果你对给出的方案不满意，我们可以使用“还有没有其他的样式设计？”、“还有么？"相类似的简单Prompt继续追问，相信 GPT 会给你新的方案灵感。
考虑到现阶段热门的社交工具基本对于群聊都会采用卡片式设计，例如 Discord 在 Server 发现页的布局都是卡片式呈现。所以我们采用了 GPT 给出的卡片式设计方案。接下来就是细化到具体的每个页面模块的布局了。
三、细化布局
细化布局阶段我们需要结合 GPT 给出的设计方案和功能模块，让它把每个功能模块在这个页面的详细布局输出。
提问Prompt：
请基于上面最新的功能设计，给出群聊发现页的页面框架，从上到下把相关页面能显示的功能放到框架里，可以按点输出，第一点是页面最上方，第二点是在第一点下方的区域，如此类推。
GPT 按我们要求的从顶部到底部给出了每个功能模块的布局内容，比如最顶端导航栏，下来是推荐群聊的列表，然后是分类标签下的群聊列表。但是我们会发现 GPT 把【群聊详情页】放在了发现页的最后的区域。但是根据通用的产品知识，详情页一般是列表点击之后跳转的页面。
因此，我们需要引导 GPT 去调整这个错误，可以参考以下 Prompt（但是具体产品设计过程中 GPT 给出的错误可能要根据实际情况去引导）
提问Prompt：
群聊详情页面一般是从群聊列表点击跳转的下一级页面，直接把详情页放在群聊广场发现页上不太合适。请修改上述给出的页面框架。
GPT 很谦虚的调整了页面布局结构，把详情页作为点击后的跳转页面给出了信息，其实可能更为精确的结果是把【群聊详情页】从群聊广场发现页里移除，但是 我在 Prompt 里没有明确给出指示移除，也是想测试一下 GPT 的灵活度，结果看来 GPT 还是主要基于已经给出的信息，不太会自动移除已生成的信息 。
有了页面布局结构，我们接下来还可以细化到某个区域模块的属性字段细节的布局。比如我在下面的例子要求 GPT 给出群聊列表上需要呈现的优先级最高的 5 个字段：
提问Prompt：
根据你给出的（群聊广场发现页的页面框架）和（再早之前关于群聊发现页的功能设计内容），在群聊发现列表上，每一条群聊列表上应该显示什么元素字段？给出适合放在群聊发现页列表上的字段，考虑到列表展示空间有限，请筛选出优先级最高的5个字段。
以此类推，我们可以把之前 GPT 给出的每个页面区域里的功能，通过上述类似的提问去获得每个页面区域结构里包含的字段。有了页面结构+字段，我们就可以很轻松的将这些信息用原型工具制作出来，剩下的步骤就是依葫芦画瓢的体力活。
至此，我们看到通过一步一步的提示引导，GPT 是有能力通过功能模块和页面结构的组合信息来细化具体的字段属性，继而组合完成页面原型的设计。这在平常的产品设计过程中，可以在制作原型之前通过与 GPT 的互动，来探索更多的页面设计样式和字段筛选。