Tubik Studio的一篇文章，丰富的设计项目经验为这家经验丰富的设计机构提供了独特而系统的设计细节。今天的文章讨论了在设计中使用深色背景。门口是什么？看看吧〜

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

有许多因素会影响配色方案和背景颜色选择。在网页和APP UI界面中使用时，黑暗背景与优点和缺点一样明显。 Tubik Studio的许多设计项目的实践经验证明，深色背景本身确实可以提供良好的用户体验并提供有吸引力的解决方案。那么，让我们来探索如何在UI设计中充分利用黑暗背景。

　深色系视觉感知

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

Richard H. Hall和Patrick Hanna在科学研究项目中证实了用户对背景颜色的感知。早些时候，不同领域的科学家系统地试验并分析了网页的可读性。他们得出结论，背景和内容之间的对比度和可读性是成正比的。白色背景上的黑色文字具有最佳的可读性。同样的原因适用于白底黑，控制对比度和清晰度，两位科学家合理设计了整个实验。本研究包含许多不同的颜色组合，用于有效性测试，是设计师的重要参考。

可读性方面

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

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

如Awwwards网站提供的最佳黑色和精美网站设计的集合所示，这些优秀的黑色网站和应用页面精心选择合理的配色方案，以在黑色背景上显示内容。这些优秀案例为我们带来了以下经验：

·因为黑暗的背景会“吸收”“射线”和其他元素，所以元素，元素和元素之间必须有足够的空间来确保识别;

·较长的文本更易读，更易于用户消化

·行间距和文本长度对可读性有很大影响，特别是在深色背景下，因此需要仔细考虑长度，字间距和行间距

·深色并不代表纯黑色，不同色调的背景和文字的效果是不一样的，所以你应该尝试一种开放的心态

·色度，渐变和光晕对可读性有重大影响

·非衬线字体在深色背景上更具可读性，衬线字体在深色背景上显得更加优雅。两者的特性应该在实际设计过程中使用。

对比度方面

Webdesign.about.com给出的对比形式就是我们如何实际比较不同颜色的对比度的一个很好的例子。关于这种形式最有趣的是黑色柱子证明黑色几乎是与其他颜色形成鲜明对比的唯一颜色。在设计界面时，尽量仔细测试每种颜色，这种黑色功能为深色背景上的颜色匹配提供了更多可能性。

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

早期调查的重点是对比度和清晰度。调查显示，在黑暗的背景下，尽量不要使用纯白色。白色应该褪色为浅灰色以防止极端对比度和白色产生眩光。至少需要5％的灰色才能达到效果。有趣的是，这些灰色在视觉中仍然被认为是白色的。此外，粗体字体也是一种将白色涂成黑色和吃掉的方法。

值得一提的是，深色，特别是黑色，比其他颜色更深更重，这使得它更适合于显示图片，插图，海报等。凭借良好的布局和组织，黑色可以显着增强其他视觉元素的表现力，使内容更具吸引力。

　情绪感知方面

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

　深色背景的优势

总之，我们可以总结深色背景的优点：

·风格，优雅

·给人一种神秘的感觉

·带来奢华和高端氛围

·具有广泛而良好的对比度

·更容易创建视觉分层

·创建视觉深度并使内容更容易获得

·视觉吸引力

　　值得思考的问题

另外，深色背景也有一个麻烦的一面，如果没有合理的规划细节，用户很容易迷失在布局之间。所以，我们仍然有一些值得考虑的问题：

·用户研究：对目标用户进行实际调查，理论研究和实验，得出的数据和信息是创建有效和有吸引力的配色方案的基础。

·定性研究：对竞争对手和竞争对手进行市场调查。调查结果将影响设计计划，使产品更易于理解，并创造更引人注目的设计。

·用户测试：暗背景的实际效果对不同设备的可读性和清晰度，不同分辨率，通过测试找到影响因素。

·环境因素：分析产品为用户提供外部支持，以及外部因素，如用户的怨恨感。

·内容：页面内容的覆盖范围与背景因素之间的比例，以及它们对用户体验，视觉感知的影响。

· content属性：深色背景对不同属性（如图形和文本）元素的影响。

« 华为Mate 20 Pro支持PC模式，无线充电，并可通过GreenLink扩展坞进行屏蔽！ | 在幕后！数字银行品牌升级的设计过程是完全秘密 »