网站背景有点像呼吸。它们是我们日常生活的一部分,但是除非有明显的错误,否则我们从不真正关注它们。就像您的每一次呼吸一样,网站背景对于网站的成功和生存至关重要。它们使您网站的其他各个部分都能更好地运行。

选择网站背景的提示和示例
OrangeCrush的插图

无论如何,网站背景是什么?

网站背景是填满网站屏幕的图像,颜色飞溅或设计。这通常也是访问者对您的网站,品牌和业务的第一印象,因此务必正确无误。理想的背景将传达您的品牌故事,而错误的背景可能会打断您的信息。您的网站背景就像您在面试或初次约会时穿的衣服一样。您是要获得有趣,平易近人的外观还是精致独特的东西?

实际上,网络设计的这一基本方面实际上比您想象的要多得多。仅仅让您的网站背景看起来不错是不够的。就像您初次约会或求职面试时一样,您需要确保讲述自己的故事,确认可以与您见面的地方,并确保与您交谈的人享受与您的相处。同样,网站背景有望带来良好的用户体验(UX),并且受众清晰易读。

烤好的订阅服务网站背景
DSKY令人印象深刻的网站背景设计

网站背景基础

在开始使用技巧之前,必须先掌握基础知识。

满足两种类型的网站背景

身体背景

身体背景是覆盖屏幕大部分区域的区域。在这里,您可以找到由插图,纹理,完整图像或颜色渐变组成的背景。通常,它只是纯白色。

内容背景

内容背景并不涵盖整个屏幕,而是围绕其他部分(例如图像或文字)周围的区域。它给出了结构,并有助于强调和分隔不同的网站部分。

啤酒品牌身体背景
DSKY引人注目的啤酒品牌背景
房地产内容背景
阿斯图里亚斯引人入胜的内容背景

使用标题可额外弹出

标头是页面的顶部,是展示网站个性的重要方式。这是使用醒目的元素(例如插图或色彩飞溅)的好地方,因为它可能不会分散下面内容的注意力。

风筝冲浪网站背景标题“ width =” 761“ height =” 603
Design Monsters引人注目的网站背景标题

注意对比

确保同时考虑颜色对比。错误的对比会导致难以阅读您网站上的内容,从而使访问者无法访问它,因此请确保 检查您的对比度

转到图形

使用图形元素可以使您的网站与众不同,并仅通过视觉效果就能讲述故事。但是请确保使用图形元素的样式与您网站的整体风格一致,以便为用户提供一致的体验。

带有图形元素的女性剃刀网站背景“ width =” 757“ height =” 530
一个时尚的网站背景,包含DSKY的图形元素

强化背景

白色网站背景是一种简单而永恒的选择。但是,网页设计中的全身背景(例如使用渐变,完整图像或纯色块)在正确执行时会产生巨大的影响。确保图像不太亮或没有暗点,以确保图像不会干扰您的内容。您想确保您的用户可以轻松,即时地阅读您的业务内容。

全身网站背景“ width =” 990“ height =” 491
2ché的开箱即用网站背景

向重点问好

突出显示(由不同颜色组成的细线,分别用于网站的各个部分)有助于打破纯色块并提高可读性。

网站背景亮点“ width =” 1597“ height =” 1377
DSKY有趣的网站背景摘要

创建理想网站背景的8个技巧

1.使用聪明的色彩界面

在网站设计背景中选择颜色及其组合非常重要,因为它们有助于用户阅读您的网站。网页设计中的色彩可以用来吸引注意力,触发情绪,产生欲望,推动转化并赢得用户的忠诚度。

在此处了解有关颜色理论的更多信息。

红色网站背景“ width =” 1905“ height =” 998
红色网站背景可以唤起Aneley的热情

2.使背景图片更具可读性

完美的背景图片需要看起来不错,但更重要的是,它需要使您的内容看起来更好。如果您无法阅读精美的网站背景图片,则没有必要选择它。如果您找到了完美的图像,但内容上方的文字清晰易读,请尝试使用照片编辑软件或CSS来更改对比度,不透明度甚至添加图层蒙版。如果这样做没有帮助,请尝试为内容本身选择正确的字体和字体大小。

