功能担当!超实用的网站页脚设计小技巧 - 优设网 - UISDC

功能担当!超实用的网站页脚设计小技巧

2015/10/29 12909评论区

website-footer-design-skills-1

编者按:评价一个网站好坏有众多因素,视觉设计、品牌一致性、网站易用性等,都会影响到访客的情绪,而今天我们要介绍的这个,是不起眼的网站页脚,然而正是这个很多设计师都忽略的部分,在网站中却有着至关重要的功能担当。今天不仅聊它的作用,也分享几个页脚设计技巧,来收!

重视网站的页脚设计

1

通常一接到任务,大多数设计师都会就把精力投身于网站主页和页眉的设计,也因此,再无余力给页脚的情况下,他们会选择放个免责声明和版权信息等就过了。

但是,页脚不应该是以这种方式存在,事实上,页脚的重要性和页眉相当,有时更甚,因为对大多数用户来说,页脚是他们最后的『停泊港』。

而这应该成为一个绝佳的入口:为访客提供注册服务、联系网站(提供信息/问题咨询)等。所以,此刻可以问问你自己,当访客到达网页底部时,你想给他们看什么?

页脚到底有多重要?

2

上图左侧为联系方式,中间为注册入口,右边是网站的社交平台。

就网站页脚的作用而言,它能提供的不仅是网站的相关信息,还可以是便利的网站导航。此外,你可以在这儿添加不同的社交平台,增加网站的宣传渠道;还可以提供和你联系的方式,建立用户对网站的信任感等等。

所以,就算页脚位于网页的最底部,也不意味着你可以在设计上偷懒,这是一个绝佳的练习机会,让你有更多机会和用户沟通。

让页脚变得好看

3

最基本也是最有效的方法是让页脚变得好看,就算页脚没有任何东西(按钮、链接等),只要视觉效果出众,它依然可以成为网站整体中有力的那部分。

如果你想让网站尽可能地保持干净简洁,那就要防止网站看起来乏味无聊。无论如何,在网站页脚的视觉细节上花点功夫,才能把用户的注意力抢过来。

专注于你的品牌

4

网站页脚的另一个重要用途是展示关于你的品牌信息等(赞助商、开发者等),信息越丰富,访客想深入了解你就越方便。

无论最后你选择了哪种设计风格,别忘了你设计页脚时的目的。(提供导航栏/联系方式/展示品牌)

保持干净

5

这个在设计中属于老生常谈了,当你有大量信息要处理时,简约风格是不二选择。在页脚设计上,你要保证排版干净,元素有序,空间通透不拥挤。

花点时间想想,哪些元素是最重要的,然后按设计的四个基本原则去处理吧。

注:如果你是新手,可以参考:《设计易容术!如何设计一张高品位高水准的海报?》

提升产品和服务

6

如果你的网站是售卖产品或服务的,页脚就是一个让用户有所行动的优秀渠道。

作为一个优秀的促销员,它可以让用户知道目前有哪些值得购买的福利或注册的好处,例如上面的网站,页脚要做的是增强说服力,尽可能地鼓励用户去采取行动(买买买或注册),而不是简单地罗列信息。

该有的元素

7

说了那么多,总结一下页脚通常都有的元素:联系人信息、社交平台链接、导航链接、版权声明、品牌信息、友链及交换条件、隐私条款等。

8

想吸引到更多人注意,可以放上公司团队的员工照,公司LOGO等等,如果你是个人网站,可以传个相片加个包含你所有文章列表的链接。

设计页脚

9

这里分享几个帮你设计页脚的技巧。

有良好的视觉层次

访客读文章时需要的不是一镜到底,然后糊里糊涂地结束,而是段落分明的层次感,先是标题,然后正文,页脚,诸如此类,建立一个优秀的列表样式能帮你提高聚焦性和可读性。

当然,干净良好的排版也至关重要。

留白的运用

10

留白在页脚设计同样重要,因为涉及到布局,留白能分割出不同的区块,起到绘制不同区域的效果。

当然,留白不是仅存白色空间,只要是无内容填充的部分都可以称为留白。留白的另一个作用是,下面该出场的这个。

把页脚和内容分离开

11

大多数页脚都是以深色背景为主的,有些是直接用插画做背景,无论哪个,你要确定的是页脚看起来是和内容分离开的,这样才不会混乱,保证了视觉上的层次性。

【新人最喜欢的职场大全】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  3. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  4. 面试求职:《优设重磅首发!全方位揭开简历和面试话术的秘密》

原文地址:vandelaydesign
译者:优设程远

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量103万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/website-footer-design-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里