Hallmark 导航组件 N2：Floating Chip 角落浮动芯片的完整实现指南

Hallmark 导航组件 N2：Floating Chip 角落浮动芯片的完整实现指南

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

导读

本文基于开源仓库 GitHub_Trending/hal/hallmark 中 N2 · Floating chip 组件规范 展开，完整讲解如何为 fold-heavy（首屏信息过载）页面实现一个悬浮于角落、不占用文档流的极简导航芯片：一个 wordmark 加一个单一动作按钮，以最小存在感在首屏之外持续提供品牌锚点与核心 CTA。读完本文，你将掌握 N2 的适用场景判定、可复制的 HTML/CSS 骨架、与 C4 Sticky bottom bar、N5 Floating pill 等易混淆组件的区分标准，以及其在 Hallmark 组件体系中的路由与移动端收敛规则。

一、N2 是什么：一个被刻意做小的导航

Hallmark 将页面可复用的 UI 构件抽象为 36 个 archetype（组件原型），其中导航（Navigation）一类共有 N1～N10 十个原型。component-cookbook.md 对 N2 的索引描述是：

N2 · Floating chip— A small fixed chip in a corner — wordmark + a single action ("Try it"). Doesn't sit in document flow.

N2 组件规范 的完整定义只有三部分：形状描述、"Use when"（何时使用）、"Don't confuse with"（不要与谁混淆），以及一段最小可运行的 HTML + CSS 骨架。它属于"以退为进"的设计——用最少的导航存在感换取内容的最大舞台。

核心特征

• 角落固定（corner-anchored）：通过position: fixed钉在视口的一个角落，典型位置是右上角（top+right）。
• 不占文档流（doesn't sit in document flow）：它是浮层，不参与页面布局，不推挤任何内容。
• 极小内容量：wordmark（品牌字标）+ 单一动作（一个 CTA，如 "Try it" / "Try →"）。没有链接列表，没有菜单图标。
• 极简视觉：纸色底 + 发丝级边框，无圆角强调、无阴影堆叠、无模糊背景。

原始骨架（规范文件中的可复制代码）

<aside class="nav-chip"> <a class="wordmark">Studio</a> <a class="cta-outline">Try →</a> </aside>

.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); display: inline-flex; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); }

这段代码即 N2 的"形状"（shape）——组件体系中的每个条目都由shape + use-when + don't-confuse三件套构成，目的是让模型在生成时有一个极短、极明确的模式可循。

二、适用场景："Use when" 判定

N2 规范的适用条件只有一句话，却是一个非常精确的判定信号：

Use when:the page is fold-heavy and traditional nav would fight the content.

即当页面是 fold-heavy（首屏信息过载）且传统导航会与内容"打架"时使用。

拆解一下这个判定：

• fold-heavy：首屏（above the fold）要展示的信息很多——巨型标题、视觉主角、演示视频、插图中心件等。Hero 区本身信息密度已经很高，再放一条全宽导航条会压缩内容空间、分散注意力。
• traditional nav would fight the content：N1（全宽顶部条）、N5（居中悬浮胶囊）这类导航会与内容争抢首屏视觉权重。此时导航应该"退场"，只留一个角落芯片保持存在感。

典型的使用场景：

• 首屏是 H1 Marquee（单句声明铺满折叠区）、H6 Photographic fold（全出血大图）或 H9 Custom illustration centerpiece（手绘插图中心件）这类"内容即主角"的 hero；
• 页面真正需要的目的地只有 1～2 个（品牌主页 + 一个动作），不需要导航链路；
• 需要品牌在用户滚动到任意位置时仍可见，但又不想要 sticky 全宽条的视觉负担。

与邻近原型的区分（Don't confuse with）

规范明确要求不要与C4 · Sticky bottom bar混淆：

C4 规范 是"水平钉在视口底部的横条，容纳一个 CTA 和一行安抚性说明"，与 N2 是两种完全不同的结构语汇。C4 适合"让转化动作始终在手指可达范围内"，N2 适合"品牌 + 一个动作的极简悬浮锚点"。

