站点页脚系统 是做什么的？
目的
站点页脚系统提供了一种用于设计网站底部锚点的系统化方法。它充当那些未找到所需内容的用户的安全网、SEO 关键链接的目录，以及强制性法律、品牌和社交信息的容器。一个精心设计的页脚能够为页面体验提供结束感，而不会造成认知负担。
使用场景
- 为多页网站设计全局页脚。
- 将复杂的站点地图组织成可管理的导航集群。
- 标准化工具链接（条款、隐私、版权）的放置位置。
- 将全局行动号召（新闻通讯、联系）集成到页面末尾。
- 为多列链接列表建立响应式策略。
何时不应使用
- 单页迷你站点： 此时简单的“版权”行就足够了。
- 带有底部标签的渐进式 Web 应用 (PWA)： 此时类似应用的持久导航取代了传统页脚的需求。
- 仅用于转化的落地页： 此时页脚可能会提供“漏洞”或干扰，引开用户对主要行动号召的关注（但通常仍需要一个包含法律链接的最小页脚）。
输入
- 信息架构 (IA)： 未包含在主要页眉中的所有链接。
- 法律与合规要求： 隐私政策、服务条款等。
- 品牌标识： 标志、社交媒体资料和公司使命宣言。
- 全局操作： 次要转化目标，如新闻通讯注册。
- 设备断点： 用于响应式列堆叠的网格系统定义。
输出
- 页脚结构图： 区域（身份区、链接区、工具区、行动区）的可视化或结构定义。
- 链接层次结构： 分类组织的次级导航簇。
- 响应式蓝图： 列在移动端如何堆叠或折叠的规则。
- 无障碍地标： 语义标签（
<footer>、<nav>）和标签。
工作流程
1. 分类页脚内容
将内容划分为逻辑区域：
- 身份区： 标志、描述和社交图标。
- 导航区： 按主题（产品、公司、资源）分组的链接簇。
- 行动区： 新闻通讯注册或主要联系信息。
- 工具区： 版权、法律链接和语言选择器。
2. 选择结构模式
根据网站复杂性选择模式：
- 瘦页脚： 适用于最小站点的单行布局。
- 肥页脚（站点地图）： 适用于企业/电商的多列布局。
- 行动导向页脚： 在链接列表之前专注于一个大的行动号召。
3. 建立视觉层次
对页脚应用 visual-hierarchy-system：
- 对链接簇使用粗体标题。
- 确保文本大小可读，但略小于正文（例如，14px）。
- 在页脚背景与链接颜色之间创建高对比度。
4. 定义移动端适配
映射从桌面端到移动端的过渡：
- 堆叠： 多列布局应堆叠成单列。
- 手风琴模式： 对于非常“肥”的页脚，可考虑在移动端将链接组折叠为手风琴，以减少页面长度。
- 触摸目标： 确保所有链接易于点击。满足 WCAG 2.2 SC 2.5.8（目标大小最小值）—— 交互式目标至少为 24x24px，相邻链接之间留有足够间距；对于主要触摸目标，首选 44px+。
5. 添加语义与无障碍层
- 在
<footer>标签内包裹该部分。 - 对链接簇使用
<nav>元素，并带上唯一的aria-label（例如，“页脚资源”）。 - 确保对比度满足 WCAG AA（4.5:1）。
决策规则
- 站点地图规则： 如果网站有超过 15 个页面，请使用多列“肥页脚”以帮助内容发现。
- 外部链接： 社交媒体和外部资源应在新标签页中打开（
target="_blank"）以将用户留在你的网站上。 - 版权放置： 始终将版权和法律链接放置在绝对底部（“子页脚”）。
- 行动号召优先级： 如果页脚包含新闻通讯注册，它应是页脚中视觉上最突出的元素。
约束条件
- 无障碍： 必须可通过键盘 Tab 键顺序到达。所有链接必须具有可见的焦点状态，且该状态不得被粘性页眉或 Cookie 横幅遮挡（WCAG 2.2 SC 2.4.11 焦点不被遮挡）。
- 响应式： 列不得溢出或变得过窄（最小宽度）。
- 合法性： 必须包含当地法规（GDPR、CCPA 等）要求的强制性链接。
常见失败模式
- 链接过载： 包含网站上的每一个页面，形成一堵用户会忽略的文字墙。
- 对比度不足： 在深色背景上使用浅灰色文本，不符合无障碍标准。
- “死胡同”： 页脚太小或缺失，使滚动到底部的用户无处可去。
- 非标准分组： 混合不相关的链接（例如，将“职业”置于“产品”下）。
验证标准
- 页脚使用了语义化的
<footer>和<nav>标签。 - 链接簇具有清晰、描述性的标题。
- 移动端视图正确堆叠列并保持触摸目标。
- 所有页脚文本的对比度满足 WCAG AA（4.5:1）。
- 法律链接和版权存在且放置正确。
- 社交链接使用可识别的图标并带有可访问的文本标签。