UI 指南

概览

可选的插件 UI 能够扩展用户可执行的操作，同时保持对话流畅。仅当可视化交互能改善工作流程时，才使用卡片、轮播、全屏视图等显示模式。

设计系统

要设计与 ChatGPT 原生体验一致的高质量 UI，您可以使用 @openai/apps-sdk-ui 组件库。

它提供基于 Tailwind 的基础样式、以 CSS 变量形式定义的设计令牌，以及一套精心设计、支持无障碍访问的组件。

组件库并非必需，但能帮助您更快地构建符合 ChatGPT 设计系统的组件。

显示模式

显示模式是开发者在 ChatGPT 中构建应用体验所使用的界面形式。合作伙伴可以通过这些模式展示自然融入对话的内容和操作。从快速确认到沉浸式工作流程，每种模式都针对特定类型的交互而设计。

一致地使用这些模式，有助于保持体验简单且符合预期。

内联

内联显示模式直接嵌入对话中。目前，内联界面始终出现在模型生成的回复之前。每个应用最初都以内联形式显示。

布局

• 图标与工具调用：包含应用名称和图标的标签。
• 内联显示：将应用内容嵌入模型回复上方的轻量界面。
• 后续回复：由模型生成的简短回复，显示在小组件之后，用于建议修改、后续步骤或相关操作。避免与卡片内容重复。

内联卡片

直接嵌入对话中的轻量、单一用途小组件，用于快速确认、基本操作或视觉辅助。

适用场景

• 执行一项操作或做出一项决策（例如确认预订）。
• 展示少量结构化数据（例如地图、订单摘要或简要状态）。
• 提供功能完整、可独立使用的小组件或工具（例如音频播放器或记分卡）。

布局

• 标题：如果您的卡片以文档为基础，或包含归属于某个父级元素的条目（例如播放列表中的歌曲），请添加标题。
• 展开：如果卡片包含富媒体或交互内容（例如地图或交互式图表），可用此操作打开全屏显示模式。
• 显示更多：如果以列表形式呈现多个结果，可用此操作显示更多条目。
• 编辑控件：为应用回复提供内联编辑支持，同时避免让对话界面过于繁杂。
• 主要操作：最多提供两个操作，放在卡片底部。操作应触发一轮对话或一次工具调用。

交互

卡片支持基本的直接交互。

• 状态：所做的修改会被持久保存。
• 基本的直接编辑：在适当的情况下，提供可内联编辑的文本，让用户无需向模型发送提示即可快速修改。
• 动态布局：卡片可以随内容增加而增高，最高不超过移动端显示区域的高度。

实用原则

• 限制每张卡片的主要操作数量：最多支持两个操作，包括一个主要行动号召（CTA）和一个可选的次要 CTA。
• 不要在卡片中设置深层导航或多个视图。 卡片不应包含多个逐层深入的页面、选项卡或更深层的导航。可考虑将这些内容拆分为独立卡片或工具操作。
• 不要嵌套滚动。卡片应自动调整大小以容纳内容，避免内部滚动。
• 不要重复提供输入功能。不要在卡片中重复实现 ChatGPT 的功能。

内联轮播

一组并排呈现的卡片，让用户能够快速浏览并从多个选项中做出选择。

适用场景

• 展示由少量同类条目组成的列表（例如餐厅、播放列表、活动）。
• 条目包含较多视觉内容和元数据，简单的列表行无法容纳。

布局

• 图像：每个条目都应包含图像或其他视觉内容。
• 标题：轮播条目通常应包含标题，用于说明内容。
• 元数据：结合回复的上下文，通过元数据展示条目最重要、最相关的信息。文字尽量不要超过两行。
• 徽章：在适当的情况下，使用徽章提供补充背景信息。
• 操作：尽可能为每个条目仅提供一个清晰的 CTA。

实用原则

• 将 每个轮播的条目数量控制在 3–8 个 ，以便阅读。
• 元数据只保留最相关的细节，最多三行。
• 每张卡片可以包含一个可选的 CTA（例如“预订”或“播放”）。
• 各张卡片应采用一致的视觉层级。

全屏

全屏模式将体验扩展到内联卡片之外，提供沉浸式界面，为用户执行多步骤工作流程或深入探索留出空间。ChatGPT 编辑器仍以叠加形式显示，让用户能够结合全屏视图的上下文，继续通过自然对话“与应用交流”。

适用场景

• 无法在单张卡片中完成的丰富任务（例如带标记的交互式地图、功能丰富的编辑画布或交互式图表）。
• 浏览详细内容（例如房源信息、菜单）。

布局

• 系统关闭控件：关闭面板或视图。
• 全屏视图：内容区域。
• 编辑器：ChatGPT 的原生编辑器，让用户可以结合全屏视图的上下文继续对话。