此外 N4 Hidden behind ⌘K 规范中也特别标注了它与 N2 的区别：N4 默认不可见（用户必须按 ⌘K 唤起命令面板），而N2 是始终可见的。N4 面向键盘优先受众，N2 面向"需要一个低调常驻锚点"的普通浏览场景。

与 N5 Floating pill 的边界

N5 Floating pill 规范在 "Don't confuse with" 中专门指出：N2 是角落锚定（corner-anchored），而 N5 是顶部居中、与页面边缘明显分离的全胶囊导航。两者都用了position: fixed，但：

• N5 是inset: var(--space-md) auto auto 50%; transform: translateX(-50%)——顶部居中，带毛玻璃背景、柔和阴影、border-radius: 999px，且允许包含链接列表（wordmark + 若干链接 + CTA）；
• N2 是top: var(--space-md); right: var(--space-md)——右上角，纸色实底 + 发丝边框，无模糊无圆角，内容只有 wordmark + 一个动作。

N5 服务于 modern-minimal / atmospheric 页面"hero 下方有独立表面或影像可供模糊效果覆盖"的场景；N2 服务于"导航应该退居二线"的场景。N5 的规范还附带一个反模式提醒：一个占视口约 95% 宽的"胶囊"其实就是全宽导航两端加了圆角，失去意义；同理，N2 的芯片如果做得过大，也就不再是"芯片"了。

三、逐行拆解实现：HTML 语义与 CSS 属性

HTML 骨架的语义选择

<aside class="nav-chip"> <a class="wordmark">Studio</a> <a class="cta-outline">Try →</a> </aside>

两个细节值得注意：

1. 用<aside>而非<nav>。N2 不是页面主导航，它只是一个附带性的悬浮标识块。<aside>在语义上表示"与主内容互补的附带内容"，更贴合"角落里的品牌锚点"这一定位，也避免辅助技术把单个 CTA 误读为导航结构。
2. 两个链接：wordmark + cta-outline。wordmark是品牌字标，通常回到首页；cta-outline是单一动作按钮。cta-outline这个名字与 C1 · Outlined chip 组件的类名一致——说明 N2 直接复用了 C1 的按钮形态，这是 Hallmark 组件之间互相组合的一个实例。

CSS 关键属性逐项说明

.nav-chip { position: fixed; /* 脱离文档流，相对视口定位 */ top: var(--space-md); /* 距视口顶部 1 个间距单位（默认 1rem） */ right: var(--space-md); /* 距视口右侧 1 个间距单位 */ display: inline-flex; /* 内部两个元素水平排列，宽度内容自适应 */ gap: var(--space-md); /* wordmark 与 CTA 之间留出 1rem 间距 */ padding: 0.5rem 0.75rem; background: var(--color-paper); /* 纸色实底 */ border: 1px solid var(--color-rule); /* 发丝级边框 */ }

这些 token（--space-md、--color-paper、--color-rule）都来自 Hallmark 的全局 token 体系 site/css/tokens.css（如 Specimen 主题下--color-paper: oklch(96% 0.018 80)、--color-rule: oklch(82% 0.014 75)、--space-md: 1rem）。规范要求所有输出必须引用命名 token，禁止在渲染中途内联裸颜色值——N2 的骨架正是这一纪律的范例。

可选增强：完全体的 N2 芯片

把规范骨架与 Hallmark 全局纪律（interaction-and-states.md 的 8 状态要求、microinteractions.md 的动效规则）结合，可以扩展成一个可直接上线的完整实现：

<aside class="nav-chip" aria-label="Site"> <a class="wordmark" href="/">Studio</a> <a class="cta-outline" href="/start">Try →</a> </aside>

