色彩

眼镜上的用色,需要同时考虑显示特性、环境和用户认知。配色经过精细调整,以适应加色式显示,并让观看更舒适。应克制地使用颜色,让界面与现实环境协调;颜色可以用来强调重要操作、呈现图像,或传达具体含义。

在光学透视显示中,黑色呈现为透明。设计时要记住:深色会显得暗淡或透明;也可以利用这一特性营造深度感。

配色体系

眼镜的配色体系是一组用于定义应用主题的颜色令牌或颜色角色,由 3 种强调色角色、6 种界面底板色(或中性色)角色,以及各自对应的前景色角色组成。这里的颜色角色与手机端相似,使用方式也应保持一致。

眼镜配色角色示意图

强调色也可以用于前景内容,但应限于少量强调。

大多数文字使用白色的示例

建议:以白色文字为主

大多数文字内容使用白色,需要强调的文字可以使用其他颜色。

全部使用彩色文字的反例

避免:所有文字都使用彩色

不要给全部文字内容着色。

定制颜色

为眼镜定制颜色时,关键是尽量减少视觉遮挡,并与现实环境协调。应优先保证内容在不同光照下都能读清。仔细平衡亮度与饱和度,让颜色能被迅速辨认。

主色可以使用品牌色或主要交互色。选择时,需要考虑对比度、饱和度以及功耗。

品牌色与语义色的定制示例

优化品牌色与语义色

用于表达品牌、操作或系统警报的颜色,必须满足以下要求:

  • 足够亮,保证内容可读。
  • 具有足够的饱和度,使其呈现出可辨识的色彩。
  • 在 HCT 色彩空间中,前景与背景的明度(Tone)差至少为 66%。

进一步了解 Jetpack Compose Glimmer 主题。

功耗

不同颜色的功耗和发热不同。如下图所示,在明度相同的条件下比较,绿色最省电,蓝色耗电最多。应尽量减少被点亮的像素数量。屏幕越亮,显示部件就越热;不要让全屏显示纯白,否则可能触发过热保护。

相同明度下不同颜色的功耗比较
在不同现实背景上检查界面对比度

建议:检查各种背景下的对比度

考虑用户可能遇到的所有背景,检查界面与背景之间的对比度。

界面与现实背景对比度不足的反例

避免:界面在不同背景上对比不足

对比度不足可能造成视觉疲劳,让内容难以辨读。

为了在各种背景上保持足够对比,原文要求前景与背景颜色的明度差达到“70(7:1)”。可以将设计稿设为 Screen(滤色)混合模式进行检查。

使用较低饱和度颜色的示例

建议:使用较低饱和度的颜色

使用较低饱和度的颜色。

使用过高饱和度颜色的反例

避免:颜色过度饱和

过度饱和的颜色可能无法正确显示,并影响可读性。

应避免自行定制界面底板。

深色容器与前景内容示意图

深色容器

容器通常必须把注意力留给其中的内容,避免自身形成干扰:

  • 为了获得最高对比度,界面底板必须使用黑色。
  • 处于焦点状态时,底板明度不应高于 34%,以保证前景元素清楚可读。
  • 描边应看得见,但保持克制。
深色底板搭配明亮内容的示例

建议:深色底板,明亮内容

使用深色界面底板和明亮的前景内容。

明亮或填满颜色底板的反例

避免:明亮或填色的底板

不要使用明亮或填色的界面底板。

底板与文字之间有足够对比的示例

建议:拉开底板与文字的明度

让底板与文字之间有足够对比;原文建议检查两者的明度差是否约为 66。

底板与文字明度过近的反例

避免:底板与文字太接近

不要让底板和文字的明度过于接近,导致对比不足。

不同底板角色之间存在明度层次的示例

建议:让不同底板角色形成层次

确保 Surface 与 Surface Variants 之间有足够的明度差,以建立必要的视觉层次。

不同底板角色明度过于接近的反例

避免:不同底板角色明度过近

不要让 Surface 与其变体的明度过于接近;原文在此标注了“约 20 的差值”。

可以定制描边,为界面加入品牌特征或更有表现力的视觉语言。

使用默认描边颜色的示例

建议:使用默认颜色

默认颜色已针对眼镜显示进行了充分优化。

使用多种描边颜色的反例

避免:同时使用多种描边色

不要让描边混用多种颜色。

默认状态与焦点状态的自定义描边配色

注意:协调不同状态的描边颜色

定制颜色时,谨慎处理焦点状态与默认状态的描边,使两者保持协调。

两层描边构成的焦点高亮
以蓝色定制焦点描边:焦点高亮由两层描边组成,将颜色应用于第 2 层,即可为焦点状态着色。
各交互状态都保持足够对比的示例

建议:所有交互状态都有足够对比

确保界面在每种交互状态下都保持足够的对比度。

交互状态对比度过低的反例

避免:交互状态对比度过低

不要把交互状态的对比度降得过低。