如何做好网页头部内容设计?来看设计师的总结。

无论作为设计师还是普通浏览者,大家观看一个网站时最先接触到的就是网页的头部区域,这部分内容为网站的其他各个方面设定了基调,在网页设计中起着非常关键的作用。

尤其是如今简洁设计比较盛行,多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力,同时要兼顾创造力和实用性。根据一项Google的研究,用户只需要短短数秒就可以形成对一个网站的看法,甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。

头部区域在哪儿?

在通常网页设计中,首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分,头部信息起到了一种邀请作用,它应该提供有关网站的基本信息,以便用户能够在几秒内了解网站的主要内容。

如果以招聘活动站点为例,整个头部区域设计要明确传达企业形象,及本次招聘活动的特点。给浏览者一个强烈的视觉印象,企业已向你发出邀请,我们对人才十分渴求,等等信息… 如果有线上线下活动同时参与,那么在整体风格上尽量保持一致。

如何做好网页头部内容设计?来看 58 设计师的总结!

包含哪些内容与功能?

网页头部的任务是给用户提供一些基本问题的答案:代表什么品牌,提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣,那么就是正确的设计。

那么主要元素通常包括:

  • Logo 或品牌标识
  • 交互指引
  • 标题Slogan
  • 导航要素
  • 搜索功能

在设计网站头部内容时,从思维层面来讲没有任何东西会限制你的创造力,它应该是令人难忘的、简洁和兼具实用性的,是一个可以展示创造性的开放领域。

下面让我们一起来看看头部内容设计的一些技巧。

1. 关于尺寸

对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字,但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同,分辨率也可能不同,因此用户看到的内容也不一定完全一样。

因此,我们不要拘泥于精确的像素概念,最好遵循经验积累的常识规则。

如何做好网页头部内容设计?来看 58 设计师的总结!

头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面,较小的头部区域是一个不错的选择,而对于落地页或者企业客户首页,头部区域可能会更大,而且多数大客户会有主视觉单屏展示页。

如果某些网页,例如落地页头部内容较长的情况下,最好在首屏给下一屏内容露出一些空间,这样用户就可以意识到下一页还有内容,引导用户滚动。

2. Logo展现

当一个人发现自己在陌生网站上,总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果,但是多数用户如果他们常规位置找不到预期的信息,将会不假思索地认为这个页面是难用的和不规范的,需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化,我们今天主要说大多数受众。

如何做好网页头部内容设计?来看 58 设计师的总结!

Logo ——与居中或右侧放置相比,用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo,那么可以把它居中放置,尽管它的有效性仍然比放在左侧要低。

3. 吸顶导航栏

吸顶导航,换句话说就是「粘性标题」,当你滚动页面时,导航区在页面中跟随,现在成为一个网页设计标准。如果不违反网站整体设计理念,请将导航栏吸顶固定。无论是PC端还是移动端设计,这都是一个好的选择:

  • 例如长页面展示、浏览内容同时客户需要导航区总是在视线范围内。
  • 如有滚动信息,不断提示客户点击,则可置顶或置底处理。

如何做好网页头部内容设计?来看 58 设计师的总结!

可根据页面内容展示要求,向下滚动时调整导航背景透明度,尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度,使用户能找到但又不过于抢眼。

总之,固定导航栏有助于提升用户体验,保持用户导向并给予了他们更多控制权。

3. 关于图片的应用

头部内容所用图片可以选择直接和要表达的业务相关性很强的,例如招聘类网站使用招聘场景图片;也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容;

如何做好网页头部内容设计?来看 58 设计师的总结!

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

如何做好网页头部内容设计?来看 58 设计师的总结!

轮播图片——如果客户给了几张代表该企业业务的出色照片,这种方式就没错!企业希望用户可以滚动浏览一组精美的高分辨率图像。

如何做好网页头部内容设计?来看 58 设计师的总结!

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

4. 视频或动画

当然我们也不能只关注静态图片,添加视频也是最有效的网站头部创意之一。如果可能的话,尝试着在头部内容中添加主题视频材料,很多网站利用在背景中添加短视频来吸引用户,尽可能以最好的方式展示他们的公司或产品。

如何做好网页头部内容设计?来看 58 设计师的总结!

△ 华夏幸福校招官网首页动画,拨云见日的效果加上中式剪纸风格的运用,将公司各业务线融合到几个转轮中,产生了故事性的动画场景。

如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例,各大公司对应届生群体的追逐,很大程度上体现在对该群体审美和喜好的迎合上,年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。

