← 文档中心
Module System · 模块系统
模块系统
v0.4 · 去分级
把 page-types v0.1 10 个 PT 拆出来的 ~30 个模块沉淀成可复用组件规范。每个组件给出:状态(default/hover/focus/disabled)、变体、props、a11y 要求、跨 PT 复用矩阵。这是 wireframe 与最终前端实现的契约——下一步 wireframe 直接用模块拼装、不必重发明轮子。brand-thesis 是讲什么、pf 是做什么、ia 是挂哪里、pt 是页面什么样——本文档是模块怎么复用的根。
VERSION v0.3 · draft
DATE 2026-05-19
OWNER Kevin Wang
BASED ON page-types v0.1 + IA v0.2 GM-01~10 + Deco book 视觉范式
30 个模块 · 已盘点
4 层分类 · 已定型
取消 Good/Better/Best · 旗舰/新机标签
视觉 token · 等视觉团队
a11y 规范 · 草稿
下一步 · 维度 5 扩展钩子
在画 wireframe 之前——团队需要先共同知道:30 个模块的状态/变体/props。这样 wireframe 不是 25 张孤立的画稿,而是 30 个组件的拼装实例。
这份文档不是 Figma library、不是代码、不是设计稿。它是模块的接口契约——每个模块给出"它有哪些状态、能变成哪几个变体、需要什么数据 props、a11y 怎么要求、出现在哪些 PT 里"。视觉细节(具体配色 / 字号 / 间距)由视觉团队最终定 · 本文档只给出 token 输入和结构骨架。
从 PT 到 Module 的归类逻辑 · PT 把"页面长什么样"定义出来,Module 把"页面里反复出现的组件"独立出来——这样 PT-04 PDP 的 16 个模块槽 不是 16 个新发明,而是 ~10 个全局/PT 共用模块 + ~6 个 PDP 特有模块的拼装。
跟 Figma / 代码的关系 · 本文档是抽象规范(props / states / variants)· Figma 是视觉实现(具体像素)· 前端代码是工程实现(组件树 / 状态管理)。三者同源、互相校对。
Part 01
4 层 30 个模块 全景
按"复用范围"分 4 层 · 复用越广的层越优先沉淀。全局层(GM-01~10)每个 PT 都用、PT 高复用层在 3+ PT 出现、Action 层是基础组件、Specialty 是单 PT 专用但复杂度高。
Layer 01
全局共用层 · Global
10 个 · GM-01~10
每个 PT 都用(除 PT-10 Account)· 来自 IA v0.2 的 10 个跨页模块 · 沉淀优先级最高 · 改一处全站受影响。
GM-01 Sticky 顶导
GM-02 tp-link ID 入口
GM-03 我的 X 入口
GM-04 全站搜索
GM-05 Bag 购物袋
GM-06 HomeShield 锚点
GM-07 Footer
GM-08 Trust strip
GM-09 PDP Buy strip
GM-10 面包屑
Layer 02
PT 高复用层 · Cross-PT
10 个 · MS-11~20
3+ PT 共用 · 不在全局层但跨多个 PT 出现 · 沉淀价值次高 · 通常有变体(标准 / mini / 简化)。
MS-11 Hero block
MS-12 型号卡 Model card
MS-13 Card grid
MS-14 Section divider
MS-15 FAQ accordion
MS-16 Compare table
MS-17 Step indicator
MS-18 Article body
MS-19 Pull quote
MS-20 CTA block
Layer 03
Action / Input · Atomic
7 个 · MS-21~27
原子组件 · 上层模块的构建块 · 状态/变体最丰富 · 是 a11y 关键节点(键盘导航 / focus ring / aria)。
MS-21 Button
MS-22 Form field
MS-23 Banner / Alert
MS-24 Modal / Dialog
MS-25 Toast
MS-26 Tabs
MS-27 产品标签 badge
Layer 04
Specialty · PT 专用
3 个 · MS-28~30
单 PT 但复杂 · 复用面窄但内部结构复杂 · 单独沉淀避免在 PT wireframe 里重复设计。
MS-28 Spec table(PDP)
MS-29 Review card(PDP)
MS-30 Symptom diagnostic(Support)
Part 02
Spotlight · 4 个核心模块详细
30 个模块全部展开会让文档膨胀到 2000 行。v0.1 选 4 个最关键的展开 spotlight 卡——GM-01 顶导(全站基础)、GM-09 Buy strip(转化关键)、MS-11 Hero(品牌门面)、MS-12 型号卡(代际型号范式)。其他 26 个在 Part 03 复用矩阵给坐标 · v0.2 再逐个展开。
GM-01 · Layer 01 全局共用
Sticky 顶导
全站统一顶导 · 6 槽位 + 顶右 3 工具(搜索/tp-link ID/Bag) · sticky 贴顶 · 移动端折叠汉堡
States · 状态
default透明背景 + ink 文字scroll top
scrolled白色背景 + 阴影scrollY > 0
mega-open下拉展开hover/click
mobile-open抽屉式打开tap 汉堡
Variants · 变体
desktop完整 6 槽位 + mega menu hover + 顶右 3 工具横排
mobileLogo + 汉堡按钮 + Bag · 抽屉里 6 槽位竖排
compactcheckout / quiz 步骤页用 · 仅 Logo + 退出 · 不显 6 槽位
Props · 输入
| Prop | Type | 说明 |
|---|
| activeSlot | enum | 高亮当前章节(deco/archer/re/support/stories/trust) |
| userState | enum | signed-out / signed-in / signed-in-with-orders · 影响 tp-link ID 图标和下拉 |
| bagCount | number | Bag 角标数字 · 0 隐藏 |
| variant | enum | desktop / mobile / compact |
A11y · 可访问性
键盘: Tab 顺序 logo → 6 槽位 → 顶右 3 工具 · Esc 关闭 mega menu · 方向键在 mega menu 内导航。
ARIA: 顶导 role="navigation" + aria-label="Main" · mega menu aria-expanded 跟随状态 · 当前章节 aria-current="page"。
对比度: 透明背景态文字需对底图 4.5:1 · 否则切到 scrolled 态。
GM-09 · Layer 01 全局共用
PDP Buy strip
PDP sticky 侧栏 / Compare 表行 CTA · DTC 价格内嵌(B1 拍板)+ BUY NOW + Amazon 次选 + HomeShield 守护标
States
defaultBUY NOW 可点in-stock
loading加购中点击后
added已加 + 数字成功反馈
out-of-stock缺货变 secondarynotify me
pre-order预售launch 前
Variants
standardPDP sticky 侧栏 · 完整版 · 价格 + BUY NOW + Amazon + Where to Buy + HomeShield 标
miniCompare 表 / Related 卡 / Search results 用 · 仅 价格 + BUY NOW(small)
oos缺货态 · 主 CTA 改 "Notify me" + 副信息"Back in stock soon"
Props
| Prop | Type | 说明 |
|---|
| sku | string | 跳 store.tp-link.com/cart/add?sku=xxx |
| priceUSD | number | DTC 价格 · 来自 Shopify headless API |
| amazonUrl | string | trackable link · ...&tag=web_tpl_pdp_<Model> |
| stockStatus | enum | in-stock / oos / pre-order / discontinued |
| homeShieldTier | enum | basic / pro / max / none · 决定 HomeShield 标显示什么 |
A11y
键盘: Tab 顺序 价格 → BUY NOW → Amazon → Where to Buy · BUY NOW 是 PDP 默认 focus 起点。
ARIA: 价格 aria-label="Price $XXX USD" · 缺货 aria-live="polite" 通知。
focus ring: BUY NOW 主 CTA · 强 focus(2px 实线 teal-deep outline + 2px offset)。
MS-11 · Layer 02 PT 高复用
Hero block
Home / Brand Landing / Generation Landing / Education / Trust 五种 PT 都用 · 一句话主张落地的主载体
Variants
hero-homePT-01 · "Wi-Fi you can count on." 大字 + film/loop 背景 + 代际/型号快捷入口
hero-brandPT-02 · 子品牌 promise + lifestyle 大图 · Deco/Archer/RE 各自调子
hero-generationPT-03 · 代际故事 manifesto + 型号 preview · 例: "Wi-Fi 8 shifts from speed to reliability"
hero-educationPT-05 · 教育主题大字 + 一段引语 · 数据可视化背景
hero-trustPT-09 · "Trust by Design" + 制度感 · 极简 · 不用 lifestyle 图
Props
| Prop | Type | 说明 |
|---|
| variant | enum | home / brand / generation / education / trust |
| title | string | 主标题 · 来自 brand-thesis 或 PT 主张 |
| subTagline | string? | 副 tagline · 仅 home/brand 用 · 例 "In every room. Every day." |
| mediaUrl | string? | 背景视频/图 · 桌面 video / 移动 poster fallback |
| primaryCTA | {label, url} | 主 CTA · 跳下游 PT |
| secondaryCTA | {label, url}? | 次 CTA · 可选 |
A11y
媒体: 背景视频必须 muted autoplay + 提供 poster · prefers-reduced-motion 时切静图。
对比度: 标题文字对视频任意帧 4.5:1 · 必要时加渐变蒙版。
语义: Hero 包在 <header> · 主标题用 <h1>(仅本 PT 一个 h1)。
MS-12 · Layer 02 PT 高复用 · v0.4 去分级
型号卡 Model card · 跨代际复用
同代际内多个型号平铺,不分 Good/Better/Best 档(对齐 ia v0.5)· 跨代际(Wi-Fi 8/7/6E/6)各一组 · 仅「旗舰」「新机」两种标签标注关键型号 · 视觉调子按代际差异化
Variants · 按代际分组 · 实际 SKU
wifi-8Deco 8(5 Gbps+)/ Deco 8 Pro(16 Gbps)★ Hero · 新机 / Deco 8 Ultra(22 Gbps)· Wi-Fi 8 explainer 调子
wifi-7Deco 7(BE25 · 5 Gbps)/ Deco 7 Pro(BE63/67/68 · 14 Gbps)/ Deco 7 Elite BE85(22 Gbps)★ Hero · 旗舰 / Deco 7 Elite BE95(33 Gbps · 顶配)
wifi-6eDeco XE75 / XE75 Pro(5.4 Gbps)/ Deco XE200(11 Gbps)
wifi-6Deco X20(1.8 Gbps)/ X50 / X55 / X60(3 Gbps)/ X68(3.6 Gbps)/ X90(6.6 Gbps)
规则:同代际型号平铺,不分 Good/Better/Best 档(对齐 ia v0.5)· 仅「旗舰」(当代最高规格)与「新机」(当代首发)两种标签可标注,且不出现在导航 · 仅用于本卡 / PDP / 列表页。代际间用 Deco book 色板做视觉区分。
Props · v0.2 双轴
| Prop | Type | 说明 |
|---|
| label | enum? | flagship / new / none · 「旗舰」或「新机」角标 · 不分 Good/Better/Best · 不入导航 |
| generation | enum | wifi-8 / wifi-7 / wifi-6 · v0.2 新增 · 决定视觉调子 + SKU 命名 |
| sku | string | 实际 SKU 名 · 显示文字尊重历史命名(Deco 8 Pro / BE85 / X80 / X55) |
| speed | string | 该 SKU 的 Wi-Fi 速度 |
| shelfLine | string | retail shelf 文案 · Wi-Fi 8 来自 Deco book · 7/6 由 Marcom 写 |
| priceUSD | number? | DTC 价格 · 嵌入显示 |
| pdpUrl | string | 跳 /deco/<gen>/<sku> PDP |
A11y
语义: 卡片用 <article> · 标题 <h3>。
键盘: 整卡可聚焦(Enter 跳 PDP) · 卡内主 CTA 单独 tab stop。
对比度: 各代际色编码满足 WCAG AA · 颜色仅装饰不传递必要信息(信息靠文字)。
Part 03
复用矩阵 · 模块 × PT
30 个模块在 10 个 PT 里的复用分布——这决定下一步排期的优先级。横向看:某个模块出现在哪些 PT。纵向看:某个 PT 由哪些模块拼出来。
| 模块 |
01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 |
| GM-01 顶导 | | | | | | | | | | |
| GM-02 ID 入口 | | | | | | | | | | |
| GM-03 我的 X | | | | | | | | | | |
| GM-04 搜索 | | | | | | | | | | |
| GM-05 Bag | | | | | | | | | | |
| GM-06 HS 锚点 | | | | | | | | | | |
| GM-07 Footer | | | | | | | | | | |
| GM-08 Trust strip | | | | | | | | | | |
| GM-09 Buy strip | | | | | | | | | | |
| GM-10 面包屑 | | | | | | | | | | |
| MS-11 Hero | | | | | | | | | | |
| MS-12 型号卡 | | | | | | | | | | |
| MS-13 Card grid | | | | | | | | | | |
| MS-14 Section divider | | | | | | | | | | |
| MS-15 FAQ accordion | | | | | | | | | | |
| MS-16 Compare table | | | | | | | | | | |
| MS-17 Step indicator | | | | | | | | | | |
| MS-18 Article body | | | | | | | | | | |
| MS-19 Pull quote | | | | | | | | | | |
| MS-20 CTA block | | | | | | | | | | |
| MS-21 Button | | | | | | | | | | |
| MS-22 Form field | | | | | | | | | | |
| MS-23 Banner / Alert | | | | | | | | | | |
| MS-24 Modal | | | | | | | | | | |
| MS-25 Toast | | | | | | | | | | |
| MS-26 Tabs | | | | | | | | | | |
| MS-27 产品标签 badge | | | | | | | | | | |
| MS-28 Spec table | | | | | | | | | | |
| MS-29 Review card | | | | | | | | | | |
| MS-30 Diagnostic | | | | | | | | | | |
标准版
mini / 简化变体
可选 · 视具体页决定
读图要点
- 10 行复用最广(GM-01 顶导 / GM-02 ID / GM-04 搜索 / GM-05 Bag / GM-07 Footer / GM-08 Trust strip / MS-14 divider / MS-20 CTA block / MS-21 Button / MS-23 Alert)——是模块系统优先沉淀对象
- PT-04 PDP 用 ~13 个模块拼出——最复杂的页面 · 也是 V1 主战场
- PT-10 Account Dashboard 几乎不用 Layer 1/2——独立设计语言 · 跟主站视觉解耦
- GM-09 Buy strip 只在 PT-04 + PT-06 mini——但是收入贡献最大 · 优先级独立提升
Part 04
Design Token 输入
v0.1 不锁视觉 token——视觉团队(Ken Kim)还在 review。这里给出从 brand-thesis v0.5 + Deco book 推导出的候选 token · 作为视觉团队的输入参考 · 不是最终值。
候选色板 · Deco book 输入
--goldDeco book · 主强调色 · CTA / 重点标识#D5B075
--oakDeco book · 次要色 · 文字强调#A07B56
--marineDeco book · 深底 · Hero overlay#1F212B
--off-whiteDeco book · 中性底色 · 卡片背景#F7F6F4
--concreteDeco book · 中性灰 · 次要文字#9A9792
候选字体 · Deco book 输入
Aa--font-serifCormorant Garamond · serif · 主标题 / 编辑性大字300/400/italic
Aa--font-sansDM Sans · sans · 正文 / UI 标签 / 按钮400/500/700
Aa--font-monoJetBrains Mono · 技术规格 / URL / code · 候选(Deco book 未指定)400/600
关键提醒 · 以上是 Deco book 内部锁定的 token · 但 brand-thesis v0.5 A3 拍板"视觉暂不动 · 等视觉团队决定"——视觉团队可能采用 Deco book 一套全站、可能 Archer 走差异化、可能完全重做。本文档不锁视觉 · 仅作为 token 候选输入。
Part 05
草稿 vs 已拍板 边界
v0.1 内容明确归类——继承自前序文档的内容是已拍板 · 本文档新拟的结构是草稿待 confirm。
✓ 已拍板(继承前序)
⚡ 草稿建议 · 待 Kevin confirm
30 个模块总盘(基于 IA GM-01~10 + PT 拆解)
每个模块的 states / variants 具体清单
4 层分类(Global / PT-shared / Action / Specialty)
MS-21 Button 的具体 4 个变体(primary / secondary / tertiary / ghost)
GM-09 Buy strip · DTC 价格内嵌(B1 拍板)
MS-12 型号卡 视觉是否完全锁定 Deco book(还是视觉团队会改)
视觉 token 不锁 · 等视觉团队(A3 拍板)
30 个模块的 props 字段是否需要在 v0.2 全部列全
跟 page-types v0.1 的模块引用一致
MS-30 Symptom diagnostic 是否需要从 MS-17 Step indicator 衍生(还是独立)
Next Step · 下一步预定方向
进入维度 5 · 扩展性钩子
5 维度只剩最后 1 个——扩展性钩子(Extensibility Hooks)。预留 V2/V3 演化空间:DTC 集成全路径(V2)、Support 升级(V3)、未来品类扩展、新地区扩展、AI 触点。这一维度做完整个项目设计层全部交付。
01
开始维度 5 · 扩展钩子 v0.1推荐 · 把 V1 之外预留的演化空间列出来 · 每个钩子定义:触发条件、注入点、影响范围、不破坏 V1 的约束
02
module-system v0.2 深化 · 把 Part 02 spotlight 从 4 个扩到 ~15 个 · 每个模块给 states / variants / props 完整规范
03
开始 wireframe · 从 PT-04 PDP 入手 · 用本文档 30 个模块的接口画 PDP 低保真 · 检验模块系统的可拼装性
04
锁 V1 范围 · 跟 Carlos / Deco 团队对齐 Deco 8 launch 时间表后 · 钉死 V1 那 10-15 页
版本变更记录 · Changelog
v0.4
2026-06-03
取消 Good/Better/Best 分级 · 对齐 ia v0.5 · MS-12 从「Tier card」重构为「型号卡 Model card」(按代际平铺型号,不分档,仅旗舰/新机标签);MS-27 Tier badge → 产品标签 badge;props tier→label;token 描述去 tier 绑定。
v0.3
2026-05-19
MS-12 实际 SKU 填入 + Best+ tier · 12 个 variant 全部填实际 SKU(Wi-Fi 8: Deco 8/Pro/Ultra · Wi-Fi 7: 7/7 Pro/7 Elite BE85/BE95 · Wi-Fi 6E: XE75/XE200 · Wi-Fi 6: X20/X50-60/X68-90)。Hero 标记 Deco 8 Pro + Deco 7 Elite BE85。BE95(33G)新增 Best+ tier(purple)· 因为速率反超 Wi-Fi 8 Ultra。同步 ia v0.4 / page-types v0.3。
v0.2
2026-05-19
MS-12 Tier card 跨代际修正 · v0.1 把 Tier card 锁定为"Deco 8 三层"。v0.2 修正:三层细分延续到所有 Wi-Fi 代际。注:v0.2 用 placeholder · v0.3 填实际。
v0.1
2026-05-19
模块系统首版 · 把 page-types v0.1 拆出来的 30 个模块按 4 层分类(Layer 01 Global 10 个 / Layer 02 PT-shared 10 个 / Layer 03 Action 7 个 / Layer 04 Specialty 3 个)。Part 02 Spotlight 4 个核心模块(GM-01 顶导 / GM-09 Buy strip / MS-11 Hero / MS-12 Tier card)详细 states/variants/props/a11y。注:v0.1 MS-12 假设 Deco 8 是 Deco 全线 · v0.2 修正为跨代际。