原文标题：Informative And Usable Footers In Web Design
原文地址：http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/
作者：Matt Cronin

网站设计中有诸多不同的元素，而它们有机地组合在一起就能够传达信息。一个网站是若要发挥其作用，网页上从顶部到页脚的每一个元素，都应当利于整体的浏览和使用。

在本文中，我们会探讨关于页脚的话题，看看一个优秀的页脚到底是什么样。虽然页脚位于页面的最底层，但这并不意味着你就可以轻视对它的设计。

接下来我们看看页脚包括什么、网站地图的重要性、如何改善可用性和设计的理念及趋势。我们还搜集了50个精心设计的页脚，相信能够激发您的灵感和创意。

页脚包括什么

在研究如何设计页脚之前，让我们先谈谈页脚中常用的元素及其重要性。当然，你不必包揽所有，意见仅供参考而已。

可用性是网站设计最重要的一项。只要在页脚处放上一个网站地图，无论多小，就能使浏览更加方便。这只是经常被忽视的元素之一，但有时却十分有好处。好处之一就是网站地图方便用户浏览。网站地图分类提供了整个网站的详细清单，它告诉用户网站的各式功能并提供详细的链接。

在下面的例子中，已访问的链接用不同的颜色标出。这能使改善网站地图更加实用。

简单的“关于”或者“联系”信息

这对个人网站、商务网站等类似网站十分有用。当我浏览一个网站的时候，我通常都会拉到页脚。把这些信息放在页脚可以很容易地拉近与访问者的距离。

但信息一定要简短。“关于”只要简单的一段话就够了，几句话就足以描述一个网站。至于联系信息，只需邮箱地址和电话号码。完整的“联系”或“关于”页面则用链接来提供。

一份简略的联系表格

许多人在页脚放入联系表，以期取得进一步的交流。这主意也许很好，用户就不必寻找专门的页面便可以与您取得联系。但许多用户都不理会它，因为还不够方便。

看看下面的例子。在页脚中，同时提供了联络资料以及联系方式。这份表格形式简单，只有姓名、电子邮件地址和留言等项目。

回到页首的链接

另一个常见的元素就是“回到页首”链接。当用户滚动页面到页脚寻找信息时，谁也不想再一路“滚”回去。当然，他们可以使用键盘上的“Home”按钮（但也不是所有键盘都有），但是大多数用户都不知道这个功能。“回到页首”的链接细节虽小，却能大大提高可用性。此链接通常放在略高于页脚的地方或页脚的底部。

完整网站地图的链接

有时候，你无法把所有页面都放进页脚的网站地图。这时，你可以在页脚放一个浓缩版的地图，然后在旁边添加一个链接，到完整的网站地图。

页脚样式

良好的样式对于任何网站设计都是必不可少的。它改善的不仅仅是外观，而且是网站的内容的视觉效果。以下几个小提示希望您能牢记在心。

表现层次

优秀字体排印的重要性同样不可忽视。一个好的页脚应该不仅要干净，而且要方便浏览。用户应当能够一眼扫过所有信息。分栏布局和字体排印都有助于使网页更易于浏览。

最重要的是，要表现出内容的层次。看看下面的截图。请注意，每栏的开头就是强烈而突出的标题。然后间隔一段距离再显示正文。标题是不可或缺的，因为它吸引用户，并告诉人们这一栏有什么。这一细节可不能忽视。

UX Booth 的页脚包括版权信息（标配之一）、以及其它信息的链接。每条信息的相对独立。

良好的列表样式

与良好的字体排印一样，设计良好的列表样式对于网站地图也非常重要。间距乃是本文的重要主题之一，所以就从它开始吧。适当掌控列表项目中的间距，有助于改善易读性、集中焦点，因此它也是必不可少的。不管是网站地图还是其他什么列表都是如此。此外，分栏的标题要比其它列表有更大的间距，以便更好地体现层次。

边界可用于的独立出内容。看看下面的例子，其中过渡的地方（两个单像素实线）被用来分隔单独的项目。过渡看上去非常棒，而且使列表更加明了。另一个趋势是用虚线分隔项目，比如第二张截图这样，另见下文“简单的多栏布局”一节。

相比之下，看看下面的例子。Berliner-Philharmoniker.de 使用了超大的页脚来显示各种各样的导航选项；但列表样式却不够好：看上去很生硬，有的链接占了两行，导致很难用间隔区分清两个相近的链接。

空白是关键

