网站设计中最重要的位置之一是站点的底部。是的，我们是认真的。它可能不是最吸引人的设计或最令人印象深刻的内容区域，但它却是用户最经常寻找信息的地方。因此，在规划网页设计项目时不要忽视这一区域，这一点非常重要。
你应该添加哪些元素？如何保持底部井井有条并符合网页整体的审美而不显得突兀？你来对地方了。在这里，我们将通过一些在这方面做得比较优秀的网站示例来了解如何创建出色网页底部的技巧。
1.保持设计的简单（Keep the Design Simple）
是的，这是大多数设计项目的关键设计理念之一，但依然值得再次提及。在处理大量信息时，简单的设计很重要，底部可能就是这种情况。坚持使用干净的元素，充足的空间和有目的的组织。尽量避免混乱并考虑哪些元素将使用在底部以及为什么它们应该放置在那里。底部区域的大小通常与网站上的信息量和页面数量有关。
Agra-Culture在底部中使用颜色、图标和文本，但它依然很简单，而且视觉流动性很好。每个链接都很容易查找和点击，绿色框中使用农场图像的微妙细节也是对品牌和设计的点睛之笔。
2.关联信息（Link to Your Information）
任何网站设计中的底部中最重要的两个链接——“关于我们”和“联系我们”。用户会想知道你是谁以及你的公司或品牌是关于什么的。所以，尽量使查找该信息变得容易。许多人还想了解你的团队成员以及如何联系到你（这是一个很重要的内容，确保部分意外丢失了名片的客户在你的网站上可以轻松获取到联系信息）。
这点，Heckford就做的不错。
3.包含基本联系信息（Include Basic Contact Information）
虽然你已经在底部中提供了链接到“联系我们”页面的途径，但在底部中包含直接展示的联系信息也是一个不错的选择。包括主要的电话号码、电子邮件地址和实际地址（合理设置每个元素的交互反馈，以便在单击时可以自动拨号、关联电子邮件或在地图上查找）。
Root Studio在其网页设计中底部部分使用了非常规的设计，但它确实有效。文本很大（以及橙色底部块），内容则是一个直观的联系信息（对于希望用户联系他们进行项目和工作的网站来说，这是一个特别适合的设计方式）。
4.组织好底部栏目（Organize Footer Links）
通过对底部栏目进行有效的分组可以为链接和信息创建良好的组织感。考虑以列或行的形式将几个主要栏目放置在底部，并将每个栏目的关联子栏目放在主栏目标题的下方，以便每个元素都被分类并易于查找。
SugarSync包含多列信息，在底部你几乎可以找到站点中的任何页面入口。通过主栏目的标题，你很容易就可以在相关的位置找到你想要深入了解的页面入口。
5.版权声明（Include a Copyright Notice）
这一小行文字有时候甚至可以成为救命稻草，所以不要忘记它。虽然大多数网站将其作为一条横穿底部区域的单独小版块，但你可以将其设计为更加符合网站或者底部样式的形式。版权声明可以很简短，包括版权符号©，文本通常包括出版年份和版权所有者的名称，如：Copyright © 2005-2022 Clhweb.com All Rights Reserved。
Adventure.com在其网页设计中，保持版权声明简单。该信息被刻意设置为低对比度，因此不会妨碍更重要的其他导航元素。
6.有效的快捷按钮/行动呼吁按钮（Include a Call to Action）
一般我们希望客户在浏览到底部的时候，可以让他们在那里完成一些事情。比如一个为订阅设置的邮箱地址提交表单，或邀请他们在社交媒体上关注你并进行互动。不要忘记这个空间在转化点击方面的价值，特别重要。
Collabogive将大量底部空间用于邮箱的预留功能。不管是标题还是版块上都很容易看到，不仅符合设计，还为用户提供了一种无需加入活动即可进行互动的方式。
7.使用图形元素（Use Graphic Elements）
很多时候，底部只是一个只包含文本信息的块。通过添加徽标或图形元素以增加视觉趣味，但是请注意不要用太多元素使这个小空间过于饱和。大致的思路可以是：与其拼写“在 Facebook/Twitter/whatever 上关注我”，不如为这些社交媒体添加图标来吸引用户。你还可以在链接中使用小的标志性元素，例如地图或电话号码。
Kikk Festival使用在底部空间中突出使用徽标来快速为自己的合作伙伴获得更直接的点击率。
8.注意对比度和可读性（Be Aware of Contrast and Readability）
底部的文本信息通常比较小，这使得考虑文本元素和背景之间的颜色、视觉重量和对比度变得至关重要。每个单词都应该是可读的，考虑使用简单的字体（中等粗细的无衬线字体似乎比较合适）。在文字和背景的选择上使用具有高对比度的颜色，例如带有黑色文本的浅色背景或带有白色文本的深色背景。避免使用不同的颜色或过于华丽的字体。
P53使用一种经典的（也是最易读的）文本和背景组合作为底部信息的展示——黑底白字。
9.始终统一你的设计主题（Maintain Your Design Theme）
网站设计中底部不应看起来像是事后才想到的内容，它应该与网站的整体设计主题相匹配。不管是颜色、样式和图形元素都应该反映整体。所以，从项目一开始就将这个区域纳入整体的考虑范畴中，以避免在设计过程的后期陷入视觉不匹配的境地。
Swwiths Interactive Group使用了一个简单的底部，它与网站的整体外观完全融合，其中一个人坐在办公桌前，上面散落着各种物品。简单的底部显示了相关信息，但是整体上看它属于网站。
10.小，但不要太小（Think Small (But Not Too Small)）
底部本质上包括很多较小的项目，请注意不要太小。文本字号可以比网站主体使用的字号小几个点，图标或图像具体需要满足大小可读（如果你不能分辨图标是什么，那它可能就太小了）。元素的大小应该能够轻松点击，如果用户因为链接太小或太靠近而无法轻松获取或点击，那么它们将无法按预期工作。
虽然CuriousSpace使用了一种非传统的底部样式，但你可以从所使用的字体大小中获得良好的比例感，文本比页面上的所有其他正文文本更小、更细、更轻，但仍然足够大，易于阅读。
11.合理把握空间（Use Plenty of Space）
因为底部区域通常情况下并不会给太大的区域，所以在空间和间距的把控上需要特别注意。在底部各个元素周围以及文本行之间留出足够的空间，足够的间距将使底部区域看起来不会过于拥挤，对点击也将提供很大帮助。由于底部中的许多（并非全部）栏目都链接到其他内容，因此这是提升用户体验的一个重要方面。
Sailing Collective在元素之间在垂直和水平方向都使用了大量空间，它们按类型聚集并且方便点击。
12.警惕太多的元素（Be Wary of Too Many Objects）
虽然使用图形元素和栏目标题是一个好主意，但在恰到好处和太多之间有一条界限。谨慎使用这些元素并用于非常特定的目的。问问自己为什么要使用标题、图标或照片。如果答案是“因为它看起来不错”，请重新考虑。每个元素都应该有一个目的。这将帮助你设计一个可以充分利用可用空间的底部。
从Master & Dynamic的底部就可以看出，少即是多的设计理念。简单的图标和文本足以让你轻松浏览底部内容。
13.营造层次感（Create a Sense of Hierarchy）
就像网站设计中的其他部分一样，底部本质上应该是具有层次的。底部应位于整个网站层次结构的底部（毕竟这是它所在的位置）。而包含在底部中的元素依然需要保持层次结构。最重要的元素（通常是联系信息、号召性用语或站点地图）应该是最突出的。辅助信息，例如版权声明，通常是规模最小的。
Griflan Design Inc.在底部中的设置可以很好的展现这种层次关系，并在通过这种层次引导用户按照他们希望的顺序一步一步完成一些动作。首先，用户可以给他们发电子邮件，如果这不起作用，那么请致电他们，如果这些选项都不起作用，请在社交媒体上关注并进行后续互动。
14.考虑底部的子版块（Consider a Sub-Footer）
你的底部还需要一个子底部吗？考虑使用子底部以进行额外的层级划分（这是一种现在非常流行的做法）。子底部可以是创建一些额外层次结构的好地方，如果底部空间已经过于密集，可以为底部空间添加新的维度，或者只是为有趣的内容提供空间。使用此区域突出显示荣誉或插入号召性用语是比较常用的一种做法。
Smart Passive Income博客在多级底部方面做得较好。首先设置了一个行动号召的版块，然后再是网站链接，然后是带有低对比度的社交媒体子内容，然后是网站免责声明和政策。导航级别提供了页脚的深度，并使其易于浏览和单击。
15.不要在链接下面设置下划线（Don’t Underline All Those Links）
想必这是网站设计中经常会犯的最大错误？在链接栏目下设置下划线。很难想象现在仍然有大量的站点底部带有下划线链接。这种过时的技术不适合现代网页设计。
Baxter of California有一个干净的底部并包含很多链接。由于链接的简单，它看起来并不杂乱。
总结
底部可以说明以及承载网站的很多信息。它可以告诉用户你是谁，你是做什么的，他们可以做什么以及如何浏览你的网页。它还显示了你作为设计师的独特之处，例如对细节的关注和在小空间中合理安排元素的工作的能力。
底部是设计的重要组成部分。关注他，确保包含的信息、设计元素和可用性的正确组合，以在每个网站建设项目中充分利用这个空间。
----图文来自：design shack