创建出色网站页脚的 15 个技巧

2023/12/7

页脚是网站上最重要的位置之一。是的,认真的。它可能不是最伟大的设计或最令人印象深刻的内容的领域,但它是用户经常查找信息的地方。因此,在规划网页设计项目时不要忽视这一领域,这一点至关重要。

但你应该包括哪些元素呢?如何使页脚井井有条并符合您的整体审美而又不显得突兀?您来对地方了。在这里,我们将通过一些做得很好的网站的示例来了解创建出色页脚的技巧。

1. 保持设计简单

页脚

是的,这是大多数设计项目的关键之一,但值得立即说明。当处理大量信息时,简单的设计很重要,页脚可能就是这种情况。坚持干净的元素、充足的空间并有目的地组织。尽量避免混乱,并考虑哪些元素将出现在页脚中以及为什么它们应该在那里。页脚大小通常与网站上的信息量和页面数量有关。

Agra-Culture在页脚中使用颜色、图标和文本,但它很简单且流畅。每个链接都很容易点击,绿色框中农场图像的微妙细节是一个很好的接触。

2. 链接到您的信息

页脚

任何网站页脚中最重要的两个链接都位于“关于我们”和“联系我们”页面。用户会想知道您是谁以及您的公司或品牌是什么。使查找该信息变得容易。许多人还想了解您的团队成员以及如何联系他们。(这是一个重要的工具。许多人丢失了名片,并会返回您的网站以检索该联系信息。)

Heckford提供了大量公司链接、社交媒体以及有关他们工作的信息。

3. 包含基本联系信息

页脚

虽然您应该链接到完整的“联系我们”页面,但在页脚中包含相关联系信息也很好。包括主要电话号码、电子邮件地址和实际地址。(设置每个元素以便在单击时自动拨号、发送电子邮件或地图的奖励积分。)

Root Studio创建的页脚几乎与您想到“页脚”时想象的一切相反,但它确实有效。文本很大(以及包含文本的框),并且可以归结为超级简单的联系信息列表。(对于希望用户就项目和工作联系他们的网站来说,这是一个有影响力的设计概念。)

4. 组织页脚链接

页脚

像页脚项目这样的分组可以为链接和信息创建良好的组织感。考虑几列(或多行)相关信息,例如联系人、链接、服务、社交媒体和最热门页面的部分。将每个部分放在标题下方,以便每个元素都易于查看和查找。

SugarSync包含多列信息,可轻松访问页脚信息。通过“产品”、“公司”、“了解更多”和“与我们联系”标题,可以轻松找到您接下来要使用的网站部分。

5. 包含版权声明

页脚

这一行小小的文字可以成为救星。别忘了。虽然大多数网站将其作为屏幕底部的单行包含,但您可以将其设计为更加集成到页脚的其余部分。版权声明可以是书面形式或包含小的圆形“c”符号。文本通常包括出版年份和版权所有者的姓名。多个版权声明可以解释内容和设计(对于部分由第三方创建的网站)。

Adventure.com保持简单,在屏幕右下角有版权声明。该信息采用低对比度类型,因此不会妨碍更重要的页脚导航元素。

6. 包含号召性用语

页脚

用户导航到页脚后,让他们在那里做一些事情。添加一个框以注册电子通讯或邀请他们在社交媒体频道上关注您。不要忘记这个空间在转化点击次数方面的价值。

Collabogive专门为“加入我们的时事通讯”提供了大量的页脚空间。这种号召性用语很容易看到,符合设计,并为用户提供了一种无需参加活动即可进行交互的方式。

7.使用图形元素

页脚

很多时候,页脚只是一块文字。添加徽标或图形元素以增加视觉趣味。只是要小心,不要让太多的元素让这个小空间超载。可以这样想:不要拼出“在 Facebook/Twitter/其他网站上关注我”,而是包含这些渠道的图标。您还可以使用小图标元素作为链接,例如地图或电话号码(但您可能应该包含一个悬停状态,其中也“拼写出”信息)。

Kikk Festival使用页脚空间仅使用徽标和快速联系信息来突出节日合作伙伴。请注意图标的大小(每个图标都易于查看和阅读)以及滑块的使用,以便可以在较小的空间中显示大量元素。

8.注意对比和可读性

页脚

页脚信息通常很小……非常小。这使得考虑文本元素和背景之间的颜色、粗细和对比度变得至关重要。每个词都应该是可读的。考虑简单的字体(中等粗细的无衬线字体很好),并且比您通常使用的字体更领先。选择具有高对比度的颜色,例如带有黑色文本的浅色背景或带有白色文本的深色背景。避免使用不同的颜色或华丽的字体。

