固然本文说的是PC端的网页设计，其实对付移动端的网页设计，同样是合用的，载体固然差异，可是设计的道理是想通的，但愿各人都能学乃至用，配合进步。

头部内容在网页设计中起着很是要害的浸染，并为网站的其他各个方面设定了基调。尤其是在此刻这个极简主义流行的时代，各类百般脆而不坚的内容往往令人厌恶。有时没有其他对象可以吸引用户眼球，头部内容的设计就显得尤为重要。

网页设计师在设计网站这部门时投入了大量精神，同时要分身缔造力和出产力。按照Google的研究，用户只需要50毫秒就可以形成对一个网站的观点，甚至有些概念是在令人难以置信的17毫秒内形成的。用户对品牌的相识就是从这么短的时间内开始的。

要相识如何设计一个有效的网站头部内容，以及它应该包罗哪些元素，请继承阅读，我们将团结案例报告。(彩云注：网页中的header，是指网页头部内容，为防备赘述，以下直接用英文header。在代码中，对付这部门也习惯性用header来标识，用英文表达更为精确。)

“Life is a first impression. You get one shot at it.Make it everlasting.”― J.R. Rim

01 什么是网页header？

一个网站header就是网页的顶部区域。在已往一段时间，人们将header领略为网站顶部的窄条，个中包括Logo、按钮和接洽信息。可是在如今的设计中，首页上方的整个空间都被视为header区域。

作为人们在加载网站后的最初几秒内看到部门，头部信息起到了一种邀请浸染，它应该提供有关网站的根基信息，以便用户可以或许在几秒内相识网站的主要内容。

一些设计师为网站的差异部门建造单独的标题。譬喻，可觉得首页设谋略大的标题，而为其他页面留出较小的标题，可是，气势气魄要保持一致。网站内页的标题设计应该是首页的简捷版，这是一个很好的网站设计实践。

02 Header应该包括哪些内容？

Header的任务是给用户提供一些根基问题的谜底：代表什么品牌，提供什么商品和处事，如何取得接洽，今朝有哪些生意业务等等。

除此之外，它还代表着网站的质量甚至是特性。假如内容引起了用户感情上的共识，而且用户以为它是有代价的，那么就是正确的设计。

网站header的主要元素凡是包罗：

Logo 或品牌标识

交互指引

标题

导航要素

搜索成果

不必一次将它们全部添加，有须要在富厚的信息与元素的调和布置之间找到均衡。

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

在极简主义的标题设计中，只有网站重要部门的链接和公司 Logo 才会被展示出来。这个能力在设计着落页时很是有用。

03 更佳header设计实践

在设计网站header时，没有任何对象会限制你的缔造力，它应该是令人难忘的、简捷的和有用的，是一个可以举办更具缔造性的开放规模。

让我们温习一下要点。

1. 尺寸

对付网页header图片的巨细没有确切的谜底。一些文章试图提供一组精确的数字，但今朝网页设计更大的难点之一是很难确保每个屏幕尺寸的有效性。纵然两个屏幕的尺寸沟通，判别率也大概差异，因此用户看到的内容也不必然完全一样。

因此，不要拘泥于准确的像素观念，更好遵循简朴的知识法则。

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

在header较长的环境下，更好给下一页内容暴露一些空间，这样用户就可以意识到下一页尚有内容，引导用户转动。

2. 视觉条理

尼尔森·诺曼团体（ Nielsen Norman Group ）于 2006 年首次提出了他们关于 *** 阅读的F型模式理论，直到本日，这一理论仍然具有指导意义。

当一小我私家发明本身在生疏网站上，老是习惯于从屏幕的左上角开始欣赏网站。假如他们在哪里找不到预期的信息，将会不假思索地认为这个页面是难用的和不类型的，需要耗费许多的尽力才气领略。

Logo ——尼尔·森诺曼团体的另一项研究发明，与居中或右侧安排对比，用户更容易记着那些 Logo 放在左边的品牌。

假如你利用的是圆形 Logo，那么可以把它居中安排，尽量它的有效性仍然比放在左侧要低。