Light-Aware 用户界面基础知识

术语 光感知 UI 是指使用光传感器数据优化其内容、控件和其他图形的程序,以便在许多照明条件下获得最佳用户体验,从黑暗到直接阳光。 也许最重要的优化是直接阳光下易读性、可读性和交互性,因为屏幕在这些条件下通常表现不佳。 在本部分中,我们将重点介绍三个 UI 属性:缩放、对比度和颜色。 可以更改这些属性以优化视觉用户体验。

缩放和亮度

一般情况下,较大的对象更易于查看。 当计算机处于不利的照明条件(如直接阳光下)时,使内容变大有助于提高该内容的可读性和交互性。

以下照片将阳光直射中的笔记本电脑与典型的屏幕亮度和缩放级别与同一照明条件下的笔记本电脑与感知光 UI 的笔记本电脑进行比较。 第一张照片显示显示设置为 40% 亮度与正常缩放级别。 第二张照片显示显示设置为 100% 亮度,缩放级别增加。

笔记本电脑以 40% 亮度显示,正常缩放级别 笔记本电脑以 100% 亮度显示,缩放级别增加

不同字号

如果增加用于显示文本的字体大小,则文本在不利的照明条件下更加清晰。 字体样式、字体面等特征也可以有所不同,以优化易读性和可读性。 例如,sans serif 字体通常比 serif 字体更容易阅读。

与 serif 字体相比,sans serif 字体

缩放内容

如果程序实现缩放,它可用于缩放内容。 放大可增强可读性,同时缩小使程序能够显示更多内容。

更改矢量图形呈现属性

如果程序呈现矢量图形基元(如线条、圆圈等),则可以更改呈现的特征以优化易读性。 例如,如果程序呈现矩形,则用于呈现矩形的线条的宽度可以缩放(户外更宽,室内更窄),以优化矢量图形内容的外观和可读性。

反差

在明亮的照明条件下使用液晶屏时,屏幕的整体对比度会降低。 当屏幕被光线淹没(例如,从太阳)时,屏幕上对黑暗区域的感知会减少。 一般情况下,当环境光明亮时,增加内容和 UI 的对比度非常重要。 可能需要使用单色配色方案在这些照明条件下最大化对比度。 增加对比度的另一种方法是将低对比度内容(如地图程序中的空中照片模式)替换为高对比度元素(如黑白街道矢量图形模式)。

颜色

程序用来显示其内容的颜色可能会对呈现内容的整体用户体验和易读性产生重大影响。 通过根据环境光更改颜色对比度,可以在不利的照明条件下使内容更易于阅读,例如明亮的户外光线或深色内部光。

增加颜色对比度的一种方法是通过颜色饱和度。 另一种方法是使用互补颜色而不是相邻颜色来提高可读性。 互补颜色是一对相反色调的颜色,如蓝色和黄色。 以下并排示例演示如何使用互补颜色来帮助改善颜色对比度。

文本颜色对可读性的影响的示例。