为网站设计背景

作为任何网站设计中最重要的部分,网站的背景可以通过多种方式用于帮助创建更好的用户体验。

今天,正确地创造背景比以前更难,并且提出了一些新的挑战,同时限制了背景本来可能具有的一些潜力。

例如,之前时代的背景实际上可以用作设计的实际部分。 例如,您可以在其上放置箭头,以引导观众注意重要的事情。

为什么事情发生了变化是因为需要响应式设计,以及人们可能使用的不同屏幕尺寸和屏幕类型的多样性。

因此,背景已成为当今网站设计中不太重要的元素,并且很多网站根本没有官方背景。

背景真的很重要吗? 为了找到答案,我们检查了排名第十的30网站(不包括重复),结果非常有趣。

正如你从上面的图片中看到的那样,排名靠前的网站根本不会对背景感到烦恼,而且在用户接受度方面似乎并没有给他们带来任何伤害。

这与传统的网站设计思想相悖,但很难与冷酷的事实争论。 令人惊讶的是,带有背景的列表中的第一个网站在您到达号码10(即Twitter)之前不会启动,并且该背景仅在您未登录时才可见。

在30的顶级2017网站中,唯一具有适当背景的网站是:

  • Twitter,具有摄影背景(排名10th)
  • Live(Outlook),具有纯色背景(排名12th)
  • NetFlix,带拼贴背景(排名21st)
  • WordPress,具有纯色背景(排名26th)
  • Bing,带有摄影背景(排名29th)
  • Tumblr,具有摄影背景(排名为30th)

因此,只有顶级20网站中的30百分比具有背景,并且那些已经完成的内容位于列表的下方。

站点背景的唯一优势是它有助于在多个页面之间保持站点身份的感觉,但由于还有其他元素可以实现这一目标,也可能更好,这并不是一个很大的优势。

缺点很多。 背景在网站响应性方面引入了额外的挑战,并且可能需要频繁更新以避免变得陈旧。

现代设计师的另一个挑战是除了静态背景之外,现在还可以创建视频背景。 如果您选择后者,了解您正在做什么至关重要,因为许多用户会发现设计不佳的视频背景令人讨厌。

有这么多理由不使用背景,你可能会决定跟随那些排名靠前的网站的脚步,一劳永逸地抛弃整个背景的想法。 但如果简报要求网站需要有背景,你能做什么? 这就是我们将在本文的其余部分中尝试解决的问题。

应包含背景

内容必须始终位于页面背景上方的图层上。 如果不将页面元素分成不同的层,则可能会在需要更改某些内容时为您创建问题。

最佳实践是尽可能多地采用这种层分离。 例如,网站的徽标是否真的需要直接合并到背景上? 大多数情况下,将徽标放在单独的图层中更为明智。 这样,如果需要更新徽标,则可以独立于整个背景更新徽标。

以这种方式使用图层意味着在创建方面为您提供更多的工作,但在维护方面的工作则更少。 它还可以为您提供最大程度的控制,因为您可以随时根据自己的需要隐藏,移动或移动它们。

此图像显示了背景设计模板的理想结构:

在每个层(基础层除外)中,如果您需要它们,可以创建额外的层以实现更大的分离度。

您创建的分离程度越高,您获得的控制就越多。 你现在可能觉得这对你来说并不重要,但经常发生它后来成为一个因素。

要理解的最重要的一点是“背景”是任何不满足的东西。 因此,文本或图像应该在页面上,但不是内容计数作为背景的一部分,但不是每个人都会以这种方式对它们进行分类。

取景

回到网页设计的早期阶段,框架只是一个简单的问题,即确定您的内容应该与背景相关的位置。 然而,在响应式设计的这一天,它通常比这更复杂。

通过响应式设计,您只有两种选择来处理框架问题。 第一种选择是相对于可用的屏幕尺寸缩放内容和背景图像。 当设计完整性是最重要的因素时,这是最佳的,尽管这将是非常罕见的情况。

第二种选择是在更常见的情况下逐步淘汰背景部分甚至整个背景,其中内容的易读性比设计完整性更重要。

顺便说一下,这个“设计完整性”问题只是意味着无论在什么样的屏幕上观看,设计总是看起来都一样。 相反的是,无论在哪种屏幕上观看,内容总是看起来(或多或少)相同。

使用缩放来响应

当您使用缩放来保持不同设备类型和方向的统一框架时,它可以保持您的设计的完整性,但结果可能仍然不是您所期望的甚至是期望的,特别是如果您使用摄影背景。

让我们看一下这种技术的实例。 从纵向模式下的三星Galaxy S5开始(请注意,这些图像可以缩放以适应文章,因此您可以看到的文本在设备本身上实际上是清晰的)。

这就是它在横向模式下的样子(除了拨打电话之外,除了打电话之外,除了打电话之外,将手机保持在横向状态几乎总是更好,但人们仍然坚持以纵向方式握住手机。

如您所见,即使只有640 x 360像素可以使用,缩放时的布局也非常精细。 接下来我们将iPad设为纵向。

和景观。

使用缩放时您会注意到的是,不同设备和分辨率之间的差异很小,除了纵向视图上可能存在大量浪费的垂直空间。

实际上在背景和内容部分使用不同的方法会更好,这样菜单项就会换行到2×2网格,而不是总是保留在1×4布局中,但是这样做的原因不是因为无法预测将有多少垂直空间。

因此,缩放的优势在于,无论具体情况如何,您都希望确保某些组件始终处于可见状态。

使用分阶段隐藏和显示响应

一个更实际的场景,也是大多数设计师想要在大多数时间使用的场景,是一种设计,如果没有足够的空间来显示它的背景(或其部分)可以简单地逐步淘汰,所以网站内容总是如此得到最大的关注。

以下是使用此方法时的差异示例。 我们将使用相同的设备和方向来说明。 首先是三星Galaxy S5的肖像。

三星Galaxy S5风景。

iPad肖像。

iPad风景。

在这里,您可以看到设备之间的巨大差异。 三星Galaxy S5的小屏幕不允许显示背景,无论设备是纵向还是横向,并且显示的内容经过调整以适应可用空间。

当在iPad上查看同一站点时,无论方向如何,始终显示背景,但所看到的内容存在一些差异。

背景设计的最佳概念(按顺序)

1。 纯色(或无色)

2。 摄影(拉伸)

3。 小瓷砖(完美无缝)

4。 大瓷砖(完美无缝)

你应该避免的是摄影背景的平铺,除非这可以通过不明显的方式进行。 拉伸通常最适合拍摄背景,或将它们限制在预定义的空间内。

除了专门用于在桌面上观看的专业网站之外,大背景的时代几乎已经死亡。 在手机上观看时,大多数为桌面设计的背景都不会很好看。

您可以做的解决方法是在CSS文件中设置大量断点并为每个断点设计单独的背景,但是像往常一样,您可能无法计算可用的垂直空间,即使已知设备类型也是如此。

标题图片由...提供

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。