漫漫长夜?，无心睡眠?，很多人基本都是靠熬夜玩手机?度过的。然而，在光线较暗的环境中，瞳孔会自然放大以适应环境，此时如果长时间盯着?手机屏幕，可能导致眼部疲劳、干涩等问题，严重更可能造成视力下降?。对此，很多APP和系统纷纷推出深色模式，以减少手机?对用户眼睛的刺激。在本文内容中，香港网页（HKWEB）将介绍关于“深色模式的一些实用UI设计技巧”，推荐给对深色模式感兴趣的同学阅读?。研究发现：手机使用的时间越长，用户的眼睛越容易出现疲劳。而与浅色模式相比，深色模式更有助于缓解眼睛疲劳，尤其是在光线不足或夜间的环境下，深色模式能给用户提供更好的工作环境。提起深色模式，或许很多人以为它是近几年的“产物”。事实上，在《黑客帝国（The Matrix）》中的那个“黑色背景+绿色代码”便是深色模式的雏形。
只是这种设计在上世纪80年代就已经过时，取而代之的则是“白色背景搭配黑色文本”。而回顾过去将近三十年的时间里，这种设计模式一直是UI设计的规范之一。直到2018年Google证实深色模式可以节省手机电池寿命，并将其置入于安卓系统后，其他操作系统和APP也陆续推出深色模式。总的来说，深色模式就是通过将屏幕亮度降低，为用户创造一个即使在黑暗环境下也能舒适使用产品并减少屏幕光对眼部伤害的一种UI设计模式。想要设计好深色模式，并不是简单地将“背景变黑，文本变白”，而是需要遵循以下这些UI设计原则，才能为用户的操作带来舒适的体验：不要在纯黑（#000000）界面中直接使用纯白（#FFFFFF）文本，因为如此高的对比度更容易让用户的眼睛产生不适感。
相比起完全纯黑的背景，其实使用深灰色作为界面主色调会更为安全。一来，深灰色界面与白色文字的对比度相对较低，有效降低对眼部造成的压力；二来，深灰色界面同样有不少配色方案选择，投影效果也更容易做出来。高饱和度色彩虽然在浅色界面的呈现效果不错，但在深色界面上容易引起用户产生视觉抖动，从而降低界面内容的易读性。
建议将前景色的饱和度控制在50-200左右，不仅可以提高内容的可读性，还可以缓解用户在使用产品过程中出现的视觉疲劳。文本内容与背景之间应该要保持合适的对比效果，以确保内容在深色模式下依然清晰易读。在Google设计规范中，推荐文本内容与背景之间的对比度至少要达到15.8：1的比例。一般来说，文本在深色模式下的呈现会被默认为纯白色（#FFFFFF），但事实上纯白色在深色背景下容易令用户产生视觉抖动。基于Google设计规范推荐，使用透明度较低的白色文本，不仅可以防止强对比度对眼睛的影响，更可以强调内容的层级关系：
⚠️ 需要注意的是，浅色文本在深色背景会比深色文本在浅色背景上显得更粗，因此在深色模式建议使用更纤细的字体。浅色背景转换成深色背景的设计并非随意更改配色就可以，这还需要考虑界面所传达的情绪。
一般来说，不同背景颜色所带来的感知是不同的，这意味着深色主题和浅色主题在信息的传达上是有区别的，从而让用户产生不同的情绪。因此，避免令用户产生误解，则需要重新思考产品的特性，并及时对UI设计进行优化。与浅色模式一样，深色模式同样需要通过清晰的层级结构，以突出界面的重要元素。而空间感就是我们用来传达元素层级结构的重要工具。
在浅色模式下，我们可以使用阴影效果来突出界面的空间感；但是这种方法在深色模式是行不通的。这主要是因为深色背景难以呈现出明显的阴影，因此这里就需要使用不同的亮度来表达元素的空间感。如果让系统自行决定何时启动或关闭深色模式，对用户来说可能是一个非常糟糕的体验，这相当于从用户手上抢夺了控制权，令他们无所适从。因此，产品最好除了有自动切换模式，还应该允许用户使用UI控件自行打开/关闭深色主题，避免因为剥削用户的控制权而给他们带来不好的体验。当上述UI设计技巧都掌握后，就需要留意你的产品在浅色模式和深色模式下的外观细节，并根据不同情况适时优化和调整，确保用户在任何环境下都能畅通无阻地访问。 优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
专属顾问
公安局备案号：