网站建设如何掌握好头部内容设计,让网站曝光量迅速提升?

添加时间:2020-07-24 08:47:59 阅读次数:636

一、什么是网页header?


一个网站header就是网页的顶部区域。在过去一段时间,人们将header理解为网站顶部的窄条,其中包含Logo、按钮和联系信息。但是在如今的设计中,首页上方的整个空间都被视为header区域。


作为人们在加载网站后的起初几秒内看到部门,头部信息起到了一种邀请作用,它应该提供有关网站的基本信息,以便用户能够在几秒内了解网站的主要内容。


一些设计师为网站的不同部门制作单独的标题。例如,可认为首页设计较大的标题,而为其他页面留出较小的标题,但是,风格要保持一致。网站内页的标题设计应该是首页的简洁版,这是一个很好的网站设计实践。


二、Header应该包含哪些内容?


Header的任务是给用户提供一些基本题目的谜底:代表什么品牌,提供什么商品和服务,如何取得联系,目前有哪些交易等等。


除此之外,它还代表着网站的质量甚至是特性。假如内容引起了用户情感上的共识,并且用户觉得它是有价值的,那么就是准确的设计。


网站header的主要元素通常包括:


1、Logo 或品牌标识

2、交互指引

3、标题

4、导航要素

5、搜索功能


不必一次将它们全部添加,有必要在丰硕的信息与元素的和谐铺排之间找到平衡。


给header设计大量留白也不见得一个好主意,用户不能在短时间内弄清晰页面信息就很可能会离开。一个糟糕的header可能会将用户推向其他竞品网站。


在极简主义的标题设计中,只有网站重要部门的链接和公司 Logo 才会被展示出来。这个技巧在设计下落页时非常有用。


三、优佳header设计实践


在设计网站header时,没有任何东西会限制你的创造力,它应该是令人难忘的、简洁的和有用的,是一个可以进行更具创造性的开放领域。


让我们温习一下要点。


1.尺寸


对于网页header图片的大小没有切当的谜底。一些文章试图提供一组正确的数字,但目前网页设计的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同,分辨率也可能不同,因此用户看到的内容也不一定完全一样。


因此,不要拘泥于精确的像素概念,建议遵循简朴的常识规则。


Header应具有不干扰内容感知的高度。对于信息资源,较小的header将是一个不错的选择,而对于着陆页,header可能会更大。


在header较长的情况下,建议给下一页内容露出一些空间,这样用户就可以意识到下一页还有内容,引导用户动弹。


2.视觉层次


尼尔森·诺曼团体( Nielsen Norman Group )于 2006 年首次提出了他们关于网络阅读的F型模式理论,直到今天,这一理论仍旧具有指导意义。


当一个人发现自己在目生网站上,老是习惯于从屏幕的左上角开始浏览网站。假如他们在那里找不到预期的信息,将会不假思考地以为这个页面是难用的和不规范的,需要花费良多的努力才能理解。


Logo ——尼尔·森诺曼团体的另一项研究发现,与居中或右侧放置比拟,用户更轻易记住那些 Logo 放在左边的品牌。


假如你使用的是圆形 Logo,那么可以把它居中放置,尽管它的有效性仍旧比放在左侧要低。


导航——请紧密亲密留意不要把网站的这一部门弄得过于杂乱,太多的链接让访问者不堪重负。有时,一个网站整体布局的迭代可能是为了给重要的种别清理出一些空间。


使访问者轻松了解自己所在的位置以及如何进一步操纵,同时可以使用鼠标悬停效果引导用户。


步履指引——实施视觉层次结构原则以天然地凸起 CTA(号召性用语)。


3.固定header


固定Header,换句话说就是“粘性标题”,意味着当你动弹页面时,Header在页面中跟随,这现在成了一个网页设计尺度。


假如Header不违背整体设计理念,请将其固定。不管是PC端仍是移动端设计,这都是一个好主意:


电商网站-购物车老是在用户的眼前。

服务网站-电话号码或 CTA 不断地显示。


固定导航栏晋升了用户体验,保持用户导向并给予了他们更多控制权。


4.Header所传达的信息


在设计header之前,请考虑网站的整体风格及其主要目的。


