黑暗模式如何影响用户体验和网页设计(+例子)

就在最近，似乎很多公司都在采用Jay-Z的方式进行设计——全黑。

在过去的几年里，被称为“黑暗模式”的美学已经席卷了应用程序和UI/UX世界。

科技巨头，如脸谱网，Instagram,苹果已经将其融入到他们的产品中，许多公司将其作为可选功能，用户可以打开或关闭它。

我们甚至看到一些公司在他们的营销网站上使用这些黑暗的界面。

就我个人而言，我喜欢这种设计方法。

看一眼我的衣橱，你就会发现我一直对深色的调色板情有独表。(是的，我知道我是典型的创意型的陈词滥调)。

然而，尽管我很喜欢好的黑色主题应用程序或网站，但我知道这种设计风格并不适用于所有公司，它确实极大地改变了用户体验。

但在我深入探讨黑暗模式及其对用户体验的影响之前，让我们先谈谈到底什么是黑暗模式。

什么是暗模式?

简单地说，暗模式是在暗背景上使用浅色文本、图标和其他UI元素的亮对暗的颜色方案。

这是IMPACT的Facebook群组IMPACT Elite在平台上的暗模式．

正如我所提到的，它在过去几年里变得非常流行，但黑暗模式美学实际上已经存在了相当一段时间。

它最早的使用要追溯到家用电脑时代，当时使用的是阴极射线管(CRT)显示器，这种显示器以黑对绿的形式显示文本。

图片由Quora

但是，当然，在当时，使用较暗的界面与其说是一种设计选择，不如说是技术能力的限制。

直到20世纪80年代所见即所得文字处理器变得越来越流行，它们开始在我们都熟悉的白色背景上显示黑色文本。

这主要是由于技术的进步，使计算机公司能够模仿人们已经熟悉的纸上墨水的外观——比如报纸和杂志。

图片由AppleInsider

CRT显示器的主流使用已经超过15年了，但许多人对黑色主题的喜爱从未消退。

许多人声称，当长时间使用产品时，较深的颜色方案可以减少眼睛疲劳，而且在较暗的环境中对眼睛的伤害也较小。

黑暗模式对用户体验(UX)的影响

暗模式的使用是设计界的一个重大转变，但是，这并不是一种适用于所有公司的方法。

实现暗模式会影响业务和用户体验的一些关键领域。

品牌

品牌就是要为你的企业创造一个整体的信息，在情感层面上与你的受众联系在一起。在你的品牌采用暗模式之前，考虑一下你想要传达的信息或你想要你的公司唤起的情感。

如果你想创造一个给人以戏剧性、神秘或优雅的感觉的品牌，深色通常是最有效的。

例如，看看网站爱彼牌．这家奢侈手表公司在其品牌中使用暗色调来传达优雅和高端工艺的感觉。

当你浏览他们的网站时，黑色的背景和最小的文字把他们漂亮的产品照片拉到前面和中间。你可以专注于每只手表上的细节。

另一方面，黑暗元素最终也会与消极内涵相关例如死亡、悲伤或邪恶，所以你必须确保自己在黑暗模式设计上非常谨慎。

可用性

暗模式也会对产品的可用性产生重大影响。你不仅需要考虑人们使用你的产品的环境，还需要考虑他们使用它的时间。

例如，如果人们将在较暗的环境中使用你的产品，或者在一段时间内使用数小时，那么执行黑暗模式可能就是最好的选择。

流媒体应用，比如Netflix，就是一个很好的例子。

大多数人在晚上或坐在距离电视6-8英尺远的昏暗房间里播放节目。

流媒体服务知道用户在这种类型的环境中进行流媒体，因此使用暗模式来创建从屏幕到环境其余部分的无缝体验。

这些流媒体服务上较暗的界面不仅有助于创造身处影院的电影体验，而且在特定环境下也更容易让眼睛感受到。

想象一下如果整晚都在看一集办公室在Netflix上播放了1000次，迎接它的却是一个明亮的白色界面。

考虑用户使用产品的时间也很重要。

例如，开发人员每天的大部分时间都在盯着没完没了的代码行。这就是为什么大多数开发者使用暗色模式的代码编辑器，以帮助减少眼睛疲劳，使颜色编码的语法更容易阅读。

