网站页脚设计的六个技巧

设计网站页脚时先列出用户最后一步要完成的任务，再把链接按产品、支持、公司和合规分组；桌面端展示层级，移动端折叠长组，最后检查键盘焦点和隐私入口。需要画页面结构时，可在界面设计工具中先用真实链接验证信息架构。

企业站页脚先按任务分组，再安排移动折叠

页脚的第一项工作不是把所有链接放到底部，而是先写清用户来到这里要完成的任务：寻找产品入口、获得支持、了解公司，或核对法律信息。以这些任务为分组依据，桌面端再决定列数，移动端再决定哪些组可以收起，信息层级会比按部门名称堆链接更稳定。

用真实栏目决定层级

假设一个 SaaS 产品站同时提供在线产品、帮助文档、客户案例和企业服务，页脚可以这样分组：产品组放产品介绍、解决方案和定价；资源与帮助组放帮助中心、教程和联系支持；公司组放关于我们、客户案例和新闻；法律组放隐私政策、使用条款和备案信息。每个链接只放在最能解释它的组里，避免“产品功能”在两个栏目重复出现。

如果“价格”既属于产品组又属于企业服务组，保留一个主入口，在另一处用描述性文字说明范围；如果某个栏目只有一个链接，就要判断它是否真的需要独立列，避免在桌面端留下孤立的空白列。

桌面列与移动折叠怎么落地

桌面端可把四组内容排成多列，但列宽应能容纳最长的链接文本；不要用极小字号解决换行。移动端可以把资源组和公司组做成可展开区域，默认仍显示组标题，标题本身要能被读屏识别为按钮，并在展开后保持当前焦点位置。隐私、条款、联系方式等必须可直接找到的入口不应藏在连续多层折叠里。

1. 先用真实长标题和两行链接检查列宽，确认链接之间有可点击的间距。
2. 收起一组后，用键盘 Tab 走到下一组，检查焦点没有跳到页面顶部或隐藏内容。
3. 在窄屏旋转和系统放大文字后再次检查，折叠按钮、组标题与链接仍能区分。

交付前检查链接、状态和对比度

把页脚交付给开发时，除了颜色和间距，还应给出栏目名称、链接目标、默认展开状态和焦点顺序。用 Pixso 画布逐个标出“当前页、悬停、键盘聚焦、展开/收起”这些状态；视觉稿只表达界面状态，实际链接是否可用仍要在实现页面中检查。

• 长链接换行后仍能看出它属于哪个栏目，没有被截断成无法判断的省略号。
• 深色页脚上的正文、辅助文字和焦点轮廓都有足够对比，不能只靠颜色区别当前项。
• 链接失效、跳到错误语言版本或打开新窗口时，需在交付备注中写明恢复路径。

网站建设完整的网页设计包括头部、中间内容以及页脚设计三大部分，但许多建站者都会犯同一种错误，认为用户看头部重于页脚，于是忽略了页脚的重要性，造成头重脚轻的不协调结果，影响了整个网站的用户体验。

事实上，用户在浏览网站时对页脚也有一定的认知习惯，通常哪些信息会出现在页脚似乎已经形成了一种惯性，方便他们快速从网站的页脚中找到需要的信息。既然有被用户关注的点，那么对页脚的设计就不可掉以轻心。

大型页脚的设计诀窍在于信息的组织，一旦明确了页脚需要帮用户实现什么目标，接下来的事情就不难了。下面我将会和大家分享6个网站页脚的设计技巧，并会给出一些例子。

1.确定一个明确的目标

在为网站设计一个大型页脚的时候，先要明确用户在实际状况下如何使用它。尽管有许多网站将页脚当作收纳不知道怎么处理的链接和信息的地方，但是实际上页脚的功能并不是垃圾箱。

和网站其他的部分一样，设计优良的页脚是有着明确的设计目标的：

• 提供网站地图，以及最受欢迎的页面/链接
• 提供联系方式，或者提交订阅的表单
• 提供社交媒体帐号链接和信息
• 提供行为召唤的功能
• 提供公司或者店铺的实际地址/可视化地图
• 网站和团队相关的信息（适合博客类网站）

2.包含用户期望的信息

绝大多数的用户对于网页页脚中所呈现的信息，是有所期待的，将用户期望的信息包含在其中，可以让它的可用性更强。虽然并非所有的元素都需要包含在网页页脚当中，但是下面所列举出来的元素，应该覆盖了绝大多数的用户需求：

• 网站地图或者拓展导航
• 联系信息，地址或者地图
• 社交媒体链接
• 电子邮件订阅信息
• 搜索
• 关于我们
• 获奖情况或者证明
• 新闻资讯，最近的文章或者事件列表

还有一些其他的小元素或者功能控件可以放到其中，但是用户并非需要全部的元素，他们所需要的通常是其中的一部分，绝大多数是关于网站本身的一些信息。

• 版权信息
• 法律信息和隐私条款
• 专业领域或者所属组织

3.组织链接

包含大量的、不同的内容的网站，应该考虑将大量的链接按照类别来进行分组管理，通过有组织的链接，可以帮助用户找到他们想要的相关的内容。

对于大型的项目而言，这是一种非常常见的技术，对于用户而言，可能会非常有用。以Amazon为代表的这些在线零售巨头对于在页脚中组织信息就有着丰富的经验。

4.维持品牌调性

不要事后再考虑页脚中的微文案，页头中的品牌设计和页脚中的品牌调性是同样重要的。

风格和调性上，页脚同样是网站的品牌设计中不可分割的一部分，在视觉上沿用网站的配色，在视觉元素和品牌化上，同样不能失去应有的调性。只有这样，用户才不会在浏览页脚的时候感到迷惑。

下图是电子邮件服务供应商Emma的网站页脚设计，其中包含一个明显的行为召唤按钮，所搭配的文案和整个品牌的调性保持一致，仿佛他们的营销团队在向你问好。页脚的元素和元素之间留有足够多的空间，确保整体的舒适感。

5.足够的留白

紧密的文本是用户浏览和交互的大敌，保持足够的呼吸感，不仅能够确保视觉上的舒适，而且在功能上也有保障，用户交互也更加方便。

空间排版布局的规则，同样适用于页脚的布局设计，千万不要觉得它只是装饰性的，并不是「能看就行」。如果页脚的设计可用性差，对用户的浏览体验感是非常差的。你可以借助热点图等方式来确定用户对于各个模块的点击率和效果，在此基础上来进行优化。

6.保持对比度

需要保有足够功能性的页脚，应当确保它们能和上方的内容之间构成对比，从而形成视觉上的差异，脱颖而出。页脚应当是整个设计当中的一部分，同时也应当具备足够视觉差异性，便于用户理解它的功能和存在。

在视觉上建立这种对比，最常用的方法是将页脚至于特定的UI容器当中，比如彩色的区块或者框当中，通过背景色彩和上方的内容进行区别。许多以浅色背景的网站，会在页脚的部位采用深色的背景。

这种额外的视觉对比的功能性是很明显的，用户会在看到页脚的时候因为差异而注意到并思考其功能，它是足够强大的视觉线索，并且在整个设计中创造出方向感和可用性。

总之，虽然页脚是承载大量信息，用来作为用户最后获取信息的地方，但是它也应该具备一目了然的特点，确保可用性、易用性和舒适性。

发布前用真实标题和长链接走一遍页脚，确认不会因为换行、折叠或焦点跳转让用户迷路。