原标题：页脚设计没你想的那么简单

翻译：cc 审校：wll 终审：宝珠 作者：Therese Fessenden

摘要：页脚几乎可以在所有网页的底部找到。他们通常采用多种形式，具体取决于网站内容的类型。无论采用何种形式，他们的存在都是至关重要的（且被严重低估了的）。

1. 页脚基础知识

作为UX专家，我们倾向于将我们的时间和精力倾注在页面上方。这是因为全局导航、搜索以及优先级高的内容都位于页面上方，而且用户倾向于花更多的时间在任意页面的顶部。结果就是，出现在页面底部的页脚，只能得到较短的UX时间和较少的资源预算。然而，你仍需注意页脚，因为他们能极大的改善用户体验。

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

“页脚”一词来源于印刷界，在那里，“页脚” 是一个能在文档所有页面底部都能看到的统一的设计元素。然而，正如我们20年前解释的那样，印刷设计和网页设计间的区别，意味着设计元素，诸如页脚，当它们从印刷界被移植到电子版时，改变了他们存在的意义（在这个例子里是讲得通的）。

在过去，网页页脚要么是展示很少信息的“小型公用区域”，亦或是充斥杂乱链接的“大型垃圾场”。视觉上，他们通常包含难以辨认的微小文本。而今，页脚设计已经成熟，他们现在成为人们在网站上完成各种任务的重要着力点。

2. 人们使用页脚

虽然页脚的关注度远低于页面上方，但是他们仍得到了大量的使用。这里有两个最常见的使用页脚的案例。

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

1. 再次被“说服”的机会 例如，也许用户在阅读了所有细节后，决定不想注册银行账户，但是她仍对银行机构印象深刻并希望成为客户。页脚是给潜在客户提醒或传递公司其他有关产品的好机会。
2. 找寻“不好找内容”的最后手段 有时，用户会转到页脚寻找那些可能没有在全局导航中呈现的更多选项。举个例子，那些有兴趣求职电子商务公司的人（他们与电商目标用户明显不同），可能会到页脚寻找相关信息。

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

在这两个案例中，无论页脚包含什么内容，他都应“保持一致”、“可预测”且“易发现”。当决定在页脚中使用何种页脚类型以及提供何种内容时，请考虑到这些使用案例、您网站的目标及页脚目标。

虽然对于一个网页来说，满足这些用户场景并不是绝对优先级高的目标，但是设计一个好页脚仍然是一项值得努力的工作。因为页脚具有一项特别奇妙的可用性特征：他们将永远不会妨碍那些在页面上获得更高需求的用户。因此，除了过度膨胀的页脚会延缓加载和呈现，页脚是对用户体验的无成本补充。百益而无一害。

3. 页脚组件

网站设计师因为各种原因选用各种各样的内容作为页脚。页脚元素可以根据业务目标和用户目标进行组合。以下是一些最常见的页脚组件、示例以及推荐用法：

• 公用链接（Utility links）
• 门垫式导航（Doormat Navigation）
• 次级任务（Secondary-task links，针对次级用户的需求）
• 网站地图（Site map）
• 客户褒奖或荣誉奖项（Testimonials or awards）
• 公司子品牌（Brands within the organization）
• 客户互动（Customer engagement，邮件营销或社交媒体）

图1：Uscreen.tv公司使用了多种页脚内容，如（1）次级任务（2）公用链接（3）社交媒体链接

3.1 公用链接（Utility links）

绝大多数网站，都倾向于在页脚中至少包含以下链接：

• 客户服务信息
• 隐私政策
• 使用条款

用于：大部分站点

图2：Clarity Money网站的页脚仅包含“使用条款”、“隐私条款”及“社交媒体账号”几个链接来保持简洁。

3.2 门垫式导航（Doormat Navigation）

就像家用的门垫，门垫式导航都是你进入家门（网站）第一眼看到的以及你离开时最后一眼看到的东西——也就是说，它既出现在页顶也出现在页脚。因此，页脚可以包含全局导航。当页面很长时，这个组件是非常有帮助的（正如现在流行的移动端设计正是如此），因为它允许用户快速跳转到网站的其他页面，而无需再回滚动到主导航栏。

