首页视觉升级实战：浅色透气学术蓝金hero v4改版
项目概览
「首页视觉升级」是科学小舟官网（www.kexuexiaozhou.cn）首页首屏的视觉重构项目，2026年8月开发落地。项目目标是让首页第一屏从「旧版重深色」升级为「浅色透气 · 学术蓝金」风格，同时保留品牌深蓝基因。团队做了4版视觉稿（mockup v1→v4）迭代，最终v4方案经老板拍板上线，并通过Playwright自动化验证渲染效果，保证上线即达标。
一、四版视觉稿迭代：从概念到拍板
- mockup v1：第一版概念稿，探索浅色基底+深蓝强调的方向
- mockup v2 / v3：细化配色与版式，逐步收敛到「学术蓝金」体系（深蓝#0f2a4a + 学术金#b8860b + 明青#0e7c8a + 浅灰白#f5f7fa基底）
- mockup v4：终版「浅色透气·学术蓝金」，老板拍板上线。首屏改为左右分栏：左侧品牌区（品牌标签、衬线大字标题、数据统计条、双CTA+语音欢迎按钮），右侧探索卡片区
二、首屏 hero v4 上线：the_content 注入
v4方案通过 WordPress 钩子（kxz_v4hero_inject.php）注入首页，不动主题文件、不破坏原有结构：
// 首页(2618)首屏 hero v4 注入
add_filter("the_content", function($content) {
if (is_page(2618) && !is_admin()) {
// ...输出完整hero HTML+CSS，覆盖首屏
}
});
首屏hero包含：
- 品牌标签：金色描边胶囊「SCIENCE · 科学小舟」，字距4px，学术感拉满
- 衬线大字标题：Noto Serif SC衬线字体+900字重，clamp(40px→62px)响应式，关键词金色高亮带半透明金底划线
- 数据统计条：白底卡片三栏数据（衬线数字+金色强调单位），视觉权威感强
- 双CTA按钮：深蓝实心主按钮+描边幽灵按钮，hover上浮+阴影加深
- 语音欢迎按钮：金色描边胶囊，点击播放语音欢迎（voice_welcome.mp3），多一层品牌温度
- 探索卡片区：白底圆角卡片列出站内核心入口，引导访客深入浏览
三、大理石质感站名标题
同期完成站名标题（site-title）的大理石质感升级：用AI生成浅色大理石纹理图（marble_title_gold_v3.png），通过CSS background-clip:text实现文字内嵌大理石纹理的金色标题，深色导航栏上的品牌名因此有了「质感+发光」的立体效果。配套开发了Playwright验证脚本（verify_marble2.py），上线前自动抓取页面检查背景图、裁切模式、文字填充色与字号是否生效，杜绝「改了但没生效」的返工。
四、技术亮点
- 钩子注入不动主题：the_content钩子实现首屏改版，主题升级不冲突
- 多版本视觉稿先行：v1→v4四轮迭代再上线，方案先确认、开发不返工
- CSS纹理文字：background-clip:text实现大理石质感金色站名，0图片依赖
- Playwright自动化验收：上线前后自动截图+取计算样式，视觉达标才交付
项目成果
✅ 首页首屏完成「浅色透气·学术蓝金」v4改版并上线。✅ 大理石质感金色站名标题上线，导航栏品牌识别度提升。✅ Playwright验证脚本跑通，渲染效果上线前自动验收。✅ 视觉升级与视频专区、最新文章区改版同期完成，首页整体焕新。
项目说明：本文基于 D:\AI-Win专属工作区\网站管理\05_网站功能项目\首页视觉升级 目录下 mockup_v1~v4.html、kxz_v4hero_inject.php、kxz-custom_marble_work.php、verify_marble2.py 等实际项目文件撰写，为科学小舟团队真实开发项目。