Featured image of post Android HDR与用户界面的视觉优化指南

Android HDR与用户界面的视觉优化指南

本文探讨了在Android用户界面中混合使用HDR和SDR内容时出现的同步对比现象,提供了控制HDR头部空间的具体代码示例和设计建议,帮助开发者优化视觉体验。

HDR与用户界面

正如《什么是HDR?》中所解释的,我们可以将HDR视为仅指比SDR更亮的亮度范围。在将HDR内容集成到用户界面时,当您的用户界面主要是SDR颜色和资源时必须小心。人类视觉系统会根据周围环境调整感知颜色,这可能导致令人惊讶的结果。我们将看一个相关示例。

同步对比

考虑以下图像:

来源:维基百科

该图像显示了两个具有不同背景颜色的灰色矩形。对于大多数查看此图像的人来说,两个灰色矩形似乎呈现不同的灰度:具有较暗背景的最上面矩形似乎比具有较浅背景的最下面矩形颜色更浅。

但这些是相同的灰度!您可以通过使用喜欢的颜色选择工具或查看下图来证明这一点:

这说明了称为同步对比的视觉现象。对生物学解释感兴趣的读者可以在此处了解更多信息。

因此,颜色的附近差异被“强调”:当紧邻较亮的颜色时,颜色显得更暗;当紧邻较暗的颜色时,相同的颜色会显得更亮。

混合HDR和SDR的影响

同步对比的效果会影响需要呈现HDR和SDR内容混合物的用户界面的外观。HDR允许的峰值亮度将产生同步对比效果:眼睛将适应更高的峰值亮度(在实践中通常还有更高的平均亮度),这将在感知上导致SDR内容显得更暗,尽管技术上SDR内容亮度根本没有改变。对于用户来说,这可以表达为:我的手机屏幕变得“灰色”或“褪色”。

我们可以在下图中看到这种现象。右侧的设备模拟了如果这些照片以HDR渲染,在SDR用户界面下照片可能呈现的外观。请注意,八月照片在并排比较时看起来相同,但SDR用户界面的质量在视觉上下降了。

在设计HDR时,应用程序需要考虑在其屏幕上任何给定时间显示“多少”SDR,以控制HDR被“允许”达到的亮度。一个以SDR为主的用户界面,例如显示少量HDR内容的图库视图,可能突然显得比预期更暗。

在构建用户界面时,请考虑HDR对文本可读性或附近SDR资源外观的影响,并使用平台提供的适当API来限制HDR亮度,甚至禁用HDR。例如,2倍的HDR亮度头部空间可能可以平衡HDR场景与SDR元素的质量。相比之下,以HDR为主的用户界面,例如没有其他UI元素的全屏视频,不需要如此强烈地考虑这一点,因为用户界面的焦点在HDR内容本身。在这些情况下,5倍头部空间(或更高,取决于内容元数据,如UltraHDR的max_content_boost)可能更合适。

试图“增亮”SDR内容可能很诱人。抵制这种诱惑!这将导致您的应用程序过亮,特别是在屏幕上有其他应用程序或系统UI元素时。

如何控制HDR头部空间

Android 15引入了所需HDR头部空间的控制。您可以让应用程序根据所需用户界面的上下文请求系统使用特定的HDR头部空间:

  • 如果只想显示SDR内容,只需请求无头部空间。
  • 如果只想显示HDR内容,则请求高HDR头部空间,最高并根据内容需求。
  • 如果想显示HDR和SDR内容的混合物,则可以相应地请求中间头部空间值。典型的头部空间量对于混合场景约为2倍,对于全HDR场景为5-8倍。

以下是一些示例用法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// 要求窗口尊重所需的HDR头部空间。
// 注意SurfaceView上的等效api不需要COLOR_MODE_HDR来约束头部空间,如果有HDR内容显示在SurfaceView上。
window.colorMode = ActivityInfo.COLOR_MODE_HDR
// 说明性值:可根据内容所需的头部空间和应用程序UI设计的特殊性使用不同的头部空间值。
window.desiredHdrHeadroom =
    if(/* 仅SDR */) {
        0f
    } else {
        if (/* 混合,主要是SDR */) {
            1.5f
        } else {
            if ( /* 混合,主要是HDR */) {
                3f
            } else { 
                /* 仅HDR */
                5f
            }
        }
    }

其他平台也有API允许开发人员对其应用程序中的HDR内容约束有一定控制。

Web平台有一个更粗略的概念:CSS Color HDR模块的第一个公共工作草案添加了constrained-high选项来约束混合HDR和SDR场景的头部空间。在Apple生态系统中,constrainedHigh同样粗略,考虑了在消费显示器上显示混合HDR和SDR场景的挑战。

如果您是考虑支持HDR的开发人员,请深思HDR如何与您的用户界面交互,并适当使用HDR头部空间控制。

*眼睛还采用其他机制进行光适应,如瞳孔光反射,这放大了这种视觉现象(更亮的峰值HDR光意味着瞳孔收缩,导致更少的光线到达视网膜)。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计