AI 对话 App 设计参考

调研日期：2026-02-16 调研对象：豆包、Kimi、ChatGPT、Poe、Claude 用途：秘书台（MiShuTai）设计参考

一、各 App 设计特点分析

1. 豆包（Doubao）— 字节跳动

维度	设计特点
配色	蓝白主色调，品牌色为亮蓝 `#3370FF`，背景纯白，辅以浅灰 `#F5F6F7` 区域分隔
布局	左侧会话列表 + 右侧对话区，移动端底部 Tab 栏（首页/发现/我的）
字体	系统字体（苹方/思源黑体），正文 15px，标题 17-20px
交互	输入框底部固定，支持语音输入、图片上传；消息气泡式，AI 回复左对齐无气泡；功能卡片式入口（写作/翻译/编程等）；流式输出带光标动画
特色	智能体市场入口突出，Explore 页瀑布流卡片；深色模式支持；对话支持分支

官网：doubao.com 直接跳转至对话界面，无独立产品落地页

2. Kimi — 月之暗面（Moonshot AI）

维度	设计特点
配色	深色主题为主（`#1A1A2E` 背景），品牌色紫蓝渐变 `#6C5CE7 → #A29BFE`，亮色模式白底
布局	左侧折叠式侧栏 + 中央对话区；顶部功能切换（Websites/Docs/Slides/Sheets/Deep Research/Agent Swarm）
字体	系统字体栈，中文思源黑体，英文 Inter/SF Pro，正文 14-15px
交互	长文档上传为核心卖点，拖拽上传区域醒目；搜索增强对话；Markdown 渲染精良，代码块带语法高亮和复制按钮；流式输出
特色	产品矩阵丰富（网页生成、PPT、表格、深度研究、Agent Swarm）；K2.5 模型标识突出；极简风格

官网：kimi.com，从 moonshot.cn 重定向

3. ChatGPT — OpenAI

维度	设计特点
配色	经典黑白灰，品牌绿 `#10A37F`（用于 logo/按钮高亮），背景白色 `#FFFFFF`，侧栏深灰 `#202123`，暗色模式 `#343541`
布局	左侧窄侧栏（会话历史）+ 右侧宽对话区，居中输入框（最新版底部居中胶囊形）；移动端全屏对话 + 底部输入
字体	Söhne（品牌字体），回退 ui-sans-serif/system-ui，正文 16px，行高 1.75
交互	输入框支持多模态（文本/图片/文件/语音）；Advanced Voice Mode 带声波动画；消息无气泡，纯文本流；Markdown 精细渲染；GPT Store 卡片网格入口
特色	极致简洁，对话为中心；Canvas 模式（代码/文档协作编辑）；Memory 功能；图片生成内嵌；4.9★ 评分 5.7M 评价

App Store 信息：157.9MB，iOS 17.0+，支持 60 种语言，Plus $19.99/月

4. Poe — Quora

维度	设计特点
配色	品牌绿 `#5DBB63`，背景白色，侧栏浅灰，暗色模式 `#1E1E1E`，整体偏中性色
布局	左侧双栏（Bot 列表 + 会话列表）+ 右侧对话区；移动端底部 Tab（Home/Explore/Create/Chat/Profile）
字体	SF Pro/系统字体，正文 15px，Bot 名称加粗
交互	多 Bot 切换为核心体验，每个 Bot 有独立头像和介绍卡片；Bot 创建器低代码化；对话中可 @切换模型；流式输出；分享对话链接
特色	聚合平台定位（GPT-4、Claude、Gemini、Llama 等）；Bot 生态市场；价格优势（一个订阅多个模型）

5. Claude — Anthropic

维度	设计特点
配色	温暖沙棕 `#D4A574`（品牌色），背景奶白 `#FAF9F6`，文字深棕 `#2D1B0E`，暗色模式棕黑，整体温暖人文感
布局	左侧窄侧栏（会话+项目）+ 右侧对话区，居中输入框；Projects 功能带独立知识库；Artifacts 面板右侧弹出
字体	Styrene（品牌衬线体）用于标题，正文 system-ui，15-16px，行距宽松 1.8
交互	Artifacts（代码/文档/SVG 预览面板）为独特交互；Projects 支持自定义指令+知识库；文件上传（PDF/图片）分析；语音输入；Markdown 渲染优雅
特色	设计最有辨识度，温暖非科技感；Artifacts 右侧面板双栏交互；119.8MB，4.7★ 48K 评价；Pro $20/月

App Store 信息：iOS 18.0+，10 种语言，Opus 4.6 & Sonnet 4.5

二、共性总结：AI 对话 App 设计最佳实践

2.1 布局模式

桌面端标配：左侧栏（会话历史/导航） + 右侧对话区
移动端标配：全屏对话 + 底部固定输入框 + 汉堡菜单或底部 Tab
输入框趋势：从底部通栏 → 底部居中胶囊形，多模态按钮集成（拍照/文件/语音）
侧栏可折叠：最大化对话区空间

2.2 配色趋势

主色调克制：大面积白/灰/深色，品牌色仅点缀（按钮、logo、高亮）
双主题必备：亮色 + 暗色模式
差异化靠品牌色：ChatGPT 绿、Claude 沙棕、Kimi 紫蓝、豆包蓝、Poe 绿

