novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fe6e4b1c549507dceac5b1292eca012498c99811
novalon-website/.superpowers/brainstorm/71919-1777542709/design-spec-full.html
T
张翔 fe6e4b1c54 refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2 
- Remove TestimonialSection from homepage (no customers yet)
- Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links
- Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
2026-04-30 22:00:00 +08:00

235 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h2>方案二：品牌融合重构 — 完整设计规格</h2>
<p class="subtitle">Atlassian 信息架构 × Novalon 品牌叙事 × 收敛但保留印记</p>
<div class="section">
<h3>📐 整体页面结构</h3>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
<div style="display:flex;flex-direction:column;gap:3px;">
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Navigation</div>
<div style="font-size:7px;color:#5C5C5C;">Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于 + 联系我们</div>
</div>
<div style="background:linear-gradient(180deg,#FFFBF5,#FFFFFF);border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#1C1C1C;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 1: Hero</div>
<div style="font-size:7px;color:#5C5C5C;">品牌主张 + 双CTA + 极简装饰</div>
</div>
<div style="background:#F5F5F5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
<div style="font-size:9px;font-weight:700;">Section 2: 社会证明</div>
<div style="font-size:7px;color:#5C5C5C;">三列关键数据 + 客户Logo墙（可选）</div>
</div>
<div style="background:#FFFFFF;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 3: 核心产品矩阵</div>
<div style="font-size:7px;color:#5C5C5C;">2×2 卡片网格 + 朱砂红左边框</div>
</div>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#D97706;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 4: 挑战与场景入口</div>
<div style="font-size:7px;color:#5C5C5C;">"您面临什么挑战？" 三列痛点卡片</div>
</div>
<div style="background:#1C1C1C;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
<div style="font-size:9px;font-weight:700;color:#fff;">Section 5: 客户成果</div>
<div style="font-size:7px;color:rgba(255,255,255,0.6);">深色背景 + 客户引言 + 量化数据</div>
</div>
<div style="background:linear-gradient(135deg,#C41E3A,#A01830);border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#fff;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;color:#fff;">Section 6: CTA</div>
<div style="font-size:7px;color:rgba(255,255,255,0.8);">朱砂红渐变 + 行动号召</div>
</div>
<div style="background:#F5F5F5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#999;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Footer</div>
<div style="font-size:7px;color:#5C5C5C;">品牌信息 + 导航 + 联系方式</div>
</div>
</div>
<div style="margin-top:8px;font-size:8px;color:#5C5C5C;text-align:center;">
视觉节奏：暖白 → 浅灰 → 白 → 暖白 → <strong>深墨</strong> → 朱砂红 → 浅灰
</div>
</div>
</div>
<div class="section">
<h3>🧭 导航重设计：产品矩阵下拉</h3>
<div class="split">
<div class="mockup">
<div class="mockup-header">当前导航</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
<div style="font-size:8px;color:#C41E3A;">问题：</div>
<div style="font-size:7px;color:#5C5C5C;">• 8个平铺项，认知负担重</div>
<div style="font-size:7px;color:#5C5C5C;">• 产品/服务/解决方案关系不清</div>
<div style="font-size:7px;color:#5C5C5C;">• 无下拉，无法快速预览</div>
<div style="font-size:7px;color:#5C5C5C;">• "团队""新闻"占位但非核心</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">新导航</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | <strong>产品 ▾</strong> | <strong>解决方案 ▾</strong> | 服务 | 案例 | 关于我们</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;margin-bottom:6px;">
<div style="font-size:7px;color:#999;margin-bottom:4px;">点击"产品 ▾"展开：</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">ERP 管理系统</div>
<div style="font-size:6px;color:#5C5C5C;">财务·采购·销售·库存</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">CRM 客户管理</div>
<div style="font-size:6px;color:#5C5C5C;">线索·商机·合同·服务</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">BI 数据平台</div>
<div style="font-size:6px;color:#5C5C5C;">报表·仪表盘·预测</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">CMS 内容平台</div>
<div style="font-size:6px;color:#5C5C5C;">建站·运营·分发</div>
</div>
</div>
</div>
<div style="font-size:8px;color:#16A34A;">改进：</div>
<div style="font-size:7px;color:#5C5C5C;">• 6项→核心4项+2个下拉</div>
<div style="font-size:7px;color:#5C5C5C;">• 下拉预览产品，减少跳转</div>
<div style="font-size:7px;color:#5C5C5C;">• "团队/新闻"移入"关于我们"</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🎨 Design Token 体系（收敛版）</h3>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
<div>
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">色彩（保留，微调）</div>
<div style="display:flex;gap:4px;margin-bottom:6px;">
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#1C1C1C;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">墨黑</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#C41E3A;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">朱砂红</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">宣纸白</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#F5F5F5;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">浅灰</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#FEF2F4;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">红底</div>
</div>
</div>
<div style="font-size:7px;color:#5C5C5C;">✅ 保留现有色彩体系不变</div>
<div style="font-size:7px;color:#5C5C5C;">➕ 新增场景色：#FFFBEB(黄底) #F0FDF4(绿底)</div>
</div>
<div>
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">动效（大幅收敛）</div>
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：水墨粒子、数据流、粒子星河、鼠标交互粒子</div>
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：流体波浪、几何抽象、网格线</div>
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：渐变流动（极简版）、微妙圆点</div>
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：滚动揭示（FadeUp）、数字动画</div>
<div style="font-size:7px;color:#0052CC;margin-bottom:2px;">➕ 新增：悬浮微交互、卡片 hover 提升效果</div>
<div style="font-size:7px;color:#0052CC;">➕ 新增：导航下拉过渡、场景卡片 hover 色变</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🧩 Phase 1 沉淀的核心组件</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">MegaDropdown</div>
<div style="font-size:7px;color:#5C5C5C;">产品矩阵下拉导航</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、解决方案页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ProductCard</div>
<div style="font-size:7px;color:#5C5C5C;">朱砂红左边框产品卡片</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品列表页、首页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ChallengeCard</div>
<div style="font-size:7px;color:#5C5C5C;">痛点/场景入口卡片</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：解决方案页、服务页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">StatsBar</div>
<div style="font-size:7px;color:#5C5C5C;">三列数据统计条</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、关于页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">TestimonialBlock</div>
<div style="font-size:7px;color:#5C5C5C;">深色背景客户证言</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：案例页、产品页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">CTASection</div>
<div style="font-size:7px;color:#5C5C5C;">朱砂红渐变行动号召</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：全站通用</div>
</div>
</div>
</div>
<div class="section">
<h3>📋 现有组件迁移策略</h3>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:12px;">
<table style="width:100%;font-size:8px;border-collapse:collapse;">
<tr style="border-bottom:1px solid #E5E5E5;">
<td style="padding:4px;font-weight:700;">组件</td>
<td style="padding:4px;font-weight:700;">策略</td>
<td style="padding:4px;font-weight:700;">说明</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#C41E3A;">InkBackground</td>
<td style="padding:4px;">❌ 废弃</td>
<td style="padding:4px;color:#5C5C5C;">水墨背景不再使用，用极简装饰替代</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#C41E3A;">DataParticleFlow</td>
<td style="padding:4px;">❌ 废弃</td>
<td style="padding:4px;color:#5C5C5C;">粒子动效过于花哨，不符合收敛方向</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">SubtleDots</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">微妙圆点符合收敛方向</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">GradientFlow</td>
<td style="padding:4px;">🔧 简化</td>
<td style="padding:4px;color:#5C5C5C;">保留但降低强度，作为Hero极淡背景</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">ScrollReveal/FadeUp</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">滚动揭示动画是核心交互</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">AnimatedNumber</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">数据统计动画</td>
</tr>
<tr>
<td style="padding:4px;color:#0052CC;">SealAnimation</td>
<td style="padding:4px;">🔄 重构</td>
<td style="padding:4px;color:#5C5C5C;">印章动画保留但仅用于品牌标题区</td>
</tr>
</table>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:2px solid #C41E3A;">
<p style="font-size:13px;color:#1C1C1C;font-weight:700;">以上是方案二的完整设计规格</p>
<p style="font-size:11px;color:#5C5C5C;margin-top:4px;">确认无误后，我将编写正式设计文档并进入实现规划阶段</p>
</div>
Reference in New Issue View Git Blame Copy Permalink