Jetpack Compose Glimmer

适用于光学透视显示屏的清晰、一目了然的设计。

Jetpack Compose Glimmer 是一款 Google 设计体系和界面工具包,适用于光学透视 (OST) 显示屏,例如有线 XR 眼镜。设计体系提供可重用的决策,从颜色、字体和形状基元到组件和指南。

原则

Jetpack Compose Glimmer 是首批针对透明显示屏和眼镜类设备优化的界面框架之一。OST 直接将光线投射到现实世界中,而不是使用不透明的屏幕显示器。Glimmer 可帮助开发者构建高对比度、一目了然的界面,同时保留真实世界的存在感。

先显示透明广告

经过优化,并以研究和色彩科学为基础,适用于透明显示屏和眼镜外形规格,可提供周到、美观的光学透视体验。

先显示透明广告

硬件输入

互动输入是根据有线 XR 眼镜的功能设计的。

专用

样式和组件经过专门设计,可直接用于眼镜。 Jetpack Compose Glimmer 经过优化,可提供透视显示效果和舒适的用户体验。虽然是专门构建的,但并非一成不变。除了字体和颜色之外,它还提供了一种自定义焦点突出显示的方式。

专用

样式

Jetpack Compose Glimmer 的设计语言采用简化主题,可在眼镜上实现最佳可见性。颜色和类型可自定义,以实现语义表达和应用凝聚力。 视觉设计原则强调清晰度、易读性和尽可能少的干扰。 虽然有线眼镜的视野范围更广,并且可能受到的“现实世界”干扰更少,但您仍应考虑让界面不碍事。

Glimmer 随附一个针对 OST 眼镜优化的基准主题。颜色和类型可以自定义,以实现语义表达和应用凝聚力。 在透视显示屏上,黑色是透明的。在设计时请注意这一点,因为深色会显得暗淡或透明,但也可以用来营造深度感。

配色方案

眼镜配色方案(用于为应用颜色设置主题的一组颜色令牌或角色)包含三个强调色角色、六个表面色(或中性色)角色及其对应的“on”颜色。

配色方案

自定义颜色

您可以自定义主要颜色,以使用您的品牌颜色或主要互动颜色。 请考虑所选颜色的对比度、饱和度和耗电量。

详细了解 Glimmer 的颜色系统和最佳实践。

排版

Jetpack Compose Glimmer 具有优化的默认类型比例。字体角色由两种角色组成,每种角色有三种样式,字体角色基于其用途和层次结构。如需了解详情,请参阅 Glimmer 排版。

surface 和深度

作为内容的承载面,Surface 会在用户视野范围中提供清晰的焦点,其中可呈现内容或操作。Glimmer 中使用了更多关于表面和深度的信息。

组件

组件是专门用于构建界面的构建块。您的应用应使用 Jetpack Compose Glimmer 来实现组件,因为这些组件针对 OST 眼镜的独特使用情形进行了优化。如需了解详情,请参阅 Glimmer 组件。

准备好实现组件了吗?请参阅 Jetpack Compose Glimmer 文档。

Glimmer 组件可用于多种用户体验目的。某些组件包含用于执行操作的按钮、用于表示通信进度的进度指示器、用于包含内容的堆栈、用于导航的导航栏,以及用于表示输入的语音指示器。