夜晚，你打开笔记本电脑。屏幕将刺眼的白光直射你的脸庞。你眯起眼睛心想：“这实在太亮了。”
而这正是深色模式所要避免的。
最初只是一股设计潮流，如今深色模式已成为用户的一种期待，因为它让深夜浏览更护眼，并帮助你在弱光环境下保持专注。
在本指南中，你将了解深色模式网站为何如此受欢迎，以及如何设计一个能与浅色模式无缝切换的深色模式网站。
什么是网页设计中的深色模式？
深色模式是一种设计风格，网站使用深色背景（通常是黑色、深灰色或深蓝色），并在其上呈现浅色文字和元素。它与通常的“浅色模式”正好相反，后者是在白色背景上显示深色文字。
你可能已经在手机上使用过它，或在 YouTube、Instagram 等网站上注意到它，因为它现在已非常普遍。
无需代码的电子邮件模板构建器
使用 Postcards Email Builder，你可以在线创建和编辑电子邮件模板，无需任何编码技能！包含 100 多个组件，助你比以往更快地创建自定义电子邮件模板。
尽管仍有很多人坚持使用浅色模式，但深色模式已迅速从新奇事物发展为真正的趋势。
2024年，英国 YouGov 机构调查了 2500 多人，以了解他们偏好如何使用智能手机。根据他们的调查，29% 的人更喜欢在智能手机上使用深色模式。
几年前，甚至还没有切换模式的概念——网站和应用始终只有浅色模式。但这项调查表明，如今，用户在有选择时也会选择深色模式。
为什么使用深色模式网站
你可能认为深色模式是一个很酷的网页设计选择。但当你的访客尝试它时，他们会立刻注意到以下好处：
在夜晚或昏暗房间中，相较于明亮的白色屏幕，它对眼睛更温和。
它赋予网站一种现代、高级的感觉，这就是为什么科技品牌、作品集网站和创意网站经常使用它们。
在最高亮度下，它最多可节省 67% 的 OLED（有机发光二极管）功耗，因为屏幕越亮，节省的电量就越多。
它减少了整体的蓝光暴露，使得深夜浏览对周围环境的干扰更小。
深色模式网站的优缺点
以下是拥有深色模式网站的利弊快速比较，以帮助你决定是否真的需要它：
优点: 在弱光环境下更护眼；提供时尚现代的设计，使色彩更突出；在 OLED/AMOLED 设备上节省电量；有助于编码或编辑时集中注意力；减少蓝光暴露，对睡眠更有利。
缺点: 在强光下阅读更困难；对部分用户可能因文本模糊而降低可读性；明亮的Logo和色彩可能显示不佳；需要额外维护以保持设计一致性；色彩在深色背景上有时会感觉情感上“不对劲”。
4个启发性的深色模式网页设计示例
以下是四个深色模式网站示例，你可以从中汲取灵感：
1. Qase
Qase 的深色模式采用深海军蓝背景，赋予网站一种时尚、太空般的感觉。紫色和蓝色的点缀增添了柔和的光晕，使设计看起来现代且未来感十足。一切感觉干净利落，非常适合技术平台。
登录后，你会看到一个切换按钮，可以在浅色和深色模式之间切换。
低代码网站构建器
使用 Startup App 和 Slides App，你可以使用在线网站编辑器构建无限量的网站，该编辑器包含现成的设计和编码元素、模板和主题。
2. YouTube
YouTube 的深色模式用深灰色和黑色取代了亮白色背景。这使得视频在屏幕上更加突出。在夜晚它也让人感觉更舒适，并保持了界面的简洁。
但如果你偏好浅色模式，可以从设置中一键切换回来。
3. Wix
在深色模式下，Wix Studio Tab Chrome 扩展（非网站）使用丰富的炭黑色背景，看起来非常舒适。其彩色图标和卡片让你能快速发现更新和链接。这种方式使对比度感觉平衡。
4. Trello
Trello 的灰色背景和浅灰色文本看起来是完美的组合。明亮的点缀将你的注意力引导到重要的看板和按钮上。整洁的布局赋予了 Trello 工作区一种极简主义的感觉。
如何逐步创建深色模式网站
有多种方法可以为你的网站添加深色模式。
一些最常见的方法是使用 WordPress 插件（更简单），或者，如果你更精通编码，可以选择 JavaScript 和 CSS 方案。
但如果你想避免所有这些麻烦，并且需要一个简单的拖放选项来快速完成工作，请使用 Designmodo 的 Slides，一个无需代码的网站构建器。
1. 进入 Designmodo Slides，点击 "Open Editor"。
2. 转到 "New Page"，添加你网站的 "Name" 和 "Title"。
3. 然后点击 "Create and Edit"。
4. 在编辑器中，你会在顶部栏看到 "Add" 选项。点击它查看下拉菜单。
在下拉菜单中，你可以看到：
-- Slides
-- Examples
-- Templates
-- Widgets
5. 从可用选项中，选择你最喜欢的设计（我选择了幻灯片 27）。
6. 在左侧面板中，将鼠标悬停在版式上，然后单击 "Pen" 符号开始编辑。
7. 将出现一个编辑面板。现在，转到 "Edit" 部分，查找 "White Slide" 切换选项。将其关闭，你的幻灯片将变为深色模式。
8. 点击 "绿色勾号" 保存更改。
现在，你可以根据需要自定义整个网站设计（包括文本和视觉效果），并在准备就绪后发布它。
设计深色模式网站的技巧
既然你知道如何创建深色模式网站，以下是一些可以遵循的技巧：
不要使用纯黑色背景
纯黑色（#000000）背景搭配亮白色文本可能看似显而易见的选择，但它可能产生强烈的对比，令人视觉疲劳。相反，使用深灰色（#121212）作为背景。这可以保持设计对眼睛柔和，同时视觉上仍然丰富。
避免纯白色文本
深色背景上的亮白色文本会产生光晕效果，使其更难阅读，尤其对于有某些视力状况的人。
相反，选择灰白色或浅灰色，并根据不同文本类型调整不透明度，例如：
重要文本：约 87% 不透明度
次要或提示文本：约 60% 不透明度
禁用文本：约 38% 不透明度
降低高饱和度色彩的强度
明亮、类似霓虹的颜色在深色模式下可能会显得过于强烈。它们会在背景上“发光”，使阅读变得困难。如果你的品牌使用强烈的颜色，尝试使用稍微柔和的版本，这样它们仍然突出而不会让观看者感到刺眼。
不要改变你的品牌色
你不必为深色模式完全反转你的整个调色板，但你可能需要对其进行调整。对按钮或Logo等重要元素保留你的主要品牌颜色，但在其他地方使用调低强度的版本，以避免压倒界面。
避免使用阴影
在深色模式下，阴影会消失。如果它们只比背景暗一点，你就看不到它们。如果你把它们做成纯黑色，帮助也不大。如果你让它们更亮，它们看起来会很奇怪。
所以，相反，使用柔和的高光、轻微的渐变或略微不同的色调来显示深度。你也可以给元素一个其颜色较亮版本的微弱发光。这很简单，而且比几乎注意不到的阴影效果要好得多。
为深色模式调整图像
深色模式会改变视觉效果，因此需要额外注意。以下是我们推荐的一些技巧：
使用柔和或暗色调，使图像与背景平滑融合。
避免使用明亮的颜色，因为它们可能会分散注意力。
调整亮度和对比度，使你的图像不会看起来太亮或太暗。你可以使用浅色滤镜或叠加层使它们更好地适应深色背景。
使用浅色图标或图形以确保清晰的可见性。
在不同光照条件下测试，确保图像保持可读性和吸引力。
检查你的图片库，调整或替换任何与深色主题冲突的内容。
让用户可以轻松切换模式
设计来源：Mohammad Turk
有些人整天都喜欢深色模式；其他人只在晚上需要。通过一个清晰、简单的切换开关给予用户控制权，让他们可以随时切换模式。
在不同设备和光照条件下测试
你的设计应该在白天的手机上和夜晚的台式机上同样出色地工作。因此，请确保在各种光照条件和屏幕类型下进行测试，以确认它始终可读且吸引人。
你应该为你的网站添加深色模式吗？
深色模式并非每个网站的必备功能，但如果你的受众在弱光环境下浏览或依赖移动设备，它可能会产生很大的不同。关键是测试：确保可读性、色彩平衡和品牌形象在深色模式下的效果与在浅色模式下一样好。
如果你准备尝试，请审视你网站的设计，并在现有布局旁边测试深色调色板。然后，收集用户反馈，看看它是否真正改善了访客的体验。
常见问题解答 (FAQs)
深色模式能改善 SEO 吗？
不能直接改善。深色模式关乎网页设计和用户体验，但更好的用户体验可以带来更长的会话时间和更低的跳出率，这可能间接有助于 SEO。
深色模式和夜间模式有什么区别？
深色模式将屏幕的整体外观变为深色配浅色文字，这让人感觉更舒适，甚至可以在某些设备上节省电量。相反，夜间模式通过减少蓝光并添加橙色或黄色等暖色调来软化颜色。这使得屏幕在晚上看起来更放松。
深色模式总是省电吗？
它只在 OLED 和 AMOLED 屏幕上节省电量。在 LCD 屏幕上，节能效果微乎其微。
精选文章：