.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-sticky-nav); /* 层级：高于 in-page sticky，低于 modal */ display: inline-flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); } .nav-chip .wordmark { font-family: var(--font-display); font-size: var(--text-sm); line-height: 1; } .nav-chip .cta-outline { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4rem 0.85rem; min-height: 44px; /* 移动端命中区域下限 */ border: 1px solid var(--color-ink); /* C1 outlined chip 形态 */ color: var(--color-ink); } .nav-chip a:hover { color: var(--color-accent); } .nav-chip a:focus-visible { outline: 2px solid var(--color-focus); /* ≥3:1 对比度焦点环，不带动画 */ outline-offset: 2px; }

补充说明：

• z-index: var(--z-sticky-nav)（tokens.css 中为 300）确保芯片浮于页面内 sticky 元素之上，但低于 modal/toast；
• :focus-visible焦点环使用--color-focus，且绝不动画化焦点环的出现——这是 SKILL.md 第 6 步 Build 的硬性纪律；
• 箭头符号→是 C1/C3 类 CTA 的惯用 adornment，在 component-cookbook.md 的 CTA 变体表中可见（arrow: → · ↗ · none）。

四、N2 的变体旋钮（Variation Knobs）

Hallmark 的每个 archetype 都带有 2～3 个"变体旋钮"——同一个原型内部通过旋钮取值产生差异，避免"每个 N2 都长得一样"。来自 component-cookbook.md 的 N2 旋钮表：

规范骨架取的是默认组合：top-right锚点 + navigation 内容（wordmark+CTA）+ solid 实底。实际使用中可以：

• 改为bottom-left锚点，贴合某些移动端单手操作的布局；
• 内容换成主题切换器或搜索入口，把芯片做成一个"漂浮的小工具"；
• Backdrop 换blur时，需要参考 N5 的写法：backdrop-filter: blur(14px) saturate(120%)，但注意 N2 的定位是"低调"，实底通常更符合其气质。

选取旋钮值后，需要在产物的 stamp 注释中声明，例如：

/* Hallmark · macrostructure: Marquee Hero · N2 knobs: anchor=top-right, content=navigation, backdrop=solid · ... */

五、N2 在 Hallmark 体系中的位置：路由与纪律

导航原型与流派的路由

component-cookbook.md 底部给出了"哪个导航配哪个流派"的路由表：

可见N2 不在任何流派的默认列中——它不是默认导航，而是在特定内容情境（fold-heavy）下主动选择的一种"退场策略"。同时有一条重要纪律：

Default away from N1.最容易被识别的 AI 指纹就是 N1（wordmark + 内联链接行 + 右侧按钮）被反射性地使用。优先 N5～N9；只有页面真正只有 2 个目的地且流派路由允许时，才用 N1。

N2 正是"目的地极少 + 首屏过载"时的克制答案。此外，同一页面内不允许两个 section 使用同一个 archetype，连续多次 Hallmark 输出也不允许共享同一导航原型——这是贯穿 cookbook 的多样化纪律。

移动端收敛规则

N2 的移动端行为写在 cookbook 的 "Mobile collapse — per archetype" 表中：

|N2 Floating chip| chip remains floating; reduce padding | chip widens to support 44 px hit target; never below 280 px |

具体而言：

• 60rem（~960px）布局断点：芯片保持悬浮，仅减小内边距；
• 40rem（~640px）排版断点：芯片加宽以保证44×44px的命中区域（WCAG AA 的最低可点击尺寸），且芯片宽度不得低于 280px——也就是说在窄屏上，它从"角落小芯片"收敛为"顶部一条窄的固定标识条"，避免按钮过小难以点击。

这与 cookbook 的跨切面规则一致：所有命中目标在 40rem 以下必须 ≥44×44px。因此移动端完整实现应确保min-height: 44px（前文示例已加入），并考虑把.nav-chip在窄屏下扩展到接近全宽的细条。

与整体流程的衔接

在 SKILL.md 的默认 Design flow 中，导航与页脚原型的选取发生在 Step 2（选择 macro structure 之后）：

