UI 指南

概覽

選用的外掛程式 UI 能在維持對話流暢的同時，擴展使用者能完成的操作。 只有在視覺化互動有助於改善工作流程時，才使用卡片、輪播、全螢幕檢視等顯示模式。

設計系統

若要設計高品質、自然融入 ChatGPT 的 UI， 你可以使用 @openai/apps-sdk-ui 元件庫。

它提供以 Tailwind 為基礎的樣式、採用 CSS 變數的設計 Token，以及精心打造且具備無障礙功能的元件庫。

你可以自行選擇是否使用這個元件庫。它能讓你更快打造 符合 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 使用無襯線字型），確保在不同裝置上都具備良好的可讀性與無障礙體驗。

實用原則

• 一律繼承系統字型堆疊，並遵循系統對標題、內文及圖說的字級規範。
• 合作夥伴的粗體、斜體或醒目標示等樣式僅限用於內容區域，不應套用到構成介面結構的 UI 元素。
• 盡可能減少字級的種類，優先使用 body 和 body-small 字級。

不要使用自訂字型，即使在全螢幕模式中也一樣。盡可能使用系統字型變數。

間距與版面配置

一致的外邊距、內距及對齊方式，能讓對話中的合作夥伴內容易於瀏覽，且配置符合使用者預期。

實用原則

• 卡片、系列與檢查器面板應採用系統格線間距。
• 保持內距一致，避免文字過於擁擠或緊貼兩側邊緣。
• 盡可能遵循系統指定的圓角設定，以維持形狀一致。
• 依清楚的順序排列標題、輔助文字與 CTA，維持視覺層次。

圖示與圖像

系統圖示讓視覺資訊清楚易懂，合作夥伴的標誌與圖片則能幫助使用者辨識相關品牌。

實用原則

• 使用系統圖示，或採用符合 ChatGPT 視覺風格的自訂圖示：單色、線條輪廓。
• 請勿在回覆中加入你的標誌。ChatGPT 一律會在小工具呈現之前，加入你的標誌與應用程式名稱。
• 所有圖像都必須遵守指定的長寬比，以免變形。

無障礙設計

合作夥伴提供的每一種體驗，都應讓盡可能廣泛的使用者能夠使用。 為 ChatGPT 建立應用程式時，應將無障礙設計列為核心考量。

實用原則

• 文字與背景之間的對比度必須達到最低要求（WCAG AA）。
• 為所有圖片提供替代文字。
• 支援調整文字大小，且不破壞版面配置。