有人说过，想要知道一个网页设计师是否专业，就让他设计一个黑色系网站。的确，真正漂亮的黑色系网站大多出自真正专业的设计师之手。黑色是经典的色彩，更是神秘的色彩，它蕴含着攻击性，深藏着邪恶的种子，但他在邪魅中还隐藏着优雅，在沉稳中里还包含权威，它与力量密不可分。黑色中潜藏着善与恶，但是不管它表达着怎样的情绪，它都是最具有表现力的色彩之一，强烈而鲜明。这也解释了为什么黑色会广泛应用于各个领域。那么，黑色系网站到底蕴含着怎样的能量呢？

今天的文章就是为了探索这个问题，同时也在是战中告诉你，到底怎样的黑色系网站设计，才能让人难忘。

当设计师在UI设计中使用黑色的时候，他们通常想营造优雅的气质，或者权威的气息，打造神秘或者力量感十足的效果。

所以，当黑色同锐利多变的排版结合起来，配合科技感十足的抽象动画，辅以互补的对象，加上对比色和辅助色，页面就会拥有独特而鲜明的质感。黑色系的网页设计往往可以顺利隐藏一部分缺陷，并让一些内容和效果突出展现。这种“没有光线”的页面设计会在日常使用的大量白色系为主的网站中脱颖而出。

那么，接下来我们来看案例吧。

Thomas Rhythm

非凡的细节设计和气息独特的个人风格从黑色的页面中自然而然地逸散出来，整个页面在沉稳的黑色中展现出令人着迷的节奏感，黑色的视觉吸引力在这个案例中得到了清晰的呈现。

Roidna

黑色的背景色是呈现鲜艳色彩的天然载体，它能让这些元素成为视觉的焦点，抓住用户全部的吸引力。Roidna 的页面中许多元素都采用了霓虹绿，它成功地让每个访客都不得不盯着它们看。

This Was My Best

This Was My Best 是一个高端的作品展示网站，它展示了每个设计师最优秀的作品。传统而经典的黑白系配色互相映衬，让艺术家们的作品更加突出。整个网站的细节设计微妙而漂亮。

YnY

和前面几个站的设计类似，YnY 的页面也同样是两种基本色设计而成，优雅而精致。值得注意的是，设计师在网页中加入了许多装饰用的小横线，它们很好将不同的元素串联到了一起，让不同的元素在视觉上产生了关联。

Tim Brack

所有无用的信息都被Tim Brack 从首页上移除了，让用户可以直接关注到黑色背景映衬下的设计作品。大量的留白让黑色的背景也呈现出一种干净的感觉。

Self-Destructing Book

Self-Destructing Book 是一个非常神奇的项目，它会在第一时间引起你的兴趣。黑色的背景营造出充满科技感的氛围，配上清爽的小块内容和有趣的动效，给人探索的欲望。

We Make Awesome

同样沿袭这黑白强对比的设计，We Make Awesome 的页面中黑色背景中使用了许多高透明度的文字叠加在黑色的背景中，视觉重心用的是大标题，粗糙锐利的白色笔刷字体加红色的点缀，醒目又不单调。

Brio

Brio 的首页被分为三个部分，欢迎访客的文案区、邮件订阅框和一组照片，黑色让整个页面显得沉稳而安定。

Eau de Design

点缀在黑色背景和白色文字中的金色横线点亮了整个页面，黑色背景中若隐若现的图案和渐变的文字让页面有了纵深和层次，不再单调。

Video Mapping Loops

深沉的黑色背景让白色的文字非常显眼，整个页面的设计则采用了经典的单页设计，视频、图片、文字、动画等元素在页面中大多以视觉中心的形式存在。

FS Millbank

FS Millbank 的页面设计同样也是以吸引用户注意力见长，页面设计的重心在于呈现新的字体族。黑白极简风之下，设计师将全新的字体族以不同的尺寸、透明度错落地呈现出来，打造出优雅而漂亮的布局。同样的，设计师将箭头用黄色标识出来，引导用户点击继续查看。

Raphael Malka

