
网站页脚是网页中最常打折的基础知识之一。
网站页脚的位置位于页面底部,这使得许多组织认为他们在那里发布的内容会被忽视,或者它根本不那么重要。
几年前可能确实如此,当时页脚大多是版权声明。 但是现代网站设计有更多的页面底部可能性。 您永远不应该忽视网站页脚。
最好的网站设计需要最好的网页页脚设计。 虽然它可能看起来像是一个小功能,但它对网站的性能和成功至关重要。 为什么会这样,本文将进一步讨论。
我们还将介绍最佳页脚示例。
页脚标记网页的结尾。 用户无法再向下滚动,因为没有更多内容可查看。
向下导航到页脚的用户通常会查找更多信息。 研究表明,访问者通常会完整地查看网站,以接收所需的信息。
在这种情况下,网站页脚可能会通过提供指向特殊或补充内容的链接来提供帮助。 页脚中包含的基本信息使网站具有专业的外观,因为它始终可用。
要欣赏出色的网页页脚设计的价值,了解其用途非常重要。 网站页脚是您网站中您可以真正与访问者互动的部分。 例如,它可以用作号召性用语(CTA),以鼓励人们注册您提供的某项服务。
网站页脚还有助于用户在您的网站上查找他们可能感兴趣的任何文章。 寻找您的联系信息的访问者会在这里找到它。
页脚必须在视觉上与网站的其余部分保持一致,具有清晰的字体和干净,直接的设计。 包括网站架构、联系信息、社交媒体图标和连接。 不要忘记隐私政策和服务条款。
根据 Chartbeat的一项调查,用户花在向下滚动普通网站上的时间比你想象的要多。
此外,在根据特定目标优化网站页脚架构的同时,一些公司的转化率已提高50%。 当 Smart Insights 测试更易于导航的页脚时,他们发现每位客户的收入增加了 16%。
由于网站所有者担心用户会错过某些内容,因此他们经常使页脚内容过载。 但是,这种内容过度和缺乏逻辑结构会产生相反的效果,导致访问者简单地离开这些网站。
以下是您应该特别注意网站页脚设计的一些原因:
- 您可以将其用作辅助号召性用语。
- 它提高了转化率。
- 它鼓励参与。
- 您可以使用它来推广您的社交媒体帐户,增强您的品牌,并强调其他重要信息。
- 它提供了方向。
您网站的页脚不应该只是一个包罗万象的。 它应迅速为主要和次要导航提供基本要素和重要信息。
基本上,网站的主要导航界面是主菜单。 它位于主页和其他页面的顶部,链接到最重要的网站页面。 辅助导航通常向下到页脚!
在开发和构建网站时,很容易忘记确保您的网站导航简单是多么重要。
“返回顶部”按钮非常重要。 如果您没有“返回顶部”按钮,网站页脚将帮助您的访问者快速查看整个网站。
您的访问者可能不了解您的网站有多长,并且必须一直滚动到顶部才能发现某些内容很烦人。
尽可能确保您的网站页脚包含您网站的所有不同功能。 这使得访问您的网站变得简单快捷,从而降低了访问者退出的可能性。
在页脚中加入指向其他页面的链接可以鼓励访问者浏览您的网站并发现新事物。 它将提高您的访客保留率。
您的网站结构
不适合主导航栏的网站页面应位于页脚中。 这鼓励人们调查可能难以在网站上找到的页面。
页脚可能包括“联系我们”页面、隐私政策、运输和处理、购物车、图片库、服务页面以及其他相关网站页面。
组织链接
对类似的页脚项目进行分组有助于组织链接和信息。 考虑在列(或行)中包含联系人、链接、服务、社交媒体图标以及最热门页面中的部分内容。
将每个部分放在标题下,以便每个元素都易于查看和访问。
Google网络抓取工具在扫描网站时考虑的变量之一是相关链接的数量。 内联链接为访问者提供了更好的结构,以帮助他们弄清楚您的网站在说什么。
在网站页脚设计中设置导航链接可以帮助您的网站在有机搜索引擎结果中获得动力并改善其SEO。
版权、隐私政策和使用条款
保护您的知识产权至关重要。 如果您的网站的独特产品,服务,建议和公司信息都对公众可见,那么保护其中的每一部分至关重要。
您可以写下版权声明或使用版权符号,并包括版权所有者的姓名。 每年更新一次,以包括当前年份。
联系信息
访问者希望在标题的右上角看到联系信息。 您还应该在页脚的底部中心包含基本信息,例如联系人链接。
联系人链接不是电子邮件链接,而是指向带有联系表单的联系人页面的链接。 使用联系表单而不是电子邮件地址有许多优点。
- 表单提交可以在 Analytics(分析)中作为目标完成情况轻松跟踪。
- 表单会触发对访问者的自动回复电子邮件,从而提供进一步的互动机会。
- 营销自动化和其他系统可以链接到表单。
- 根据答案,表单可以提出具体问题,并直接提交给已识别的人员。
电子邮件链接经常会吸引垃圾邮件。 所以要小心。
带有本地区号的联系电话和实际地址可向 Google 表明您是本地商家。 此外,添加您的营业时间 – 工作日,公众假期和周末。
在处理大量信息时,简单的网页设计至关重要。 通过干净的功能、充足的空间和逻辑组织,保持页脚不复杂。
近年来,出现了一种被称为“胖页脚”的可用性趋势,这需要包括比通常的传统功能更多的功能,从导航开始。
过去在页眉导航的“巨型菜单”下拉列表中的链接现在经常出现在页脚中。 但是,请注意,链接集合不是太大,以至于访问者无法快速扫描,或者您已经将太多分散注意力的信息打包到其中。
以下是您的网站页脚设计中需要考虑的其他几个方面。
保持品牌的颜色和色调一致
在整个网站和网站页脚设计中使用您的品牌颜色。 您可以使用不同的颜色元素来强调特定区域,但要将访问者的注意力放在他们可以从您的网站获得的内容上。
合并图形元素
没有什么比在任何网站上看一面坚固的文字墙更令人反感的了 – 无论页脚与否。 对于地图或电话号码等内容,您可以使用小的标志性元素,但也会提供悬停状态,其中包含“拼写出来”的信息。
为了增加创意页脚设计和视觉天赋,请添加徽标或图形元素。 包括社交图标,以便您的访问者可以选择在图标所代表的任何社交媒体平台上进行连接。
针对搜索引擎进行优化
您可能知道您网站的页脚设计在整个网站中都可见。 因此,您也知道这是促进关键字搜索引擎优化的理想时机。
在您的网站上有一个或两个主要关键字就足够了。 但是,您不想将关键字塞入页脚的每个角落。
用热门词使网站内容过载被称为关键字堆砌 – Google认为这是垃圾邮件,并严重惩罚沉迷于这种做法的网站。
考虑对比度和可读性
页脚中的信息通常采用非常小的文本。 这需要仔细考虑文本和背景元素之间的颜色、重量和对比度。 每个单词都必须是可读的。
选择具有对比的颜色,例如带有黑色文本的明亮背景。 避免花哨或精致的字体。
建立分层结构
页脚与网站的其余部分非常相似,应按重要性顺序进行构建。 最重要的信息应该是最突出的。
如果网站页脚空间太拥挤,子页脚可能是一个极好的位置。 您还可以使用此空间来突出奖项,或者只是将其用作娱乐物品的地方。
不要为每个链接加下划线
很大比例的网站在页脚中仍然有带下划线的链接。 这种过时的技术不适合当前网站和严重的页脚设计错误。
注意物体过多
虽然使用可视组件和标头是个好主意,但在刚好足够和太多之间有一条细线。 仅在绝对必要且用于特定目的时才使用这些内容,并最大限度地利用可用空间。
使网站内容和网站页脚保持最新有助于您保持与客户的信任。 最新信息还有助于域名权威的发展。
页脚是改善用户体验和搜索引擎优化(SEO)的好地方。 网站页脚需要很少的网页设计资源,但可以显着影响用户浏览网站的方式。
让我们看一下下面的一些高效的网站页脚设计示例。
1. 阿斯特拉
让您的网站被黑客入侵绝对是超级压力。 高度敏感的数据落入坏人之手的风险很大。 Astra的软件为公司和任何维护网站的人提供了强大的网络攻击防御。
在精彩的图像,来自其一位客户的认可以及导致它的通风结构之后,该网站的页脚以其单一的海军蓝色标志着一个完整的停止。
这种线性设计与网页设计的其余部分形成鲜明对比,使其成为正确的停止点,具有一组一致的列,指向网站其余部分的内联链接以及干净的社交网络块。
2. 阿维克·克莱德
道德服装制造商Avec Clyde选择了一个基本的网站页脚来补充其干净的在线商店设计。 虽然网站的主要导航技术是屏幕顶部的固定菜单,但网站页脚允许用户查看他们可能正在寻找的其他重要事实。
他们提供了一个指向其大小部分的链接,这是一个很好的触摸,并连接到他们的常见问题解答页面。
它谨慎而谦虚,允许用户专注于页面的其余部分,同时仍然提供基本信息。
“让我们成为朋友”的显微复印件非常吸引人,强调了他们悠闲的态度。
3. 阿沃
数据和分析对于帮助公司实现其主要功能至关重要。 Avo为组织和操作公司的所有关键数据提供了一个强大的平台。
立即吸引您注意页脚的是他们的号召性用语“预订演示”。用于输入电子邮件地址的空格位于其正下方,用于开始对话。
它们使事情变得简单,并且不会使用太多的内联页脚链接来混乱其布局。 水平浏览屏幕区域会将您的目光直接吸引到右侧的社交网络图标上。
4. 阿卡兹
网站页脚的一个不寻常的设计:Awwwards页脚分为两个部分。 第一个强化了网站的品牌原则和许多奖项。 它还包括消费者要遵循的最关键环节。
页脚的第二部分包含指向所有重要信息页面的链接,例如隐私政策、常见问题解答和条款。
这种方法很棒,因为它是显示广泛功能的网站页脚示例之一。 它既不是网站中主要致力于重要但无法访问的信息的部分,也不是专门用于重定向的部分。 尽管如此,它仍然可以同时完成这两项任务。
5. 贝卡松弛
Becca Slack是一位内容制作人,作家和喜剧演员,在她的单页网站上有一个时尚而宽敞的页脚。 这是她展示作品和电影的完美结束。
邀请潜在的合作者或招聘人员通过页脚中的表格与她联系。 在页脚的底部有一个小小的Twitter图标,漂浮在她的版权信息上方。
在她整洁的电子邮件表单下方,蓝色白色的“提交”按钮跳出来,鼓励访问者联系Becca。 页脚左侧是她的联系方式 – 电子邮件地址和电话号码。
6. 全新的学校
Brand New School不仅仅是一家设计公司,一家制作公司或一家广告公司。 这是一家尖端的创意公司。 他们的网站说明了一切。
该网站设计完美,并呼应了他们的宣言“我们是活着成为原创的创作者”。 虽然主站点非常忙于许多动画,但页脚本身很简单,布局精美。
7. 黄铜指针
当您浏览品牌代理机构Brass Hands的网站时,您将享受流畅的用户体验。 对于悬停突出显示的项目以及其他设计技巧,没有什么是不合时宜或不和谐的。 整个网页设计具有奇妙的连贯感。
这个页脚是黄铜手登录页面的整洁和平的结尾,简单的声明“让我们一起工作”和与他们的社交媒体的联系。
8. 分支设计
这个设计业务的主页 Clade Design 以其独特的创造力脱颖而出,具有冲突的形状,有趣的微交互和欢快的调色板。
背景波是此设计中反复出现的形状。 类似的蓝色波浪出现在页面底部,作为设计顶部的完美书尾。
这个网站页脚的例子是一个简单的研究。 它只有几个链接,左侧是“联系我们”号召性用语按钮,右侧是简短的社交网络符号块。 凭借干净的结构和明确的号召性用语,这款页脚与设计的其余部分完美融合。
9. 设计
Designies作为连接设计师和客户的平台,永远不会让用户失望他们独特的外观。 它通过用招聘广告填充它来占用几乎所有的空间。
向下滚动到页脚时,空间会很好地简化。 页脚中的深粉红色与深灰色和黑白空间形成鲜明对比。
当访问者向下滚动到最后一部分时,主顶部导航会淡出,将蓝色的“订阅我们的时事通讯”号召性用语按钮留在醒目的粉红色块中间。 通过删除菜单,焦点将吸引到 CTA 按钮。
热链接将接管作为主导航,并且很容易找到一个链接,该链接将访问者导航到页面的其他部分。
10. 小提琴手
Fiddler的网站是关于人工智能和数据研究的。 该网站很简单,布局合理,右侧有一个聪明的动画。 四处移动的细腻图像与技术信息形成了鲜明的对比。
然后是页脚,其中包含网站体系结构的简单摘要。
如何将信息整齐地排列在列中,并将眼睛移动到右侧的“我们正在招聘”链接,这真是太好了。 这是一个梦幻般的视觉钩子,直接通向他们的工作板。
11. 流基
您可以从 Flowbase 克隆 10 多个不同的页脚布局。 它们提供了各种 UI 工具包以及您可以合并到 Webflow 设计中的其他功能。
Flowbase 页脚以清晰、易读、间距适中的列形式呈现了大量信息。 设计超级简单,赏心悦目。
12. 骚扰
Harasat,一个高品质的食品分销商,创建了一个专业的,没有多余的装饰的网站页脚。 参观者可以轻松看到这个品牌是做什么的。 一切都完全一致。 Harasat仅使用三种颜色包含所有相关信息:深灰色作为背景,浅灰色和白色。
每个细节都经过精心考虑。 鼓励访问者单击列出的位置以查看其联系信息。
文本上有一个很酷的悬停效果,当你的光标在它上面时,它会改变颜色。 这种低调的细节有助于页脚干净,专业的外观,并使其看起来不杂乱。
13. Hi5
Hi5是关于与他人的积极互动和团队建设。 这个有趣的应用程序允许团队成员互相表扬,沟通并提供反馈。 每个页面设计都通过有趣的颜色和图像反映了这种乐观的态度。
更改的页面设计也存在于页脚中。 每个页面都有不同的页脚和不同的链接。 下面的那个位于网站的“关于”部分,具有最多的联系链接。
这是我们网站页脚中的一个突出例子!
页脚的左侧堆叠了按钮,允许您通过Apple App Store,Google Play,WhatsApp和其他地方下载程序。 深蓝色使这些按钮突出显示,使其成为页脚的焦点。
Hi5 使用页脚右侧显示公司信息,例如全球办公地址,并在底部显示一行社交网络按钮。
14.霍莉·奥奇利
这个自称“奇特的纸张和奇怪的商品”品牌与我们的其他网站页脚示例不同。 您可以轻松转到“关于”页面以了解更多信息。 Holly Oddly在这里简要介绍了她自己和品牌。 这些内容为网站增添了个人风格,让访问者在加强其品牌的同时感到放心。
她还使用了与网站其他部分相同的配色方案,具有悬停效果,当您将鼠标悬停在文本上时,它会将文本变成粉红色。 她的CTA有很好的触感。 在浅灰色中,你会看到“加入我的秘密社团”——邀请访客提交他们的电子邮件地址。
15. 全息图
Hologram为公司提供了将其技术与蜂窝网络集成所需的工具。 这家公司和他们制造的SIM卡允许企业连接他们的技术,无论是工业设备上的传感器,电动滑板车还是无人机。
此页脚与页眉完美互补,是我们整个系列中最小的页脚设计。
页脚中的内联链接提供指向术语和隐私的导航。 “支持”按钮的动态颜色与构成整个页脚的统一深蓝色条带形成鲜明对比。
16. 3号屋
这家餐厅的网站页脚包含访客可能需要的所有必要信息。 借助Google地图和实时联系人小部件,可以轻松到达3号房屋。 这些细微的细微差别表明他们已经考虑了消费者的需求,并愿意与他们沟通。
该网站的主菜单锚定在屏幕顶部,这意味着尽管底部没有站点地图,但访问者可以简单地浏览他们的页面。
最后,网站的调色板延伸到页脚,使其与设计的其余部分融为一体。
17.洛拉佩特
Lola Pate是一家生活方式企业,非常注重美学。 这增强了他们的品牌,并鼓励网站用户点击并以更大的格式浏览他们的产品照片。
该公司还在其两层页脚中包含了最终的CTA,敦促游客“加入我们的部落”。这种刻意的行动,加上引人入胜的微抄本,肯定会吸引人们加入他们的邮件列表。 发货和退货页面也在页脚中向下链接。
18. 精明
Savvy 为组织创建低代码自定义工具和应用,导致其页脚的布局展示了它们完成的所有工作。
精明的网站页脚设计是超级小的。 页面最底部只有一个薄框,左侧有Savvy徽标。
还有一个较小的盒子,最右边有圆角,带有紫色和蓝色的“开始使用”号召性用语按钮。 您会在网站正文中多次看到相同的按钮。
19. 思考32
专业的营销机构很棒。 他们像激光一样的专注可以帮助像Think32这样的组织真正从竞争中脱颖而出。
Think32总部位于澳大利亚,是一家牙科营销机构。 牙科图像被低估了,包括页脚在内的整体设计散发着任何高绩效机构都会欢迎的那种当前风格化。
登陆页面以一个非常挑衅的白色蓝色气泡打开,标题为“我为什么要付钱给那些人进行营销?
当您进入页脚时,该网站将进入严肃的业务,并且设计精美。 号召性用语位于页脚的正前方中央,电子邮件联系表单旁边有一个浅粉色的“订阅”按钮,可引起人们对它的注意。
标题“为不断增长的牙科诊所进行深思熟虑的营销”包含在左侧区域,总结了该机构的理念并强调了其能力。
20.无用的宝藏
这家在线艺术商店的网站页脚结合了现代外观和经典的打字机风格。 很明显,Useless Treasures拥有经过深思熟虑的原创品牌标识 – 特别是当与玫瑰内动画嘴唇的不寻常图像相结合时,可以给游客一个吻!
并不是说嘴唇与页脚设计有任何关系,但它们确实会引导您进入页脚中下一个有趣的方面。
访问者还可以在他们集成到页脚中的拍打蝴蝶gif中看到这一点,这增加了一个有趣的元素,让您想再看一眼。
无用的宝藏确保为他们的页脚选择最重要的信息。 它包括运输信息,退货政策,付款方式徽标和社交图标。
21. 矢量计算器
许多设计师更喜欢使用安全的方法创建基于矢量的图像,这很好。 看到像Vectornator这样的软件初创公司以独特的视角进入市场是很有趣的。
当您向下滚动到页脚时,顶部导航会逐渐消失,显示将您带向正确方向的内联链接。
这是那些优秀的网站页脚设计克制的例子之一;特别是与网站上有趣,色彩鲜艳的元素相比。 它说明了为什么一些最好的页脚是最简单的。
尽管网站页脚位于网页设计的最底部,但它们应该是您作为设计师和网站所有者最关心的问题。
页脚通过其组织良好的链接结构,社交媒体图标块,新闻通讯注册以及其他额外可能性占据了很多空间。
与其表示网站的结束,他们应该鼓励访问者更深入地挖掘,了解更多信息并与公司互动。
网站的页脚揭示了很多东西,告知访问者您是谁。 页脚甚至可能是客户旅程的第一步。