返回  

15个网站设计页脚思路及技巧

2019/7/10 10:32:24 来源:深圳网站建设公司Clh

网站设计中最重要的位置之一是页脚。 是的,我是认真的。 很多时候它可能不是设计中的重点或最令人印象深刻的区域,但它是用户经常用于寻找信息的地方。 因此,在规划网站设计项目时,不要忽视这一领域,这一点非常重要。


但是你应该包括哪些元素? 如何保持页脚整齐有序,符合你的整体美感而不会突兀? 在这里,我们将看看如何创建一个优秀页脚的提示,其中包含一些做得很好的网站示例。


1.保持设计的简洁(Keep the Design Simple)

Keep the Design Simple

是的,这是大多数设计项目的关键之一,但值得一提。 在处理大量信息时,简单的设计很重要。 坚持简洁的元素,充足的空间,并有目的地组织。 尽量避免混乱,想想你的页脚中会包含哪些元素,以及为什么它们应该存在。 

Agra-Culture在页脚中使用颜色,图标和文本,但它看起来很简单。 每个链接都很容易被点击,绿色框中的农场图像是提供与站点统一主题的一个细节亮点。


2.关联信息(Link to Your Information)

Link to Your Information

任何网站页脚中最重要的两个链接一般都会是“关于我们”和“联系我们”的页面。 用户希望知道你的身份以及你的公司或品牌的含义。 你需要保证他们可以轻松找到该信息。 许多人还想了解你的团队以及如何与他们联系(这是一个至关重要的工具,很多人会丢失名片,那么你的网站在第一时间会成为他们与你保持联系的媒介)。

Heckford在其页脚设计中包含了大量与公司,社交媒体和有关其工作信息的链接。


3.包含基础的联系信息(Include Basic Contact Information)

Include Basic Contact Information

虽然一般的做法是提供一个直接链接“联系我们”页面的栏目链接,但直接在页脚中展示相关的基础联系信息也是一个很好的选择。 包括主要的电话号码,电子邮件地址和实际的办公地址。 

Root Studio创建了一个几乎与你想象的完全相反的页脚,但是它很有效。 大文本(以及包含它的边框)更容易吸引注意力并且被识别,提供的基础联系信息可以让相关的用户第一时间与你保持联系(对于希望用户与他们联系以进行项目和工作的网站设计,这是一个非常有影响力的设计概念)。


4.组织页脚链接(Organize Footer Links)

Organize Footer Links

像所有的网站设计一样,分组可以为链接和信息创建良好的组织感。 考虑几个相关信息的列(或行),例如“关于我们”、“联系我们”、“服务”以及“社交媒体”等最受欢迎的部分。 将每个内容放置于相关的主栏目下,以便每个元素都易于查看和查找。

SugarSync包含多列信息,你可以轻松访问页脚信息。 通过“产品”,“公司”,“了解更多”和“与我们联系”的主标题,你可以轻松找到你需要更详细了解的信息。


5.版权信息(Include a Copyright Notice)

Include a Copyright Notice

这一段简单的文字有时候提供的帮助远远超出你的想象,所以不要忘记它。 虽然大多数站点将其作为单行包含在屏幕底部,但你可以将其设计为更贴合你的网站主题的样式。 版权声明可以包含有版权符号,该文本通常包括出版年份和版权所有者的姓名(公司类型的则为公司名称)。 

Adventure.com通过屏幕右下方的版权声明保持整体设计的简单。 该信息在对比度上明显较弱,因此它不会妨碍更重要的导航元素。


6.包含行动按钮(Include a Call to Action)

Include a Call to Action

一旦用户来到你的页脚,在这个区域你是否会需要他们做点什么。 添加一个行动按钮用于注册或留下信息或邀请他们在社交媒体渠道上关注你。 在点击率的转换上,不要忘记此空间的价值。

Collabogive为“加入我们”提供了大量的页脚空间。这个号召性用语很容易看到,符合设计要求,并为用户提供了一种交互方式。


7.使用图形元素(Use Graphic Elements)

Use Graphic Elements

页脚的设计通常采用的是一个典型的块状结构。 通过添加徽标或图形元素以增加视觉兴趣。 注意不要让太多元素使得这个小空间看起来过于拥挤。 你还可以使用小的标志性元素作为地图或电话号码等链接。

Kikk Festival的页脚空间使用徽标和快速联系信息来强调合作伙伴。 注意图标的大小 - 每个图标都易于查看和阅读 - 并使用滑块来切换内容,以便可以在很小的空间中显示大量元素。


8.注意对比度和可读性(Be Aware of Contrast and Readability)

Be Aware of Contrast and Readability

