深色模式设计：创建深色主题网站和应用的技巧

调暗灯光，放松眼睛并节省能量。深色模式是设计中的大趋势之一，世界一流的品牌，如WhatsApp，Instagram，Google，Facebook和Apple，已经上线了自己的暗黑风格应用。

让我们看看这些顶级品牌在做什么，以及如何将深色模式UI加入自己的设计中。在设计深色模式时，您将学习深色模式的优缺点和基本设计实践，以确保您的Web和应用程序设计外观和功能完美。

什么是深色模式

深色模式是一种弱光用户界面（UI设计），它使用深色（通常是黑色或灰色阴影）作为主要背景色。这是设计师几十年来使用的默认白色UI的逆转。为响应我们增加的屏幕时间，开发人员发现深色主题界面有助于缓解眼睛疲劳，尤其是在光线不足或夜间的情况下。更少的眼睛疲劳意味着更少的头痛和更好的工作和阅读。

Instagram dark mode UI

WhatsApp on desktop dark mode UI via What’s App

但是黑暗模式实际上并不是什么新鲜事物。

还记得《黑客帝国》中黑色背景下的绿色计算机代码吗？那是对最初的黑暗模式的致敬：最初的计算机是那些老式的单色显示器。

早期带有黑色绿色文本的家用计算机是OG深色模式。

那种经典的深色外观在80年代已经过时，取而代之的是在白色背景上使用黑色文本来模仿纸张上的墨水外观。

在将近三十年的时间里，这一直是规范，直到暗模式在2020年在Windows Phone 7中首次卷土重来。Google确认暗模式可以节省电池寿命，他们便在2018年将其功能添加到了Android OS中。一年后，苹果随后在iOS和iPadOS上采用深色模式。

Dark mode in iOS 13 via 9to5Mac

使用暗模式的优点

深色模式可以缓解眼睛疲劳，而且这种样式可以节省电池寿命，甚至可以更健康。让我们看看暗模式与亮模式的实际优势。

减轻眼睛疲劳

增加低环境照明下的可见度

如果您睡着了并且有人打开了明亮的灯光，那么您会头疼的。同样的原理适用于深夜或清晨在计算机屏幕前工作的人员。暗模式减少了明亮的光线，使在弱光条件下更容易查看内容。

节省电池寿命

某些带有OLED屏幕的数字小工具在不使用时可以关闭黑色像素。暗模式使用更多数量的黑色像素，这迫使设备使用更少的能量。

防止注意力分散

白光和颜色往往会使您的注意力不集中，这使您在工作时候容易分神。深色模式UI设计可以通过将注意力集中到界面的内容区域来增加焦点，让该内容显而易见，背景淡化。

iOS Dark Mode

使用暗模式的缺点

像任何东西一样，黑暗模式也有其缺点。让我们了解深色主题可能对您的项目不利的原因。

缺少情感联系

鲜艳的色彩可以营造明亮的情感。如果您的观众正在寻找它，那么调暗颜色可能会给他们造成心理障碍。他们将很难与黑暗主题建立情感联系。如果您的品牌本质上是激励性，鼓舞性或精神性的，那么黑暗模式用户界面可能是一场赌博。如果鲜艳的色彩可以营造出明亮的情感，那么事实恰恰相反。

空间缩小

深色墙壁的房间可能会导致幽闭恐惧症。在设备上，深色模式也是同样如此。如果您要营造一种空间感，深色的UI可以使空间变小。

低对比度的颜色可能很难看清

如果在设计深色主题的网站或应用程序时颜色和对比度不大的情况下，则会使文本难以阅读，因此在创建深色模式的电子邮件，应用程序或网站设计时请记住这一点。

Nada Kiwan 作品

如何在设计中使用暗模式

深色模式设计可以在任何UI界面体现。从移动应用程序到智能手表再到电视界面，但是设计深色主题网站或应用程序界面时一定注意以下几种技巧：

何时使用深色模式

1.匹配企业品牌颜色

如果您的品牌需要使用多种颜色，请考虑使用更浅的UI。在深色背景上，整个色谱无法令人满意的阅读体验。

2.突出你的行业

深色模式用户界面还有助于增强特定行业。例如，专注于夜生活和娱乐的品牌非常适合黑暗模式

3.极简主义

如果您的UI设计师是文字内容偏少的情况下，那么您的条件适合暗模式。在文本是主要内容的情况下，深色UI可能会使可读性成为问题。通常，黑暗模式会放大视觉混乱，使混乱的屏幕更加混乱。

4.产生情感

试图产生某种情感反应？像是神秘的气氛还是一点戏剧？由于低可见度会产生好奇心并加剧情绪紧张，因此深色模式可能是您品牌的理想工具。

暗色主题网页设计by Novidraft

5.奢侈高贵

较深的颜色唤起与奢华和富裕相关的情绪，会有稳重可靠的感觉。

由Aneley设计的优雅，高端的深色主题网站。

深色模式设计的最佳做法

1.不要太暗

图书出版商不使用纯白色纸张，因为与黑色墨水的对比度太过鲜明。它会使您斜视，并可能导致头痛。数字设备也是如此。避开纯黑色。很难看清高对比度的屏幕。良好的深色模式颜色是灰色阴影和不饱和的颜色。

2.有适当的色彩对比

此外，还要确保在深色模式下，页面内容也要保持舒适和清晰度。背景颜色必须要足够深，从而反衬出页面浅色文字。

根据谷歌设计原则，建议文字和背景的对比比例至少保持在15.8:1。

你也可以通过色彩对比工具来测试有关对比比例。

3.降低色彩饱和度

在浅色背景下，饱和色彩看起来会非常生动形象。然而，如果在深色模式下采用饱和色彩，则会让人难以识别有关元素或内容。

因此，在深色模式中，主色调一定不要采用饱和色彩。建议使用浅色调（色调控制在50至200范围内），从而让页面内容在深色模式下体现更佳的可读性。

Neolist的深色主题应用程序设计

4. 使用正确的颜色模式

via Sergey Zolotnikov

当你计划在现有产品中新增深色模式时，你肯定希望能通过这种模式传达出原有的产品情感，对吧？但我建议最好不要有这种想法。

至于这背后的原因，我认为在不同背景颜色背景下，色彩本来就是独立存在的，同时也代表着特殊的意义。

5.用户自由切换

最好不要自动开启产品的深色模式。你可以通过界面功能设置，让用户自由地打开或关闭这项功能。用户也可以根据其体验产品时的需求和想法，自主选用这项功能。

6.体现层次

页面的海拔越高，内容或元素就会更亮。这将在黑暗模式下创建一个视觉层次结构，该层次结构从显示器中使用最多的元素到最少的元素。

7.在不同模式下进行测试

测试深色模式和浅色模式。尝试每种样式，并根据用户反馈进行适当的调整。归根结底，人们的喜好可能是无法预测的，所以请不要让用户陷入困境。让他们将显示从亮模式切换到暗模式。这使用户来决定自己的使用习惯，最后做出相应调整。

非常感谢您读完创新互联的这篇文章："深色模式设计：创建深色主题网站和应用的技巧"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。

当前标题：深色模式设计：创建深色主题网站和应用的技巧
网址分享：https://www.cdcxhl.com/news28/325078.html

成都网站建设公司_创新互联，为您提供动态网站、用户体验、做网站、App开发、云服务器、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联