[国外文章翻译第7期]

这次，用思维导图整理了整篇文章的知识点，感觉这样可以不会在过多的文字中迷失，也能更容易理解。

摘要：页脚几乎可以在每个网页底部找到，取决于网站的内容类型，通常有很多种形式。无论采取了何种形式，它们的存在都至关重要(并被高度低估)。

页脚基础知识

作为用户体验专业人士，我们倾向于把时间和精力投入到主要任务上。这是因为全局导航、搜索和高优先级的内容都位于页面上方，用户在任何页面的顶部花费的时间都不成比例。因此，出现在页面底部的页脚只能得到最少的时间和资源预算。但是，对于页脚的设计仍然需要注意，因为他们可以极大的提高用户体验。

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

术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。然而，正如我们20年前解释的那样，印刷设计和网页设计的区别意味着，像页脚这样的设计元素从印刷沿用到网页上的时候改变了它们的含义（在网页中页脚变得可以交互）。

过去的网站页脚要么是信息量很少的小公共区域，要么是各种链接的大型倾销场所。视觉上，它们通常包含难以辨认的小字。如今，页脚已经成熟，作为人们在网站上完成各种任务时的一个重要参考点。

人们使用页脚

虽然页脚的关注度低于页面顶部，但它们仍然得到了大量的使用。这是两种最常用到的页脚情况：

1.当用户扫描或阅读页面，找不到他们想要的信息或需要更多的信息时，他们会滚动到页面底部并使用页脚：

1） 第二次被说服的机会

例如，也许用户在阅读完所有细节后决定不注册银行账户，但她仍然对银行机构印象深刻，并希望成为客户。页脚是提醒或告知潜在客户有关公司其它产品的好机会。

2）难以找到内容时的最后手段

有时用户会转到页脚，以获取全局导航中可能不存在的其它选项。例如，那些有兴趣申请电子商务公司工作的人——一个与典型电子商务用户不同的任务——可能会在页脚查找相关信息。

2.用户有意滚动到页脚以查找他们希望在那里出现的信息，比如联系方式、公司详细信息、社交媒体帖子或链接，甚至用来发现网站上的新内容或相关内容。有些用户甚至用页脚来导航：当他们已经滚动到页面底部时，因为已经非常接近页脚，所以他们使用页脚来导航，而不是再回到顶部进行全局导航。

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

虽然满足这些用户场景可能不是网站的最高优先级目标，但是设计一个好的页脚仍然值得努力，因为页脚有出色的可用性特征：它们永远不会妨碍用户在页面上得到更高层次的满足。因此，除了过度设计的页脚可能会延迟页面下载或呈现之外，页脚是用户体验的免费赠品。它可以帮助，但不会伤害。

页脚元素

由于各种原因，网站设计师为页脚选择了许多不同类型的内容。页脚元素可以根据业务和用户目标进行组合。以下是一些常见的页脚组件，示例和推荐使用它们的情况：

1. 实用链接

2. 门垫导航

3.次要任务链接

4. 网站地图

5. 推荐或表扬

6. 组织内的品牌

7. 客户参与（电子邮件简报和社交媒体）

     

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

1.实用链接

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

1）联系信息：公司地址、电话号码和实时聊天的链接

2）客户服务信息

3）隐私政策

4）使用条款

虽然很多网站的顶部都有实用导航，但页脚是用户用来搜索这些特定内容时的地方。用户通常会直接到页脚查找联系信息或找到获得客服支持的方法。无论在页面的顶部是否有这些栏目的实用导航链接，在页脚也会有。（页面顶部的区域仍应被用于类似工具的实用内容，比如搜索、登录/账户信息和语言选择）

用于：所有网站

Clarity Money的页脚保持页面简洁，包括使用条款和隐私政策链接，以及社交媒体账号的链接(更多信息见下文)

J. Crew以链接的形式提供它专用的客服信息，包括Twitter账户、电话号码和支持电子邮件地址

2.门垫导航

就像人们家里的门垫一样，门垫导航就是你打开网站时看到的第一件东西，也是你离开时看到的最后一些东西——也就是说，它同时包含在页面的顶部和底部。当页面很长时（许多现代移动设计都是如此）这个组件非常有用，因为它允许用户快速跳转到站点的不同部分，而不需要滚到主导航。

用于：页面较长的站点，尤其是在页面底部无法使用全局导航的情况下。

