e9d7f8832a
- Backend: FastAPI + SQLAlchemy + Celery (Python 3.11+) - Frontend: Vue 3 + TypeScript + Pinia + Tailwind - Admin Frontend: separate Vue 3 app for management - Docker Compose: 9 services orchestration - Specs: design prototypes, memory system PRD, product roadmap Cleanup performed: - Removed temporary debug scripts from backend root - Removed deprecated admin_app.py (embedded UI) - Removed duplicate docs from admin-frontend - Updated .gitignore for Vite cache and egg-info
154 lines
3.5 KiB
Markdown
154 lines
3.5 KiB
Markdown
# DreamWeaver 品牌视觉方向（Web 阶段）
|
||
|
||
## 概述
|
||
|
||
提供三套高保真视觉方向，用于 Web MVP。三者的 UX 结构一致，仅在色彩、视觉重量与插画风格上不同。
|
||
|
||
---
|
||
|
||
## 方案 A：Soft Aurora（温暖高级）
|
||
|
||
**理由**
|
||
- 家长信任感强，同时保留童趣与想象力。
|
||
- 高级但不商业化。
|
||
|
||
**配色**
|
||
- 主色 600: #6C5CE7
|
||
- 主色 500: #7C69FF
|
||
- 主色 100: #EAE7FF
|
||
- 强调粉: #FF8FB1
|
||
- 强调蓝: #65C3FF
|
||
- 中性 900: #1F2430
|
||
- 中性 700: #4B5563
|
||
- 中性 500: #9AA3B2
|
||
- 中性 200: #E5E7EB
|
||
- 中性 100: #F5F7FB
|
||
- 白色: #FFFFFF
|
||
|
||
**渐变**
|
||
- Hero 背景：linear-gradient(135deg, #EAE7FF 0%, #FDF6FF 40%, #EAF6FF 100%)
|
||
- CTA 光晕：radial-gradient(circle at 30% 30%, #7C69FF 0%, #6C5CE7 50%, #4C3FCF 100%)
|
||
|
||
**字体**
|
||
- 标题：Noto Sans SC / Inter
|
||
- 正文：Noto Sans SC / Inter
|
||
- 数字强调：Inter
|
||
|
||
**插画风格**
|
||
- 柔和、低对比度、轻画笔质感。
|
||
- 圆润形状、轻高光。
|
||
- 角色简单轮廓与友好表情。
|
||
|
||
**图标风格**
|
||
- 1.5px 线宽，圆角端点。
|
||
- 强调色点缀，避免过度饱和。
|
||
|
||
**组件建议**
|
||
- 按钮：主色实心 + 内阴影。
|
||
- 卡片：大圆角 + 柔和阴影。
|
||
- 输入：浅底色 + 主色焦点环。
|
||
|
||
---
|
||
|
||
## 方案 B：Storybook Minimal（极简编辑风）
|
||
|
||
**理由**
|
||
- 强可读性，适合长文本阅读。
|
||
- 简洁、专业、强调内容。
|
||
|
||
**配色**
|
||
- 主色 600: #3B82F6
|
||
- 主色 500: #60A5FA
|
||
- 主色 100: #DBEAFE
|
||
- 强调金: #F5C542
|
||
- 强调薄荷: #6EE7B7
|
||
- 中性 900: #111827
|
||
- 中性 700: #374151
|
||
- 中性 500: #9CA3AF
|
||
- 中性 200: #E5E7EB
|
||
- 中性 100: #F9FAFB
|
||
- 白色: #FFFFFF
|
||
|
||
**渐变**
|
||
- Hero 背景：linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%)
|
||
- CTA 光晕：radial-gradient(circle at 40% 30%, #60A5FA 0%, #3B82F6 60%, #1D4ED8 100%)
|
||
|
||
**字体**
|
||
- 标题：Inter / Noto Sans SC
|
||
- 正文：Inter / Noto Sans SC
|
||
- 阅读场景可提升行高和对比度。
|
||
|
||
**插画风格**
|
||
- 扁平化、线条干净、留白较多。
|
||
- 色彩克制、视觉清爽。
|
||
|
||
**图标风格**
|
||
- 2px 线宽，极简。
|
||
|
||
**组件建议**
|
||
- 按钮：纯色、无明显渐变。
|
||
- 卡片：细边框 + 极轻阴影。
|
||
- 输入：白底 + 清晰边框。
|
||
|
||
---
|
||
|
||
## 方案 C：Playful Glow（活力明快）
|
||
|
||
**理由**
|
||
- 视觉更鲜活，记忆点强。
|
||
- 更偏童趣，但仍保持专业感。
|
||
|
||
**配色**
|
||
- 主色 600: #7C3AED
|
||
- 主色 500: #8B5CF6
|
||
- 主色 100: #EDE9FE
|
||
- 强调珊瑚: #FB7185
|
||
- 强调青蓝: #22D3EE
|
||
- 中性 900: #1F2937
|
||
- 中性 700: #4B5563
|
||
- 中性 500: #9CA3AF
|
||
- 中性 200: #E5E7EB
|
||
- 中性 100: #F5F5F7
|
||
- 白色: #FFFFFF
|
||
|
||
**渐变**
|
||
- Hero 背景：linear-gradient(135deg, #EDE9FE 0%, #FFE4F3 45%, #E0F7FF 100%)
|
||
- CTA 光晕：radial-gradient(circle at 30% 30%, #8B5CF6 0%, #7C3AED 60%, #5B21B6 100%)
|
||
|
||
**字体**
|
||
- 标题：Noto Sans SC / Inter
|
||
- 正文：Noto Sans SC / Inter
|
||
- 强调色点到为止，避免花哨。
|
||
|
||
**插画风格**
|
||
- 更鲜艳、更活泼。
|
||
- 大色块 + 轻纹理背景。
|
||
|
||
**图标风格**
|
||
- 1.5px 线宽 + 小实心点装饰。
|
||
|
||
**组件建议**
|
||
- 按钮：渐变或实心 + Hover 发光。
|
||
- 卡片：更明显阴影 + 彩色边角。
|
||
- 输入：轻微色彩底。
|
||
|
||
---
|
||
|
||
## 共享视觉资产
|
||
|
||
**封面比例**
|
||
- 列表卡片：21:9
|
||
- 详情头图：16:9
|
||
|
||
**插画 vs 照片**
|
||
- 默认使用插画，避免真实儿童照片（隐私与合规）。
|
||
|
||
**空态插画**
|
||
- 统一 1 张主插画，做颜色变体复用。
|
||
|
||
---
|
||
|
||
## 推荐
|
||
|
||
建议 Web MVP 使用方案 A（Soft Aurora），兼顾温暖与信任。方案 B/C 可作为后续主题或 A/B 测试备选。
|