如何以及何时创建黑色背景的网站设计
黑色即使不是最流行的设计颜色,也一直是设计师们谈论最多的颜色。它精致、充满活力、神秘、优雅、有力、时尚,与默认的白色截然相反。
现在,我想重点强调它与白色完全相反的事实(我将在后面的文章中详细讨论这一点),因为这正是你在设计中想要和需要的东西——一些与众不同、引人入胜的东西,就像黑色一样。
那么,你为什么需要黑色背景呢?什么时候才是为你的网站创建黑色背景的最佳时机?我将在本文中讨论所有这些问题以及更多内容,但先提醒一句:内容会非常黑暗,然后比那还要黑暗,最后甚至会达到比#555还要深的浑浊色调(我的开发者同行们肯定明白我的意思)。
那么,事不宜迟,让我们进一步探索这种黑色物质吧!
关于黑色背景设计的一些介绍
鉴于我有一些设计方面的背景和丰富的设计经验,我想先和大家分享一下我的印象和想法。
设计师的最终目标是制作出能够吸引眼球、在同类网站中脱颖而出的网站内容。然而,即便如此,最重要的目标也是创建一个能够真正实现其用途的网站。 接下来你需要了解的是:设计师必须强调重要元素。这几乎是我们所有工作的目标,而我们的职责就是在强调这些元素时建立层级关系(以便突出网站上最重要的细节)。
黑色非常适合用来衬托其他颜色的背景,尤其是白色背景。在我们的经验中,白色代表着空白的开始(例如日光、空白的纸张、没有内容的页面等等),而黑色则被认为与其他颜色并无二致,例如内容本身。这就是为什么白色是网站背景的首选颜色。
另一方面,黑色是所有颜色中最“沉重”的,正因如此,我们很难用它来突出其他元素。然而,我们可以利用黑色来强调其他内容。你可能已经注意到,黑色背景的元素看起来总是更小。这种感觉源于黑色对人们的心理影响——我们倾向于将黑色视为一种没有颜色的状态,但其中可能蕴含着某种东西。
深色背景最大的用户体验问题仍然是可读性,当我们使用深色背景时,可读性会明显降低——这不仅是因为我们的眼睛更难注意到颜色差异,还因为屏幕光线使白色显得刺眼。
实际上听起来是这样的:
- 如果内容过多,请不要使用黑色。
- 在黑色/深色背景上使用文字时要格外小心。
- 您可以自由地使用黑色背景来表示图像和图形元素。
- 使用黑色背景来突出较小元素,使其与另一种颜色区分开来,是可以的。
根据我的经验,人们通常觉得深色背景的网站不可信,因为它们不落俗套。然而,哪怕只有一点点艺术细胞的人,都会觉得这种设计有趣且吸引人。所以,归根结底,一切都取决于受众。
黑色有什么问题?
主要原因是人们觉得它不如其他颜色吸引人。
它被认为是抑郁的、悲观的、严肃的、悲伤的,是消极的颜色。鉴于人们对这类事物的反应是无意识的,我们对此无能为力。
无数事实证明,人们访问网站时期望看到白色,白色会让他们感到熟悉和安全。正因如此,用户体验专家不太热衷于用非传统的黑色取代标准的白色。
正如你所看到的,黑色背景色确实存在问题。
那么,黑色背景在设计中还有一席之地吗?
在设计领域,并没有严格的规则限制你能做什么和不能做什么,黑色也是如此。然而,多年来我注意到,黑色背景最适合以下几种情况(请记住,这并非官方列表,仅代表我个人的经验):
- 作品集网站
- 设计工作室网站,
- 独家产品展示,
- 非传统内容。
设计中运用黑色的一些技巧
首先,即使使用黑色背景,也务必留出大量的“空白”,因为黑色区域在视觉上会显得更小。白色背景还能起到“分隔”的作用,这是深色背景所缺乏的。此外,仔细检查可用性也至关重要。根据我的经验,切勿使用过细的字体,字体大小应始终比白色背景上的同款字体大 2 到 3 像素。
正如我之前提到的,黑色背景最大的问题是可读性,每个设计师都应该知道如何处理这个问题(提示:增加字体大小、调整字距、行距)。
选择深色背景作为底色时,需要记住的是,使用传统设计元素的可能性会降低。除了设计师需要更深入地思考常用元素之外,他们还应该努力使内容更有趣,效果更具创意。
此外,你还需要注意使用哪些色调。我曾经读到过,设计中应该始终使用带色调的黑色,而且这种色调应该源自你使用的主色。我添加的例子使用了带色调的黑色和纯黑色(#000),所以我认为这个建议并非绝对必要。
给底色着色的想法源于自然界,因为在自然界中很难看到 #000000 和 #ffffff 这两种颜色(不仅仅是因为格式的原因)。
另一个问题在于,夜间模式恰恰使用了这种“有问题的”配色方案(黑色背景布局)。所有浏览器扩展程序和暗光环境优化工具都提供了深色背景和白色文字的选项。此外,如果应用程序提供更改背景颜色的选项,也总会包含黑色背景选项。
在某些情况下,您始终可以使用黑色背景
这篇文章虽然是关于黑色背景的网站,但我还想谈谈几个与黑色背景搭配效果极佳的元素。你很可能在某个时候会用到这些元素,所以上面提到的所有内容肯定都会派上用场。我指的是以下这些元素:
- 重点章节
- 页眉/页脚/导航
- 评论,
- 弹出窗口。
还记得我说过,在设计中,强调起着至关重要的作用,而黑色正是实现强调效果的绝佳选择。虽然在页眉中使用黑色背景并不常见,但也并非完全出乎意料。页脚也可以使用较深的颜色,因为页眉和页脚都象征着网站内容的边缘,将它们涂成较深的颜色会更加便于用户阅读。
我提到的其他元素,例如版块、评论和弹出窗口,也同样如此。鉴于它们并非“主要内容”,因此可以而且应该采用不同的样式。
结论
如果你能找到合适的地点和时间使用黑色背景,那就大胆尝试吧。但是,请记住,这样的机会并不多见,即使你真的遇到了,也可能需要等待很长时间才能再次遇到合适的时机(否则你真的非常幸运)。
你个人可以喜欢黑色(这无可厚非),但你不应该在设计作品中使用黑色——真正的设计师懂得更多。真正的设计师知道如何把握时机和场合使用黑色(以及如何妥善处理)。
我今天就分享到这里!希望这篇文章对你们有所帮助,也希望它能为所有热爱设计的朋友们展示一些不错的例子。
分别使用的示例:
- https://www.apple.com/mac-pro/
- http://www.formigari.it/ ,
- https://uppertodo.com/ ,
- https://www.spotify.com/
- http://culture.basicagency.com/ ,
- https://ninjatune.net/2017/ ,
- https://culture.doberman.co/ ,
- http://www.tramont.in/ ,
- https://20jahre.stimmt.ch/ ,
- https://www.fiftythree.com/paste
- http://www.ouiwill.com/ ,
- https://www.strv.com/
- https://overclothing.com/ ,
- https://www.weareenvoy.com/。













