暗色模式的基本概念和发展历程

2024-3-21 博博 B端界面设计文章及欣赏

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

暗色模式是一种低光用户界面（UI）设计，也称为深色模式，是一种用户界面设计选项，它使用较深的颜色方案和背景，通常为黑色或深灰色，以减少屏幕亮度并提供更舒适的视觉体验。

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

设计师需要为暗色模式创建一个新的调色板，这通常意味着降低颜色的饱和度，以适应深色背景。同时，避免使用纯黑作为主色调背景，而是选择接近纯黑的深灰色，以确保阅读体验的舒适性和可读性。

亮色/暗色模式下主色需要进行调整

(2).对比度控制

暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上，以保证内容的清晰度和易读性。对于彩色元素，也需要适当调整饱和度，确保整体色彩之间的对比度符合无障碍标准。

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

在暗色模式下，设计师需要特别注意视觉元素的区分，通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转，而是一种“弱光”主题的设计思考，旨在优化用户在低光环境下的视觉体验。

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

在早期的计算机系统中，如DOS和Linux，终端通常使用暗色模式，这是因为早期的CRT显示器存在闪烁问题，暗色背景能够减少视觉疲劳，并提供较高的对比度。

Linux的终端界面

2.个人电脑时代

随着个人电脑的普及，图形用户界面（GUI）逐渐成为标准，此时大多数操作系统和应用程序采用了亮色模式，以模仿纸张的颜色并减少CRT显示器的眩光。

Windows2000的GUI

3.移动设备时代

智能手机和平板电脑的兴起带来了OLED等先进显示技术，这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行，特别是在节省电量和减少眼睛疲劳方面。

iOS13的暗色模式

4.操作系统时代

近年来，各大操作系统开始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色应用模式，macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。

Windows10的暗色模式

三、设计趋势中暗色模式的地位

暗色模式在当前设计趋势中占据重要地位，以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境，还提供美学上的新探索，响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新，暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序，如WhatsApp、Instagram、Google、Facebook等，都已经引入暗色模式设计，这表明暗色模式已经成为了一种广泛接受的设计趋势。