Raphael Malka 在页面的装饰和配色上总的是更传统的方式，他对于极简风有着明显的倾向。近年流行的幽灵按钮、汉堡图标和一些用户体验设计，都可以在这个看起来很简单的网页中找到。

Music

作为一个音乐网站，霸气十足的字体效果在黑色的映衬下显得更加突出，同时也突出了整体的神秘感。

Bind Film

黑色的背景不仅仅是让网站的内容更突出了，巧妙的布局让黑色作为留白的功能更加突出，黑色也使得导航栏中的内容显得更加明显了，换成白底效果会明显差很多。

Dream and Reach

半透明的黑色图层让底部的图片和内容能被看到，但是又不会造成干扰，在这种背景上，两个明显的动作召唤按钮给用户带来了畅快的体验。

Mix Event

活泼有趣的图片叠加上了黑色半透明层作为背景，营造出与音乐相关的氛围，华丽复杂而复古的黄色徽章在整个页面中是最显眼的元素，它与整个网站主题贴合而又足够有气场，独特的色彩也使得它成为了页面的中心焦点。

Authentic Form and Function

如画的风景被制作成为黑白照片背景，金色和白色的文字在整个排版设计中起到了关键的作用。配合上动画图标和独特的布局，页面给人的印象非常深刻。

Trif

Trif 拥有一个另类而神秘的首页，黑色系的页面中白色的几何图案构成的短动画不停地循环播放，突出的视觉设计让访客对这个页面欲罢不能。

Romeo Fragt Julia

这个以视觉设计为导向的网站并没有使用多种多样的UI元素，一切设计都是围绕着突出图片内容。

Serapian

对于时尚圈而言，黑色的色调总能带来神秘、奢华、低调的质感，不论是作为产品色还是衬托色。所以，在设计页面的时候这位设计师为了突出这个深蓝色的皮质手包，采用了黑色的背景，配合金色的纹理增加质感。

原文地址：designmodo

译文地址：uisdc

译者：@陈子木

======关于旺叫兽======

旺叫兽，发烧级玩家，关注互联网科技，WeMedia自媒体联盟成员。

个人博客：www.ActorZ.Me

微信公众号：旺叫兽【ID:ActorZ-Me】

新浪微博：@旺叫兽；个人微信号：GeekMars

章来源于 优设，感谢作者 CARRIE COUSINS 给我们带来经精彩的文章！

我们日常所看到的绝大多数的网站，在基础配色方案上，都是以浅色为主的，背景大多是白色或者浅色。有意思的是，近两年，以黑色为主色调，或者大量运用深色背景的网站，逐渐流行开来。

这些深色系网站常常被设计的非常时髦，并且搭配了不少有趣的动效，比如悬停触发的小特效和微妙的视差效果，这些特效让网站拥有了近乎电影的视觉体验。今天我们就来聊聊这一设计趋势。

深色系配色+动效

Meida

Impero

深色系配色和动效的结合确实已经悄然流行起来了：用黑色或者深色为主的配色方案，搭配一个炫酷的动效。两种技巧的搭配，创造出层次分明的视觉，营造出微妙的情绪氛围和令人着迷的神秘感。

虽然在具体实现上并不那么容易，在移动端上的体验不如桌面端明显，但是这种设计趋势所营造的视觉体验还是很能引人关注的。深色系的配色会让前景的元素更聚焦，用户会不由自主地关注设计师刻意营造的焦点。

在这种被营造出的神秘的氛围之下，被动效加持的视觉焦点元素会让用户好奇，这个页面之下还藏着什么，接下来会有怎样的事情发生。

这种设计趋势和其他的趋势相似，仅仅是一个范围而非规定严苛的规定，你可以使用黑色作为主色调也可以使用藏蓝，搭配的动效也没有固定的套路，它可以只是一个简单的悬停动效，也可以是一种复杂而精致的动态效果，你可以根据实际状况自行尝试。

当然，这种设计趋势的核心在于营造神秘感。

运作机制

Garden8

很难完全说清这种设计趋势为什么会如此的有效，当你简单脑补深色系配色+动效的时候，很难意识到这种效果实际效果是如此的出众。回过头来，我们可以仔细剖析这种设计趋势的特征：