笔记本电脑,手机和平板电脑上的网页设计,并带有苹果树清晰的照片背景“ width =“ 975” height =“ 489
Cidery网站背景图片,Gotza的字体易于阅读

3.尝试使用纯色背景

摄影不适合您的网站吗?为什么不尝试为您的网站背景使用一种纯色。通常,这是确保您的网站清晰易读的好方法,只要对比度合适即可。只需确保颜色与您的品牌,行业和您想给您的业务留下的印象保持一致即可。例如,红色和粉红色等暖色会对用户产生活力,可能对健身品牌很有用,而绿色和蓝色等冷色通常具有镇静效果,实际上是网站上最常用的颜色。

素食厨房的纯色网站背景“ width =” 1890“ height =” 1192
纯素食厨房纯色网站背景由UI疯狂

4.避免忙碌和混乱的图像

在图像上添加文本时,这一点尤其重要。即使您要为网站选择引人注目的图片,也不应偏离您要讲述的消息和故事。例如,风景既醒目又整洁,可以制作出色的网站背景图像。

整洁的北欧海盗网站背景“ width =” 825“ height =” 459
arosto整洁干净的网站背景

5.使其时尚

具有趋势的网站背景可以使您的设计具有现代感和新颖性。尝试使用一些最大的Web设计趋势,几何形状,沉浸式3D元素,发光,发光的配色方案,深色模式或在设计中使用当年的Pantone颜色。请记住,在永恒的设计中使用时髦的东西可能意味着您必须尽快更新背景。

深色模式网站背景“ width =” 1439“ height =” 1069
DarkDesign Studio的穆迪暗模式网站背景

6.制作动画

具有动画效果的网站背景是使您的网站栩栩如生的好方法。请记住,请确保动画是微妙的,以免干扰主图像或消息,并且不会压倒设计的前景。因为动画具有这种活力,所以合并细微的调色板也是一个好主意。

动画网站背景“ width =” 1024“ height =” 960
用户友好的动画网站背景,作者Adam Muflihun

7.渐变

是的,90年代的趋势又回来了,其中包括一场席卷设计界的风暴:渐变。渐变也称为颜色过渡,是从一种颜色到另一种颜色的逐渐混合。它们具有视觉吸引力,可以用作独立背景,也可以在照片上分层,以真正使您的网站流行。

渐变的动画网站背景“ width =” 2516“ height =” 1176
渐变网站背景 不可能局

8.使其移动友好

现在是2020年。即使您是在台式机上设计网站,事实是,大多数在线内容都是通过移动设备消费的。确保考虑以下网站诫命,以使您的网站适合移动设备使用:

  • 使您的网站具有响应能力。
  • 使人们寻找更容易找到的信息。
  • 不要使用Flash。
  • 包括 视口元标记
  • 打开表单的自动完成功能。
  • 使您的按钮尺寸大到足以在移动设备上舒适地工作。
  • 使用大字体。
  • 压缩图像和CSS。

选择网站背景图片时,请确保选择适合较小屏幕的图片。例如,一个非常宽的图像可能无法在手持设备上使用。

移动友好型建筑网站背景“ width =” 1331“ height =” 678
品脱移动友好的网站背景

如何获得梦想的网站背景

选择合适的背景可以使您的网站从平庸变成华丽。请记住,用户体验就是一切,因此请选择与访问者说话的颜色和图像,并确保在选择网站背景图像时,您可以清晰,轻松地阅读其上的文字。

考虑纯色背景色,不惜一切代价避免出现混乱的图像,并考虑包括渐变或几何形状之类的趋势,以保持现代感和现代感。如果您真的想在人群中脱颖而出,请尝试制作动画,并确保始终选择适合较小屏幕的背景。

最重要的是,请记住在设计中没有严格的规则。实际上,最好的设计通常根本不遵守规则。最重要的是用户的体验。使用这些技巧作为起点,不要害怕相信您的艺术反应。