# 青幕AI写作 UI 设计优化方案

> 基于四个维度：美观度、品牌识别、交互体验、细节完成度
> 生成时间：2026-06-29
> 使用技能：frontend-design / frontend-polish / ui-ux-pro-max

---

## 一、设计定位与目标

### 1.1 产品定位

青幕AI写作是一款面向长篇小说的 AI 写作桌面端系统。目标用户以中文小说作者、内容创作者为主，使用场景是长时间、高频次的创作工作。

### 1.2 当前评分（10分制）

| 维度 | 当前得分 | 目标得分 |
|------|----------|----------|
| 美观度 | 5.5 | 7.5 |
| 品牌识别 | 4.0 | 7.0 |
| 交互体验 | 6.0 | 8.0 |
| 细节完成度 | 5.0 | 7.5 |
| **综合** | **5.7** | **7.5+** |

### 1.3 总体设计方向

采用 **「精致简约专业风」** 作为主轴：
- 不颠覆现有三栏工具布局，降低用户学习成本；
- 在色彩、字体、阴影、动效、图标状态、欢迎页等层面做系统级提升；
- 注入品牌视觉元素，建立独特记忆点；
- 统一交互语言，让每一次点击都有清晰反馈。

---

## 二、美观度优化方案

### 2.1 当前问题

1. 色彩平淡：主色饱和度低，整体偏灰，缺乏层次感。
2. 面板边界靠硬边框分割，缺少深度和材质感。
3. 阴影使用极少，界面扁平、单薄。
4. 欢迎页、设置页、聊天面板等区域视觉语言不统一。
5. 编辑器使用 Milkdown Nord 主题，与整体 shadcn 风格割裂。

### 2.2 优化策略

#### 2.2.1 色彩系统升级

建立语义化色板，统一使用 CSS 变量管理。

**浅色主题**

| Token | 当前值 | 建议值 | 说明 |
|-------|--------|--------|------|
| `--primary` | oklch(0.55 0.055 195) | oklch(0.55 0.085 195) | 提升饱和度，更有活力 |
| `--primary-foreground` | oklch(0.985 0 0) | oklch(0.99 0 0) | 保持清晰对比 |
| `--accent` | oklch(0.97 0 0) | oklch(0.96 0.02 80) | 暖色强调，用于AI/生成相关元素 |
| `--ai` | 无 | oklch(0.6 0.12 260) | 专属 AI 功能强调色 |
| `--success` | 无 | oklch(0.65 0.12 145) | 成功状态 |
| `--warning` | 硬编码 amber | oklch(0.7 0.1 85) | 警告状态 |
| `--background` | oklch(1 0 0) | oklch(0.98 0.005 250) | 极淡冷灰，减少纯白刺眼 |
| `--card` | oklch(1 0 0) | oklch(0.99 0.005 250) | 卡片与背景微区分 |
| `--border` | oklch(0.922 0 0) | oklch(0.9 0.01 250) | 边框融入色调 |

**深色主题**

| Token | 当前值 | 建议值 | 说明 |
|-------|--------|--------|------|
| `--background` | oklch(0.145 0 0) | oklch(0.16 0.02 240) | 深蓝灰底，护眼且高级 |
| `--card` | oklch(0.205 0 0) | oklch(0.21 0.025 240) | 卡片微微浮起 |
| `--primary` | oklch(0.65 0.05 195) | oklch(0.68 0.08 195) | 提升亮度，黑暗中更醒目 |
| `--border` | oklch(1 0 0 / 10%) | oklch(0.4 0.03 235) | 可见但不抢眼 |

**深蓝护眼主题**

保持现有 deep-blue 方向，但增强层次：
- 背景加入极淡的渐变或噪点纹理；
- 主内容区与侧边栏通过背景色温差区分；
- AI 相关元素使用柔和的青色 glow 效果。

#### 2.2.2 阴影与层次系统

定义四级阴影，统一使用：

