张翔
53 lines
3.1 KiB
HTML
53 lines
3.1 KiB
HTML
<h2>Hero 动画风格偏好</h2>
|
|
<p class="subtitle">你希望 Hero 区域传达什么样的品牌气质？选择最接近你期望的方向</p>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
|
<div class="letter">A</div>
|
|
<div class="content">
|
|
<h3>沉稳专业 — 微妙渐变 + 文字动效</h3>
|
|
<p>暖白/浅灰渐变背景，文字依次淡入上浮，极简装饰元素（如细线圆圈）。类似 Atlassian、Stripe 的克制风格。强调品牌可信度与专业感。</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>优势</h4><ul><li>加载快，性能开销极低</li><li>适配所有设备</li><li>与现有品牌色（朱砂红 #C41E3A）自然融合</li></ul></div>
|
|
<div class="cons"><h4>注意</h4><ul><li>视觉冲击力相对温和</li><li>需要文字排版功底支撑</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
|
<div class="letter">B</div>
|
|
<div class="content">
|
|
<h3>科技动感 — 流光渐变 + 粒子/网格</h3>
|
|
<p>深色或渐变背景，数据粒子流动、科技网格线、光晕效果。强调数字化转型与科技实力。类似 Vercel、Linear 的科技美学。</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>优势</h4><ul><li>视觉冲击力强</li><li>与"数字化转型"定位高度契合</li><li>项目已有 DataParticleFlow、TechGridFlow 等组件</li></ul></div>
|
|
<div class="cons"><h4>注意</h4><ul><li>性能开销中等</li><li>需要控制粒子数量避免喧宾夺主</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
|
<div class="letter">C</div>
|
|
<div class="content">
|
|
<h3>东方韵味 — 水墨/印章 + 现代排版</h3>
|
|
<p>融合中国传统元素（水墨晕染、印章动画）与现代极简排版。强调文化底蕴与创新融合。项目已有 InkBackground、SealAnimation 等组件。</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>优势</h4><ul><li>品牌辨识度极高</li><li>差异化明显，同行少有</li><li>与 Novalon（诺华麟）品牌名呼应</li></ul></div>
|
|
<div class="cons"><h4>注意</h4><ul><li>设计难度高，容易"土味"</li><li>需要精准控制水墨效果的克制度</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option" data-choice="d" onclick="toggleSelect(this)">
|
|
<div class="letter">D</div>
|
|
<div class="content">
|
|
<h3>融合创新 — 克制科技 + 品牌印记</h3>
|
|
<p>以方案 A 的沉稳为底色，融入方案 B 的微妙科技光效（如渐变光晕），点缀方案 C 的品牌印章元素。三者取精华，克制融合。</p>
|
|
<div class="pros-cons">
|
|
<div class="pros"><h4>优势</h4><ul><li>兼顾专业感、科技感、品牌辨识度</li><li>层次丰富但不杂乱</li><li>与之前的设计方向（品牌融合重构）一致</li></ul></div>
|
|
<div class="cons"><h4>注意</h4><ul><li>实现复杂度最高</li><li>需要精心调校各元素的视觉权重</li></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|