黑色一直是設(shè)計(jì)師談?wù)撟疃嗟念伾绻皇亲盍餍械脑O(shè)計(jì)顏色。它是復(fù)雜的、充滿活力的、神秘的、優(yōu)雅的、強(qiáng)大的、時(shí)尚的，與默認(rèn)的白色完全相反。
現(xiàn)在，我想要關(guān)注的是，它與白色正好相反(我將在文本中進(jìn)一步討論這個(gè)問題)，因?yàn)檫@是你想要的東西，在設(shè)計(jì)中需要的東西——一些不同的、有趣的東西，比如黑色。
為什么你需要它?什么時(shí)候是你為你的網(wǎng)站創(chuàng)造黑色背景的合適時(shí)間?我將在這篇文章中討論所有這些，以及更多的警告:它將變得非常黑暗，然后比這更黑暗，最后那個(gè)黑暗的陰影甚至比#555更黑暗(我的開發(fā)者們知道我在說什么)。
那么，閑話少說，讓我們進(jìn)一步探索這個(gè)黑色的問題吧!
關(guān)于黑色背景設(shè)計(jì)
看到我有一些設(shè)計(jì)遺產(chǎn)和很多設(shè)計(jì)經(jīng)驗(yàn)，我想先和你分享我的印象和想法。
設(shè)計(jì)師的最終目標(biāo)是制作網(wǎng)站內(nèi)容，吸引人們的注意，并從類似的網(wǎng)站中脫穎而出。然而，一個(gè)更大的目標(biāo)(如果不是最大的目標(biāo))是創(chuàng)建一個(gè)服務(wù)于其目的的網(wǎng)站。你需要知道的是:設(shè)計(jì)師必須強(qiáng)調(diào)重要的元素。這是我們?cè)谧龅拿恳患律系哪繕?biāo)，我們的工作就是在這個(gè)強(qiáng)調(diào)(為了突出網(wǎng)站上最重要的細(xì)節(jié))中創(chuàng)建一個(gè)層級(jí)。
黑色是完美的，如果你想強(qiáng)調(diào)其他顏色的背景，尤其是白色的。在我們的體驗(yàn)中，白色代表了一個(gè)空白的開始(它代表日光、空白紙、沒有內(nèi)容的頁(yè)面等)，而黑色被認(rèn)為與其他顏色一樣，如內(nèi)容。這就是為什么白色是網(wǎng)站背景的首選。
另一方面，黑色是所有顏色中“最重”的顏色，正因?yàn)槿绱耍覀兒茈y突出其他元素。然而，你能做的是用這種黑色來強(qiáng)調(diào)其他內(nèi)容。您可能已經(jīng)注意到，具有黑色背景的元素總是顯得更小。這種印象是由黑色的心理效應(yīng)等人ー我們傾向于認(rèn)為黑人沒有顏色有潛在的東西。
黑暗背景下最大的用戶體驗(yàn)問題仍然是可讀性，當(dāng)我們使用暗色背景時(shí)，這一問題會(huì)明顯減少——不僅僅是因?yàn)槲覀兊难劬茈y注意到顏色的差異，而且還因?yàn)槠聊簧系墓饩€使得白色的光芒。
實(shí)際上聽起來是這樣的:
如果內(nèi)容太多，不要使用黑色。
在黑色/黑色背景上要格外小心。
您可以自由地使用黑色背景的圖像和圖形元素。
使用黑色背景的小元素來指出另一種顏色是可以的。
從我的經(jīng)驗(yàn)來看，人們通常會(huì)發(fā)現(xiàn)那些有著黑暗背景的網(wǎng)站是不值得信任的，因?yàn)樗鼈兪欠浅Ｒ?guī)的。然而，藝術(shù)的人，哪怕是一點(diǎn)點(diǎn)，都覺得這個(gè)安排很有趣，很吸引人。所以，最后，一切都是關(guān)于觀眾的。
黑色背景的問題是什么
主要原因是人們發(fā)現(xiàn)它比其他顏色更不吸引人。
人們認(rèn)為它是抑郁的，悲觀的，嚴(yán)肅的，悲傷的，消極的顏色，看到我們?cè)跓o意識(shí)的情況下對(duì)這些事情做出反應(yīng)，我們不能做很多改變。
這一事實(shí)一再被證明，當(dāng)人們到達(dá)一個(gè)網(wǎng)站時(shí)，他們會(huì)期待看到白色，他們會(huì)感到熟悉和安全。這就是為什么用戶體驗(yàn)專家不太熱衷于把標(biāo)準(zhǔn)的白色換成非傳統(tǒng)的黑色。
正如您所看到的，黑色背景色的問題是真實(shí)的。
那么，在設(shè)計(jì)中是否有黑色背景的地方?
在設(shè)計(jì)的世界里，對(duì)于你能做什么和不能做什么沒有嚴(yán)格的規(guī)定，同樣的顏色也適用于黑色。然而，多年來，我注意到黑人的背景最好的工作如下(記住，這不是正式的名單，這是我的經(jīng)驗(yàn)):
投資組合的網(wǎng)站,
設(shè)計(jì)工作室的網(wǎng)站,
獨(dú)家產(chǎn)品演示,
非傳統(tǒng)的內(nèi)容。
在設(shè)計(jì)中使用黑色的技巧
首先，即使在使用黑色背景時(shí)，也要?jiǎng)?chuàng)建大量的“空白區(qū)域”，因?yàn)楹谏谋砻婵雌饋砀?。白色背景也起到了“休息”的作用，在黑暗的背景下，這是一種缺失的東西。更徹底地檢查可用性也很重要。根據(jù)我的經(jīng)驗(yàn)，你永遠(yuǎn)不應(yīng)該使用輕字體的重量，它應(yīng)該總是比在白色背景上的字體大2或3倍。
正如前面提到的，黑色背景的最大問題是可讀性，每個(gè)設(shè)計(jì)師都應(yīng)該知道如何處理它(提示:增加字體大小，kerning，引導(dǎo))。
當(dāng)你選擇黑暗背景作為你的基礎(chǔ)，你需要記住你使用傳統(tǒng)的，學(xué)習(xí)的設(shè)計(jì)元素的機(jī)會(huì)降低。除了設(shè)計(jì)師們應(yīng)該對(duì)通常的元素有更大的考慮之外，他們還應(yīng)該努力讓內(nèi)容更有趣，效果更有創(chuàng)意。
你需要注意的是，你要使用哪種顏色。有一些文字說明你應(yīng)該如何在設(shè)計(jì)中使用有色的黑色，這個(gè)顏色應(yīng)該來自你使用的主色調(diào)。我添加的例子使用了著色和真正的黑色(#000)，所以我認(rèn)為這個(gè)想法是可選的。
把基本顏色染成淺色的想法來自于自然，在那里很難看到陰影#000000和#ffffff(不僅僅是因?yàn)楦袷?。
另一個(gè)問題在于，夜間模式正是使用了這種“有問題”的安排(黑色背景布局)。在黑暗環(huán)境中，每一個(gè)瀏覽器擴(kuò)展和優(yōu)化工具都提供了使用黑色背景和白色文本的選項(xiàng)。此外，如果在應(yīng)用程序中有更改周圍顏色的選項(xiàng)，則總是有黑色背景選項(xiàng)。
你可以使用黑色背景的情況
這篇文章可能是關(guān)于有黑色背景的網(wǎng)站，但我想接觸一些功能強(qiáng)大的黑色背景的元素。很有可能你會(huì)在某一點(diǎn)上創(chuàng)建這些元素，所以以上所有的元素肯定會(huì)派上用場(chǎng)。我說的元素是:
強(qiáng)調(diào)部分,
頁(yè)眉/頁(yè)腳/導(dǎo)航,
評(píng)論,
彈出窗口。
記得我說過，在設(shè)計(jì)中，強(qiáng)調(diào)扮演一個(gè)巨大的角色，黑色可以幫助你做正確的事情。標(biāo)題中的黑色背景并不常見，但也不完全令人驚訝。頁(yè)腳也可以是深色的，因?yàn)轫?yè)眉和頁(yè)腳都代表了網(wǎng)站內(nèi)容的邊緣，而且顏色更暗一點(diǎn)也很方便。
與我提到的其他元素相同:章節(jié)、注釋和彈出窗口。既然他們不是“主要內(nèi)容”，他們就可以而且應(yīng)該有不同的風(fēng)格。
結(jié)論
如果你設(shè)法找到合適的地點(diǎn)和時(shí)間使用黑色背景，那就去做吧。然而，記住這些機(jī)會(huì)很少發(fā)生，如果你有機(jī)會(huì)的話，你可能需要等待下一個(gè)合適的時(shí)機(jī)來(否則你真的很幸運(yùn))。
你可以個(gè)人喜歡黑色(這沒有錯(cuò))，但你不應(yīng)該是一個(gè)在他們的項(xiàng)目中使用黑色的設(shè)計(jì)師——真正的設(shè)計(jì)師知道的比這更好。真正的設(shè)計(jì)師知道如何識(shí)別時(shí)間和地點(diǎn)(以及如何處理它)。
這就是我現(xiàn)在要做的!希望這篇文章能幫助你，并為所有的設(shè)計(jì)愛好者展示了一些很好的例子。
原文：
How and When to Create a Website with a Black Background Design
Black has always been?—?if not the most popular design color?—?the color which designers talk about the most.?It is sophisticated, energetic, mysterious, elegant, powerful, stylish, and the complete opposite of the default white.
Now, I want to focus on the fact that it’s the exact opposite of white (I will talk about this more further in the text) because this is the kind of thing that you want and need in design?—?something different and intriguing, like the color black.
Why do you need it, though? When is the right time for you to create a black background for your site? I’m going to talk about all of this and more in this post, and fair warning: it’s going to get really dark, then darker than that, and finally that murky shade that’s even darker than #555 (my fellow developers know what I’m talking about).
So, without further ado, let’s explore this black matter further!
A Bit About Black Background Designs
Seeing that I have some design legacy and a lot of design experience, I want to share my impressions and thoughts with you first.
Designers’ final goal is to make website content that attracts attention and stands out from the similar ones.?However, an even greater goal (if not the greatest) is to create a website that serves its purpose.?Here’s what you need to know: designers must emphasize important elements. This is our aim in almost everything we do and it’s our job to create a hierarchy in this emphasizing (in order to highlight the most important?details on a website).
Black is perfect if you want to emphasize something on a background of any other color, especially on a white one.?The white represents a blank start in our experience (it stands for daylight, empty paper, a page without content, etc.), while the color black is considered to be no different thanany other color, like content.?That’s why the white color is the first choice for website background.
On the other hand, black is “the heaviest” color of them all and because of that, it can be difficult for us to highlight other elements. However, what you can do is use that blackness to emphasize other content. You might have noticed that elements that have a black background always seems smaller. This impression is caused by the psychological effect the color black has on peopleーwe tend to consider black like an absence of color with potentially something in it.
The biggest user-experience problem with a dark background is still readability, which gets notably decreased when we use a dark background?—?not just because it is harder for our eyes to notice the color difference, but also because of the screen light that makes the white shine.
In practice it sounds like this:
Do not use the color black if you have too much content.
Be extra careful with text on a black/dark background.
You can freely use a black background for images and graphic elements.
It is fine to use a black background for smaller elements to point them out to another color.
From my experience, people usually find sites with dark backgrounds untrustworthy, because they are unconventional.?However, people who are artistic, even a little bit, find this arrangement interesting and tempting. So, in the end, it’s all about the audience.
What Is the Problem with the Color?Black?
The main one is that people find it less appealing than other colors.
People think of it as depressive, pessimistic, serious, sad, and the color of negativity, and seeing that we react to these types of things unconsciously, there’s not a lot we can do to change this.
It’s been proven over and over again that people expect to see white when they arrive at a website, and they?feel familiar and secure with it. That’s why UX experts are not too keen on exchanging the standard white for the untraditional black.
As you can see, the problem with the black background color is real.
So, Is There a Place for Black Backgrounds in?Design?
In the world of design, there are no strict rules about what you can and cannot do, and the same goes for the color black. Over the years, however, I have noticed that black backgrounds best work for the following (remember, this is not an official list, it’s from my experience only):
Portfolio websites,
Design studio websites,
Exclusive product presentations,
Unconventional content.
Tips on Using the Color Black in?Design
First things first: even when using a black background, it is important to create a lot of “white space”,?too, because the black surface is visually smaller. The white background also serves as a “break” which is a thing that is missing on a dark background. It is also important to check usability more thoroughly.?In my experience, you should never use a light font weight and it should always be 2 or 3 px bigger than the same one on a white background.
As already mentioned, the biggest problem with black backgrounds is readability, and every designer should know how to handle it (hint: increasing the font size, kerning,?leading).
When picking dark backgrounds as your base, you need to remember that the chance for you to use conventional, learned design elements lowers. Aside from the fact that designers should think a bit harder about the usual elements, they should also put in an effort to make content more interesting and effects more creative.
What you need to pay attention to, as well, is which color shades you to use.?There are text about how you should always?use tinted black color?in design and that this tint should come from the main color you use. Examples that I added are using tinted and true black (#000), so I think that idea is optional.
The idea to tint the base color comes from nature, where it’s very hard to see shades #000000 and #ffffff (not just because of the format).
Another problem lies in the fact that night modes use exactly this “problematic” arrangement (black background layout). Every browser extension and tool for optimization in dark surroundings offers the option for you to use a dark background and white text. Also, if there is an option to change the surrounding color in an application, there is always the black background option.
Situations in Which You Can Always Use a Black Background
This post may be about websites with black backgrounds, but I want to touch upon a couple of elements which function great with the black background. Chances are that you’ll be creating these elements at one point or another, so all of the above will surely come in handy. The elements I’m talking about are:
Emphasized sections,
Header/footer/navigation,
Comments,
Pop-ups.
Remember when I said how in design, emphasizing plays a huge role and black can really help you do this right. A black background in a header is not all that common, but it’s not entirely surprising, either.?The footer can be darker, too, because both the header and footer symbolize the edges of website content, and it can be pretty user-friendly to color them darker.
The same goes with other elements I mentioned: sections, comments, and pop-ups.?Seeing that they are not the “main content”, they can and should be styled differently.
Conclusion
If you manage to find the right place and time to use a black background, then go for it. However, bear in mind that these opportunities happen rarely and if you do get your chance, you’ll probably need to wait a lot for the next right moment to come around (otherwise you’re really lucky).
You can personally like the color black (there’s nothing wrong with that), but what you shouldn’t be is a designer who uses black in their projects?—?real designers know better than that. Real designers know how to recognize the time and place for it (and to deal with it along the way).
That’s it from me for now! Hope this post helped you out and showcased some nice examples for all of you design lovers out there.