| Token | 值（浅色） | 用途 |
|-------|------------|------|
| `--shadow-sm` | 0 1px 2px oklch(0 0 0 / 0.04) | 按钮、小卡片 |
| `--shadow-md` | 0 4px 8px -2px oklch(0 0 0 / 0.06) | 下拉菜单、面板 |
| `--shadow-lg` | 0 12px 24px -6px oklch(0 0 0 / 0.08) | 弹窗、通知 |
| `--shadow-xl` | 0 24px 48px -12px oklch(0 0 0 / 0.12) | 模态框、欢迎页卡片 |

深色主题下阴影改为使用主色/高光的透明发光：
- `--shadow-glow`: 0 0 20px oklch(var(--primary) / 0.15)

#### 2.2.3 圆角系统

统一圆角尺度，建立节奏：

| Token | 值 | 用途 |
|-------|-----|------|
| `--radius-xs` | 6px | 小标签、徽章 |
| `--radius-sm` | 8px | 按钮、输入框 |
| `--radius-md` | 10px | 卡片、面板 |
| `--radius-lg` | 14px | 弹窗、大卡片 |
| `--radius-xl` | 20px | 欢迎页元素、特殊模块 |

#### 2.2.4 编辑器主题统一

当前 `wiki-editor.tsx` 使用 Nord 主题，与整体风格割裂。建议：

1. 保留 Milkdown 作为 Markdown 渲染引擎；
2. 自定义编辑器主题 CSS，使用与 app 一致的 `--primary`、`--muted`、`--border` 等 token；
3. 编辑区背景：
   - 浅色模式：极淡米色或纯白 `#fdfcfa`，模拟纸张；
   - 深色模式：深灰 `#1a1d21`，与侧边栏有色差；
4. 标题、引用块、代码块等使用品牌色点缀；
5. 写作区最大宽度限制（如 760px），居中显示，提升阅读舒适度。

#### 2.2.5 欢迎页视觉升级

当前 `welcome-screen.tsx` 过于简单。建议重构为：

1. **顶部品牌区**：Logo + 产品名 + Slogan，加入 subtle 渐变文字效果；
2. **核心操作卡片**：新建、打开、恢复三个操作使用大卡片展示，带图标和说明；
3. **最近项目列表**：改为卡片式，带项目图标、路径、最后打开时间；
4. **底部小贴士**：随机显示快捷键或功能提示；
5. **背景**：极淡的渐变或几何纹理，增强氛围但不喧宾夺主。

#### 2.2.6 设置页视觉重构

当前设置页左侧分类列表 + 右侧表单，结构合理但视觉平淡。建议：

1. 左侧分类使用图标 + 文字，激活项添加左侧高亮条；
2. 右侧表单卡片化，每个 Section 使用带标题的卡片容器；
3. 重要设置项（如 LLM 配置）使用视觉权重更高的入口；
4. 保存/重置按钮固定在右下角，形成稳定操作区。

---

## 三、品牌识别优化方案

### 3.1 当前问题

1. 除了图标栏顶部小 Logo，几乎没有品牌元素。
2. 主色平淡，无法在用户心中形成记忆。
3. 缺少专属的视觉符号、纹样或氛围。
4. 产品名「青幕」与当前蓝绿色调的关联性未被强化。

### 3.2 优化策略

#### 3.2.1 品牌色彩提炼

将「青幕」意象转化为色彩语言：

- **主色**：青蓝色（#0ea5e9 → #0891b2 区间），象征「青」——清新、专业、科技感；
- **辅助色**：深墨色（#1e293b），象征「幕」——沉稳、专注、写作夜晚；
- **强调色**：暖金色（#f59e0b / #fbbf24），象征灵感与创作火花，专门用于 AI 生成、提示、高亮；
- **中性色**：冷灰体系，保持界面干净。

#### 3.2.2 品牌符号设计

1. **Logo 应用**：
   - 保持现有 QM-LOGO；
   - 在启动屏、关于页、欢迎页、设置页顶部使用带文字组合的完整 Logo；
   - Logo 圆角 22% 的风格保留，但增加 hover 时的微光效果。

2. **「青幕」视觉符号**：
   - 设计一个抽象的「帷幕/书页」SVG 图形元素；
   - 用于空状态、加载动画、通知背景等场景；
   - 可作为装饰性水印出现在欢迎页、设置页背景。