用于：有长页面的网站，特别是当页面底部无法使用全局导航时。

图4：United Health网站使用门垫式导航：主导航同时显示在顶部和页脚。

3.3 次级任务（Secondary-task links，针对次级用户的需求）

页脚也可以包含针对次级用户（非主流用户）感兴趣的次级任务链接。次级任务的一些示例如下：

• 求职招聘
• 内容创建者的相关任务
• 获取投资者信息
• 查找产品规格或服务的文档
• 获取媒体工具包和其他公关信息
• 查询关联公司

这些次级任务通常不会在全局导航或公用链接里出现。这种类型的页脚往往出现在多个用户群和多个用户旅程的网站里。

用于：帮助用户找到与网站内容并不直接相关的次级信息

图5：Dwell Magazine的页脚包含了次要任务链接（而非用于阅读的文章列表）

3.4 网站地图（Site Map）

网站地图样式的页脚组件展示了全局导航和全局导航未能展示的其他重要页面的组合。与门垫式导航不同，它展示主菜单下的低层级的子菜单。它有助于：

• 露出那些在全局导航层级上并不显眼的子菜单
• 增强对网站主内容的认知
• 提醒用户公司提供的一切产品和服务

网站地图式页脚组件并不包含完整的网站地图，除非整站页面很少（少于25页）。否则，过长的页脚会带来笨拙且难以使用的风险 。（或者，您可以在单独的页面上提供功能齐全的网站地图，并在页脚中链接到该页面，用户希望在该页脚中找到这样的链接。）

用于：拥有多级信息或子域的大型网站。

图6：CNN网站的页脚既包含顶级导航，也包含低一级链接。

3.5 客户褒奖或荣誉奖项（Testimonials or awards）

在我们的许多研究中，参试者纷纷表示：网站提供的客户褒奖和荣誉奖项有助于激发选择动机。借助页脚高亮显示（突出）背书是建立网站权威和信誉的好策略。然而，过度的褒奖和奖项可能会使得用户变得警惕，给人留下该公司由于不成熟或不稳定而急需”被推荐”的印象。这时，还是考虑把这些内容加在页尾吧。

邀请用户参加可用性测试和A/B测试来决定这个策略是否适合你的页脚，以及合适的“背书”数量是多少。

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

图7：在Reykjavik Excursions网站的页脚中，通过呈现获得的奖项和入围的榜单成功增强了信誉和权威性。

3.6 公司子品牌（Brands within the organization）

一些公司规模如此之大，以至于它们拥有或管理着数十家其他公司。有些公司会使用通用导航将这些子公司与母公司联系起来。在页脚设定一系列品牌子链接也可能会有所帮助，这有助于增强子公司及品牌的认知度，并能帮助用户找到他们想要的。

用于：大型的、拥有很多子品牌或合作品牌的公司。

图8：沃尔玛网站的页脚陈列了公司拥有的其他品牌，如Hayneedle、Jet和 Modcloth。

3.7 客户互动（Customer engagement，邮件营销或社交媒体）

用于：使用社交媒体的所有类型的网站；使用内嵌社交媒体反馈组件的的网站，特别强调视觉和美感（艺术，美容，生活方式品牌或者创意空间）的网站。

4. 页脚多样性4.1 无限滚动和迷你页脚

很多鼓励用户浏览的电商、娱乐和其他网站选择无限滚动方式，促使用户留在当前页面上。由于内容不断加载，这些页面没有固定的底部，所以也没有页脚部分。然而，原属于页脚的内容（一般是公用导航链接）将以“迷你页脚”的形式在页面右边侧栏或者是在更大的扩展全局导航中呈现。

为了使页脚起作用，它必须在网站所有页面显示。一些网站试图将相同的页脚用于静态页面和动态长度页面。然而，当用户尝试在无限滚动的网站上使用这些页脚时，就会常常变成一场扫兴的“whack-a-mole”［打地鼠］游戏，用户需要在页面的链接消失前尽快地点击它们。相反，如果你准备使用无限滚动，请考虑将一个迷你页脚放在右边栏并且确保当用户滚动时它一直和主要内容黏在一起，保持不动。

