novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f0657ce9f4f1c92ebadbf0e5fd58940c1a7b5fbe
novalon-website/.superpowers/brainstorm/71919-1777542709/brand-direction-comparison.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

202 lines
11 KiB
HTML
Raw Blame History

<h2>品牌基因方向对比：A vs B vs C</h2>
<p class="subtitle">同样的信息架构（借鉴 Atlassian），三种不同的视觉表达</p>
<div class="section">
<h3>首页 Hero 区域效果模拟</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:linear-gradient(180deg,#0A0A0A 0%,#1C1C1C 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;">
<div style="position:absolute;top:10px;left:15px;width:3px;height:3px;background:#C41E3A;border-radius:50%;opacity:0.6;"></div>
<div style="position:absolute;top:40px;right:25px;width:2px;height:2px;background:#C41E3A;border-radius:50%;opacity:0.4;"></div>
<div style="position:absolute;bottom:30px;left:30px;width:4px;height:4px;background:#C41E3A;border-radius:50%;opacity:0.3;"></div>
<div style="position:absolute;top:60px;left:50%;width:60px;height:1px;background:linear-gradient(90deg,transparent,#C41E3A33,transparent);"></div>
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#C41E3A;background:rgba(196,30,58,0.15);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
<div style="font-family:serif;font-size:18px;color:#FFFFFF;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
<div style="font-size:9px;color:#999;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
</div>
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-right:1px solid #666;border-bottom:1px solid #666;transform:translateX(-50%) rotate(45deg);"></div>
</div>
</div>
<div class="card-body">
<h3>A — 保留并强化</h3>
<p>深墨色背景 + 水墨粒子持续运动 + 书法标题 + 朱砂红品牌色。视觉冲击力强，东方辨识度高。</p>
</div>
</div>
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
<div style="position:absolute;top:20px;right:20px;width:40px;height:40px;border:1px solid rgba(196,30,58,0.1);border-radius:50%;"></div>
<div style="position:absolute;bottom:20px;left:15px;width:30px;height:30px;border:1px solid rgba(196,30,58,0.08);border-radius:50%;"></div>
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#C41E3A;border:1px solid rgba(196,30,58,0.3);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
<div style="font-family:serif;font-size:18px;color:#1C1C1C;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
</div>
</div>
</div>
<div class="card-body">
<h3>B — 收敛但保留印记</h3>
<p>白底为主 + 极简装饰线条 + 书法标题保留 + 朱砂红品牌色。克制专业，品牌锚点仍在。</p>
</div>
</div>
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:#FFFFFF;padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#0052CC;display:inline-block;padding:2px 8px;border-radius:10px;background:#E9F0FF;margin-bottom:8px;">数字化转型</div>
<div style="font-size:18px;color:#1C1C1C;font-weight:700;margin-bottom:6px;">Novalon</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#0052CC;color:#fff;font-size:8px;padding:4px 12px;border-radius:4px;">预约演示</div>
</div>
</div>
</div>
<div class="card-body">
<h3>C — 全面现代清晰风</h3>
<p>纯白底 + 蓝色品牌色 + 西文无衬线 + 圆角标签。极致清晰，但失去东方辨识度。</p>
</div>
</div>
</div>
</div>
<div class="section">
<h3>产品卡片效果模拟</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div style="border:1px solid #333;border-radius:8px;overflow:hidden;">
<div style="background:#0A0A0A;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:rgba(196,30,58,0.15);border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#C41E3A;font-size:14px;">ERP</span>
</div>
<div style="color:#fff;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#888;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#1C1C1C;padding:8px 16px;">
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
</div>
</div>
<div style="border:1px solid #E5E5E5;border-radius:8px;overflow:hidden;">
<div style="background:#FFFBF5;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:#FEF2F4;border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#C41E3A;font-size:14px;">ERP</span>
</div>
<div style="color:#1C1C1C;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#5C5C5C;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#fff;padding:8px 16px;border-top:1px solid #E5E5E5;">
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
</div>
</div>
<div style="border:1px solid #DFE1E6;border-radius:8px;overflow:hidden;">
<div style="background:#FFFFFF;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:#E9F0FF;border-radius:8px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#0052CC;font-size:14px;">ERP</span>
</div>
<div style="color:#172B4D;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#5E6C84;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#F4F5F7;padding:8px 16px;">
<div style="color:#0052CC;font-size:8px;">了解更多 →</div>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:4px;">
<div style="text-align:center;font-size:9px;color:#888;">A — 深色沉浸卡片</div>
<div style="text-align:center;font-size:9px;color:#888;">B — 暖白克制卡片</div>
<div style="text-align:center;font-size:9px;color:#888;">C — 标准现代卡片</div>
</div>
</div>
<div class="section">
<h3>关键权衡分析</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div style="padding:12px;border:1px solid #333;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#1C1C1C;">A — 保留并强化</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>独特的东方美学辨识度</li>
<li>深色背景对比度极高</li>
<li>品牌差异化明显</li>
<li>现有动效资产可复用</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li>动效多影响性能/加载</li>
<li>深色风格可能"太酷"不够"稳"</li>
<li>企业客户可能偏好传统专业感</li>
<li>动效维护成本高</li>
</ul>
</div>
</div>
</div>
<div style="padding:12px;border:2px solid #C41E3A;border-radius:8px;background:#FFFBF5;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#C41E3A;">B — 收敛但保留印记 ⭐推荐</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>专业感与品牌特色兼顾</li>
<li>白底更适合信息密集展示</li>
<li>性能友好（减少粒子动效）</li>
<li>书法+朱砂红仍保持辨识度</li>
<li>更接近 Atlassian 的清晰架构</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li>需要重新平衡"克制"与"特色"</li>
<li>部分现有动效组件需弃用</li>
<li>设计系统需从头建立</li>
</ul>
</div>
</div>
</div>
<div style="padding:12px;border:1px solid #DFE1E6;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#172B4D;">C — 全面现代清晰风</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>极致清晰，信息传达效率最高</li>
<li>可直接参考 Atlassian Design System</li>
<li>开发维护成本最低</li>
<li>国际化的专业感</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li><strong>完全丧失东方品牌辨识度</strong></li>
<li>与国内竞品无差异</li>
<li>品牌重塑成本极高</li>
<li>现有视觉资产全部废弃</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
<p style="font-size:13px;color:#5C5C5C;">👆 点击顶部三张 Hero 卡片中你倾向的方向，然后在终端告诉我你的选择</p>
</div>
Reference in New Issue View Git Blame Copy Permalink