3. **AI 专属标识**：
   - 所有 AI 相关功能（发送按钮、生成按钮、AI 消息头像）统一使用青蓝色 + 暖金色组合；
   - 设计一个「AI 闪光」微图标，用于表示 AI 正在工作。

#### 3.2.3 品牌字体策略

1. **UI 字体**：继续使用 Geist Variable，但增加中文字体 fallback：
   - `"Geist Variable", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif`
2. **写作区字体**：提供可选中文字体：
   - 默认：系统默认（PingFang SC / Microsoft YaHei）
   - 可选：霞鹜文楷（文艺）、思源宋体（正式）、思源黑体（现代）
3. **标题字重**：产品名使用 font-weight 700，Slogan 使用 500。

#### 3.2.4 品牌氛围贯穿

1. **启动加载页**：从「Loading...」改为带 Logo 动画和品牌 slogan 的启动页；
2. **空状态插画**：所有空状态使用统一的品牌插画风格（简约线条 + 青蓝点缀）；
3. **通知/Toast**：使用品牌圆角、品牌色高亮；
4. **快捷键提示**：统一使用品牌符号和色彩。

---

## 四、交互体验优化方案

### 4.1 当前问题

1. 页面切换、面板展开缺少过渡动画，感觉生硬。
2. 按钮 hover/active 状态只有颜色变化，缺少按压反馈。
3. 后台任务通知简陋，进度条没有动态感。
4. 图标栏激活态指示不够明确。
5. 拖拽调整侧边栏宽度的手柄太细，不易操作。
6. 聊天消息的操作按钮（复制、重新生成、保存到章节库）排列杂乱。

### 4.2 优化策略

#### 4.2.1 全局过渡动画

定义标准动画 token：

| Token | 值 | 用途 |
|-------|-----|------|
| `--duration-fast` | 100ms | hover、focus 反馈 |
| `--duration-normal` | 200ms | 状态切换、面板展开 |
| `--duration-slow` | 300ms | 页面切换、弹窗 |
| `--ease-default` | cubic-bezier(0.4, 0, 0.2, 1) | 通用 |
| `--ease-bounce` | cubic-bezier(0.34, 1.56, 0.64, 1) | 弹窗、通知 |

应用：
- 所有按钮添加 `transition: all var(--duration-fast) var(--ease-default)`；
- 图标栏按钮 active 时添加左侧 3px 指示条滑入动画；
- 侧边栏展开/收起使用 `translateX` + `opacity` 动画；
- 页面内容切换使用淡入淡出（fade + slight translateY）。

#### 4.2.2 按钮按压反馈

在 `button.tsx` 中增强交互状态：

1. **Primary 按钮**：
   - hover: 亮度提升 + 阴影加深；
   - active: scale(0.97) + 阴影变浅；
   - focus-visible: 2px ring + offset。

2. **Outline/Ghost 按钮**：
   - hover: 背景色从透明渐变填充；
   - active: scale(0.98)。

3. **禁用状态**：
   - opacity 0.45；
   - cursor not-allowed；
   - 不再有 hover 效果。

#### 4.2.3 图标栏交互升级

在 `icon-sidebar.tsx` 中：

1. 激活项添加左侧 3px 品牌色指示条，从上方滑入；
2. hover 时背景使用 `--primary/10` 渐变填充；
3. 拖拽排序时，被拖拽项轻微放大并带阴影；
4. 主题下拉菜单使用更柔和的出现动画（scale + fade）。

#### 4.2.4 后台任务通知升级

在 `app-layout.tsx` 中：

1. 进度条使用条纹动画（striped progress）或微光效果；
2. 任务完成时通知带有「完成」图标和成功色；
3. 多个通知堆叠时使用卡片堆叠效果，而非简单叠加；
4. 通知出现/消失使用从右下方向上滑入/向下滑出动画。

#### 4.2.5 拖拽手柄优化

在 `app-layout.tsx` 中：

