网页设计深色模式：优点、缺点和应用时机

网页设计深色模式：优点、缺点和应用时机

深色模式是一种在深色背景上使用浅色文本、图标的配色方案，在网页设计中越来越流行。本文将探讨深色模式的优缺点、适用场景以及在不同设备上的设置方法。

深色模式的定义

深色模式是一种在深色背景上使用浅色文本、图标的配色方案。它经常在计算机用户界面设计和网页设计方面进行讨论，深色不一定非得是黑色的，大多数是指深灰色的。

深色模式的优点

• 降低发光：深色模式在浏览网站时可以减少眼睛疲劳（实际上不一定），尤其是在夜间或弱光环境中。这主要是因为减少了屏幕上发出的亮光量，但是建议不要在黑暗处看着屏幕。缓和眩光以改善视觉质量，但这主要归功于目前的屏幕技术。2019 年，发表在《Nature》杂志上的一项研究表明，在暗色模式下阅读文字，瞳孔会扩大，让更多的光线进入眼睛，从而提高视敏度。2020 年，发表在《Optometry and Vision Science》杂志上的一项研究表明，在暗色模式下阅读 30 分钟，眼睛疲劳的程度会降低 20%。

然而，也有一些研究表明，暗色模式并不能保护视力，甚至可能造成视力损害。2021 年，发表在《Scientific Reports》杂志上的一项研究表明，在暗色模式下阅读，瞳孔会扩大，但会导致光光学像差增加，降低视觉质量。2022 年，发表在《Journal of the Optical Society of America A》杂志上的一项研究表明，在暗色模式下阅读，会增加眼部肌肉的疲劳，从而导致视力下降。

• 电池寿命：深色模式有助于延长 OLED 屏幕设备的电池寿命。这是因为 OLED 屏幕只需要点亮正在显示内容的像素，降低功耗，因此使用深色背景有助于节省电量。

• 个人喜好：有些人只是喜欢黑暗模式的外观和感觉。他们发现它更加平静和轻松，而且似乎可以更好地集中注意力，可以更加聚焦呈现图片色彩、气氛。如果您的用户多数为高龄长者，深色模式对长者来说是陌生的，不太适合，几乎没有任何深色界面的医院、照护页面。

• 色彩心理：实体包装印制黑底会浪费油墨，通常表表达高档、科技的感觉居多，延伸到网络也是相同的心理作用。

总体而言，目前关于暗色模式是否能保护视力的研究尚无定论。这个需要等更多研究资料与科学性的定论，才能进行式推荐使用暗色模式的举措，现阶段，对网页设计来说，它是一种视觉、氛围考量而已，无法提供更多优势，因此，是否用暗色模式取决于个人喜好和使用环境。

哪些网站使用深色模式最适合？

• 长时间观看型：YouTube、Netflix
• 表达尖端黑科技：ChatGPT、Midjourney
• 设计工具、高解析影像处理搭配 OLED 荧幕，会呈现极致干净的深色背景与更生动的色彩，精准地保留更多细节。
• 夜间氛围品牌：烧烤店、露营、音乐、高级精品等有视觉氛围延伸感的行业
• 大量使用者：按使用者习惯调整，例如：地图、浏览器（可以让使用者选暗色/浅色模式）

手机设置：夜间模式/深色模式

• Android：打开“设置”应用程序并转到“显示”。点击“主题”并选择“深色”。
• iPhone：打开“设置”应用程序并转到“显示和亮度”。点击“外观”并选择“深色”。
• Windows：打开“设置”应用程序并转到“个性化”。单击“颜色”，然后在“选择默认应用程序模式”下选择“深色”。
• macOS：打开系统偏好设置并单击“常规”。单击“外观”下拉菜单并选择“深色”。

色彩影响力

• 情绪上：深色系通常深邃、神秘、个性、非常规、特立独行。
• 实际上：降低发光、聚焦图片、延长电池寿命。

然而，深色与浅色各有优劣，浅色比较偏向大众化、中性、赋予安全感。以一个深色茶壶品牌为例，如果设计上使用深色模式加上细致清晰的图像，来表达高级感、匠艺感以及其中意境，这样的呈现反而吸引长者，这时，色彩保留一些独特韵味并且符合您的品牌意境。

如果是以脚踏车、赛车或电动车为例，有一些视觉感受，例如：速度、引擎、音质、耗能数据、深色模式对年轻人感官感受更强烈，但反观如果是在购物"结账"页面，深色模式在心理层面通常会犹豫与怀疑。

由于我们从小都是训练白纸黑字的阅读，因此对大多数人来说，深色背景需要较长的阅读时间，对于主流新闻即时性与"快速阅读"来说，更偏向传统的白底，但如果是个性化的独立媒体来说，深色是不错的选择。

最后，品牌的视觉展示不一定局限在电脑、平板、手机，当然也有可能是投影、印刷、舞台，这可能就会有一套视觉指南 CIS-VI 去归纳正确的色彩使用方式与情境，并且在标志使用上，黑底与白底会同时考量进去。