页面布局的平衡性:被设计师忽视掉的FOOTER部分

通常我们浏览网站,翻到网站页面底部时,底部区域会展示出什么信息,或许留下的仅仅是一个版权信息和备案号。众所周知,网页的FOOTER是整个网站的重要部分,用户可以从中获得网站的基本信息。但绝大多数设计师会把相当多的注意力集中放到网页的上半部分,在banner之上的部分都会设计的非常出色。这样看来,多数设计师的网页整体布局设计就显得虎头蛇尾了,他们忽视了重要的FOOTER部分。与其说是意识不到FOOTER的重要性,倒不如说是还有很多人不知道应该如何设计FOOTER部分。

优秀的设计师是不允许这样的情况发生,当用户翻到页面底部后,马上就离开页面。但我们可以通过什么方法对网页FOOTER进行合理化设计,尽可能得去留住更多的用户。下面我们通过一些要点和实例去了解,如何合理设计网页的FOOTER部分。

一.FOOTER的设计要点

1.展示页面信息,著作权等

页面信息、著作权等信息一直作为最基本的FOOTER元素来使用。具体来说,通常可以考虑放置版权注册时间、使用条件、个人保护方针、网站地图、著作权等等信息在FOOTER区域。这个区域会有很多信息需要一一展现,因此,这部分的设计必须简单直接,不需要过多修饰。此外,出于便捷性的考虑,置顶按钮也是需要放置的。

757e5731783d000000305aa24ad1.jpgOLYMPUS  https://opc.olympus-imaging.com/playair/

2.网站导航条

网站导航条也是使用较多的元素。网站顶部的导航条和FOOTER部分的导航条会形成首尾呼应,即使用户浏览到页面的最底部,也不需要返回到页面的顶部,这样的设计更加方便了与其他页面之间的跳转。

0d8657317859000000305aabfaaf.jpg医療法人社団明照会  http://obu-aozora.com/

3.利于SEO优化

在FOOTER部分上使用较多的则是文本链接,这一点是非常有利于SEO优化的。但是,如果在链接上埋入毫不相干的关键词,就会使链接看起来不太自然,这是值得注意的一点,不要为了推广而推广。

288557317876000000305a36893e.jpg昭和丸筒  http://www.marutsutsu.co.jp/index

4.网站地图

在FOOTER部分放置网站地图,可以方便用户快速跳转到指定页面。如果在网页的FOOTER部分放置网站地图,就会获得用户更多的点击机会,同时会使用户有更好的体验,即使不用移动页面也能跳转到很多其他页面。

诚然,对于页面不是特别多的网站,网站地图还是做得较为简单直接点好。如果罗列的链接数量过多,会让用户感觉到网站很繁琐,不易于操作。要是选择过多的话,人们往往不知道该选择什么。因此,网站的结构在设计之前就必须要考虑清楚。

4d49573178a9000000305ae1170b.jpg東洋ナッツ食品株式会社  http://www.toyonut.co.jp/

5.传达品牌理念

FOOTER与页头有所不同,可以放置基本不需要选择的元素。另外在FOOTER部分,更容易确保有足够大的空间,我们也可以选择一些插画或图形去传达品牌理念。

8961573178b7000000305ae12052.jpg

雪見亭  http://yukimitei.jp/

6.联系方式

在FOOTER部分可以放置电话号码、企业邮箱、企业地址、地图,资料请求等等的链接,这样放置会极大方便用户查找企业的联系方式。

91e7573178d9000000305af402d5.jpg

押原こども園  http://www.oshiharakodomoen.jp/

7.友情链接

绝对不需要用户滚动鼠标,用户在FOOTER部分就会看到相类似的网站。我们可以有效利用这一特点,将拥有相同兴趣的用户汇聚在一起,因此,在网站上有效的利用这些目录链接是非常重要的。在FOOTER部分放置简介也是可以的,这样做会也让具有相同兴趣的网站对本网站有所了解。

8670573178f2000000305a63364f.jpg

日本デザインセンター  http://www.ndc.co.jp/

8.广告区域

与友情链接功能相似,主要是作为推荐商品和服务的自我宣传区域,也可以进一步阻止用户离开页面,这里的商品可以选择放置最新或者热销的商品,增加用户停留的时间。