United Healthcare使用门垫导航：主要类别显示在顶部导航栏（顶部）和页脚（底部）

3.次要任务

页脚可以包含指向用户感兴趣的次要任务链接。一些辅助任务的示例包括：

1) 申请公司的工作

2) 内容创建者的任务

3) 获取投资者信息

4) 查找产品或服务的文档或规范

5) 访问媒体工具或其它公关信息

6) 寻找公司的附属公司

这些次要任务通常不会出现在全局导航或实用导航中。这种类型的页脚内容在具有多个用户组和不同用户旅程的站点上很常见。

用于：帮助用户找到可能与网站主要目的不直接相关的次要任务内容

比如，Dwell杂志的网站展示了杂志主题之外的类别，包括关于、Dwell杂志、专业人士和商家——可能会使其次要用户群体（媒体和设计专业人士、商家、投资者、广告商，以及潜在员工）感兴趣。

Dwell杂志的页脚包含次要任务(除了阅读文章)的链接

4.网站地图

站点地图样式的页脚组件可以显示全局导航和全局导航中不存在的其它重要页面的组合。与门垫导航不同，它展开了主类别中的子类别。它有助于:

1) 展示全局导航级别没有显示的次级主题

2) 提高对网站主要内容的认识

3) 提醒用户该公司的产品

站点地图页脚组件不包括完整的站点地图，除非网站只有很少的页面（大约25个页面或更少）。除此之外，页脚可能变得笨拙和难以使用。（或者，你可以在单独的页面上提供功能齐全的站点地图，并在页脚中链接到该页面，用户希望在页脚中找到这样的链接）

用于：具有多级信息或子域的大型站点

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

5.推荐或表扬

许多我们的研究参与者都表示，他们会根据该网站获得的奖项和推荐来选择一个网站。当建立权威和信誉时，在页脚突出赞美可能是一个很好的策略。但是，展示太多的奖状和赞美也会给客户一个危险的信号，给人一种公司需要展示称赞的印象，因为它不成熟或不稳定。解决方案就是将此内容添加到页脚。

与你的用户一起进行可用性测试和AB测试，以确定这种策略是否适合你的页脚，以及正确的推荐数量。

用于：初创公司或品牌知名度较低的公司

在其页脚中，Reykjavik Excursions成功的包括了奖项和委员会的认可，以增强其信誉和权威

6.组织内的品牌

有些公司规模庞大，拥有或管理着其它几十家公司。有些使用通用导航来将这些子公司与父公司连接起来。在页脚中包含子公司和品牌列表也可能有所帮助，这样可以增强用户对公司其它品牌和公司的认识，并且帮助用户找到相关的链接。

用于：拥有众多子公司或合作品牌的大型跨国组织

沃尔玛的页脚展示了该公司拥有的其它品牌，如Hayneedle，Jet和Modcloth

7.客户参与

用户通常会直接到页脚查找优惠券和促销活动等信息，或者只是简单了解公司的销售和产品发布情况。因此，页脚可以包括允许用户与公司保持联系的信息——社交媒体链接（或者至少是公司社交媒体账户的链接）和邮件列表注册提示。

在页脚包含一个嵌入式社交媒体订阅部件之前，考虑一下公司在每个社交媒体网站上发布内容的频率。不太活跃的社交媒体账户可能无法保证嵌入式社交媒体订阅源，但仍可能从社交媒体账户中获益。

用于：所有类型的网站都可以使用社交媒体链接；如果使用嵌入式社交媒体订阅部件，网站则需要重点关注视觉或美学（艺术、美容、生活方式品牌货创意空间）

TheGoodTrade.com上的所有页面都有一个大型的多组件页脚，其中包括：（1）邮件列表注册提示，（2）带有Instagram订阅的小部件，（3）链接到社交媒体帐户，（4）次要任务的链接，以及（5）具有版权信息的免责声明

页脚的变化

1.无限滚动&迷你页脚

许多电子商务、娱乐和其它鼓励浏览的网站会选择无限滚动以保持用户留在页面上。内容不断加载，因为每个页面上没有一致的底部，因此没有页脚部分。但是，本应出现在页脚中的内容（通常是使用导航链接）在右栏中显示为“迷你页脚”，或者在更大的、扩展的全局导航中显示。