1. 拖拽条宽度从 8px 增加到 10px；
2. hover 时显示品牌色高亮；
3. 拖拽时 cursor 变为 col-resize，body 添加 `user-select: none`；
4. 添加 1px 中线作为视觉提示。

#### 4.2.6 聊天消息交互优化

在 `chat-message.tsx` 中：

1. AI 消息头像使用青蓝色圆形 + Bot 图标，hover 有微光；
2. 用户消息使用更稳重的深灰色；
3. 操作按钮（复制、重新生成、保存）统一收起到一个工具栏中：
   - 默认只显示最常用的 1-2 个；
   - hover 整条消息时展开完整工具栏；
4. 复制成功反馈：按钮图标变为 Check，颜色变为 success，1.5s 后恢复；
5. AI 生成中的消息显示「正在输入」动画（三个跳动的点或流光边框）。

#### 4.2.7 输入框交互优化

在 `input.tsx` / `chat-input.tsx` 中：

1. focus 时边框颜色平滑过渡到 `--ring`；
2. 添加微妙的 focus shadow；
3. 输入框 placeholder 使用更淡的 `--muted-foreground`；
4. 错误状态使用红色边框 + 抖动动画（shake）。

---

## 五、细节完成度优化方案

### 5.1 当前问题

1. 多处硬编码颜色（如 `#0f3f42`、amber、硬编码阴影）。
2. 滚动条样式不统一，部分区域使用系统默认滚动条。
3. BETA 标签等小元素视觉粗糙。
4. 按钮高度单一，缺少尺寸层级。
5. 部分文案字号过小（如 11px），可读性差。
6. 弹窗 overlay 太淡，背景干扰明显。
7. 空状态、错误状态、加载状态处理不一致。

### 5.2 优化策略

#### 5.2.1 消除硬编码颜色

1. 在 `index.css` 中：
   - `.qm-selected` 的 `#0f3f42` / `#e8ffff` 改为 `--qm-selected-text` token；
   - 删除所有硬编码十六进制，改用语义化变量。

2. 在 `icon-sidebar.tsx` 中：
   - `amber-500` BETA 标签改为 `--warning` token；
   - 添加 `.bg-warning`、`.text-warning` 工具类。

3. 在 `chat-message.tsx` 中：
   - 硬编码的 amber 背景/文字改为 `--warning` 语义色。

#### 5.2.2 统一滚动条

1. 在 `index.css` 中定义全局滚动条样式：

```css
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(0.7 0 0 / 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(0.6 0 0 / 0.5);
}
```

2. 移除局部定义的 `.legend-scroll`、`.model-selector-dropdown` 等重复滚动条样式，统一使用全局样式。

#### 5.2.3 标签与徽章规范化

定义标准 badge 组件：

| 类型 | 背景 | 文字 | 用途 |
|------|------|------|------|
| default | muted | muted-foreground | 普通标签 |
| primary | primary/15 | primary | 功能标签 |
| warning | warning/15 | warning | BETA、提示 |
| success | success/15 | success | 完成、成功 |
| destructive | destructive/15 | destructive | 错误、危险 |

#### 5.2.4 按钮尺寸层级

在 `button.tsx` 中明确尺寸体系：

| Size | 高度 | 用途 |
|------|------|------|
| xs | 28px | 工具栏、标签内 |
| sm | 32px | 次要操作、紧凑表单 |
| default | 36px | 默认按钮 |
| lg | 40px | 主要 CTA |

#### 5.2.5 最小字号规范

1. 正文最小字号 12px，避免 11px；
2. 辅助文字使用 `text-muted-foreground` 区分层级，而非单纯缩小字号；
3. 聊天消息操作按钮从 11px 提升到 12px。

#### 5.2.6 弹窗与 Overlay 优化

在 `dialog.tsx` 中：

1. Overlay 背景从 `bg-black/10` 提升到 `bg-black/30`（浅色）/ `bg-black/50`（深色）；
2. 弹窗出现动画使用 `zoom-in-95` + `fade-in` + 轻微上移；
3. 弹窗添加 subtle shadow-xl 或 glow；
4. 关闭按钮 hover 状态更明显。

