203 lines
8.5 KiB
HTML
203 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Spectra Lab</title>
|
|
<meta
|
|
name="description"
|
|
content="Spectra Lab — 一页式编辑感品牌站，强调作品感、排版和克制动效，而不是 AI 式炫技。"
|
|
/>
|
|
<script>
|
|
if (location.pathname === '/spectra-lab') {
|
|
location.replace('/spectra-lab/' + location.search + location.hash);
|
|
}
|
|
</script>
|
|
<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+Serif+SC:wght@500;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<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 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>
|
|
</section>
|
|
|
|
<section id="statement" class="statement section reveal">
|
|
<div class="section-head">
|
|
<p class="kicker">Statement</p>
|
|
<h2>先去掉套路，再谈风格。</h2>
|
|
</div>
|
|
<div class="statement-grid">
|
|
<p>
|
|
大多数 AI 味页面的问题，不是技术不够，而是视觉判断太偷懒：到处发光、到处渐变、到处 floating card，像在证明“我会做效果”，而不是在表达“我知道什么该留下”。
|
|
</p>
|
|
<p>
|
|
所以这一版只保留三件事：结构、节奏、材质。结构决定像不像品牌，节奏决定高级不高级，材质决定页面有没有手感。除此之外，能删的都删。
|
|
</p>
|
|
</div>
|
|
</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 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>
|
|
|
|
<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>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
<section id="closing" class="closing section reveal">
|
|
<div class="closing-panel">
|
|
<p class="kicker">Closing</p>
|
|
<h2>真正高级的页面，通常都有一点节制。</h2>
|
|
<p>
|
|
如果第一页就把所有招式用完，观者只会记得“效果很多”。但如果页面知道何时收、何时留白、何时只用一条线和一块色面说话，它才更像真正完成度高的作品。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer reveal">
|
|
<span>Spectra Lab</span>
|
|
<span id="modeLabel">Editorial Dark</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|