网页设计技巧：如何利用网页header增加曝光度

如何利用网页header增加曝光度?在这个遵循极简主义风格的时代，华而不实的内容往往令人厌恶，但有时网页设计过於简单又难以吸引用户的眼球，因此网页的header设计就显得十分重要。

什麽是网页header?

网页header就是网页的顶部区域，以往人们总会将header理解为网站顶部的窄条，即：

网页设计技巧

如今在网页设计中，首页上方的整个空间都被视为header区域：

网页设计技巧

作为人们加载网站後最先看到的部分，header不仅起到邀请的作用，更是概括网站基本信息，让用户在短时间了解网站的主要内容。

网页header包括哪些内容?

网页设计技巧

网页header的任务是给用户提供网站一些基本内容，如：品牌信息、商品和服务信息、联系方式、交易方式等。除此之外，它也向用户展示了网站的质量和特性，因此如果网站内容能引起用户情感上的共鸣，用户便会觉得这个网页设计是有价值的。

网站header通常会包括以下一些主要元素：

· Logo或品牌标识;

· 交互指引;

· 标题;

· 导航要素;

· 搜索功能等。

网页设计时，不必全部元素都添加在header上，也不要给header设计大量留白。Header信息过多或过少，都会让用户不能在短时间内弄清楚页面信息，而离开转向其他竞品网站。

如何利用网页header增加曝光度?

网站header应该是令人难忘、简洁且有用的，因此要想利用网页header增加网站的曝光度，就不要被任何东西限制创造力。

① 尺寸

网页设计技巧

网页header图片大小通常没有确切的答案，而这也成为网页设计中最大的难点之一。因为即使两个屏幕尺寸相同，但分辨率不同，用户所按到的内容页不一定完全一样，更何况是两个屏幕尺寸不同。

因此，不要拘泥於精确的像素概念，header设计应具有不干扰内容感知的高度，例如对於信息丰富的页面，较小的header会不错的选择;而对於着落页，header的长度应该增加。

* 当header较长的情况，最好给下屏内容露出一些空间，让用户意识到页面还有其他内容，继而引导用户滚动。

② 视觉层次

网页设计技巧

当用户处於陌生网站时，总会习惯从屏幕左上角开始浏览网站。因此别轻易因为所谓新颖的版式设计，而打破用户的阅读习惯。如果用户无法按照自己的习惯找到预期的信息，那麽他们将会花费更多时间和精力重新适应，继而判定页面是难用和不规范的。

关於header视觉层次的设计技巧：

Logo：尽量放置页面的左侧，方便用户记忆;如果品牌使用的是圆形Logo，也可把它居中放置，但有效性会比左侧偏低。

导航：导航不要设计得过於复杂，也不要存在太多连结。尽量只保留网站最重要的类别，让用户轻松了解自己的所在位置及下一步操作。

行动指引：实施视觉层次结构原则以自然地突出CTA(号召性用语)。

③ 隐藏式导航

网页设计技巧

隐藏式导航多以汉堡菜单为主，平常以三条条纹的小图标出现，单击时会显示完整的菜单。通常设计师希望用户专注页面内容时，都会采用这种导航设计。

通常汉堡导航设计适用於以促销为主的网站类型，这类网站主要透过高质量图片或视频，向用户展示产品;但对於线上商店等网站，这类方法可能不太合适，因为对於用户而言，将重要菜单隐藏无疑是增加他们的操作难度。

④ 固定header

网页设计技巧

所谓的固定header，其实就是「粘性标题」，即用户在滚动页面时，header会固定在页面的顶部不消失。

一般来说，如果header不违反整体设计理念，无论是PC端还是移动端网页设计，建议采用固定header，一来能增加用户对品牌信息的记忆，二来提升用户体验，方便用户随时进行下步操作。

⑤ 指引元素

网页设计技巧

设计网页header时，设计师都会添加一些CTA元素吸引用户注意，从而产生用户所需的行为。

想促使用户从一开始就采取行动，进而提高网站的转换率，将CTA元素放在具有战略意义的位置，同时包含客户可以理解的文案并区别於其他内容，就是一个不错的机会。

⑥ header所传达的信息

网页设计技巧

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

如果是旨在展示产品的宣传网站，header设计可能需要包含主要子页面的连结，目的是有效地展示产品;如果网站是电商或商业网站，header就要尽可能简洁地凸显其他类别，方便用户操作。

⑦ 相关图片

网页设计技巧

Header中的图片应该直接传达有关业务信息并极具吸引力，以便用户进入网站後，能从这里增加消费欲。

想让header图片更有吸引力，可从以下方式入手：

· 高质量摄影图片：这类具有强烈冲击力的摄影图片，能很好地向用户讲述一个故事，并唤起他们的情感，继而进一步滚动。

· 轮播图片：选取几张能代表网站业务的出色图片，既能吸引用户的眼球，同时还能让用户在短时间内了解网站的主要内容。

· 插画：利用如今非常流行的插画设计，能更容易地引起用户的共鸣，建立界面与人之间的联系。

⑧ 视频或动画

网页设计技巧

添加视频或动画是网站header最有创意之一的设计。

很多网站都会利用视频或动画展示公司的信息或产品，吸引用户眼球之余，还能更好地与用户互动。

⑨ 最佳字体

网页设计技巧

Header中的信息大多是概括整个网站的主要内容，因此字体的选择上应该清晰易读，能让用户一眼就能理解内容的大意。

对於大的主页标题，也可尝试使用一些粗体排版和富有想像力的元素吸引用户注意，但一定不要选用难以阅读的花俏字体。

⑩ 移动端header设计

网页设计技巧

Header不仅仅只会出现在PC端网页上，还会显示移动端的网页设计上，因此网页设计尽量采用响应式设计，以更好地适应各种终端设备。

网站header就像网站一张独特的名片，因此设计网站时应多花点心思在header设计上，同时定期更新以保持网站的新鲜感和时效性。