torin
b8d3cb4644
Some checks are pending
Build and Push Docker Images / changes (push) Waiting to run
Build and Push Docker Images / build-backend (push) Blocked by required conditions
Build and Push Docker Images / build-frontend (push) Blocked by required conditions
Build and Push Docker Images / build-admin-frontend (push) Blocked by required conditions
3.5 KiB
3.5 KiB
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 测试备选。