Pick a nav archetype (N1–N10) and a footer archetype (Ft1–Ft8) at this step... State both picks alongside the macrostructure:"Macrostructure: Marquee Hero. Nav: N5 Floating pill. Footer: Ft5 Statement. Theme: Bloom."

选取 N2 时，模型应在构建前明确说出："Macrostructure: X · Nav: N2 Floating chip · Footer: FtY · Theme: Z"，并在最终产物的 CSS 头部留下 stamp 注释（如/* Hallmark · macrostructure: <name> · nav: N2 Floating chip · ... */），作为该项目后续 Hallmark 运行的多样化依据（SKILL.md Step 6）。

悬浮定位的系统级佐证

仓库中的实际落地例子可以佐证固定定位（position: fixed/position: sticky）在 Hallmark 风格站点中的实现方式。例如 site/examples/bananastudio/styles.css 实现了从全宽条 morph 成悬浮胶囊的 N10 导航：外层.nav用position: sticky; top: 0，悬浮态时外层背景变透明、backdrop-filter: blur(0)，内层.nav__inner在.is-floating下获得border-radius: var(--radius-pill)、毛玻璃背景与阴影，并用transform: translateY(12px)制造与视口顶部的呼吸间距——这印证了"固定/悬浮层必须用transform而非margin/padding来制造视觉偏移，避免触发布局抖动"的悬浮实现铁律。N2 的position: fixed; top: var(--space-md); right: var(--space-md)是同一套"悬浮层纪律"在角落芯片上的简化应用。

六、易踩的坑与反模式

综合 N2 规范、cookbook 与全局反模式（anti-patterns.md），使用 N2 时要注意：

1. 把 N2 做成 N5：加了圆角、毛玻璃、阴影、链接列表的"角落芯片"就不再是 N2，而是错位的 N5。N2 的克制体现在实底、发丝边框、零装饰。
2. 把 N2 做成全宽条：position: fixed; left: 0; right: 0的"芯片"只是又一个全宽导航。N2 必须内容自适应、远离边缘留出呼吸感（--space-md）。
3. 内容膨胀：N2 是"wordmark + 单一动作"。塞进三四个链接、菜单按钮、搜索框，就违背了它的存在理由。
4. 命中区域不足：移动端芯片过小无法点击。遵循 44×44px 底线与"宽度不低于 280px"的收敛规则。
5. 硬编码颜色/间距：骨架中的var(--color-paper)、var(--color-rule)、var(--space-md)都来自 token 体系，直接写死 hex 会违反 Hallmark 的 "Locked tokens" 纪律（SKILL.md Discipline 3）。
6. 与 C4/N4/N5 混淆：记住三条分界线——C4 是全宽底部条；N4 是默认不可见的 ⌘K 导航；N5 是顶部居中、带模糊阴影的完整胶囊导航。N2 是角落锚定、始终可见、极简实底芯片。

七、小结

N2 · Floating chip 是 Hallmark 导航原型中"最小存在感"的选项：一个position: fixed钉在角落的<aside>，内容只有 wordmark 加一个cta-outline动作，纸色实底、发丝边框、不占文档流。它服务的是 fold-heavy 页面——当传统导航会与首屏内容争抢权重时，用"退场"换取内容舞台，同时保持品牌锚点与单一转化路径的常驻可见。

• 完整骨架与逐属性拆解见 N2 组件规范 与本文第三节；
• 变体旋钮、流派路由与移动端收敛规则见 component-cookbook.md；
• 依赖的颜色/间距/层级 token 见 site/css/tokens.css；
• 悬浮层实现纪律的完整代码示例见 site/examples/bananastudio/styles.css（N10 morph 导航）与 floating-nav.md；
• 相邻原型对比可参考 C4 Sticky bottom bar、N4 Hidden behind ⌘K、N5 Floating pill。

在把 N2 纳入你的页面构建时，记得遵循 Hallmark 的两条铁律：选取后要在 stamp 中声明旋钮取值，且连续输出不重复使用同一导航原型——这才是"看起来是设计出来的，而不是生成出来的"的底层机制。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark