虽然本文说的是PC端的网页设计，其实对于移动端的网页设计，同样是适用的，载体虽然不同，但是设计的原理是想通的，希望大家都能学以致用，共同进步。
头部内容在网页设计中起着非常关键的作用，并为网站的其他各个方面设定了基调。尤其是在现在这个极简主义盛行的时代，各种各样华而不实的内容往往令人厌恶。有时没有其他东西可以吸引用户眼球，头部内容的设计就显得尤为重要。
网页设计师在设计网站这部分时投入了大量精力，同时要兼顾创造力和生产力。根据Google的研究，用户只需要50毫秒就可以形成对一个网站的看法，甚至有些观点是在令人难以置信的17毫秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。
要了解如何设计一个有效的网站头部内容，以及它应该包括哪些元素，请继续阅读，我们将结合案例讲述。(彩云注：网页中的header，是指网页头部内容，为防止赘述，以下直接用英文header。在代码中，对于这部分也习惯性用header来标识，用英文表达更为准确。)
“Lifeisafirstimpression.Yougetoneshotatit.Makeiteverlasting.”―J.R.Rim
01什么是网页header？
一个网站header就是网页的顶部区域。在过去一段时间，人们将header理解为网站顶部的窄条，其中包含Logo、按钮和联系信息。但是在如今的设计中，首页上方的整个空间都被视为header区域。
作为人们在加载网站后的最初几秒内看到部分，头部信息起到了一种邀请作用，它应该提供有关网站的基本信息，以便用户能够在几秒内了解网站的主要内容。
一些设计师为网站的不同部分制作单独的标题。例如，可以为首页设计较大的标题，而为其他页面留出较小的标题，但是，风格要保持一致。网站内页的标题设计应该是首页的简洁版，这是一个很好的网站设计实践。
02Header应该包含哪些内容？
Header的任务是给用户提供一些基本问题的答案：代表什么品牌，提供什么商品和服务，如何取得联系，目前有哪些交易等等。
除此之外，它还代表着网站的质量甚至是特性。如果内容引起了用户情感上的共鸣，并且用户觉得它是有价值的，那么就是正确的设计。
网站header的主要元素通常包括：
Logo或品牌标识交互指引标题导航要素搜索功能不必一次将它们全部添加，有必要在丰富的信息与元素的和谐安排之间找到平衡。
给header设计大量留白也不见得一个好主意，用户不能在短时间内弄清楚页面信息就很可能会离开。一个糟糕的header可能会将用户推向其他竞品网站。
在极简主义的标题设计中，只有网站重要部分的链接和公司Logo才会被展示出来。这个技巧在设计着落页时非常有用。
03最佳header设计实践
在设计网站header时，没有任何东西会限制你的创造力，它应该是令人难忘的、简洁的和有用的，是一个可以进行更具创造性的开放领域。
让我们复习一下要点。
1.尺寸
对于网页header图片的大小没有确切的答案。一些文章试图提供一组准确的数字，但目前网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。
因此，不要拘泥于精确的像素概念，最好遵循简单的常识规则。
Header应具有不干扰内容感知的高度。对于信息资源，较小的header将是一个不错的选择，而对于着陆页，header可能会更大。
在header较长的情况下，最好给下一页内容露出一些空间，这样用户就可以意识到下一页还有内容，引导用户滚动。
2.视觉层次
尼尔森·诺曼集团（NielsenNormanGroup）于年首次提出了他们关于网络阅读的F型模式理论，直到今天，这一理论仍然具有指导意义。
当一个人发现自己在陌生网站上，总是习惯于从屏幕的左上角开始浏览网站。如果他们在那里找不到预期的信息，将会不假思索地认为这个页面是难用的和不规范的，需要花费很多的努力才能理解。
Logo——尼尔·森诺曼集团的另一项研究发现，与居中或右侧放置相比，用户更容易记住那些Logo放在左边的品牌。
如果你使用的是圆形Logo，那么可以把它居中放置，尽管它的有效性仍然比放在左侧要低。
导航——请密切注意不要把网站的这一部分弄得过于杂乱，太多的链接让访问者不堪重负。有时，一个网站整体布局的迭代可能是为了给最重要的类别清理出一些空间。
使访问者轻松了解自己所在的位置以及如何进一步操作，同时可以使用鼠标悬停效果引导用户。
行动指引——实施视觉层次结构原则以自然地突出CTA（号召性用语）。
3.固定header
固定Header，换句话说就是“粘性标题”，意味着当你滚动页面时，Header在页面中跟随，这现在成了一个网页设计标准。
如果Header不违反整体设计理念，请将其固定。无论是PC端还是移动端设计，这都是一个好主意：
电商网站-购物车总是在用户的面前。服务网站-电话号码或CTA不断地显示。固定导航栏提升了用户体验，保持用户导向并给予了他们更多控制权。
4.Header所传达的信息
在设计header之前，请考虑网站的整体风格及其主要目的。
如果这是一个旨在展示产品的宣传网站，header的设计可能包含到主要子页面的链接，结合Banner在第一屏上，因为这样一个网站的主要目的是有效地展示产品。就电商或商业网站而言，情况可能有所不同。用户需要轻松导航，了解最新的交易，如何快速联系客服，以及在哪里查看他们已经完成的订单，所以在这种情况下，header要尽可能简洁从而凸显其他类别。
Header可能传达的几种消息:
促使消费者做一些事情建立信任鼓励访客了解更多信息有趣等等这个选择取决于特定网站的目的。
5.相关图片
Header中的图片应该直接传达有关业务的信息。例如，如果它代表的是送餐服务，那么图像可能描绘的是一个整洁的快递员和具有美学吸引力的食物。一般来说，访问者在看过你的网站，应该产生从这里购买一些东西的消费欲。
高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事，唤起用户的情感，并鼓励您的访问者进一步滚动。对于那些有强烈冲击力的图片的网站，试着做一个透明的标题，它可以更好地显示图像，并保留了主要链接。
轮播图片——如果你有几张代表了网站业务的出色照片，这种方式就没有错！用户可以滚动浏览一组精美的高分辨率图像。
插画——网站的Header图片必须能引起读者的共鸣，建立起人与人之间的联系。如果图片是独特的且易于辨认，即使是从网站标题中剪切出来，效果也会很好，可以利用当今的插图潮流来实现这一点。
6.视频或动画
不要只
转载请注明地址:http://www.1xbbk.net/jwbjj/1884.html