这似乎是最早使用的黑暗模式之一，即使在今天仍然很强大。

据安迪·克拉克说Stuff & Nonsense网站设计工作室的创始人，“从我记事起，技术开发人员就一直在他们的代码编辑器中使用黑暗主题。”

他还指出，最流行的代码编辑器，如Visual Studio代码，都提供黑暗模式或主题。

可访问性和易读性

对于那些不熟悉可访问性，它指的是一个网站被各种残疾或缺陷的人使用或消费的能力。

内容的易读性对于创造每个人都能获得的体验至关重要。

在易读性方面，研究表明,在浅色背景上使用深色文字的设计，对于那些视力正常和某些视觉障碍(如散光)的人来说，效果最好。

这主要是因为浅色的背景总体上有更多的光，这使得用户的瞳孔缩小，让他们专注于文本。

在下面的例子中，你会注意到你的眼睛在阅读黑色背景上的文本时要比白色背景上的文本时更吃力。

黑色背景上的白色文本与白色背景上的黑色文本的易读性的一个例子

考虑到这一点，暗模式并不是内容驱动网站的最佳选择。

当你的设计更专注于图像和使用最少的文字时，深色主题的设计真的会发光。

如何优化你的营销和设计黑暗模式

虽然你可能还没有准备好在你的所有产品和营销材料上运行并立即执行这一功能，但仍然有一些简单的方法，你应该准备好为使用暗模式选项的不同应用程序和服务优化营销和设计。

电子邮件

对于电子邮件客户端来说，暗模式仍然是一种相对较新的模式，但Gmail、Outlook移动应用程序和Apple Mail等主要厂商已经在推动这一选择。

Gmail在暗模式下的显示示例

虽然目前还没有一长串的客户端支持暗模式，但有一些步骤你可以采取，以优化您的电子邮件客户端支持它。一些简单的步骤包括:

• 尽量避免深灰色或白色的透明文本图像
• 保存您的徽标图像为JPEG与白色背景
• 有疑问的时候，测试，测试，测试!

为了得到一个完整的细分，你可以做的一切优化你的电子邮件黑暗模式，我建议看看这篇文章由IMPACT的Christine Austin撰写。

社交媒体

就像前面提到的，暗模式通过创建大量的对比度让图片脱颖而出，这是一个非常出色的工作，而社交媒体是一个真正采用替代UI的行业。

这就是为什么你应该确保你的社交媒体视觉效果设计得像传统的灯光模式一样好。

为使用暗模式的用户优化你的社交媒体帖子的最好方法是，只要可能，总是包含一张图片或视频。通过简单地在你的文章中添加一个视觉效果，你将帮助你的文章脱颖而出。

你要确保你为这些帖子选择了正确的图片类型。如果你选择了一个太暗的图像，它很可能会被黑暗的背景洗掉。

如果它适合你的品牌，我建议选择色彩明亮的图像(或者至少是远离黑色或白色背景的图像)，这将真正有助于在黑暗的背景中创建大量的对比。

网站

几年前，我写了一篇关于移动行为如何影响我们设计桌面体验的方式。

这个观点在今天更加正确。

说到暗模式，我相信随着它越来越受欢迎，越来越多的人要求这一功能，我们很可能会看到更多公司在自己的网站上使用它。

如果你有兴趣在暗模式方面走在潮流的前面，并且你认为它可能很适合你的品牌，我的建议是先从小的开始，然后在几页纸上测试它，让人们可以打开或关闭它。

产品设计师约翰尼酒使用这个方法在他的网站上的例子如下。

让人们选择开启或关闭它，可以让人们控制自己的体验，并迎合那些可能有不同视力障碍的人。

到黑暗的一面去吧

底线是，无论你是否决定转向黑暗的一面，这个决定都需要基于你的受众的需求，你的品牌信息，以及人们如何与你的产品互动。

黑暗的模式已经被很多企业采用虽然黑暗的模式可能不适合你的品牌,我强烈推荐有意识地优化你的营销和设计应用程序和服务,提供这个选项,所以确保你总是提供最好的用户和客户体验。