P53使用一种经典的(也是最易读的)文本和背景组合来显示页脚信息 - 黑底白字。

9. 保持你的设计主题

页脚

网站页脚不应该看起来像是事后的想法。它应该与网站的整体设计主题相匹配。颜色、样式和图形元素应反映整体色调。不要犯添加不匹配的“框”页脚的常见错误。从项目一开始就考虑这个空间以及如何使用它,以避免在设计过程后期陷入不匹配的元素。

Swiths Interactive Group使用一个简单的页脚,与网站的整体外观完全融为一体,其中一个人坐在桌子前,桌子上散落着物品。简单的页脚显示相关信息,看起来像是属于该网站的。

10.从小处着想(但不要太小)

页脚

页脚本质上包含许多小项目。只是要小心不要太小。文本可以比网站主体使用的尺寸小几个点。图标或图像需要以您选择的尺寸可读。(如果您看不出图标是什么,则它可能太小。)元素必须足够大,以便轻松单击或点击。如果用户因链接太小或距离太近而无法访问链接,则它们将无法按预期工作。

虽然Curious Space使用了相当非传统的页脚样式,但您可以从所使用的字体大小中获得良好的比例感。页脚文本比页面上的所有其他副本更小、更薄、更轻,但仍然足够大,易于阅读。

11.利用足够的空间

页脚

由于页脚通常位于狭窄的位置,因此空间和间距非常重要。在页脚元素周围以及文本行之间留出足够的空间。足够的间距可以防止页脚区域看起来狭窄或不吸引人。它还对点击或点击能力大有帮助。由于页脚中的许多(如果不是全部)项目都链接到其他内容,因此这是用户功能的一个重要方面。尽管可以,但您使用的空间量不必完全反映网站其余部分的空间。(对于在网站主体中使用紧密间距以达到特定效果或影响的网站尤其如此。)

Sailing Collective在元素之间使用了大量的垂直和水平空间。它们按类型聚集并且可单击。

12. 警惕太多的物体

页脚

虽然使用图形元素和标题是个好主意,但恰到好处和过多之间存在界限。谨慎使用这些物品并用于特定目的。问问自己为什么要使用标题、图标或照片。如果答案是“因为它看起来不错”,请重新考虑。每个元素都应该服务于一个目的。这将帮助您设计一个可用的页脚,充分利用可用空间。

正如您从Master & Dynamic的页脚中看到的那样,少即是多简单的图标和文本足以让您轻松浏览页脚内容。

13.创造层次感

页脚

就像网站的其他部分一样,页脚本质上应该是分层的。这是一个双重设计。页脚应位于整个站点层次结构的底部。(这毕竟是它所在的位置。)页脚还应该在其“容器”内包含元素的层次结构。最重要的元素(通常是联系信息、号召性用语或站点地图)应该是最突出的。标准信息(例如版权声明)通常是最小的。

Griflan Design Inc.在页脚中告诉用户要做什么,按照他们希望如何完成的顺序。首先,给他们发电子邮件;如果这不起作用,请致电他们;如果这些选择都不起作用,请在社交媒体上访问该公司。

14.考虑一个子页脚

页脚

您的页脚需要页脚吗?考虑使用子页脚来增加层次感。(这是一种非常流行的做法。)子页脚可能是创建一些额外层次结构的好地方,如果页脚空间太密集,则可以为页脚空间添加维度,或者只是为有趣的内容提供空间。使用此区域突出显示荣誉或插入号召性用语。

智能被动收入博客的多级页脚做得很好。首先是号召性用语,然后是网站链接,然后是带有褪色媒体提及的子页脚,最后是网站免责声明和政策。导航级别提供了页脚的深度,并且可以轻松浏览和点击。

15. 不要在所有这些链接下划线

页脚

最大的页脚错误?允许链接有下划线。仍然有大量网站在页脚中带有下划线链接。这种过时的技术不适合现代网站设计。

Baxter of California 的页脚很干净并且包含很多链接。由于简单的链接,没有那些讨厌的下划线,它看起来并不混乱。

页脚可以说明有关您网站的很多信息。它告诉用户您是谁、他们可以做什么以及如何浏览您的网页。它还展示了您作为设计师的微妙之处,例如对细节的关注和在小空间中工作的能力。

页脚是设计的重要组成部分。注意它。确保包含正确的信息、设计元素和可用性组合,以充分利用每个网页设计项目的最低空间。


更多新闻

网站设计如何融入智能交互,增强用户体验
人工智能给网站设计带来的好处
2024年科技行业网站设计风格趋势
高端网站设计的注重点有哪些?