网页页脚可用性设计指南

时间：2023-09-08 04:12:01 | 来源：网站运营

时间：2023-09-08 04:12:01 来源：网站运营

网页页脚可用性设计指南：

网页页脚可用性设计指南

摘要： 页脚几乎可以在每个网页的底部找到，并且通常采用多种形式，具体取决于网站上的内容类型。

关键词：可用性，导航，信息架构

页脚

定义：网站页脚是位于网站每个页面底部、主体内容下方的区域。

“页脚”一词来自印刷界，其中“页脚”是一个一致的设计元素，可以在文档的所有页面中看到。

1、用户扫描或阅读页面后，要么找不到他们想要的内容，要么需要更多信息。他们滚动到页面底部并将页脚用作：

1.1、第二次说服的机会 例如，也许用户在阅读了所有详细信息后决定不注册银行账户，但仍然对银行机构印象深刻并想成为客户。页脚是提醒或向潜在客户介绍公司其他产品的好机会。

1.2、找不到想要的内容

有时，用户会转向页脚以获取全局导航中可能不存在的选项。例如，那些有兴趣申请工作的人可能会查看页脚以获取相关信息。

2、用户有意滚动到页脚以查找他们希望出现在那里的信息，例如联系信息、有关公司的详细信息、社交媒体帖子或链接，甚至发现网站上的新内容或相关内容。一些用户甚至使用页脚进行导航。

在这两种情况下，无论页脚中的内容是什么，该页脚都应该是一致的、可预测的和易于发现的。在确定要提供哪种类型的页脚以及要在页脚中提供哪些内容时，请考虑这些用例、您的网站目标和页脚目标。

页脚元素

以下是一些最常见的页脚组件、示例以及使用它们的推荐情况：

• 实用链接
• 导航
• 次要链接
• 网站地图
• 推荐或奖励
• 组织内的品牌
• 客户参与（电子邮件通讯和社交媒体）

http://Uscreen.tv 包含多种类型的页脚内容，例如 (1) 次要任务内容 (2) 实用程序内容，以及 (3) 社交媒体链接。

实用链接

大多数网站至少倾向于在页脚中包含实用导航，指向：

• 联系信息：公司地址、电话号码和实时聊天链接
• 客户服务信息
• 隐私政策
• 使用条款

用户通常会直接到页脚查找联系信息或查找获得客户支持的方式。无论您是否在页面顶部有指向这些实用程序项目的链接，请始终将它们包含在页脚中。

适合所有网站







Clarity Money 的页脚通过包含指向使用条款和隐私政策的链接以及指向社交媒体帐户







J. Crew 以指向其专用链接的形式提供联系信息 客户服务 Twitter 帐户、其电话号码和支持电子邮件地址。

导航

导航是用户访问网站看到的第一件事和离开时看到的最后一件事——也就是说，它包含在页面的顶部和底部。因此，页脚可以包括全局导航。

适合页面较长的网站，尤其是在页面底部无法使用全局导航时。







United Healthcare 使用页脚导航：显示在顶部和页脚中。

次要链接

次要链接的一些示例包括：

• 申请工作
• 内容创作者任务
• 投资者信息
• 查找产品或服务的文档或规格
• 访问媒体资料和其他公关信息
• 寻找附属公司

Dwell 杂志的页脚包括次要任务的链接

网站地图

网站地图公开了主要导航类别的较低级别的子类别。它有助于：

• 暴露在全球导航层面不明显的潜在主题
• 提高对网站主要内容的认识
• 提醒用户公司的产品

站点地图页脚组件不包括完整的站点地图，除非该站点的页面很少。除此之外，页脚可能会变得笨拙且难以使用。

适合大型站点。







CNN 的页脚包含指向顶级导航和低级类别的链接。

推荐或奖励

在建立权威和信誉时，在页脚突出荣誉可能是一个很好的策略。然而，展示过多的推荐和奖励也可能给客户带来危险信号，给人的印象是公司需要展示推荐，因为它不成熟或稳定。

适合初创公司或品牌知名度较低的公司。

组织内的品牌

在页脚中包含子公司和品牌列表也很有帮助，以加强对组织投资组合下的其他品牌或公司的认识，并帮助用户找到他们的方式。

适合拥有许多子公司或合作品牌的大型跨国组织。

客户参与

用户通常会直接到页脚查找优惠券和促销等信息，或者只是了解公司的销售和产品发布的最新信息。因此，页脚可以包含允许客户与公司保持互动的信息——社交媒体链接（或至少是公司社交媒体帐户的链接）和邮件列表提示。

适合所有类型的网站。

页脚变化

无限滚动和迷你页脚

内容不断加载，因此每个页面的底部都不一致，因此没有页脚部分。但是，页脚中的内容（通常是实用程序导航链接）在右侧栏或更大的扩展全局导航中显示为“迷你页脚”。







http://LinkedIn.com，通常在其他位置提供页脚内容，例如在右栏的底部。

上下文页脚

对于具有多个受众的网站，上下文页脚可以显示可能尚未进入全局导航但对某些用户仍然至关重要的内容。

常见的页脚陷阱

1、多于两级的信息层次结构

解决方案：考虑重新排列内容的优先级，仅显示指向一级和二级类别的链接，而不是整个网站。

2、页脚中的链接名称不明确

解决方案：团队应该尽量遵守传统的、明确的条款。

3、结构或信息层次不明确

• 解决方案： 通过使用指示视觉层次结构的分组或其他视觉设计模式，清楚地传达页脚中项目的信息层次结构。

4、隐藏或难以辨认的页脚

有时，公司选择为页脚链接使用小字体，以容纳所有链接或减少链接分散注意力。更糟糕的是，出于美观的目的，某些网站可能会完全隐藏页脚。







http://Reserved.com

• 解决方案：使用清晰的字体大小和字体颜色并避免使用装饰性字体。最重要的是，不要隐藏或折叠页脚——人们希望它在那里。