张翔
fe6e4b1c54
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
117 lines
8.7 KiB
HTML
117 lines
8.7 KiB
HTML
<h2>Novalon × Atlassian：设计思路对比</h2>
|
||
<p class="subtitle">分析两者在信息架构、视觉层次、交互模式上的核心差异，探索可借鉴的方向</p>
|
||
|
||
<div class="section">
|
||
<h3>📐 信息架构对比</h3>
|
||
<div class="split">
|
||
<div class="mockup">
|
||
<div class="mockup-header">当前 Novalon — 单页长滚动</div>
|
||
<div class="mockup-body" style="padding: 12px;">
|
||
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
|
||
<div class="placeholder" style="height:60px;margin-bottom:6px;background:#1C1C1C;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero 全屏（水墨粒子 + 数据流）</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">核心业务 Section</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">解决方案 Section</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">产品 Section</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">案例 Section</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">关于 + 团队 Section</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">新闻 Section</div>
|
||
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">8个Section 纵向堆叠，通过 URL hash 导航</div>
|
||
</div>
|
||
</div>
|
||
<div class="mockup">
|
||
<div class="mockup-header">Atlassian — 多页面产品矩阵</div>
|
||
<div class="mockup-body" style="padding: 12px;">
|
||
<div class="mock-nav" style="margin-bottom:8px;">Logo | Products ▾ | Solutions ▾ | Resources ▾ | Pricing | Contact</div>
|
||
<div class="placeholder" style="height:50px;margin-bottom:6px;background:linear-gradient(135deg,#0052CC,#2684FF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero（产品主张 + 视频背景）</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">社会证明（300K+ 公司 / 80% Fortune 500）</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">产品矩阵卡片（Jira / Confluence / Loom / Rovo）</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">模板/场景入口（Scrum / Bug / DevOps）</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">客户证言轮播</div>
|
||
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">CTA + Footer</div>
|
||
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">独立产品页 + 下拉导航 + 场景化入口</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>🎨 视觉设计语言对比</h3>
|
||
<div class="split">
|
||
<div class="mockup">
|
||
<div class="mockup-header">Novalon — 水墨科技风</div>
|
||
<div class="mockup-body" style="padding: 16px;">
|
||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||
<div style="width:40px;height:40px;background:#1C1C1C;border-radius:4px;" title="墨黑"></div>
|
||
<div style="width:40px;height:40px;background:#C41E3A;border-radius:4px;" title="朱砂红"></div>
|
||
<div style="width:40px;height:40px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;" title="宣纸白"></div>
|
||
<div style="width:40px;height:40px;background:#F5F5F5;border-radius:4px;" title="浅灰"></div>
|
||
</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Geist Sans + 青柳隶书（品牌标题）</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>水墨粒子 / 数据流 / 印章动画 / 视差</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>东方韵味 × 科技感</div>
|
||
<div style="font-size:12px;"><strong>节奏：</strong>深→白→深→白 明暗交替</div>
|
||
</div>
|
||
</div>
|
||
<div class="mockup">
|
||
<div class="mockup-header">Atlassian — 清晰现代风</div>
|
||
<div class="mockup-body" style="padding: 16px;">
|
||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||
<div style="width:40px;height:40px;background:#0052CC;border-radius:4px;" title="品牌蓝"></div>
|
||
<div style="width:40px;height:40px;background:#00875A;border-radius:4px;" title="绿色"></div>
|
||
<div style="width:40px;height:40px;background:#FF991F;border-radius:4px;" title="橙色"></div>
|
||
<div style="width:40px;height:40px;background:#F4F5F7;border-radius:4px;" title="浅灰"></div>
|
||
</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Atlassian Sans + Atlassian Mono</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>微交互 / 悬浮反馈 / 渐进展示</div>
|
||
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>专业、清晰、可信赖</div>
|
||
<div style="font-size:12px;"><strong>节奏：</strong>白底为主 + 品牌色点缀</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>🔑 Atlassian 可借鉴的 5 个核心设计模式</h3>
|
||
<div class="options">
|
||
<div class="option" data-choice="product-matrix" onclick="toggleSelect(this)">
|
||
<div class="letter">1</div>
|
||
<div class="content">
|
||
<h3>产品矩阵导航</h3>
|
||
<p>顶部导航下拉展示所有产品，每个产品有独立落地页。用户可按"产品"或"场景"两条路径发现内容。Novalon 当前将产品、服务、解决方案平铺在单页中，缺乏独立深度。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="social-proof" onclick="toggleSelect(this)">
|
||
<div class="letter">2</div>
|
||
<div class="content">
|
||
<h3>社会证明前置</h3>
|
||
<p>Hero 之后紧跟"300K+ 公司 / 80% Fortune 500"数据条。Novalon 的数据统计在 Hero 底部，且缺乏大客户 Logo 墙和具体量化成果展示。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="scenario-entry" onclick="toggleSelect(this)">
|
||
<div class="letter">3</div>
|
||
<div class="content">
|
||
<h3>场景化入口</h3>
|
||
<p>"Get started with a template" — Scrum / Bug Tracking / DevOps 等场景模板，让用户按自身需求快速找到切入点。Novalon 的解决方案页面目前是静态描述，缺乏场景引导。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="testimonial-carousel" onclick="toggleSelect(this)">
|
||
<div class="letter">4</div>
|
||
<div class="content">
|
||
<h3>客户证言轮播</h3>
|
||
<p>大段真实客户引言 + 姓名/职位/公司，按企业规模分类（Large Enterprise / SMB）。Novalon 的案例页目前是项目描述，缺乏客户视角的成果证言。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="design-system" onclick="toggleSelect(this)">
|
||
<div class="letter">5</div>
|
||
<div class="content">
|
||
<h3>设计系统驱动一致性</h3>
|
||
<p>Atlassian Design System 统一了 Token、组件、模式三层。从字体（Atlassian Sans）、图标（1.5px stroke）、颜色（中性偏暖）到组件（按钮/标签/卡片），全产品线一致。Novalon 目前有设计变量但缺乏系统化组件库。</p>
|
||
</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;">👆 点击上方你感兴趣的设计模式（可多选），然后在终端告诉我你最想深入讨论哪些方向</p>
|
||
</div>
|