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

2024-3-21    博博

一、定义及其在UI设计中的表现形式
1.暗色模式的定义
暗色模式是一种低光用户界面（UI）设计，也称为深色模式，是一种用户界面设计选项，它使用较深的颜色方案和背景，通常为黑色或深灰色，以减少屏幕亮度并提供更舒适的视觉体验。
iOS 13 亮色模式（左）与暗色模式（右）的对比
iOS 13 亮色模式（左）与暗色模式（右）的对比
 
2.暗色模式的定义
(1).暗色模式在UI设计中的表现形式
设计师需要为暗色模式创建一个新的调色板，这通常意味着降低颜色的饱和度，以适应深色背景。同时，避免使用纯黑作为主色调背景，而是选择接近纯黑的深灰色，以确保阅读体验的舒适性和可读性。
亮色/暗色模式下主色需要进行调整
亮色/暗色模式下主色需要进行调整
 
(2).对比度控制
暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上，以保证内容的清晰度和易读性。对于彩色元素，也需要适当调整饱和度，确保整体色彩之间的对比度符合无障碍标准。
达到/未达到WCAG2.0AA标准的视觉效果对比
达到/未达到WCAG2.0AA标准的视觉效果对比
 
(3).视觉元素区分
在暗色模式下，设计师需要特别注意视觉元素的区分，通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转，而是一种“弱光”主题的设计思考，旨在优化用户在低光环境下的视觉体验。
亮色模式中的按钮在暗色模式中显得太跳跃
亮色模式中的按钮在暗色模式中显得太跳跃
 
二、历史回顾及发展脉络
1.命令行界面时代
在早期的计算机系统中，如DOS和Linux，终端通常使用暗色模式，这是因为早期的CRT显示器存在闪烁问题，暗色背景能够减少视觉疲劳，并提供较高的对比度。
Linux的终端界面
Linux的终端界面
 
2.个人电脑时代
随着个人电脑的普及，图形用户界面（GUI）逐渐成为标准，此时大多数操作系统和应用程序采用了亮色模式，以模仿纸张的颜色并减少CRT显示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移动设备时代
智能手机和平板电脑的兴起带来了OLED等先进显示技术，这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行，特别是在节省电量和减少眼睛疲劳方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系统时代
近年来，各大操作系统开始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色应用模式，macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、设计趋势中暗色模式的地位
暗色模式在当前设计趋势中占据重要地位，以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境，还提供美学上的新探索，响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新，暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序，如WhatsApp、Instagram、Google、Facebook等，都已经引入暗色模式设计，这表明暗色模式已经成为了一种广泛接受的设计趋势。
从左往右依次为：WhatsApp、Instagram、Google、Facebook
从左往右依次为：WhatsApp、Instagram、Google、Facebook


作者：阿琳01
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

分享本文至：
« 暗色模式的优势 智慧电力可视化大屏管理系统 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档