深眸分享——六方面总结深色模式的设计细节思考

深眸科技

已于 2022-09-02 10:53:21 修改

阅读量324

点赞数

文章标签：人工智能深度学习视觉检测自动化机器学习

于 2022-09-02 10:52:00 首次发布

本文链接：https://blog.csdn.net/Sensemoment/article/details/126656997

版权

本文详细探讨了深色模式下的设计原则，包括避免使用纯黑色，选择低饱和度色彩，合理使用彩色以维持视觉层次，以及文字、图标和按钮的处理方式。强调了深色模式并非颜色反转，而应注重对比度、可读性和用户体验。同时，提出了WCAG对比度标准在文字使用上的重要性，以及在图标和按钮设计上的创新建议，如使用浅色调和避免高饱和度颜色。此外，还讨论了阴影在深色模式下的应用，以及如何处理第三方图片以降低用户疲劳感。

摘要由CSDN通过智能技术生成

一、关于深色模式下的颜色应用

（一）色彩应用

1、避免使用纯黑色值

随着人类将更多时间用在与科技产品的互动上，暗色模式为我们接触数字世界提供了一种更轻松的方式。通常情况下，这些主题更具吸引力，适合专门用户。

暗色模式的创建是为了减少所有东西发出的亮度，从你的桌面、笔记本电脑，到你的智能手机和智能手表。暗色模式利用视觉人体工程学设计，通过调整亮度适应当前的照明条件，减轻眼睛疲劳。此外，许多暗色模式产品在节省电池寿命方面也很出色。

深色模式并不意味着在纯黑背景上使用纯白色文本，而为何不使用#000000纯黑色值作为大面积背景，原因在于现阶段智能手机多采用OLED屏幕，当我们设定界面颜色为纯黑色值时，屏幕集成中的发光管是不会点亮的，而在进行界面操作时，发光管则会因为滑动到有色部分而被点亮。同时，纯黑与纯白的高对比度也会使用户很难适应这两种色彩亮度，引起用户视觉疲劳。

2、选择低饱和度色彩

因此，在“深色模式”中，主色调一定不要采用饱和色彩。建议使用浅色调（色调控制在50至200范围内），从而让页面内容在“深色模式”下具有更佳可读性。浅色调不仅不会影响用户体验，还会在不造成眼睛疲劳的前提下保持恰当的反差。在“深色模式”中采用饱和色彩，会降低用户的可读性（如左图）；建议采用浅色调，保证基本的可读性（如右图）。