软件定制开发公司新闻动态

新闻中心NEWS

网站设计如何利用header增加曝光度

责任编辑:网站设计 点击:2701 发表时间:2020-10-23
  如何利用网站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设计上,同时定期更新以保持网站的新鲜感和时效性。

案例

扫码分享给好友