feat: redesign spectra lab with editorial brand aesthetic
This commit is contained in:
Chen Gu
304
index.html
304
index.html
@@ -6,7 +6,7 @@
|
||||
<title>Spectra Lab</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Spectra Lab — 一个以光谱、玻璃与动效为核心的沉浸式前端概念 Web App。"
|
||||
content="Spectra Lab — 一页式编辑感品牌站，强调作品感、排版和克制动效，而不是 AI 式炫技。"
|
||||
/>
|
||||
<script>
|
||||
if (location.pathname === '/spectra-lab') {
|
||||
@@ -16,162 +16,186 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.cn" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.cn" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.cn/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
|
||||
href="https://fonts.googleapis.cn/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<canvas class="particle-canvas" id="particleCanvas"></canvas>
|
||||
<div class="noise"></div>
|
||||
<div class="gradient-orb orb-a"></div>
|
||||
<div class="gradient-orb orb-b"></div>
|
||||
<div class="gradient-orb orb-c"></div>
|
||||
<div class="pointer-glow" id="pointerGlow"></div>
|
||||
<div class="page-shell">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#top" aria-label="Spectra Lab 首页">
|
||||
<span class="brand-mark"></span>
|
||||
<span class="brand-text">Spectra Lab</span>
|
||||
</a>
|
||||
<nav class="nav-links">
|
||||
<a href="#statement">Statement</a>
|
||||
<a href="#works">Works</a>
|
||||
<a href="#system">System</a>
|
||||
<a href="#closing">Closing</a>
|
||||
</nav>
|
||||
<button id="modeToggle" class="mode-toggle" type="button" aria-label="切换页面模式">
|
||||
Light Mode
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<header class="topbar glass-panel">
|
||||
<div class="brand">
|
||||
<span class="brand-mark"></span>
|
||||
<div>
|
||||
<p class="brand-eyebrow">Spectra Lab</p>
|
||||
<p class="brand-sub">Digital Atmosphere Prototype</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav-links">
|
||||
<a href="#metrics">Metrics</a>
|
||||
<a href="#gallery">Gallery</a>
|
||||
<a href="#manifesto">Manifesto</a>
|
||||
</nav>
|
||||
<button id="themeToggle" class="ghost-button" type="button">切换光谱</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero section">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">A cinematic front-end experience</p>
|
||||
<h1>
|
||||
不只是一个页面，<br />
|
||||
而是一座会呼吸的<br />
|
||||
光谱展馆。
|
||||
</h1>
|
||||
<p class="hero-text">
|
||||
Spectra Lab 把动态网格、玻璃拟态、彩色流体光效与编辑感排版叠在一起，做成一个可以真实浏览、真实交互、真实惊艳的 Web App 原型。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="primary-button" href="#gallery">进入展馆</a>
|
||||
<a class="secondary-button" href="#manifesto">查看设计宣言</a>
|
||||
<main id="top">
|
||||
<section class="hero reveal">
|
||||
<div class="hero-meta">
|
||||
<p class="kicker">Front-end concept / 2026</p>
|
||||
<p class="issue">Issue 01 — Reduced Artificiality</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-stage glass-panel">
|
||||
<div class="stage-ring"></div>
|
||||
<div class="stage-grid"></div>
|
||||
<div class="stage-core">
|
||||
<p>Signal Cluster</p>
|
||||
<h2>07</h2>
|
||||
<span>active scenes</span>
|
||||
<div class="hero-grid">
|
||||
<div class="hero-copy">
|
||||
<h1>
|
||||
把“像 AI 做的页面”<br />
|
||||
改成“像真的品牌作品”。
|
||||
</h1>
|
||||
<p class="hero-text">
|
||||
Spectra Lab 的第二版不再依赖霓虹、玻璃拟态和悬浮指标，而是回到更克制的设计表达：更强的排版、更明确的留白、更少但更准的动效，以及更像真实创意团队会交付的页面气质。
|
||||
</p>
|
||||
</div>
|
||||
<aside class="hero-note">
|
||||
<p>
|
||||
这一版的目标不是“更炫”，而是更像作品本身：可阅读、可陈列、可被记住。
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="floating-card card-alpha">
|
||||
<p>Ambient Index</p>
|
||||
<strong data-counter="94">0</strong>
|
||||
<span>cinematic density</span>
|
||||
</section>
|
||||
|
||||
<section id="statement" class="statement section reveal">
|
||||
<div class="section-head">
|
||||
<p class="kicker">Statement</p>
|
||||
<h2>先去掉套路，再谈风格。</h2>
|
||||
</div>
|
||||
<div class="floating-card card-beta">
|
||||
<p>Pulse Drift</p>
|
||||
<strong data-counter="128">0</strong>
|
||||
<span>motion vectors</span>
|
||||
<div class="statement-grid">
|
||||
<p>
|
||||
大多数 AI 味页面的问题，不是技术不够，而是视觉判断太偷懒：到处发光、到处渐变、到处 floating card，像在证明“我会做效果”，而不是在表达“我知道什么该留下”。
|
||||
</p>
|
||||
<p>
|
||||
所以这一版只保留三件事：结构、节奏、材质。结构决定像不像品牌，节奏决定高级不高级，材质决定页面有没有手感。除此之外，能删的都删。
|
||||
</p>
|
||||
</div>
|
||||
<div class="floating-card card-gamma">
|
||||
<p>Interface Bloom</p>
|
||||
<strong data-counter="63">0</strong>
|
||||
<span>responsive nodes</span>
|
||||
</section>
|
||||
|
||||
<section id="works" class="works section reveal">
|
||||
<div class="section-head split-head">
|
||||
<div>
|
||||
<p class="kicker">Selected Works</p>
|
||||
<h2>四个页面切片，组成完整气质。</h2>
|
||||
</div>
|
||||
<p class="section-caption">点击左侧卡片，右侧会切换对应的设计说明。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="metrics" class="section metrics">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Live aesthetic telemetry</p>
|
||||
<h2>把“设计感”拆成可感知的前端语言</h2>
|
||||
</div>
|
||||
<div class="metric-grid">
|
||||
<article class="metric-card glass-panel">
|
||||
<span>Layer Depth</span>
|
||||
<strong>9.4</strong>
|
||||
<p>通过前景、中景、背景与微粒噪声叠出空间感。</p>
|
||||
</article>
|
||||
<article class="metric-card glass-panel">
|
||||
<span>Motion Quality</span>
|
||||
<strong>92%</strong>
|
||||
<p>减少廉价跳变，用缓动、漂移与轻量视差维持高级感。</p>
|
||||
</article>
|
||||
<article class="metric-card glass-panel">
|
||||
<span>Visual Contrast</span>
|
||||
<strong>4 Layers</strong>
|
||||
<p>用霓光、暗底、玻璃边缘和字体重量做视觉层次。</p>
|
||||
</article>
|
||||
<article class="metric-card glass-panel accent-card">
|
||||
<span>Current Mode</span>
|
||||
<strong id="themeLabel">Aurora</strong>
|
||||
<p>支持切换不同光谱主题，让同一界面拥有不同情绪。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<div class="works-layout">
|
||||
<div class="work-list" role="tablist" aria-label="设计切片列表">
|
||||
<button
|
||||
class="work-item is-active"
|
||||
type="button"
|
||||
data-title="Opening Spread"
|
||||
data-index="01"
|
||||
data-copy="首页像一本刊物的开篇大跨页：强标题、宽留白、细线和小号说明文字共同建立秩序，而不是用一堆发光元素抢注意力。"
|
||||
>
|
||||
<span class="work-number">01</span>
|
||||
<span>
|
||||
<strong>Opening Spread</strong>
|
||||
<small>封面感与留白</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
data-title="Quiet Contrast"
|
||||
data-index="02"
|
||||
data-copy="对比来自字重、边界和材质差异，而不是夸张色彩。黑、白、灰、纸感米色，再加少量暗红作点缀，已经足够建立品牌记忆。"
|
||||
>
|
||||
<span class="work-number">02</span>
|
||||
<span>
|
||||
<strong>Quiet Contrast</strong>
|
||||
<small>克制颜色，而非特效堆叠</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
data-title="Measured Motion"
|
||||
data-index="03"
|
||||
data-copy="动效只承担两个任务：引导阅读和提供触感。它不负责表演，也不负责制造噪声，所以 hover、滚动 reveal 和模式切换都很轻。"
|
||||
>
|
||||
<span class="work-number">03</span>
|
||||
<span>
|
||||
<strong>Measured Motion</strong>
|
||||
<small>只做必要的运动</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="work-item"
|
||||
type="button"
|
||||
data-title="Material Ending"
|
||||
data-index="04"
|
||||
data-copy="收尾部分不再追加功能堆料，而是用一个有材料感的段落把情绪压住，让整个页面从头到尾有完整的起承转合。"
|
||||
>
|
||||
<span class="work-number">04</span>
|
||||
<span>
|
||||
<strong>Material Ending</strong>
|
||||
<small>收住，而不是越做越满</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section id="gallery" class="section gallery">
|
||||
<div class="section-heading split">
|
||||
<div>
|
||||
<p class="eyebrow">Curated scenes</p>
|
||||
<h2>每一张卡片，都像展馆里的一个独立空间</h2>
|
||||
<article class="work-stage">
|
||||
<div class="stage-card">
|
||||
<p class="stage-kicker">Current focus</p>
|
||||
<div class="stage-index" id="workIndex">01</div>
|
||||
<h3 id="workTitle">Opening Spread</h3>
|
||||
<p id="workCopy">
|
||||
首页像一本刊物的开篇大跨页：强标题、宽留白、细线和小号说明文字共同建立秩序，而不是用一堆发光元素抢注意力。
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<p class="section-note">Hover 卡片，看看透视、边缘发光和背景响应；点击则切换下方讲解。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="gallery-grid">
|
||||
<article class="scene-card scene-large glass-panel" data-scene-title="Prism Core" data-scene-copy="主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。">
|
||||
<div class="scene-tag">01 / Prism Core</div>
|
||||
<h3>会漂移的主场景</h3>
|
||||
<p>主舞台不是静态图，而是由网格、发光环、渐变和数据浮层组成的动态构图。</p>
|
||||
</article>
|
||||
<article class="scene-card glass-panel" data-scene-title="Quiet Signal" data-scene-copy="把亮点压缩到必要区域，保留大面积暗部和留白，让霓光真正成为视线焦点，而不是噪音。">
|
||||
<div class="scene-tag">02 / Quiet Signal</div>
|
||||
<h3>深色中的克制亮点</h3>
|
||||
<p>控制高亮面积，让视觉中心更明确，而不是整屏乱闪。</p>
|
||||
</article>
|
||||
<article class="scene-card glass-panel" data-scene-title="Editorial Flow" data-scene-copy="通过标题、说明、标签与节奏化留白，让单页也具备杂志封面和展览海报的张力。">
|
||||
<div class="scene-tag">03 / Editorial Flow</div>
|
||||
<h3>海报式排版</h3>
|
||||
<p>标题、留白、短段文案与组件比例共同决定气质。</p>
|
||||
</article>
|
||||
<article class="scene-card glass-panel" data-scene-title="Tactile Hover" data-scene-copy="hover 不只是位移，而是材质、光线和透视的共同反馈，让界面更像可触摸物体。">
|
||||
<div class="scene-tag">04 / Tactile Hover</div>
|
||||
<h3>像摸到玻璃一样</h3>
|
||||
<p>卡片 hover 有轻透视、边缘反光、阴影偏移和背景亮度反馈。</p>
|
||||
</article>
|
||||
</div>
|
||||
<section id="system" class="system section reveal">
|
||||
<div class="section-head">
|
||||
<p class="kicker">System</p>
|
||||
<h2>视觉系统不复杂，但必须一致。</h2>
|
||||
</div>
|
||||
<div class="system-grid">
|
||||
<article class="system-card">
|
||||
<span>Typography</span>
|
||||
<strong>Serif headline / Sans body</strong>
|
||||
<p>标题用更有书卷感的衬线中文，正文维持干净无衬线，让页面既有性格也不失可读性。</p>
|
||||
</article>
|
||||
<article class="system-card">
|
||||
<span>Palette</span>
|
||||
<strong>Ink / Paper / Oxblood</strong>
|
||||
<p>颜色压到少数几种：墨黑、纸白、米灰、暗红。这样更像品牌系统，而不是灵感拼贴。</p>
|
||||
</article>
|
||||
<article class="system-card">
|
||||
<span>Motion</span>
|
||||
<strong>Reveal / Shift / Fade</strong>
|
||||
<p>动效只使用最基本的进入、位移和透明度变化，避免每个区域都在“自我表演”。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="scene-detail glass-panel" id="sceneDetail">
|
||||
<p class="eyebrow">Scene focus</p>
|
||||
<h3 id="sceneDetailTitle">Prism Core</h3>
|
||||
<p id="sceneDetailCopy">
|
||||
主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="closing" class="closing section reveal">
|
||||
<div class="closing-panel">
|
||||
<p class="kicker">Closing</p>
|
||||
<h2>真正高级的页面，通常都有一点节制。</h2>
|
||||
<p>
|
||||
如果第一页就把所有招式用完，观者只会记得“效果很多”。但如果页面知道何时收、何时留白、何时只用一条线和一块色面说话，它才更像真正完成度高的作品。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section id="manifesto" class="section manifesto glass-panel">
|
||||
<p class="eyebrow">Manifesto</p>
|
||||
<h2>真正惊艳的前端，不是堆特效，而是让特效服务于气质。</h2>
|
||||
<p>
|
||||
这个原型故意把功能压到第二位，把所有预算投给视觉叙事：版式像海报，交互像展陈，背景像呼吸，按钮像可触摸的材质。主人要的不是“能用就行”的站，而是第一眼就记得住的作品。
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<span>Spectra Lab / Front-end concept build</span>
|
||||
<span>Designed for visual impact</span>
|
||||
</footer>
|
||||
<footer class="footer reveal">
|
||||
<span>Spectra Lab</span>
|
||||
<span id="modeLabel">Editorial Dark</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user