配色方案中不会有太多颜色

几乎没有太多明晰的对比

整体设计看起来极其简单

不过，也可能正是这些看起来不复杂的设计，使得这种设计趋势在用户当中发挥了效果。它打破了规则，吸引了用户。

另外一个促使它流行的因素应该是它所营造的黑暗氛围和神秘感。人总是充满好奇心的，欲盖弥彰总比开放的展示更加撩人。动画和黑暗的氛围搭配起来的时候，更容易勾起访客的好奇心。

在许多设计作品当中，我们看到设计师并不仅仅营造出神秘感，他们还加入了更多的情绪上的引导。不同的情绪在这样的神秘氛围下发酵，用户最终会身不由己地被这种视觉模式所吸引。

不一定非得是黑色的

FedEx-track

虽然绝大多数的设计师还是选择了黑色为主的设计，但是实际上并不一定只有黑色适合这一设计趋势。

其他的深色调同样有效，这个时候就是考验设计师调色和搭配的能力了。

除此之外，想要让整个配色和动效能够有效地搭配，还得让色彩足够丰富。确定主要的色彩之后，最好在配色方案中加入同色系不同明暗、不同饱和度的色彩，这样能让整个配色统一而又丰富。

虽然营造显著的对比并不在这个设计趋势之内，但是它依然是不容忽视。这个深色系为主的配色方案应该尽量贴近单色系配色，但是配色中色彩的对比度不够明显会让人迷惑，对比度太强则不够微妙。

这一是趋势的局限性

深色系配色+动效这种设计趋势并不适合每个人，也不会贴合每个项目的实际需求，它也有着局限性：

在移动端上的显示效果一般

在可访问性上或多或少有那么一点问题

对于一部分用户而言吸引力不足

导航和CTA元素并不好安置

在环境光不足或者不好的情况下，页面可能很难看清

部分用户可能并不喜欢网站所呈现出的情绪

用户可能会在较短的时间内厌倦

使用时候的注意事项

Formigari

The Great

如果你觉得自己可以驾驭这种设计趋势，那么你可以尝试在自己的网页当中使用它。不过，下面的事项一定要注意：

坚持使用单页：太多先锋的设计手法可能会让用户觉得不舒服，太多的元素也可能打破好不容易营造的感觉，所以，尽量限制其为单页设计。

使用对比色：白色文本在深色背景上显示效果很好。其他的元素也是同样的道理。需要突出的按钮、导航元素、信息等都可以采用对比色。

简化动效：过于复杂的动效可能会让用户觉得难于接受。坚持使用简单的动效能产生更好的效果。

分层结构：由于需要结合动效，不同的元素需要处于不同的分层当中，这样可以营造出有触感的真实效果。分层还能让设计师更好地创造对比，也更易于管理。

大胆的排版：文本元素不仅要包含对比，而且要通过大胆排版和字体设计，来创造出不落俗套的设计。在保证可读性的前提之下，使用粗细不同、大小对比的字体，营造出形式感。

接下来会怎样?

Blairwitch

和任何设计趋势一样，深色系配色+动效的设计趋势会随着时间的推移逐步演变，虽然我们无法确知变化的细节，但是我们总归能够看到一个方向。

深色系的配色和如今逐步崛起的VR和AR的沉浸式体验有着一致的精神，动效的流行自是不必说，相比于复杂化的演化方向，它更有可能会越来越自然，越来越有意思。

结语

色彩对于设计的影响无疑是巨大的，深色系的配色常常会让设计显得深沉、神秘，它能够承载的情绪总体会更加非常规一些。如果你希望你的设计更贴近大众，浅色无疑会更合适一些，深色相对而言更加特立独行。

另外，不同的设计技巧之间的组合搭配，或多或少能够创造出一些新的效果，今天所聊的这种设计趋势又何尝不是如此呢?你也可以沿着这个思路继续探索适合自己设计项目的视觉效果。

色就像黑白摄影一样，相当有吸引力，2019年的项目便可考虑黑色、暗调的设计配色。