用于：无限滚动的页面。

图10：拥有无限滚动的网站，如linkedin领英网站，通常在其他位置（如右边栏的底部）展示页脚内容。

图11：BarstoolSports网站把原本出现在页脚里的内容放在了全局导航

视频： https://media.nngroup.com/media/editor/2019/01/17/barstool-footer.mp4

barstool网站也有一个随新内容加载而出现的页脚。

4.2 与情境相关的页脚

一般而言，页脚在不同页面上要保持一致，但有时针对当前页面呈现的内容自定义页脚也许会有所帮助。特别是对于具有多个用户群（受众）的网站，与情境相关的页脚能够显示全局导航未能显示但对一些用户来说仍至关重要的内容。

例如，medium网站首页并没有页脚，页面显示无限滚动的文章列表。（如4.1所述，该页面有一个右侧迷你页脚。）然而，在特定文章页面上，Medium会显示一个任务导向的页脚，该页脚会根据读者是否注册而显示不同的内容。

用于：有多个用户群的网站（如，“内容创建者”vs“内容消费者”或“会员”vs“非会员”）

图12：Medium网站的页脚很少包含与文章相关的链接，而是针对未注册会员的用户强调Medium的会员权益。

5. 常见页脚陷阱（和解决方案）

页脚从20世纪90年代使用至今，然而时至今日，仍有诸多常见陷阱困扰页脚的设计：

5.1 超过两层级的信息结构

特别是针对大型网站，包含全站地图并非页脚设计的合适解决方案。页脚是一个专用的不动产（不会变化），仅用于那些应该被发现的重要信息。恰如我母亲说的那样 :“如果每件事都重要，那就什么都不重要。”

解决方案：考虑重新排布内容的优先级，并且在IA（信息架构）中只显示第一级和第二级类别的链接，而不是整个网站。如果某个较低层级的页面足够重要，请在页脚中显示该特定链接，但是你无需显示信息层级的所有层次来使它易被发现。

5.2 页脚中的链接名称不清晰（例如 Company Info或 Helpvs Contact Us）

这篇文章里面罗列的诸多“反人类”的资源链接名称成就了往昔页脚设计的糟糕遗迹。

解决方案：团队应该努力坚持传统的、清晰的术语。如果团队不确定哪个术语更合适，卡片分类或可用性测试可以帮助弄清楚哪些术语可能会让用户困惑。

5.3 结构或信息层级不清晰

页脚有时可能变成孤立链接的“垃圾堆”，也就是说，这些链接似乎与全局导航或次要任务无关。如果页脚没有有效的组织模式，就会导致用户要么需要耗费巨大精力查找，要么很少查看页脚。

解决方案：通过使用分组或其他指示视觉层次结构的视觉设计模式（例如，给高层级链接加粗，让低层级链接保持常规样式），清晰传达页脚的信息层级。

图13：GM通用汽车官网的页脚因为缺乏信息层级而没有清晰的结构。这种设计让浏览或查找内容变得十分困难。

5.4 隐藏或模糊的页脚

有时一些公司为页脚链接设定较小的字号，以便容纳所有链接或使链接不过分吸引。更糟糕的是，某些站点可能出于美学目的而使用动画或手风琴模式完全隐藏页脚。即使页脚不是主导航，人们仍然会使用并且依赖它，所以不要试图隐藏它。

解决方案：请使用足够清晰的字号大小和字体颜色（具有适当的对比度），并避免使用装饰字体。最重要的是，不要隐藏或折叠页脚，因为人们期望它就在那儿。

图14：Reserved网站的页脚在较早版本中采用了默认情况下折叠的手风琴模式，导致很难发现其内容。

图15：Reserved网站的页脚在较早版本中采用了默认情况下折叠的手风琴模式，导致很难发现其内容。

结论

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

https://www.nngroup.com/articles/footers/（2019.02.24）

版权声明

1.本文版权归：UXRen翻译组所有；

2.转载须注明出处及译者信息，并保留UXRen二维码；

责任编辑：