315e57317907000000305aaa14dd.jpg

Delux  http://www.deluxice.com.au/

9.网页的视觉平衡

如果忽视FOOTER部分的设计,而将设计重点放在Header上,往往会给人以头重脚轻的感觉。为此,我们增加FOOTER部分的设计分量,就可以轻松达到网站视觉上的整体平衡。

986d5731791d000000305a51d2d0.jpg

ぽっぽさんの写真館 http://poppo.westjr.co.jp/

10.社交媒体

Twitter,facebook,instagram等社交媒体的链接,可以作为网页的焦点。在企业官网上运营其他社交网站这样的做法也是可以的。这种放置社交媒体链接的做法,更有利于官方网站在社交网站上的推广。

adf55731793b000000305a45ad0f.jpg

Newbalance  http://betamag.newbalance.co.jp/

二.案例赏析

1.もじゃ

4fe657317953000000305a50aef9.jpg

旅もじゃ  http://www.tabimoja.com/

图例中FOOTER部分使用了可爱的插画风格,同时加上火车慢慢经过的动态效果,呈现出明亮、活泼的设计风格。为了使页面呈现出活泼的效果,在设计时使用了艳丽的色彩,这种配色技巧也符合展现日本活力的网站定位。

2.TONE

7fd157317969000000305ae17cc1.jpg

TONE  http://tone.ne.jp/

图例中TONE网站,FOOTER部分被设计的非常简洁。右侧黄色置顶按钮与左侧部分产生了强烈的对比,这种将网站FOOTER纵向切割为两部分的设计很具独创性。在设计简约风格网页时,配色时色彩控制在两种左右时效果最好,图例中这种互补色配色,其色彩是各自独立的,并且留有大量的白空间可以给人一种非常大气的感觉。

3.TITICACA

0ba957317978000000305a8fd348.jpg

TITICACA  http://www.titicaca.jp/

图例中网站地图排列的清晰明了,用户很容易就找到需要跳转的页面,无需浪费更多时间。

4.NOROMA面屋

2ea75731798a000000305af17124.jpg

NOROMA面屋  http://noroma.net/

图例中FOOTER部分的背景使用了一张捞起面条的图片,巧妙的传达了品牌形象。在设计中凸显出符合其价位的高性能与高品质,使用低明度、低纯度的暗色调,文本字体越小越好,这样不会让人产生压迫感。文字颜色也一样,将文字颜色所用色彩控制在两种以内,增加留白,就会营造出高档的效果。

5.味的明太子

023057317998000000305a2a8e9b.jpg

味的明太子  http://www.joshibi.net/joshibi2010/index.html

图例排版简洁整齐,FOOTER部分的设计也有让人清爽的感觉。店铺地址、咨询电话、传真通过颜色的对比而显得突出。

6.京都馆

169c573179a5000000305a7a187a.jpg

京都馆  http://www.kyotokan.jp/

图例中卡片式的友情链接,让用户通过广告图片直观的了解将要跳转到哪里。这样的设计避免了枯燥的文字链接方式,让页面设计更加丰富。

7はなみち舎

3409573179b6000000305aa96c12.jpg

はなみち舎  http://hanamichiya.jp/

图例中展示的水彩风格的FOOTER部分,与网站整体的风格相统一。突出的联系电话让用户视线更加集中,有效的引导用户注意到重要信息。

8.定山溪温泉

109a573179c9000000305ae3af2a.jpg

定山溪温泉 http://jozankei.jp/

图例中FOOTER部分的导航条是设计精美的图标与文字搭配,板式简洁且固定。与左侧的联系方式部分的丰富变化形成鲜明的对比,在设计上可谓非常巧妙的FOOTER。

三.给年轻设计师的建议

总而言之,FOOTER部分的设计是网站整体的一部分,FOOTER的设计需要从整体来考量。优秀的FOOTER设计必须要从品牌宣传,网站整体氛围,信息传达等多个方面进行综合考虑。

此外,很多优秀的FOOTER设计师往往会在设计的时候区别于网站的其他区域,在颜色的选择上进行区分,在元素区域、面积上进行区分,或者使用高品质的插画和图形等去区分。设计师通过巧妙地运用FOOTER的这些特性,并且充分考虑布局与内容才能设计出优秀的FOOTER。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部