0

0

设计网页页脚的15个超实用技巧_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:55:48

|

3008人浏览过

|

来源于php中文网

原创

你网站最重要的部分之一就是页脚。是的,我是认真的。这里也许并不适合伟大的设计或者令人印象深刻的内容会存在的区域,但这里是用户寻找信息的地方。所以在设计网站项目时候也不要忽略这个地方。

但是你需要在这里包含哪些元素?如何组织页脚的内容使其不突兀并保持整体美感?你来对地方了。在这里我们将会提出一些关于如何设计好页脚的建议,并会给出一些例子。

 

1.保持设计简单

是的,这是大部分设计项目的关键之一,但是这点也是重中之重,值得现在就说。在需要处理大量需要放在页脚的信息的时候,简单设计就显得尤为重要。坚持清理元素,保证充足的空间并有目的地组织信息。尽量避免混乱,思考哪些元素需要出现在你的页脚中,以及它们为什么要在那里。页脚的尺寸一般都跟你网站页面数和信息量有关。

立即学习前端免费学习笔记(深入)”;

Agra-Culture 在页脚中使用颜色、图标和文字,不过它很简单,而且流量很大。每个链接都易于点击,绿色背景中农场图像的微妙细节是个很好的尝试。

2. 链接到你的信息

网站页脚中最重要的两个链接分别是“关于我们”和“联系我们”。用户想要知道你是谁,而且想要了解你的公司和品牌。让用户更容易找到这些信息。还有很多人想知道你的团队成员以及他们的联系方式(这是一个重要的工具。很多人弄丢了他们的名片,但会回到你的网站去寻找联系人信息)

Heckford 包含了很多关于公司、社交网站以及他们工作信息的链接。

3. 包含基本联系信息

尽管你应该链接到一个完整的“联系我们”的页面里,在页脚中展示相关联系人信息也不坏。写上主要的电话号码、邮箱和真实地址。(如果能够在点击时自动拨号,自动发送邮件或者展示地图,那就是加分了)

Root Studio做了一个几乎违背你认为应该是“页脚”的一切的页脚,不过它文字很大,而且被压缩为一个非常简单的联系人信息列表。(这是一个具有影响力的设计理念,方便了那些想谈项目合作的用户)

4. 组织页脚的链接

对页脚内容的连接和信息进行分类组织会给人感觉比较好。比如把联系方式、友情链接、服务、社交网站和一些你流量最大的内容分成几列(或几行)。给每个部分起一个标题,这样方便查看。

SugarSync 的页脚信息包含很多易于查看的列。在“Product”,“Company”,“Learn More”和“Connect with us”的标题下面,你可以很轻易地找到你接下来想要访问的内容。

有心的同学都会发现优设也是类似的设计,不信戳首页看看?

5. 包含版权声明

这行小小的文字可以成为你的救星,不要忘了它。大部分网站把它做在网站底部单独一行,而你可以考虑把它设计得更融入页脚。版权声明可以手写,也可以只放一个带圈圈的小c标志。其文字通常包含发布年份和版权所有者的名字。可以为内容和设计建立多个版权声明(适用于部分由第三方创建的网站)。

Adventure.com在屏幕正下方保留了一行版权声明。这行信息使用了低对比,这样它就不会抢了更重要的信息链接的风头。

6. 包含行动呼吁

当用户浏览到你的页脚的时候,给他们一些可做的事情。包括登记获得邮件通知,或者邀请他们在社交媒体上关注你。不要忘了这个区域在转化点击方面的价值。

Collabogive 在页脚区域添加了一个“订阅我们的邮件”的标语。这个呼吁很容易看到,与页脚设计融为一体,并且为用户提供了一种无须加入组织就可以获得其最新消息的方式。

7. 使用图形元素

通常页脚只是一个块块。添加logo或者图形元素可以为其添加视觉上的趣味。只是要注意不要为这狭小的空间添加太多它难以承受的元素。想象一下这个场面:不仅仅写出“关注我们的微博/博客/什么的”,还包括它们的logo。你还可以使用小的标志性元素添加在地图或者电话号码之类的旁边(不过你可能需要添加一个悬停状态的效果以阐释这个信息)

Kikk Festival在页脚空间空使用logo和快速联系人信息凸显活动伙伴。注意图标的大小??每个都易于看到,也易于阅读。使用滑块可以使大量信息显示在这个狭小的空间中。

8. 注意对比度和可读性

页脚的信息通常都很小,非常小。这就使得文本元素与背景之间的颜色、字重以及对比变得非常重要。每个单词都应该是易于阅读的。考虑使用简单的字体(无衬线字体和中等字重就很好)。选择高对比的色彩,比如白底黑字或者黑底白字。避免使用不同的颜色或者华丽的字体。

Stylized
Stylized

AI产品图背景替换

下载

P53 为页脚信息使用最传统(也是可读性最好的)的文字背景组合??黑与白。

嗯,配色不求出彩,但愿无错,参考这篇:《秒变配色高手!怎么都不会错的6条网页设计配色原则》

9. 包含网站的设计主题