假如这是一个旨在展示产品的宣传网站,header的设计可能包含到主要子页面的链接,结合 Banner 在首屏上,由于这样一个网站的主要目的是有效地展示产品。就电商或贸易网站而言,情况可能有所不同。用户需要轻松导航,了解最新的交易,如何快速联系客服,以及在哪里查看他们已经完成的订单,所以在这种情况下,header要尽可能简洁从而凸显其他种别。


Header可能传达的几种动静:


促使消费者做一些事情

建立信任

鼓励访客了解更多信息

有趣等等


这个选择取决于特定网站的目的。


5.相关图片


Header中的图片应该直接传达有关业务的信息。例如,假如它代表的是送餐服务,那么图像可能描绘的是一个整齐的快递员和具有美学吸引力的食品。一般来说,访问者在看过你的网站,应该产生从这里购买一些东西的消费欲。


高质量图片——摄影对于网页设计师来说是一个强盛的工具。它可以讲述一个故事,唤起用户的情感,并鼓励您的访问者进一步动弹。对于那些有强烈冲击力的图片的网站,试着做一个透明的标题,它可以更好地显示图像,并留存了主要链接。


轮播图片——假如你有几张代表了网站业务的精彩照片,这种方式就没有错!用户可以动弹浏览一组精美的高分辨率图像。


插画——网站的Header图片需要能引起读者的共识,建立起人与人之间的联系。假如图片是独特的且易于辨认,即使是从网站标题中剪切出来,效果也会很好,可以利用当今的插图潮流来实现这一点。


6.视频或动画


不要只关注静态图片。


添加视频是有效的网站header创意之一。假如可能的话,请尝试着在header中添加主题视频材料,良多网站利用它来吸引用户,同时尽可能以较好的方式展示他们的公司或产品。


使设计更具吸引力、生动和令人难忘的另一种方法是添加动画,它可以使网站header变得非常酷。假如想制作一个吸引用户的交互网页,动画是一个很好的选择。


7.精心设计的指引元素


在设计网页header时,设计师会添加一些步履号召元素,如“登录”、“注册”、“联系”等。为了吸引用户的留意从而产生用户所需的行为,按钮应该包含客户可以理解的微案牍,并且要区别于其他内容。


将步履号召按钮放在具有战略意义的位置是一个非常好的机会,可以促使用户在一开始就采取步履,从而进步您的转换率。有些CTA在一段时间内用于促进交易,有些则可以长时间存在。


8.优佳字体


首先,用户会了解到各部门的名称和公司提供的信息:联系方式、吸惹人的优惠。因此,你需要选择清楚、易读的字体,这些字体不会影响感知,而且一眼就能理解。


对于大的主页标题,你可以使用一些粗体的排版和富有想象力的元素来吸引用户的留意,否则,建议不要选择难以阅读的花哨字体。


9.简朴的标题设计


通过保持标题的清楚和整齐,网站的访问者会觉得轻松愉悦。一个富有创意的网页header也可以看起来非常简朴。


10.躲藏式导航(汉堡菜单)


这是一种越来越多地用于网站设计的解决方案。汉堡菜单是一个有三条条纹的小图标,单击时会显示完整的菜单。当设计师需要专注于主屏幕上时,他们会采用这个技巧。


从网站可用性的角度来看,这是一个很好的选择。这样的菜单来自移动端设计,用户已经很认识了。汉堡导航合用于促销网站,促销网站的主要重点是使用照片或视频高质量地展示产品。对于在线商店,这个方法可能不太合适,由于对于用户来说,拥有购物车、选定的产品以及快速访搜索字段非常重要。


11.移动端header设计


Header不仅应该准确显示在PC真个网页上,还应该准确显示在移动真个网页上。因此,它需要具有响应性,并且能够很好地适应各种移动设备。


移动设备的日常使用影响网站设计,即使在桌面中,也看起来像是面向移动设备的网站设计。例如,Banner和汉堡包菜单都发源于移动设计。



结论


网站是以header为先导的,它就像是一张独特的手刺。因此,在设计网站时,要在一定限度地关注header。


网站header设计的优佳实践是:按期修改以保持网站的新鲜感和时效性。尝试使用本文中的一些方案优化网页的header吧。