Acasă Explorează Ajutor
Înregistrare Autentificare
haiany
/
QMAI
oglindă de https://github.com/Mochocyang/QMAI.git
1
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Arbore: d2d5326b19
Ramuri Etichete
QMAI
/
ui-design-optimization-plan.md

ui-design-optimization-plan.md 17 KB
Istoric Crud

青幕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 中定义全局滚动条样式：

    ::-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. 是否需要我直接开始编码实施第一阶段？