页脚信息通常很小......非常小。 这使得考虑文本元素和背景之间的颜色,对比度至关重要。 每个字都应该是可读的。 考虑使用简单的字体以及比你通常使用的样式更简单明了的选择。 选择具有高对比度的颜色,例如带黑色文本的浅色背景或带有白色文本的深色背景。 避免使用不同的颜色或华丽的字体。

P53使用经典(和最具可读性)的文本和背景组合。


9.统一设计主题(Maintain Your Design Theme)

Maintain Your Design Theme

网站页脚看起来不应该是事后的想法。 它应该与网站的整体设计主题相匹配。 颜色,样式和图形元素应该反映整体色调。 想想这个空间以及从项目开始的时候就考虑如何使用它,以避免在设计过程的后期遇到不匹配的元素。

Swiths Interactive Group使用一个简单的页脚,它完全集成了网站的整体外观,其中有一个人坐在桌子旁,散落着物品。 简单的页脚显示相关信息,看起来像是在同一个网站上。


10.对于小的思考(Think Small (But Not Too Small))

Think Small (But Not Too Small)

页脚包括很多小项目。 小心不要太小。 文本可以比用于网站主体的字体大小小一些。 图标或图像需要以您选择的尺寸保证可读(如果看不清图标变大的是什么,它可能就太小了)。元素必须足够大才能轻松点击或被阅读。 如果用户因为太小而无法阅读或被识别,则网站设计就无法按预期工作。

虽然Curious Space使用非常传统的页脚样式,但你可以从使用的类型大小中获得良好的规模感。 页脚文本比页面上的所有其他文本都更小,更薄,更轻,但仍然足够大,可以轻松阅读。


11.空间的使用(Use Plenty of Space)

Use Plenty of Space

由于页脚通常的空间量不是很多,因此空间和间距的合理配置就很重要。 在页脚中的元素周围以及文本行之间留出足够的空间。 足够的间距可以防止页脚区域看起来过于狭窄或不吸引人。 它对用户是否会选择点击也具有很高的影响。 由于页脚中的许多(如果不是全部)项目都链接到其他内容,这是用户功能的一个重要方面。 你使用的空间量不必完全统一网站其余部分的间距(对于在站点主体中使用紧密间距以产生特定效果或影响的站点尤其如此)。

Sailing Collective在元素之间垂直和水平方向使用大量的空间。 它们按类型划分并具有良好的点击性。


12.注意元素(栏目)的数量(Be Wary of Too Many Objects)

Be Wary of Too Many Objects

虽然使用图形元素是一个好主意,但是恰到好处和过多之间的界限有时候并不是很好把控。 谨慎使用这些元素, 问问自己为什么使用图形,图标或照片。 如果答案是“因为它看起来不错”,那么请重新考虑它,每个元素都应该是有用的,这将帮助你设计一个可用的页脚,充分利用可用空间。

从Master&Dynamic的页脚中可以看到“少即是多”的设计理念。 简单的图标和文字足以让你轻松浏览页脚的内容。


13.创建层次及结构感(Create a Sense of Hierarchy)

Create a Sense of Hierarchy

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

Griflan Design Inc.按照他们想要的方式告诉用户在页脚中要做什么。 首先,用户可以选择给他们发邮件;,如果这不起作用,那么打电话给他们,也是一个便捷的途径,如果这些选项都不起作用,请访问社交媒体并关注他们。


14.考虑一个次级页脚(Consider a Sub-Footer)

Consider a Sub-Footer

你的页脚是否需要次级页脚? 考虑使用附加分层的子页脚(这是一种非常流行的做法)。子页脚可能是创建一些额外层次结构的好地方,如果页面空间过于密集则只为页脚空间添加维度,或者只为有趣的内容提供空间。

Smart Passive Income Blog使用多级页脚使得内容变得更有组织。 内容包括了一个号召性用语,然后是网站链接,然后是媒体及子页脚,其次是网站免责声明和政策。 导航在页脚中提供深度,使其易于浏览和点击。


15.不要提供过多的强调链接(Don’t Underline All Those Links)

Don’t Underline All Those Links

页脚设计中做大的错误是什么——允许链接带有下划线。 页脚中仍有大量带下划线链接的网站,这种过时的技术不适合现代网站设计。

Baxter of California有一个干净的页脚,包括很多链接。 由于简单的设计,它没有看起来混乱,没有那些讨厌的下划线。


总结

页脚可以影响你的网站整体的视觉,它可以告诉用户你是谁,他们可以做什么以及如何定位到你的网页的其他位置。 它还展示了作为设计师的细微之处,例如对细节的关注以及在狭小空间中工作的能力。

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






----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务