
Google Design на этой неделе опубликовал интересную статью под названием «Дизайн для прозрачных экранов» и рассказал о работе над Jetpack Compose Glimmer, системой дизайна Android XR для умных очков с дисплеем (Display AI Glasses).
Для тех, кто раньше не пользовался умными очками с дисплеем, первое, что нужно знать: «интерфейс на самом деле не появляется на поверхности линзы». Скорее, он «проецируется на предполагаемую глубину около одного метра». Кроме того, область отображения является квадратной.
Вы можете получить представление о том, чего ожидать, «поставив руку перед собой на вытянутой руке и сфокусировавшись на пальцах». Когда вы это делаете, «окружение за вашей рукой и вокруг нее выходит из фокуса», как показано на видео ниже.
Это было действительно важное открытие для нашей команды дизайнеров Android XR на раннем этапе. Звучит как мелочь, но это означает, что для чтения любого контента пользователю приходится сознательно переводить взгляд. Они переводят взгляд из реального мира — скажем, с лица друга, потрясающего заката или дороги впереди — на эту фокусную плоскость в один метр. Это не пассивный взгляд; это активный, физический выбор для взаимодействия с пользовательским интерфейсом, даже если всего на миллисекунду.
Движение на таком типе дисплея не может быть «отвлекающим или излишним». Работа Google над уведомлениями показала, что «типичный переход движения около 500 миллисекунд» появлялся слишком быстро:
Вместо того, чтобы медленно привлекать внимание человека, он, по сути, «моргал», и уведомление внезапно появлялось в поле зрения.
Реализация, на которую остановился Android XR, имеет переходы входящих уведомлений, занимающие около двух секунд, в течение которых круг (маркированный аватар профиля) расширяется в таблетку.
С текстом, оптическая ось размера Google Sans Flex используется для улучшения читаемости на расстоянии одного метра:
…буквы, такие как a и e, имеют более крупные просветы (отверстия внутри буквы), а точки над j и i находятся дальше от тела буквы.
Также рекомендуется использовать жирный шрифт и увеличенное расстояние между буквами, при этом текст измеряется в визуальных углах (градусах), а не в пикселях или пунктах:
Думайте об этом как о вождении по шоссе. Вы видите указатели съездов или знаки ограничения скорости с текстом и графикой, напечатанными в фиксированном размере. Но насколько большим кажется вам этот текст, сильно зависит от вашего расстояния. Издалека он крошечный; по мере приближения он увеличивается. Это и есть действие визуального угла.

Эти очки используют аддитивный дисплей, который может только добавлять свет. Он не может создавать черный цвет, который отображается как 100% прозрачный, причем Google сравнивает это с тем, «как домашний кинопроектор не может проецировать черный цвет».
Это оказалось проблемой, когда Google изначально пытался портировать существующие компоненты Material:
Material Design, с его тактильными метафорами бумаги и слоев, сильно полагается на яркие, непрозрачные поверхности и тонкие тени. На аддитивном дисплее эти «поверхности» превращались в большие, яркие блоки света, создавая отвлекающие блики и быстро разряжая батарею.
Мы быстро обнаружили еще одну существенную проблему: гало-эффект. Гало-эффект — это эффект, при котором яркие источники света растекаются в соседние более темные области, создавая размытую, похожую на ореол кайму. На этих дисплеях наши яркие поверхности растекались на прозрачный контент, делая текст совершенно нечитаемым.
Решение Google заключается в том, что «поверхности используют черный цвет для создания разборчивого базового слоя («чистой пластины») для вашего контента». Это сочетается с «новой системой глубины, которая создает темные, насыщенные тени для передачи ощущения окклюзии и пространства».

Кроме того, «высоконасыщенные цвета, которые мы обычно использовали бы на телефоне, просто «исчезают» на фоне реального мира». Таким образом, интерфейс Android XR по умолчанию «нейтрален», чтобы «гармонировать с разнообразными цветами реального мира». Цвет используется экономно, чтобы привлечь внимание к кнопкам и другим важным элементам.
Поверхности в Glimmer всегда темные, а сам контент всегда яркий. Эта высокая контрастность по умолчанию является нашей основой для читаемости в большинстве сред.