2.3 字体排版

正文 14-16px，行高 1.6-1.8
系统字体优先（加载快、原生感），品牌字体仅标题/Logo
Markdown 渲染精良：代码块、表格、列表、LaTeX 都需要支持
中文字体：苹方 → 思源黑体 → 微软雅黑 fallback

2.4 交互模式

流式输出：逐字/逐段渲染，带光标/脉冲动画
多模态输入：文本 + 语音 + 图片 + 文件上传
消息操作：复制、重新生成、编辑、分享
功能入口：卡片式/标签式，而非深层菜单
空状态引导：首次使用展示示例提问/功能卡片

2.5 独特功能交互

功能	代表 App	交互方式
Artifacts/Canvas	Claude/ChatGPT	右侧弹出面板，代码实时预览
Bot 市场	Poe/豆包	卡片网格/瀑布流浏览
语音对话	ChatGPT	全屏声波动画，沉浸体验
深度研究	Kimi/ChatGPT	进度条+中间步骤展示
项目/知识库	Claude	独立空间+自定义指令

三、秘书台（MiShuTai）设计建议

3.1 品牌色方案

推荐方案 —— 专业暖色（兼顾信任感与亲和力）：

主色（Primary）：   #2563EB  （沉稳蓝，信任/专业）
辅色（Secondary）：  #F59E0B  （温暖金，秘书/高效）
成功色：            #10B981  （绿）
警告色：            #F59E0B  （琥珀）
错误色：            #EF4444  （红）
背景色：            #FAFAFA  （暖白）
暗色背景：          #1E293B  （深蓝灰）
文字色：            #1E293B  （深色）/ #64748B（次要）

备选 —— 极简中性（对标 ChatGPT 的简洁路线）：

主色：#0F172A（深黑）  辅色：#3B82F6（蓝）

3.2 字体方案

/* 中文优先 */
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", 
  "Noto Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, 
  "Helvetica Neue", Arial, sans-serif;

/* 代码 */
font-family: "JetBrains Mono", "Fira Code", "SF Mono", 
  Menlo, Monaco, "Courier New", monospace;

用途	字号	字重	行高
大标题	24px	700	1.3
小标题	18px	600	1.4
正文	15px	400	1.75
辅助文字	13px	400	1.5
代码	14px	400	1.6

3.3 核心组件样式

对话气泡

用户消息：右对齐，主色背景 #2563EB，白色文字，圆角 16px
AI 回复：左对齐，无背景色/浅灰背景 #F1F5F9，深色文字，圆角 16px
参考：ChatGPT 和 Claude 均去掉了 AI 侧气泡，纯文本更易读

输入框

底部固定，居中，圆角 24px，内阴影
左侧 + 按钮（展开多模态：文件/图片/语音）
右侧发送按钮（主色填充）
支持多行自动扩展（max-height 200px）

侧栏

宽度 260px，可折叠
会话按日期分组（今天/昨天/近 7 天/更早）
新对话按钮置顶，主色强调
底部放设置/用户头像

Markdown 渲染

代码块：深色背景 #1E293B，带语言标签 + 复制按钮
表格：斑马纹，边框浅灰
列表：适当缩进，圆点/数字对齐
链接：主色，hover 下划线

3.4 整体风格定位

推荐风格：「专业秘书」— 干练、可信赖、温暖而不花哨

原则	做法
简洁至上	参考 ChatGPT/Claude，对话区零噪音
效率导向	参考 Kimi，功能入口清晰可见但不抢眼
品牌辨识	参考 Claude 的沙棕，用金色/蓝色建立「秘书台」专属感
中文优先	字体、排版、间距针对中文优化（比英文多 2px 行高）
移动优先	先做好手机端体验，再扩展桌面

3.5 差异化建议

秘书台作为「AI 秘书」定位，可在以下方面做差异化：

任务卡片：不只是对话，AI 回复可转化为待办/日程/提醒卡片
多角色切换：参考 Poe 的多 Bot，但以"秘书技能"包装（会议秘书/写作助手/数据分析师）
中文排版极致优化：竖排引用、标点挤压、中英文间距自动化
企业感：提供工作空间/团队协作视图，区别于个人 AI 助手

四、截图与参考链接

注：浏览器工具和搜索 API 当前不可用，以下为各产品可访问的参考链接

App	官网/App Store	说明
豆包	https://www.doubao.com	直接进入对话界面，蓝白简洁风
Kimi	https://www.kimi.com	暗色极简风，产品矩阵丰富
ChatGPT	https://apps.apple.com/app/chatgpt/id6448311069	4.9★，157.9MB，经典黑白绿
Poe	https://poe.com	多模型聚合平台，绿色品牌
Claude	https://apps.apple.com/app/claude-by-anthropic/id6473753684	4.7★，119.8MB，温暖沙棕色系

设计灵感截图建议手动获取：

各 App Store 页面的产品截图（展示真实 UI）
Dribbble 搜索 "AI chat app UI" 获取更多灵感
Mobbin.com 搜索 ChatGPT/Claude 获取 UI 截图库

文档生成：2026-02-16 | 版本：v1.0

design reference