我们在本文中已经多次提到空白，因为它是页脚布局的决定性因素。现在我们来详细地说说空白。

为什么我们要留出空白？在页脚布局中，空白引导用户浏览每一块内容，突出重点、提高阅读体验。注意，空白不一定就是白色的，只是说留出没有内容的空间。

不是只有分栏需要用空白间隔开。页脚的顶部与内容间、内容与底部间都，需要一定的填充。下面是 Media Temple 的页脚。为了表示一定数量的空白是多少、在哪里添加空白，我们把每个区域都标了出来。

把页脚独立出来

如果你预先浏览了本文的这些截图的话，你会发现每个独特的页脚都出现在网站的不同位置。页脚往往与其它地方使用不同的颜色。就比如在这张截图中，页脚的背景颜色就与主体内容的背景颜色不同。

页脚的背景通常更暗一点。有的则用图形或是插图作背景。Kris Colvin（即截图所示）就很好地将页脚独立出来。翻折的平铺墙纸看起来非常棒，而且非常契合网站的气氛。

博客页脚

还有一些其它类型的信息博客也会用到。以下这几类信息也常常出现在博客的页脚。

标签云对于博客也非常好用，特别是有很多繁杂内容的。这提供了另一种查找信息的方式。但是标签云会占用大量的空间。有些人把标签云放在侧边栏，但侧边栏通常没有足够的空间来容纳这么多的文字，特别是一些比较大的标签云。把标签放在页脚可能效果更好。这样，它们就和在侧边栏一样出现在每一个页面上，而且还不妨碍其他内容。

MacTalk 则使用标签列表而非标签云，来显示最常用的标签。

关于或联系信息

我们谈过了它们的重要性，其中包括“关于”信息放在页脚，对于企业网站或其它类似的网站的作用，那么对于博客又怎样呢？这不是通常的做法但也并不少见。以下是 Web Designer Wall 的截图，其中就有一小段关于。

Flickr Photostream

个人博客中非常流行的一个元素就是 Flickr photostream。同样的，侧边栏没有空间，所以最好是放在页脚。你也可以在有 Flickr Photostream 博客中看到，它们大都在页脚。

资源链接和友情链接

最后，你会经常看到页脚有资源链接和友情链接。同样的，它们也会妨碍其它内容，而且很容易找到。

这个网站有一些有趣的链接，其中有些对用户非常有用。

页脚与网站地图布局

布局决定了信息的呈现方式，所以也总是任何设计的重要组成部分。在本节中，我们将谈谈页脚与网站地图搭配布局的几个关键之处。

简单的多栏布局

搭配页脚的最好的方式就是用一个简单的多栏布局。大部分页脚都有三到四栏。下面的这个页脚就是用分栏显示网站地图的范例。所有的链接经过分类后，都用独立的一栏来显示。它们的间距也恰到好处。

Psdtuts+ 的页脚中有很多信息，包括版权信息。在“Write a Tutorial” 的摘要中，链接才提供给用户完整的文章地址。页脚的对比度很突出，边框也很好得将页脚与文章内容隔离开。这个简单的多栏布局看起来非常不错。

另一个例子则使用了网格布局，这里要说的就不是网站地图了。由于是博客的页脚，所以它包括了标签、最新文章等等。在这里同样可以发现，充足的空白对于布局是多么重要。

独立分栏

留出空白是实现单栏布局的最好方式，因为这么做十分简单，而且能够集中用户的注意力到这一栏中。当然，也有一些设计师提出了其它方法，比如单实线、一个过渡或垂直的虚线。你还可以添加背景，利用不同的色彩或图形来制造对比。

Digg 的页脚几乎无所不包，却也组织得非常有序。利用了空白和单像素线来独立分栏。

将链接分类

对于超大的网站地图来说，这一点非常重要。如果没能很好地分类的话，网站地图就会显得显得杂乱无章，不利于浏览。之所以使用网站地图不就是希望它能改进浏览体验吗？但是，如果使用不当，就成了摆设。

苹果公司在这一点上做得几近完美。其实，苹果的网站大到要在网站地图中划分好几大部分。每一部分（或产品）在页脚都有其专属的网站地图。下面的截图就是 Mac 的产品页面，网站地图中罗列了所有用户可能想要的产品。苹果也非常好的将其按产品类型分类。例如， Mighty Mouse 就出现在“附件”中。如果这些链接都在同一个列表中，用户就很难找到想要的产品。