浅谈UI设计中妙用无穷的深色系背景

黑暗背景，或深色背景，在用户界面设计中的应用仍然是一个相当有争议的问题。背景选择对界面的使用效率至关重要。合理的背景设计使界面更容易使用。相反，一个不恰当的背景可能会破坏你精心设计的用户界面。今天，我们将讨论深色背景在用户界面设计中的使用技巧和注意事项。

影响配色方案和背景色选择的因素很多，网页和APP都有深色背景 UI 在界面中使用时，优缺点一样明显。Tubik Studio 许多设计项目的实践经验证明，深色背景本身确实可以带来良好的用户体验，并提供有吸引力的解决方案。因此，让我们讨论如何在UI设计中最大限度地利用深色背景。

深色视觉感知

早在2009年，ProBloger就做了相应的研究。当被问及用户喜欢什么样的博客背景时，几乎一半的用户反馈喜欢浅色背景——这是合理的。毕竟博客主要是文本内容，浅色背景更符合每个人的日常阅读习惯。然而，有趣的是，大约10%的用户反馈更喜欢深色背景，而大约三分之一的用户认为背景的颜色与网站本身的属性和内容有关。同时，这也意味着相当一部分用户需求在设计师的设计过程中被忽略。然而，在非文本驱动网站和应用程序中，用户对深色背景的需求可能更高。用户研究在实际设计项目中的重要性可见一斑。

Richard用户对背景颜色的感知规律 H.Hall 和 Patrick Hanna 科学研究项目已得到证实。早些时候，不同领域的科学家对网页的可读性进行了系统的实验和分析。他们得出结论，背景和内容之间的对比度与可读性成正比，白色背景下的黑色文本具有最佳的可读性。这一事实也适用于黑底白字，以控制对比度和清晰度。两位科学家合理设计了整个实验。本研究包括许多不同颜色组合的有效性测试，对设计师具有重要的参考意义。

可读性方面

用户体验领域最著名的先驱之一 Jacob Nielsen 曾经说过：“文本和背景应该使用高对比度的颜色匹配。白色背景黑字可以最大限度地提高可读性，黑色背景白字的可读性效果几乎相同。虽然这两种颜色匹配方法的对比度相同，但后者仍然会减慢用户对文本的识别。由于配色方案的限制，白色文本内容将比白色背景黑字更加纤细和模糊，整体清晰度实际上不如普通黑字。这种情况在纯黑色背景和纯白色字体的搭配下是最明显的。”

事实上，可读性是影响产品性能的最重要因素，可读性不仅涉及文本，还涉及所有有意义的文本、标志、符号、数字和图案的可读性。因此，当设计师准备使用深色背景时，他们应该在深色背景下测试不同设备上的字体、图标和图像的实际效果，以支持整个设计。

就像Awwwards一样 这些优秀的黑色网站和应用页面精心挑选了合理的配色方案，以便在黑色背景下正常显示内容。这些优秀的案例为我们贡献了以下经验：

·因为深色背景会“吸收”其他元素的“光”，所以元素、元素和元素之间应该有足够的空间，以确保识别；·长文本具有更好的可读性，对用户更容易消化·行间距和文本长度对可读性有显著影响，特别是在深色背景下，因此需要仔细考虑长度、字间距、行间距，深色并不意味着纯黑色，不同深度的背景和文本搭配的效果也不同，所以我们应该以开放的心态进行更多的测试·色度、渐变和光晕对可读性有显著的影响，非衬线字体在深色背景下更可读，衬线字体在深色背景下更优雅。在实际设计过程中，应充分利用两者的特点。

对比度方面

Webdesign.about.com给出的对比度表单很好地向我们展示了不同颜色在对比度方面的实际效果。这张表格最有趣的一点是，黑色栏证明了黑色几乎是唯一能与其他颜色形成良好对比的颜色。在设计界面时，尽量仔细测试每种颜色，而黑色的特点使得黑色背景下的配色更有可能。

同样，对比度也是确保可动性识别和清晰度的重要因素。

一项早期调查是针对对比度和清晰度的。调查显示，在黑暗背景下，尽量不要使用纯白色。白色应淡化为浅灰色，以防止白色因极端对比而产生耀眼的光线，消除耀眼的光线至少需要5%的灰色才能达到效果。有趣的是，这种灰色在视觉上仍然被识别为白色。此外，加厚字体也是放置白色并被黑色“吃掉”的一种方式。

此外，值得一提的是，深色，尤其是黑色，比其他颜色更深更厚，这也使得它更适合展示图片、插图、海报等内容。在良好的布局和组织结构下，黑色可以显著提高其他视觉元素的表现力，使内容更具吸引力。

情感感知

色彩心理学也是一个需要考虑的因素。背景不仅是内容展示的平台，也是游客传达信息的平台。深色通常看起来更优雅和神秘。从色彩心理学的角度来看，黑色传达了一种优雅、正式、声誉和权力的感觉，这可能就是为什么许多大品牌围绕黑色进行视觉设计，并使用黑白作为主要的配色方案。熟悉黑色的属性可以为客户提供优秀合理的UI设计方案，并在UI设计过程中给出清晰的解释。

深色背景的优点

综上所述，我们可以总结出深色背景的优点：

·风格，优雅，给人神秘的感觉，带来奢华高端的氛围，对比广泛好，更容易创造视觉层次感，创造视觉深度，使内容更容易获得，视觉吸引力

值得思考的问题

此外，深色背景也有麻烦的一面。如果没有合理的规划细节，用户很容易在布局之间迷失方向。因此，我们还有一些值得思考的问题：

·用户研究：对目标用户进行实际调查、理论研究和实验，获得的数据和信息是创建有效且有吸引力的配色方案的基础。·原始产品研究：对竞争对手和原始产品进行市场调查。研究结果将影响设计方案，使产品更容易理解，并创建更引人注目的设计。·用户测试：通过测试寻找不同设备和不同分辨率下深色背景的可读性和清晰度的实际效果，以及影响因素的不同环境因素：分析产品可以为用户提供其他方面的支持，以及用户感到厌恶的原因和其他外部因素