交互

• 聊天面板：在全屏界面中保留对话上下文。
• 思考中：编辑器输入框显示“微光”动画，表示回复正在流式传输。
• 回复：模型完成回复后，编辑器上方会短暂显示一段截短的回复内容。点按即可打开聊天面板。

实用原则

• 设计可与系统编辑器配合使用的用户体验。全屏模式下始终显示编辑器，因此请确保您的体验支持自然的对话式提示，让用户可以通过这些提示触发工具调用。
• 如果更大的空间有助于开展工作，请使用全屏模式。 现有的编辑器和管理界面只要符合 iframe 规范，就可以嵌入。

画中画（PiP）

ChatGPT 内持续显示的悬浮窗口，针对游戏或视频等持续进行或实时会话进行了优化。对话继续时，PiP 仍保持可见，并可根据用户提示动态更新。

适用场景

• 与对话同时进行的活动，例如游戏、实时协作、测验或学习活动。
• PiP 小组件可以响应聊天输入的场景，例如根据用户请求继续一轮游戏或刷新实时数据。

交互

• 已激活： 滚动时，PiP 窗口保持固定在显示区域顶部
• 已置顶： PiP 保持固定，直到用户将其关闭或会话结束。
• 会话结束： PiP 返回对话内的原位置，并随滚动移出视野。

实用原则

• 用户通过系统编辑器交互时，确保 PiP 能更新状态或作出响应 。
• 会话结束时自动关闭 PiP 。
• 不要在 PiP 中堆积控件或静态内容 ，这类内容更适合内嵌或全屏模式。

视觉设计指南

一致的外观和交互感受有助于让合作伙伴构建的工具自然融入 ChatGPT 平台。视觉指南有助于保持清晰度、易用性和无障碍性，同时也在适当位置为品牌表达留出空间。

这些原则介绍了如何使用色彩、字体、间距和图像，在保持系统界面清晰的同时，让合作伙伴有空间展现自身服务的特色。

为什么这很重要

视觉和用户体验的一致性有助于改善在 ChatGPT 中使用应用的整体体验。遵循这些指南，合作伙伴就能以用户熟悉的一致方式呈现工具，在不分散注意力的情况下提供价值。

色彩

系统定义的配色有助于确保操作和回复始终与 ChatGPT 平台保持一致。合作伙伴可以通过点缀元素、图标或内嵌图像体现品牌特色，但不应重新定义系统颜色。

实用原则

• 文本、图标以及分隔线等划分空间的元素应使用系统颜色。
• 合作伙伴的徽标或图标等品牌点缀元素不应覆盖背景或文本颜色。
• 避免使用破坏 ChatGPT 简约外观的自定义渐变或图案。
• 在应用各显示模式中的主要按钮上使用品牌强调色。

在点缀元素和徽章上使用品牌色。不要更改文本颜色或其他核心组件样式。

不要为文本区域的背景着色。

字体排版

ChatGPT 使用各平台的原生系统字体（iOS 上为 SF Pro，Android 上为无衬线字体），以确保在不同设备上的可读性和无障碍性。

实用原则

• 始终继承系统字体栈，遵循系统对标题、正文和说明文字的字号规定。
• 粗体、斜体或高亮等合作伙伴自定义样式仅用于内容区域，不应用于界面的结构性元素。
• 尽量减少字号种类，优先使用 body 和 body-small 字号。

不要使用自定义字体，即使在全屏模式下也是如此。尽可能使用系统字体变量。

间距与布局

一致的外边距、内边距和对齐方式，让对话中的合作伙伴内容便于快速浏览，呈现方式也符合用户预期。

实用原则

• 卡片、合集和检查器面板应使用系统网格间距。
• 保持内边距一致，避免内容拥挤或文本紧贴边缘。
• 尽可能遵循系统规定的圆角设置，以保持形状一致。
• 按清晰的顺序排列标题、辅助文本和行动号召（CTA），保持视觉层次。

图标与图像

系统图标有助于清晰传达信息，合作伙伴的标志和图像则有助于用户识别相关品牌。

实用准则

• 使用系统图标，或采用符合 ChatGPT 视觉风格的单色线框自定义图标。
• 不要在回复中加入您的标志。ChatGPT 始终会在渲染小组件之前添加您的标志和应用名称。
• 所有图像都必须遵循规定的宽高比，以免变形。

无障碍

合作伙伴提供的每一种体验都应让尽可能广泛的用户群体能够使用。 为 ChatGPT 构建应用时，您应将无障碍作为核心考量。

实用准则

• 文字与背景之间的对比度必须达到最低要求（WCAG AA）。
• 为所有图像提供替代文本。
• 支持调整文字大小，且不破坏布局。