网站页脚看起来不应该像是狗尾续貂。它应该看起来与整个网站的设计风格相符。颜色、样式还有图形元素都应该保持一致。不要为页脚添加一个不合适的框框,这是很常见的错误。从项目伊始就应该思考这块地方要如何展现,以免在设计过程中因不匹配的元素而做不下去。

Swiths Interactive Group 的简单页脚与整个网站相得益彰,网站一个人坐在桌前,各种物品放在桌上。简单的页脚展示了相关信息,而且看起来与网站融为一体。

10. 往小做(但别太小)

通常的页脚包含了很多小项目,但是注意别弄得太小了。页脚的文字可以比网站主体所用的字号稍小一点。而图标和图像要在你所选的尺寸里是可读的(如果你看不出来这个图标是什么,那它就太小了)。元素必须大到易于点击或触碰。如果你的链接太小,或彼此挨得太近而导致用户点不到你的链接,那你就蹲墙角哭去吧。

Curious Space 使用了不太传统的页脚风格,你可以从风格尺寸的使用中感受到它的存在。页脚的文字稍小一些,而且比页面中其他文字更细更轻,当然也没有小到看不见。

11. 多用点空间

由于页脚通常都住在狭小的空间里,空间和间距就显得很重要。给页脚中的元素留出大量空间如同文字的行间距。足够的间距可以让页脚看起来来宽松舒畅。而且方便点击或触摸。因为页脚中的绝大部分链接都要链接到别的地方,所以这对用户体验来说也很重要。你在页脚所使用的空间不用与你网站主体完全一样(尤其是对于那些需要在主体中使用小间距的网站)

Sailing Collective 在元素之间使用了足够多的水平和垂直间距。然后根据类型和是否可以点击分别放在一起。

12. 防备太多东西

使用图形元素和一个头部是个好主意,但刚刚好和太过头仅有一线之隔。有节制地使用这些元素,并仅为特定元素使用。问问你自己为什么要使用头部、图标或者照片。如果答案仅仅是“因为它看起来很好看”,那你得重新思考一下。每个元素都应该有其存在的意义。这会帮助你设计出可用的页脚,而且充分利用空间。

从 Master & Dynamic 的页脚中你可以看到少即是多的设计美学。简单的图标和文字可以让你轻松浏览页脚。

13. 创建层次感

和网站的其他部分一样,页脚也应该有自然层级。这是两方面的设计,页脚应该位于整个网站层级的最底端(毕竟这是它该在的地方)。同时其内部的元素也应该具有层级。最重要元素(通常是联系信息、或者呼吁信息或者网站地图)应该是最突出的。标准的信息,比如版权信息,通常都是这个区域里最小的。

Griflan Design Inc. 在页脚中按照他们希望的顺序告诉用户要做什么。首先,给他们发邮件;如果发邮件没用,给他们打电话;如果这两种方法都没用,在社交媒体上找他们。

14. 考虑做子页脚

你的页脚是否还需要一个页脚?考虑添加一个子页脚图层吧(在实际应用中这种很流行)。子页脚非常适合放置一些额外的层级,增加页脚的空间,防止它过于密集,或者仅仅是为了给有趣的内容提供一点空间。使用这个区域来突出荣誉或者行动呼吁。

The Smart Passive Income Blog 的多层级页脚做得很好。这里有行动呼吁,然后是网站链接,然后是浅色链接社交网站的子页脚,后面是免责声明和隐私政策。页脚导航的层级提供了一定的纵深,易于浏览和点击

15. 不要在这些链接下添加下划线

页脚的最大错误?让链接有下划线。现在仍有很多网站在他们页脚的链接中使用下划线。这个过时的技术并不适用于现代网站设计。

Baxter of California 拥有一个干净整洁并且包含大量链接的页脚。多亏了这些没有下划线的简单链接,这个页脚看起来并不杂乱。

总结

页脚可以帮你的网站传达很多信息。它会告诉用户你是谁,网站都能做些什么以及如何浏览你的网站。另外它还会展示细节方面的东西,比如作为设计师对细节的关注,以及对小空间的处理能力。

页脚是设计中的重要部分。要时刻注意。确保里面是基本信息,设计元素和可用性的最佳组合,这样才能在每个网站设计项目中用最小的空间获得最多可能。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

2

2026.02.06

java多线程方法汇总
java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

90

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

15

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

10

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

6

2026.02.06

JavaScript 异步编程与事件驱动架构
JavaScript 异步编程与事件驱动架构

本专题深入讲解 JavaScript 异步编程与事件驱动架构,涵盖 Promise、async/await、事件循环机制、回调函数、任务队列与微任务队列、以及如何设计高效的异步应用架构。通过多个实际示例,帮助开发者掌握 如何处理复杂异步操作,并利用事件驱动设计模式构建高效、响应式应用。

7

2026.02.06

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

25

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

28

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
前端HTML5+CSS3(女神版)
前端HTML5+CSS3(女神版)

共199课时 | 28.8万人学习

JS抽象类和事件设计模式视频教程
JS抽象类和事件设计模式视频教程

共25课时 | 5.1万人学习

html/css快速入门
html/css快速入门

共51课时 | 18.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号