2020年网站标题设计规范和指南
标题在网站设计中起着关键的作用,并为网站的其他各个方面奠定了基调。特别是现在,在成功的极简主义时代,有时没有什么东西可以吸引人们的眼球,所以便大大提高了网站标题设计的作用。
Web设计师花了很多精力在设计网站的这一部分,同时兼顾了创造力和生产力。根据Google的说法,它只需要50秒,甚至是17秒即可形成用户对于一个网站的意见。而消费者对一个品牌的了解也始于此。
要学习如何设计一个网站的标题,它应该包括什么元素,请继续阅读示例。
什么是网站标题?
网站标题是网页的顶部部分。在过去,人们把标题理解为网站顶部的窄条,其中包含一个标志、一个行动号召和联系信息。但在现代设计中,主页折叠上方的整个空间被认为是页眉。
页眉是人们在加载网站的最初几秒钟中看到的页面的部分,它相当于一种邀请。它应该提供有关站点的基本信息,以便用户可以在几秒钟内了解其提供的内容。
一些设计师为网站的各个部分制作了不同的标题。例如,你可以为首页设置一个较大的标题,而为其他页面保留一个较小的标题,但是要保持一致。内页上的页眉设计应为主页上页眉的缩写版,这是一个很好的网站设计实践。
网站标题包括什么?
标题的任务是为用户提供以下基本问题的答案:代表什么品牌,提供什么商品和服务,如何与公司的员工保持联系,是否有任何当前的交易等等。
除此之外,它还代表了一个网站的质量甚至身份。如果标题引起了良好的情感反应,并且观看者认为它具有一定的价值,那么你已经通过了最初的测试。
网站标题的主要元素通常是:
- 标志或品牌标识
- 呼吁采取行动
- 文本或标题
- 导航元素
- 搜索
你不必一次性添加所有这些东西,我们有必要在信息的丰富性与信息的和谐性之间找到一个平衡点。
将标题保留为空也不是一个好主意,如果用户在几秒钟内无法弄清您的界面,用户很可能会离开而不会返回。一个糟糕的标题会把访问者推到另一个内容不佳的网站。
在简约标题的设计中,仅显示指向网站主要部分和公司标识的链接。这种技术在设计着陆页面时特别有用。
最佳网站标题设计做法
在设计页眉部分时,没有任何限制您的创造力。该网站的标题是一个开放的区域,可以进行广泛的创意设计决策,这应该是令人难忘、简洁而有用的。
让我们回顾一下要点。
标题大小
对于网站标题图片的大小没有确切的答案,一些资源试图提供一组准确的数字集,但是如今,网站建设最困难的方面之一是确保每个屏幕尺寸的有效性。即使两个屏幕的大小相同,分辨率也可能不同,因此用户将看不到相同的东西。
所以不要拘泥于精确的像素概念,最好遵循简单的常识规则。
标题应具有不干扰内容感知的高度。对于信息资源,一个小标题将是一个不错的选择。
对于大量标题,最好在折页下面留一些空间,以便用户可以看到页面接下来的内容并开始滚动。
视觉层次
尼尔森·诺曼集团(Nielsen Norman Group)于2006年首次以F形的网络阅读模式提出了他们的理论,而这一理论至今仍没有失去意义。
一个人发现自己进入了一个新的不熟悉的网站,他的视觉旅程总是从屏幕的左上角开始。如果他们在那里找不到期望的信息,那么该页面将被自动认为是棘手的和不规范的,需要花费大量的精力来理解。
商标:NN / g进行的另一项研究发现,与中心或右侧部分相比,标识位于左侧的那些品牌,用户会更容易记住。
如果你有一个圆形的标志,那么把它放在屏幕的中心是可以接受的,尽管它的效果仍然会比放在左边的效果低。
导航:请密切注意不要使网站的这一部分过于混乱。太多链接使访问者不知所措。有时,整个网站的结构可能是为了给最重要的类别留出一些空间。
使访问者轻松了解自己的位置以及如何找到进一步的方式。使用悬停效果来指导用户导航。
呼吁采取行动:实施视觉层次结构原则以自然地突出CTA。
固定(粘性)接头
持久的导航栏,或换句话说就是“粘性标题”,意味着当你滚动页面时,导航会在页面周围跟随你。这是现在的网页设计标准。
使标题固定,如果它不违反你的整体设计概念。这对于桌面和移动设计都是一个好主意:
- 电子商务网站-购物车始终在用户的前面。
- 服务网站-电话号码或CTA不断显示。
固定的标头改善了客户体验,使用户保持导向并给予他们更多控制权。
标题所传达的信息
在设计标题之前,请考虑网站的整体风格及其主要目的。
如果这是一个宣传网站,目的是展示产品,标题的设计可能包含到主要部分的链接,结合大的英雄形象在第一个屏幕上,因为这样一个网站的主要目的是有效地展示产品。对于电子商务或商业网站,情况可能有所不同。用户需要轻松导航,了解最新的交易,如何快速联系经理,以及在哪里查看他们已经完成的订单,所以在这种情况下,标题可能更简洁,为其他类别让路。
标题可以传达几种可能的消息:
- 督促消费者做点什么
- 建立信任的工作
- 鼓励访客了解更多
- 有趣等等
这个选择取决于特定网站的目的。
相关图片
标题中的图片应直接传达有关业务的信息。例如,如果它代表的是送餐服务,则图像可能描绘的是一个整洁的快递员和具有审美吸引力的食物。一般来说,访客已经看过你的网站,应该想从你这里买东西。
高品质的照片:摄影是网页设计师的强大工具,它可以讲述一个故事,唤起你的情感,并激发你的访客进一步滚动。对于那些有强烈冲击力的图片的网站,试着做一个透明的标题。它能更好地显示图像,保留主要链接。
滑动图像:如果你有数张代表网站业务的出色照片,请继续!用户可以滚动浏览一组精美的高分辨率图像。
插图:网站的标题图片必须能引起读者的共鸣,建立起人与人之间的联系。更好的是,如果一个形象是独特的,易于识别,即使从网站的标题削减。你可以通过利用当今插图的趋势来实现它。
视频或动画
不要只将注意力集中在静态图像上。
添加视频是最有效的网站标题创意之一。如果可能的话,请尝试将主题视频材料添加到标题中。许多网站都用它来吸引观众,同时以最好的方式展示他们的公司或产品。
使你的设计更具吸引力、更生动和令人难忘的另一种方法是添加动画。它可以使网站标题变得非常酷。如果你正在寻找一个吸引观众的交互式网页,那么动画是一个不错的选择。
一个精心设计的号召性用语
在设计网络标题时,设计人员在其中添加了一些对操作元素的调用,例如log-in”、“sign-in”、“get in touch”等。为了吸引用户的注意力,从而产生了所需的操作,按钮应包含客户可以理解的铭文,以及其他内容。
将号召性用语放置在具有战略意义的位置是一个极好的机会,可以敦促用户从一开始就采取行动,从而提高你的转化率。有些CTA可以使用一段时间来促进特殊交易,而另一些CTA则具有长期存在。
网站标题的最佳字体
首先,客户会了解各部分的名称以及公司提供的信息:联系方式、有趣的报价。因此,你需要选择清晰易读的字体,这些字体不会损害用户的感知力,而且一眼就能看懂。
对于较大的首页标题,你可以使用一些粗体的排版和富于想象力的元素来吸引用户的注意力,否则,最好不要选择那些难以阅读的花哨字体。
简单的标题设计
通过保持标题的清晰和整洁,你的访客会觉得你没有试图用你的报价来增加他们的负担。一个有创意的网站标题可以有一个非常简单的外观。
隐藏式导航(汉堡菜单)
这是一种越来越多地用于网站设计的解决方案。汉堡菜单是一个带有三个条纹的小图标,单击该菜单将显示完整菜单。设计人员在需要专注于主屏幕时会使用此技术。
从站点可用性的角度来看,这是一个不错的选择。这样的菜单来自移动设计,已经为用户所熟悉。汉堡适合在促销场所使用,这些场所主要强调使用照片或视频展示产品的高质量。对于在线商店,此选项可能不太合适,因为对于客户而言,拥有购物篮,选定的产品以及快速访问的搜索字段非常重要。
移动标题设计
标题不仅应该在网站的桌面版本上正确显示,而且应该在移动版本上正确显示。因此,它必须具有响应能力,能够很好地适应任何移动设备。
移动设备的日常使用导致了网站设计看起来就像以移动为导向的,即使是在它们的桌面版本中。例如,大型英雄图像和汉堡包菜单的实现起源于移动设计。
结论
这个网站是由它的标题显示的。就像一张独一无二的名片。因此,在设计网站时,要最大限度地注意标题。
网站标题设计的最后一个最佳实践是:定期修改以保持你的网站更新。利用本文中的一些观点。
文中所用图片来自网络,如侵权,请联系删除
想要了解汽车更多内容,就留言联系我们吧!
译文来源:Kate Shokurova:Website Header Design in 2020: Best Practices and Examples