要使页脚有用，它需要出现在网站的所有页面上。有些站点尝试对静态长度和动态长度页面使用相同的页脚。然而，当用户试图在无限滚动的网站上使用这些页脚时，它往往会变成一个令人沮丧的“打鼹鼠”游戏，用户试图在链接在此消失前尽快点击。相反，如果你打算使用无限滚动，可以考虑在右边栏放置一个迷你页脚，并确保在用户滚动时它和主要内容始终在一起。

用于：具有无限滚动的页面

具有无限滚动的网站（如LinkIn.com）通常在其它位置显示页脚内容，比如右边栏底部

BarstoolSports.com 具有传统上出现在全局导航中页脚的大部分内容

Barstool.com 也有一个页脚，当新内容加载时，它会被取代（在大多数的浏览器中，鼠标悬停在视频上时会显示控件：https://media.nngroup.com/media/editor/2019/01/17/barstool-footer.mp4）

2.富文本页脚

虽然页脚通常在许多页面上保持一致，但有时根据页面上显示的信息自定义页脚会有所帮助。特别是对于拥有多个用户的网站，富文本页脚可以显示那些没有进入全局导航但对一些用户来说还是重要的内容。

例如，Medium.com 主页没有页脚，它使用了无限滚动的文章列表（这个页面像上面推荐的那样在右边栏有一个迷你页脚）。但是，在特定的故事页面，Medium显示基于任务的不同页脚，该页脚将根据浏览者是否是订阅者而变化。

用于：具有不同用户角色的网站（比如“内容创建者”与“内容消费者”或“会员”与“非会员”）

Medium的页脚包含少量相关链接，对未登录Medium账户的人会强调会员权益

常见页脚陷阱（&解决方案）

自20世纪90年代以来，页脚已经经过了漫长的道路，但时至今日，他们仍受制于常见的设计缺陷：

1. 超过两个层级的信息层次结构

包括整个网站地图并不是页脚的答案，尤其是对于大型网站。页脚是一个专用的空间，它应该只用于可以发现的重要信息。正如我母亲曾经很恰当的说过“如果一切都很重要，那就没有什么是最重要的。”

解决方案：考虑重新调整内容优先级，只显示信息层级中的一级和二级类别的链接，而不是整个网站。如果单个较低级别的页面很重要，可以在页脚中显示该特定链接，但不必显示信息架构中的所有信息才能发现它。

2.页脚中的链接名称不清楚（比如，公司信息或帮助 与 联系我们）

许多页脚上臭名昭著的资源链接是网页过去的不幸痕迹之一。

解决方案：团队应该尝试遵循传统的、明确的术语。如果团队不确定那个术语更合适，卡片分类或可用性测试能帮助阐明可能让用户感到困惑的术语。

3.不明确的结构或信息层级

页脚有时可能是孤立链接的“倾倒场”——即，所有与全局导航或次要任务无关的链接。如果页脚没有组织模式，用户要么进行彻底的检查，要么只花很少的时间看页脚。

由于缺乏信息层次，GM页脚没有清晰的结构，这使得扫描或查找内容非常困难

解决方案：通过使用分组或其它视觉设计模式（比如加粗高层级页面链接和正常的低层级页面链接）来清楚的传达页脚中项目的信息层级。

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

有时公司会选择在页脚链接中使用很小的字体，以便容纳所有的链接，或者使链接不那么分散注意力。更糟糕的是，为了美观，一些网站可能会使用动画或手风琴效果来完全隐藏页脚。虽然页脚不是主要导航，但人们仍然使用它并依赖它，所以不要试图隐藏它。

Reserved.com页脚的早期版本使用了手风琴效果，默认情况下会折叠，使其内容很难被发现。

解决方案：使用清晰的字体大小和字体颜色（对比度适中），避免使用装饰性字体。最重要的是，不要隐藏或折叠页脚——人们希望它存在。

结论

页脚是用户迷失时会去的地方。如果我们想留下持久的好印象，重要的是不要忽视页面的底部。毕竟，即使是页面中最普通、最实用的部分也会对用户体验产生重大的影响。

在我们的全日课程Web页面用户体验设计中获取更多的有关性能更佳的网页提示。

资源：Jakob Nielsen & Kara Pernice, 2010, Eyetracking Web Usability, The New Riders

原文链接：https://www.nngroup.com/articles/footers/

PS：有些单词的理解也不知道是否准确，欢迎指正。