杭州兴元设计吧 关注:191贴子:816
  • 0回复贴,共1

杭州UI设计学习|深色模式下的设计细节

只看楼主收藏回复

  1.关于颜色在黑暗模式中的应用
  避免使用纯黑色值。
  深色模式不是说在纯黑背景上使用纯白文字,而是为什么不用纯黑值作为大面积背景呢?原因是,目前大多数智能手机都使用有机发光二极管屏幕。当我们将界面颜色设置为纯黑色值时,屏幕集成中的LED不会亮起,但是在操作界面时,由于滑动到了有颜色的部分,LED会亮起。简单来说,大面积使用纯黑值会导致LED一直处于开关状态,长期使用会导致严重的拖影现象。因此,广泛使用的软件一般使用深灰色值,而不是纯黑。同时,纯黑和纯白的高对比度会让用户难以适应这两种颜色的亮度,造成用户的视觉疲劳。
  从六个方面总结深色图案的设计细节。
  选择低饱和度颜色
  使用较浅的色调(200–50范围内的颜色)在深色图案中具有更好的可读性。较浅的颜色不会降低UI的视觉表现力,但可以帮助你保持适当的对比度,不会造成眼睛疲劳。饱和度低的颜色可以提高可读性,减少用户的视觉冲击,而饱和度高的颜色可读性弱,容易使眼睛感到疲劳,降低用户体验。同时也容易造成页面信息层次混乱,导致缺乏突出的关键信息。
  色彩的合理运用
  在深色模式下,大面积颜色的使用会破坏深色的平衡,让用户感到刺眼和疲惫。你可以在下图中看到同色的明暗花纹对比:第一组在亮界面更突出,第三组在暗界面更突出,第二组在明暗界面相似。因此,在设计深色图案时,要充分考虑颜色指示效果在明暗背景上能否保持一致。
  除了在选择颜色时充分考虑外,还可以借鉴iOS设计指南中相应的颜色映射来达到同样的设计效果,即在浅色模式下选择一种颜色时,深色模式会自动映射另一种颜色。
  2.保持指示性
  暗模式不是简单的翻转亮模式的颜色,还要保证暗模式下的信息显示水平能够保持视觉提示的准确性。
  我们想要在亮模式中突出显示的信息和元素也应该在暗模式中突出显示。作为背景色,深色图案所遵循的设计规律应该是离我们较近的元素颜色较浅,较远的颜色较深。不同的色阶被用来模拟浅色图案中的层次概念。
  3.辅助颜色的应用
  辅助色也是深色模式中层次的重要组成部分(下图所示的下拉菜单设计)。比如定义辅助色中分割线的颜色值。无论是用分割线还是背景色来区分层次,当屏幕亮度变暗或色彩对比度较小时,都可能“消失”。在深色模式下,相对于分割线和投影,更好的处理方式是在交互层面设计更好的信息层级,这样即使分割线不清晰。
  关于字体
  关于黑暗模式下的用词,老生常谈就是对比。这里,将引入一个新术语“WCAG”。WCAG被称为网页内容无障碍指南,其中包含的相关建议可分为五类:可感知性、可操作性、可理解性、兼容性和一致性。WCAG规定,为了保证文字的可读性,对比度应符合WCAG的AA和AAA标准。WCAG的AAA级要求小文本与背景的对比度至少为4.5:1,大文本与背景的对比度至少为3:1。WCAG的AAA级要求小文本与背景的对比度至少为7:1,大文本与背景的对比度至少为4.5:1。
  为了适应黑暗模式,建议单词颜色采用固定的颜色值,仅用透明度来区分单词颜色的高低。
  同时,与黑色相比,白色会有视觉扩张的效果。同样粗细,白底白字向内会觉得细,黑底白字向外会觉得粗。所以在大面积使用粗体字的时候,如果在保证对比度的前提下,字体颜色比较灰,就不会造成视觉压抑感。
  


1楼2023-04-01 17:22回复