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