当然不一定只有满屏大型动画,一般动画越复杂面积越大占用流量越多,客户打开延迟也影响观感。这时候我们可以根据功能不同,设计一些交互性的动画,去提升客户使用感受,尽量不影响网页打开速度。

5. 移动端头部设计

网页头部不可能只显示PC端的网页上,还应该正确显示在移动端的网页上。因此,在近年的设计中,网页必须具有响应性,并且能够很好地适应各种移动设备,这样才能带给用户完整的设计体验。

移动设备的日常使用广泛性早已影响网站设计,即使在PC中,也有一些细节看起来像是面向移动设备的网站设计。例如,Banner和汉堡包菜单都起源于移动设计。

如何做好网页头部内容设计?来看 58 设计师的总结!

移动端有着与PC端不同的屏幕尺寸和操作方式,很多时候需要设计师在一开始就考虑到两种界面的适应情况,比如在PC上顶部一条的导航,到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容,在移动端会向下层延伸,首层界面成为一个内容聚合页。

写在最后

网站是以头部内容为先导的,它就像是一张独特的名片。因此,我们在设计网站时,尽可能最大限度地关注该区域。

最后还要提醒大家,一定记得定期更新网站头部内容哦!以校园招聘大客户为例,大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格,以保持网站的新鲜感和时效性。

以上只是在工作中的一些点滴体会,微不足道。感恩能在UXD集体中不断成长。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/231453.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月1日 11:54
下一篇 2023年3月1日 11:54

相关推荐

  • 小编教你新颖的个人网站设计模板有什么特点。

    我们在网络上看到的那些个人网站设计模板很多都是由页头、页脚、侧边栏和内容页这几个方面组成的,实际上在模板上有着很大的变化,其中最为主要的就是集中在一些创意型的设计网站上,这种类型的网站更加的新颖、精…

    2023年6月13日
    00
  • 5种成熟的导航栏设计 让你的网站用户体验加分

    可靠的导航设计能帮助用户达成目标,找到所需的内容,提升页面的转化率。但设计不合理的导航对於用户体验来说简直就是灾难,间接影响网站的转化率和用户的留存率。那麽,怎样的导航设计才算是成熟呢? 成熟的导航设…

    2022年6月25日 建站资讯
    0525
  • 从浏览器进入网站设计过程。

    在大多数情况下,设计师仍然使用传统的设计工具在网站设计过程中创建静态屏幕模型。但有些设计师却正在进行一场巨大的飞跃,绕过它们,直接编写代码,在浏览器中构建和调整设计,并测试他们的设计,就像它们在实时…

    2023年2月19日 SEO操作
    00
  • 网页设计技巧:如何轻松选出网站的基础色

    配色方案永远是网页设计中恒久不变的热门话题,尽管网络上关於配色的内容多如牛毛,但是真正了解当中奥秘的人又有多少呢?下面,Inspirr Creation将从不同的层面分析配色最容易忽略的问题,希望对各位提高色彩搭配技…

    2022年6月25日 建站资讯
    0190
  • 网页设计技巧:电商网站如何设计横幅更吸引眼球

    设计横幅的技巧有哪些?用户去与留,大多是由网站设计而决定的,其关键因素在於网页中的图片设计,或近期很流行且能移动的「横幅」。横幅,又叫图片滚动、滑块、特色内容模块等等很多类似的叫法,其在网页上随处可见…

    2022年6月25日 建站资讯
    0134
  • 网站设计模板制作有哪些步骤?

    网站设计,很多人或者小企业在建网站时为了节省资金预算,通常会选择使用网站范本来建设网站。那么一个网站范本制作需要哪些步骤? 我们知道网站建设的基本流程是:1、设计师将网站要使用的各个图片设计出来。2、进…

    2019年10月30日
    0238
  • 网站设计技巧:这个开学季正流行的网页设计趋势

    如果你最近手头上正好有设计项目,但灵感不足,不妨参考一下Inspirr Creation为你精心炮制的「这个开学季正流行的网页设计趋势」,看看有没有值得借鉴和使用的地方。 流行趋势一:精心定制的插画 插画元素无论在网…

    2022年6月25日 建站资讯
    0114
  • 网站建设需定位的两个目标

    在进行网站建设之前,要充分的摸清项目的背景,最重要的是定位好以下这两个目标: 一、业务业务目标:用某种策略给目标用户带来某种价值,以实现某种变现的方式; 二、设计目标:用某种网站设计的策略给目标用户带…

    2022年6月14日
    0144

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息