电商中的深色模式现实
自2019年苹果在iOS中引入深色模式、Android随后跟进以来，深色模式的采用率大幅增长。2023至2024年的调查数据持续显示，35%至45%的智能手机用户默认启用了深色模式——在年轻人群中这一比例更高。对于目标受众偏向年轻群体或移动端参与度较高的电商店铺来说，相当一部分访客在深色模式下购物的可能性很高。
大多数Shopify主题在设计时并未考虑深色模式。当浏览器在深色模式系统环境中渲染浅色模式网站时，结果取决于浏览器的行为——某些浏览器会自动反转元素，其他浏览器则让网站以原有的浅色调色板在深色系统环境中渲染。这两种结果通常都不是店铺设计者的初衷。导航组件——标签栏、汉堡菜单、下拉菜单——尤其容易出现深色模式渲染问题，因为它们叠加在主内容之上，可能继承不同的渲染上下文。
对于注重品牌的店铺来说，这种渲染不一致是品牌质量问题。在浅色模式下看起来精致、在深色模式下却显得凌乱的导航，会传递出店铺设计并未达到细心购物者对其他应用所期待的同等标准的信号。
"我们的品牌形象建立在深邃、富有情绪的美学之上——深黑色、丰富的宝石色调、极简的白色。当我们看到深色模式下顾客手机上的导航效果时，感到非常震惊——标签栏呈现出褪色的背景，完全破坏了我们精心构建的视觉形象。用Navi+为标签栏和侧滑菜单配置我们预设的深色调色板后，深色模式用户实际上获得了比浅色模式用户更好的体验。这与品牌完全一致。"
— Navi+用户，高端珠宝品牌
专为深色模式设计导航
深色模式导航设计并不只是简单地反转浅色模式的调色板。以下几项针对深色环境的设计原则需要加以应用：
背景亮度，而非纯黑。 即使对于以深色模式为优先的品牌，导航组件中使用纯黑(#000000)背景也很少是正确的选择。纯黑与较亮的文字形成强烈的对比，会让导航显得沉重且咄咄逼人，而非精致优雅。使用深灰、深蓝或非常深的炭灰色(#0A0A0A至#1A1A2E范围内)的深色背景更显设计感，在长时间浏览时也更易阅读。
调整对比度比例。 WCAG无障碍指南要求背景上文字的最低对比度比例为4.5:1。在深色模式下，这意味着浅色文字相对于深色背景必须足够明亮——这看似显而易见，但当浅色模式调色板中的色彩标记被简单地移植到深色背景时，很容易出错。为深色模式设计的导航应专门在深色配置下验证其对比度比例。
品牌色彩的保留。 在浅色模式下定义品牌的标志性色彩，在深色模式下往往表现不同。在白色背景下看起来充满活力的品牌绿色，在深灰色背景下可能显得暗淡。深色模式导航设计可能需要对品牌色彩标记的饱和度或亮度进行微调，以在深色环境中保持预期的视觉印象。
图标的可见性。 导航图标——尤其是标签栏中的图标——需要在深色背景上清晰可见。细线条的浅色轮廓图标在深色背景上效果良好；在白色背景上使用的深色实心图标，若不经调整，在深色模式下可能几乎不可见。
| 导航深色模式处理方式 | 深色模式用户的视觉质量 | 品牌一致性 |
|---|---|---|
| 未修改的浅色模式主题 | 差 — 渲染可能出现异常 | 在深色环境中破坏品牌视觉体系 |
| 浏览器自动反转 | 不稳定 — 结果无法控制 | 品牌渲染效果不可预测 |
| 有意设计的深色调色板 (Navi+) | 高 — 专为深色环境设计 | 即使在深色环境中也能保持品牌掌控 |
深色模式作为品牌宣言
对于具有深邃、富有情绪或高端极简美学的品牌来说，深色模式导航并不是对用户偏好的妥协——它是品牌视觉形象的表达。对这些品牌而言，一个拥有深炭灰色背景、细白色边框和品牌强调色图标的标签栏，在深色模式下比在浅色模式下更加出色。深色模式是其视觉系统的原生环境。
Navi+为所有导航组件提供完整的色彩控制——背景颜色、文字颜色、边框颜色、图标颜色以及激活/非激活状态颜色。这种控制能力允许精确配置深色模式：无论用户设备处于浅色还是深色模式，标签栏和侧滑菜单都能呈现出有意为之且符合品牌风格的效果。对于注重品牌的店铺来说，这不是一个微不足道的技术细节——这是看起来经过精心设计的导航与看起来被忽视的导航之间的区别。