几乎在每一个网站的底部都可以看到页脚这个组件，根据网站内容的不同会有很多形式。无论使用哪种表现形式，它们的存在都至关重要（而且通常被低估了）。
页脚基础
作为UX专家们，我们倾向于将时间和精力用在首页上方的内容部分。因为全局导航，搜索以及高优先级别的内容都在页面上方，并且用户更喜欢将大量时间花费在页面顶部。因此，出现在网页底部的页脚会缩短用户体验时间和资源预算。然而，你还是应该关注页脚，因为它们可以极大地增强用户的体验。
定义：一个网站的页脚（footer）是位于每个网页底部的一个区域，在主要内容的下方。
术语“页脚”来自印刷领域，是在文档的所有页面上看到的统一设计元素。然而，正如我们20年前所解释的那样，印刷设计和网页设计之间的区别意味着，像页脚这样的设计元素，当它们从印刷品移植到在线产品时，会改变它们的含义（在这种情况下是通过变得可操作来实现改变的）。
过去的网站页脚要么是信息很少的小型实用程序区域，要么是带有一大堆杂七杂八链接的大型倾销场所。在视觉上，它们通常包含难以辨认的极小文本。今天，页脚已经很成熟了，现在已经成为人们在网站上完成各种任务的重要参考点。
人们使用页脚
虽然页脚的关注度不如页面顶部，但它们仍然可以得到相当多的使用。这些是页脚最常见的两个使用场景：
-
用户扫描和阅读网页的时候要么没有找到他们想要的，要么需要获得更多的信息。他们滚动页面到底部并使用页脚：
第二次被说服的机会
例如，用户可能在阅读完所有细节后决定不想注册银行账户，但她仍对银行机构留下深刻印象，并希望成为一名客户。页脚是提醒或教导潜在客户有关公司其他产品的好机会。难以找到内容的最后手段
有时候用户会转到页脚以获取没有出现在全局导航中的额外信息。例如，那些对申请电商公司职位（一个与典型点商务客户不同的任务）感兴趣的用户可能会去页脚查找相关信息。 -
用户有意滚动到页脚去查找他们希望在那里出现的内容，比如联系信息，公司详细信息，社交媒体帖子或链接，甚至是去发现一些网站上新的或者相关的内容。一些用户甚至使用页脚进行导航：当他们已经滚动到页尾的时候，由于页脚就在那里，他们就近使用页脚而不是再滚动回顶部的全局导航。
在这两种情况下，无论页脚中的内容是什么，该页脚都应该是一致的，可预测的，并且易于发现的。在确定要提供哪种类型的页脚以及在页脚中提供哪些内容时，请考虑这些用例，网站的目标以及页脚的目标。
虽然满足这些用户场景可能不是网站绝对优先考虑的目标，但设计一个好的页脚仍然是值得努力的，因为页脚具有特别绝妙的可用性特征：它们永远不会妨碍那些满足他们在页面上更高需求的用户。因此，除了可能延迟页面下载或渲染的过度臃肿的页脚之外，页脚对用户体验来说是锦上添花。它可以起到帮助的作用，但是它不会损害到用户体验。
页脚元素
网站设计师出于各种原因为其页脚选择了许多不同类型的内容。页脚元素可以根据业务和用户目标进行组合。以下是一些最常见的页脚组件，示例和推荐使用它们的情景：
- 实用链接
- 门垫式导航
- 辅助任务链接
- 网站地图
- 评价或奖励
- 机构内品牌
- 客户参与 (邮箱订阅以及社交媒体)
Uscreen.tv使用了多种形式的页脚内容，例如：（1）辅助任务链接（2）使用内容 以及 （3）社交媒体链接
实用链接
大多数网站的页脚至少包括一个实用工具导航，指向：
- 联系信息：公司地址，电话号码以及在线聊天链接
- 客户服务信息
- 隐私条款
- 使用条款
虽然许多站点的实用工具导航位于其站点的最顶层区域，但页脚是用户搜索这些特定项目时会查看的地方。用户通常会直接访问页脚以查找联系信息或找到获得客户支持的方法。无论您是否在页面顶部设有这些实用工具链接，请始终将它们包含在页脚中。（页面顶部的实用工具区域仍应用于类似工具的实用程序，例如搜索，登录/帐户信息和语言选择。）
适用: 所有网站
Clarity Money网站的页脚非常简单，包括条款使用和隐私政策的链接，以及社交媒体账号的链接（详见下面的介绍）
J. Crew网站的联系信息以链接形式出现，包括客户服的Twitter账号，电话号码以及一个支持邮箱地址。
门垫式导航
就像人们家中的门垫一样，门垫式导航是你到达网站时看到的第一件事，也是你离开时看到的最后一件事。也就是说，它同时包含在页面的顶部和底部。因此，页脚可以包括全局导航。当页面很长时（例如许多现代移动设计的情景）该组件是非常有用的，因为它允许用户快速移动到站点的不同位置而无需滚动返回以到达主导航。
适用：页面很长的时候，尤其是在页面底部无法使用全局导航的情况下。
United Healthcare使用了门垫式导航: 主要分类在顶部导航和页脚都有显示
辅助任务
页脚可以包含指向用户感兴趣的辅助任务的链接。辅助任务的一些示例包括：
这些辅助任务通常不会在全局导航或者实用工具导航里面出现。这种类型的页脚内容在具有不同用户旅程的多个用户组的站点上很常见。
适用: 帮助用户查找可能与网站主要目标无直接关系的辅助内容
例如，Dwell杂志的网站展示了杂志主题之外的类别，包括关于，Dwell杂志，专业人士和商家。这些可能使其次要用户群感兴趣：媒体和设计专业人士，商家，投资者和广告商（以及潜在员工）。
Dwell Magazine的页脚包括辅助任务的链接 (除了阅读文章)
网站地图
网站地图样式的页脚组件展示了全局导航和没有在全局导航中出现的其他重要页面的组合。与门垫式导航不同，它公开了主要类别的较低级别子类别。它有助于：
- 公开在全局导航级别下不明显的基础主题
- 提高对网站主要内容的认识
- 提醒用户公司所提供的产品或服务
网站地图页脚组件不是要包括完整的网站地图，除非该站点具有很少的页面（大约25个页面或更少）。超过25个页面的话，页脚可能会变得笨拙且难以使用。（或者，您可以在单独的页面上提供功能齐全的网站地图，并在页脚中链接到该页面，这是用户希望找到此类链接的位置。）
适用：具有多级信息或子域的大型站点
CNN的页脚包含指向顶级导航和较低级别类别的链接。
评价或奖励
我们的许多研究参与者都表示有动力根据该网站获得的奖项和推荐信选择一个网站。在建立权威和信誉时，突出页脚中的荣誉可能是一个很好的策略。然而，显示太多的推荐和奖励也可能给客户带来一个危险信号，给人的印象是公司因为不成熟或不稳定需要通过展示推荐来弱化它。解决方案是将此内容添加到页脚。
针对你的用户运行可用性测试和A/B测试来决定这种策略是否合适你的页脚，以及使用评价的合适数量。
适用：初创公司或品牌知名度较低的公司
Reykjavik Excursions网站在其页脚中成功地包含了获得认可的奖项和委员会，以增强信誉和权威。
机构内部品牌
有些公司规模庞大，他们拥有或主持其他几十家公司。有些使用通用导航将这些子公司与母公司联系起来。在页脚中包含子公司和品牌列表也会有所帮助，以加强对属于组织投资组合范围的其他品牌或公司的认识，并且还可以帮助用户轻松找到他们。
适用：拥有许多子公司或合作品牌的大型跨国组织
沃尔玛的页脚展示了公司拥有的其他品牌，如Hayneedle，Jet和Modcloth。
客户参与
用户通常会直接访问页脚以查找优惠券和促销信息，或者只是了解公司的销售和产品发布情况。 因此，页脚可以包括允许客户与公司保持联系的信息，如社交媒体链接（或者至少是公司社交媒体帐户的链接）和邮件列表注册提示。
在页脚中包含嵌入式社交媒体Feed小部件之前，请考虑公司在每个社交媒体网站上发布的频率。 不太活跃的社交媒体帐户可能无法保证嵌入式社交媒体订阅源，但仍可能从链接到社交帐户中受益。
适用：所有使用社交媒体链接类型的网站; 如果使用嵌入式社交媒体Feed小部件，则重点关注视觉或美学（艺术，美容，生活方式品牌或创意空间）
TheGoodTrade.com网站上的所有页面都有一个大型的多组件页脚，其中包括：（1）邮件列表注册提示，（2）带有Instagram Feed的小部件，（3）社交媒体帐户的链接，（4）链接到次要任务，以及（5）带有版权信息的免责声明。
页脚的差异
无限滚动&迷你页脚
许多电子商务网站，娱乐网站和其他鼓励浏览的网站选择使用无限滚动以保证用户始终在页面上。内容不断加载，因此每页都没有一致的底部，也就没有页脚部分。但是，页脚中的内容（通常是实用工具导航链接）应该在右栏中显示为“迷你页脚”，或者在一个更大，带有扩展功能的全局导航中显示。
为了使页脚有用，它需要出现在网站的所有页面上。有些网站尝试对静态长度页面和动态长度页面使用相同的页脚。然而，当用户试图在具有无限滚动的网站上使用这些页脚时，它经常变成令人沮丧的打地鼠游戏，用户试图在链接再次消失之前尽快点击链接。相反，如果你打算使用无限滚动，请考虑在右侧栏放置一个迷你页脚，并确保用户在滚动页面时固定住并与主要内容保持同时出现。
适用：使用无限滚动的页面
像Linkedin.com这样使用无限滚动的网站，通常会将页脚内容放到别的地方，比如右侧栏的底部。
BarstoolSports.com将传统上出现在页脚的内容放到了全局导航中。
上下文页脚
虽然传统上页脚在许多页面会保持一致，但有时根据页面上显示的信息不同自定义页脚会很有帮助。 特别是对于具有多个受众的网站，上下文页脚可以显示未进入全局导航，但对于某些用户可能仍然至关重要的内容。
例如，Medium.com的首页没有页脚；页面使用无限滚动显示文章列表。（页面有一个如前所述的放置在右侧栏的迷你页脚。）但是，在特定文章的页面上，Medium显示基于任务的页脚，该页脚根据查看者是否是订阅者而变化。
适用：具有不同用户角色的网站（例如“内容创建者”与“内容消费者”或“会员”与“非会员”）
Medium的页脚包括几个相关文章的链接以及强调未登录会员账号的Medium会员权益。
常见页脚陷阱（和解决方案）
自20世纪90年代以来，页脚已经走过了漫长的道路，但直到今天，它们仍然存在常见的设计陷阱：
-
超过两个级别的信息层次结构
特别是对于大型网站来说，包括整个网站地图不是你的页脚解决方案。页脚是一个专用的不动产，应该只用于可被发现的重要信息。正如我的母亲恰如其分地说的那样，“如果一切都很重要，那等于什么都不重要。”- 解决方案：考虑重新设置内容的优先级，并仅显示信息结构中第一级和第二级类别的链接，而不是整个站点。如果单个较低级别的页面足够重要，可以设定页脚中的特定链接，但不必显示信息层次结构的所有级别以使其可被发现。
-
页脚中不清晰的链接名称 (例如 公司信息 或 帮助 以及 联系我们)
许多页脚上臭名昭著的资源链接是过去页脚的不幸残余之一。- 解决方案：团队应该努力遵守常规的，明确的术语。如果团队不确定哪个术语更合适，那么卡片或可用性测试可以帮助阐明可能使用户感到困惑的术语。
-
不清晰的结构或信息层级
页脚有时可能是孤立链接的“倾倒场”，也就是说，似乎与全局导航或次要任务无关的链接。如果页脚没有组织模式，用户要么进行彻底的审核，要么花很少时间查看页脚。- 解决方案： 通过使用视觉层次结构的分组或其他视觉设计模式（例如，粗体高级页面链接和正常粗细的低级页面链接），清楚地传达页脚中项目的信息层次结构
由于缺乏信息层次，GM的页脚没有清晰的结构。此设置使扫描或查找内容变得困难。
-
隐藏或难以辨认的页脚
有时，公司为页脚链接选择使用较小的字体，以便容纳所有链接或使链接更少分散注意力。更糟糕的是，一些网站可能会使用动画或手风琴功能来完全隐藏页脚以达到美观目的。虽然页脚不是主要导航，但人们仍然使用它并依赖它，所以不要试图隐藏它。
Reserved.com页脚的早期版本使用了手风琴功能，默认情况下会折叠，使其内容难以找到。
Reserved.com页脚的早期版本使用了手风琴功能，默认情况下会折叠，使其内容难以找到。
解决方案： 使用清晰的字体大小和字体颜色（具有良好的对比度）并避免使用装饰字体。最重要的是，不要隐藏或折叠页脚，人们希望它的存在。
总结
页脚是用户丢失时所去的地方。如果我们想留下持久的良好印象，不要忽视页面的底部的至关重要性。毕竟，即使是界面中最平凡，最实用的部分也会对用户的体验产生最大的影响。
（编译完）
英文原文：https://www.nngroup.com/articles/footers/
原文作者：Therese Fessenden
原文译者：Twitter / Linkedin / 微博
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
image
网友评论