#### 5.2.7 空状态与加载状态统一

设计统一的空状态组件 `EmptyState`：

1. 使用品牌插画图标；
2. 标题 + 描述 + 操作按钮；
3. 支持 light/dark/deep-blue 三种主题。

设计统一的加载骨架屏 `Skeleton`：

1. 用于文件树、聊天列表、设置项等异步加载场景；
2. 使用 shimmer 动画；
3. 替代简单的「Loading...」文字。

#### 5.2.8 焦点状态与可访问性

1. 所有交互元素保持清晰的 focus-visible ring；
2. 键盘导航顺序与视觉顺序一致；
3. 图标按钮使用 `aria-label`；
4. 颜色不是唯一信息载体（如错误状态同时显示图标）。

---

## 六、实施优先级与路线图

### 第一阶段：基础设计系统（1-2 周）

低风险、高回报，为后续优化奠定基础。

1. ✅ 升级 `index.css` 色彩系统，新增语义化 token；
2. ✅ 统一阴影、圆角、间距、动画 token；
3. ✅ 重构 `button.tsx`，建立尺寸和交互层次；
4. ✅ 统一全局滚动条样式；
5. ✅ 规范化 badge/标签样式；
6. ✅ 消除主要硬编码颜色。

### 第二阶段：核心组件体验（2-3 周）

1. 🎯 重构 `icon-sidebar.tsx`：激活态指示条、hover 效果、主题菜单动画；
2. 🎯 优化 `app-layout.tsx`：后台通知动画、拖拽手柄、面板过渡；
3. 🎯 升级 `chat-message.tsx` 和 `chat-input.tsx`：消息工具栏、输入框反馈；
4. 🎯 优化 `dialog.tsx`：overlay、弹窗动画；
5. 🎯 创建 `EmptyState`、`Skeleton` 等基础组件。

### 第三阶段：品牌与氛围（2-3 周）

1. 🚀 设计品牌 SVG 符号和插画；
2. 🚀 重构 `welcome-screen.tsx`；
3. 🚀 统一 Logo 应用场景（启动页、关于页、设置页）；
4. 🚀 自定义 Milkdown 编辑器主题；
5. 🚀 写作区纸张模式/专注模式。

### 第四阶段：打磨与验证（1-2 周）

1. 🔍 走查所有页面，确保无硬编码颜色和不一致间距；
2. 🔍 测试三种主题下的对比度和可读性；
3. 🔍 验证动画性能和 reduced-motion 适配；
4. 🔍 跑通源码、旧功能测试、打包。

---

## 七、预期效果

实施后，四个维度目标得分：

| 维度 | 当前 | 目标 | 关键变化 |
|------|------|------|----------|
| 美观度 | 5.5 | 7.5 | 色彩有层次、阴影有深度、圆角统一、编辑器风格一致 |
| 品牌识别 | 4.0 | 7.0 | 专属品牌色、符号、字体策略、Logo 多场景应用 |
| 交互体验 | 6.0 | 8.0 | 全局动画、按钮反馈、拖拽优化、聊天交互升级 |
| 细节完成度 | 5.0 | 7.5 | 无硬编码、统一滚动条、规范 badge、空/加载状态统一 |

---

## 八、风险与注意事项

1. **不要一次性大改**：分阶段实施，每阶段完成后验证旧功能无回退；
2. **保持用户习惯**：不颠覆三栏布局，降低学习成本；
3. **性能影响**：动画应使用 transform/opacity，避免布局抖动；
4. **无障碍**：保留 focus ring，支持 `prefers-reduced-motion`；
5. **主题一致性**：所有改动必须在 light/dark/deep-blue 三种主题下测试；
6. **中文排版**：写作区字体和行高需要针对中文内容单独调校。

---

## 九、下一步建议

1. 确认本方案的方向和优先级；
2. 选择第一阶段优先实施的具体页面（建议从 `index.css` + `button.tsx` + `icon-sidebar.tsx` 开始）；
3. 是否需要我先制作一个高保真设计稿或原型页面供确认？
4. 是否需要我直接开始编码实施第一阶段？