325 lines
15 KiB
HTML
325 lines
15 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 — 一页式编辑感品牌站，强调作品感、排版秩序、边界对齐与克制交互。"
|
|
/>
|
|
<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">
|
|
<div class="page-grid" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span><span></span><span></span>
|
|
<span></span><span></span><span></span><span></span><span></span><span></span>
|
|
</div>
|
|
|
|
<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="#components">Components</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 ruled-row">
|
|
<p class="kicker">Front-end concept / 2026</p>
|
|
<p class="issue">Issue 02 — Alignment & Components</p>
|
|
</div>
|
|
|
|
<div class="hero-grid ruled-row">
|
|
<div class="hero-copy">
|
|
<h1>
|
|
把背景线、边框和内容列，
|
|
真正对齐到同一套秩序里。
|
|
</h1>
|
|
<p class="hero-text">
|
|
这一轮不再只谈风格，而是把页面的基础秩序校准：背景线不再漂浮，边框不再各说各话，卡片与文本块都回到同一套列宽、间距与边界系统里。然后，再往里增加一组真正值得操作的交互组件。
|
|
</p>
|
|
</div>
|
|
<aside class="hero-note framed-note">
|
|
<p>
|
|
真正精细的页面，首先要让看不见的结构先成立；风格，只是结构成立之后的结果。
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="hero-ledger ruled-row">
|
|
<article class="ledger-item">
|
|
<span>Grid discipline</span>
|
|
<strong>背景线、外框、分隔线与内容容器共享同一套对齐参照。</strong>
|
|
</article>
|
|
<article class="ledger-item">
|
|
<span>Border logic</span>
|
|
<strong>边框只在真正需要建立层级时出现，不再随机地围一圈。</strong>
|
|
</article>
|
|
<article class="ledger-item">
|
|
<span>Interactive layer</span>
|
|
<strong>组件区不只是摆样子，而是能切换、能反馈、能记住状态。</strong>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="statement" class="section reveal">
|
|
<div class="section-head ruled-row">
|
|
<div>
|
|
<p class="kicker">Statement</p>
|
|
<h2>精细感，首先来自对齐，其次才是风格。</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="statement-grid ruled-row">
|
|
<p>
|
|
许多页面第一眼显得“差一点”，并不是因为颜色或字体错了，而是因为线条系统没有被认真处理：背景里的线是背景，卡片边框是卡片边框，文本区是文本区，它们彼此没有参照，自然就显得散。
|
|
</p>
|
|
<p>
|
|
所以 Spectra Lab 这轮重构，优先把对齐关系收紧：统一页宽、统一纵向节奏、统一卡片边界、统一线条出场方式。只有这样，后面加进去的组件和交互，才不会像“后来又塞了一块东西”。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="works" class="section reveal">
|
|
<div class="section-head split-head ruled-row">
|
|
<div>
|
|
<p class="kicker">Selected Works</p>
|
|
<h2>四个切片，说明这一页如何建立气质。</h2>
|
|
</div>
|
|
<p class="section-caption">点击左侧卡片，右侧会切换说明与编号。</p>
|
|
</div>
|
|
|
|
<div class="works-layout ruled-row">
|
|
<div class="work-list" role="tablist" aria-label="设计切片列表">
|
|
<button
|
|
class="work-item is-active"
|
|
type="button"
|
|
aria-selected="true"
|
|
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"
|
|
aria-selected="false"
|
|
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"
|
|
aria-selected="false"
|
|
data-title="Measured Motion"
|
|
data-index="03"
|
|
data-copy="动效只承担两件事：提示切换、改善触感。页面不会为了证明自己会动而到处动。"
|
|
>
|
|
<span class="work-number">03</span>
|
|
<span>
|
|
<strong>Measured Motion</strong>
|
|
<small>把运动当作排版的一部分</small>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="work-item"
|
|
type="button"
|
|
aria-selected="false"
|
|
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="section reveal">
|
|
<div class="section-head ruled-row">
|
|
<div>
|
|
<p class="kicker">System</p>
|
|
<h2>一套足够克制、但能支撑细节的视觉系统。</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="system-grid ruled-row">
|
|
<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>Border & Grid</span>
|
|
<strong>One shell, one logic</strong>
|
|
<p>背景线、内容边框、说明条和交互组件全部依附于同一页壳，不再出现互相打架的边界体系。</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="components" class="section reveal">
|
|
<div class="section-head split-head ruled-row">
|
|
<div>
|
|
<p class="kicker">Components</p>
|
|
<h2>再加一组真正可以操作的前端交互组件。</h2>
|
|
</div>
|
|
<p class="section-caption">切换布局语气、信息密度与材质标记，右侧预览会即时更新。</p>
|
|
</div>
|
|
|
|
<div class="components-layout ruled-row">
|
|
<div class="control-panel">
|
|
<div class="control-block">
|
|
<p class="control-label">Layout tone</p>
|
|
<div class="segmented" role="tablist" aria-label="布局语气切换">
|
|
<button class="tone-chip is-active" type="button" data-tone="quiet">Quiet</button>
|
|
<button class="tone-chip" type="button" data-tone="balanced">Balanced</button>
|
|
<button class="tone-chip" type="button" data-tone="dramatic">Dramatic</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-block">
|
|
<label class="control-label" for="densityRange">Information density</label>
|
|
<input id="densityRange" class="density-range" type="range" min="1" max="3" step="1" value="2" />
|
|
<div class="density-legend">
|
|
<span>Airy</span>
|
|
<span id="densityValue">Balanced</span>
|
|
<span>Dense</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-block">
|
|
<p class="control-label">Material accent</p>
|
|
<div class="swatch-row">
|
|
<button class="swatch is-active" type="button" data-accent="#7f2f2f" style="--swatch:#7f2f2f"></button>
|
|
<button class="swatch" type="button" data-accent="#3f5a73" style="--swatch:#3f5a73"></button>
|
|
<button class="swatch" type="button" data-accent="#6c6250" style="--swatch:#6c6250"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-block">
|
|
<p class="control-label">Editorial notes</p>
|
|
<div class="note-stack">
|
|
<button class="note-item is-active" type="button" data-note="封面对齐决定第一印象。">封面对齐决定第一印象。</button>
|
|
<button class="note-item" type="button" data-note="组件数量增加后，更需要统一边框逻辑。">组件数量增加后，更需要统一边框逻辑。</button>
|
|
<button class="note-item" type="button" data-note="交互反馈应该像纸页翻动，而不是界面在炫耀。">交互反馈应该像纸页翻动，而不是界面在炫耀。</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-panel">
|
|
<div class="preview-card" id="previewCard" data-tone="balanced" data-density="2">
|
|
<div class="preview-topline">
|
|
<span id="previewTone">Balanced tone</span>
|
|
<span id="previewDensity">Density 02</span>
|
|
</div>
|
|
<div class="preview-body">
|
|
<p class="preview-kicker">Live editorial specimen</p>
|
|
<h3 id="previewTitle">A layout that knows where to stop.</h3>
|
|
<p id="previewText">
|
|
这一块不是静态说明，而是一张会随着交互变化的样张：它会根据布局语气、信息密度与材料色点，实时调整状态。
|
|
</p>
|
|
</div>
|
|
<div class="preview-foot">
|
|
<span id="previewAccentLabel">Accent / Oxblood</span>
|
|
<strong id="previewNote">封面对齐决定第一印象。</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-modules">
|
|
<details class="mini-module" open>
|
|
<summary>Spacing rule</summary>
|
|
<p>所有主要模块共享统一的竖向节奏，避免 section 间的呼吸不一致。</p>
|
|
</details>
|
|
<details class="mini-module">
|
|
<summary>Border rule</summary>
|
|
<p>边框只在需要建立层级和材料感时出现，不再无差别包裹所有区域。</p>
|
|
</details>
|
|
<details class="mini-module">
|
|
<summary>Motion rule</summary>
|
|
<p>交互组件只做提示性运动，不做自我表演型运动。</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="closing" class="section reveal">
|
|
<div class="closing-panel ruled-row">
|
|
<p class="kicker">Closing</p>
|
|
<h2>当结构、边界与互动开始说同一种语言，页面才会显得真正完整。</h2>
|
|
<p>
|
|
这一版的目的不是把元素做得更多，而是让每一个元素都有归属：线条知道为什么在那里，边框知道为何出现，组件知道自己服务于什么。这样页面才不再只是“看起来不错”，而会更接近真正可落地的前端作品。
|
|
</p>
|
|
<div class="closing-signoff">
|
|
<span>Spectra Lab / Alignment pass</span>
|
|
<span>Built with stricter structure.</span>
|
|
</div>
|
|
</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>
|