眼镜上的用色,需要同时考虑显示特性、环境和用户认知。配色经过精细调整,以适应加色式显示,并让观看更舒适。应克制地使用颜色,让界面与现实环境协调;颜色可以用来强调重要操作、呈现图像,或传达具体含义。
在光学透视显示中,黑色呈现为透明。设计时要记住:深色会显得暗淡或透明;也可以利用这一特性营造深度感。
配色体系
眼镜的配色体系是一组用于定义应用主题的颜色令牌或颜色角色,由 3 种强调色角色、6 种界面底板色(或中性色)角色,以及各自对应的前景色角色组成。这里的颜色角色与手机端相似,使用方式也应保持一致。

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

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

避免:所有文字都使用彩色
不要给全部文字内容着色。
定制颜色
为眼镜定制颜色时,关键是尽量减少视觉遮挡,并与现实环境协调。应优先保证内容在不同光照下都能读清。仔细平衡亮度与饱和度,让颜色能被迅速辨认。
主色可以使用品牌色或主要交互色。选择时,需要考虑对比度、饱和度以及功耗。

优化品牌色与语义色
用于表达品牌、操作或系统警报的颜色,必须满足以下要求:
- 足够亮,保证内容可读。
- 具有足够的饱和度,使其呈现出可辨识的色彩。
- 在 HCT 色彩空间中,前景与背景的明度(Tone)差至少为 66%。
进一步了解 Jetpack Compose Glimmer 主题。
功耗
不同颜色的功耗和发热不同。如下图所示,在明度相同的条件下比较,绿色最省电,蓝色耗电最多。应尽量减少被点亮的像素数量。屏幕越亮,显示部件就越热;不要让全屏显示纯白,否则可能触发过热保护。


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

避免:界面在不同背景上对比不足
对比度不足可能造成视觉疲劳,让内容难以辨读。
为了在各种背景上保持足够对比,原文要求前景与背景颜色的明度差达到“70(7:1)”。可以将设计稿设为 Screen(滤色)混合模式进行检查。

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

避免:颜色过度饱和
过度饱和的颜色可能无法正确显示,并影响可读性。
应避免自行定制界面底板。

深色容器
容器通常必须把注意力留给其中的内容,避免自身形成干扰:
- 为了获得最高对比度,界面底板必须使用黑色。
- 处于焦点状态时,底板明度不应高于 34%,以保证前景元素清楚可读。
- 描边应看得见,但保持克制。

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

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

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

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

建议:让不同底板角色形成层次
确保 Surface 与 Surface Variants 之间有足够的明度差,以建立必要的视觉层次。

避免:不同底板角色明度过近
不要让 Surface 与其变体的明度过于接近;原文在此标注了“约 20 的差值”。
可以定制描边,为界面加入品牌特征或更有表现力的视觉语言。

建议:使用默认颜色
默认颜色已针对眼镜显示进行了充分优化。

避免:同时使用多种描边色
不要让描边混用多种颜色。

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


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

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