Google выходит за пределы прямоугольного экрана. Более 10 лет дизайнеры Google изучают, как создавать интерфейсы для прозрачных дисплеев. Результатом стал Jetpack Compose Glimmer — система проектирования, созданная специально для дисплеев в очках с искусственным интеллектом. Для разработчиков и специалистов по работе с данными это переход от проектирования для пикселей к проектированию со светом.
Ограничения аддитивного отображения
Большинство разработчиков привыкли к ЖК- или OLED-экранам. Однако в очках с искусственным интеллектом используются аддитивные дисплеи. Они добавляют свет в поле зрения пользователя. Они не могут создать непроницаемый чёрный цвет или сделать реальный мир темнее.
На аддитивном дисплее чёрный — это 100% прозрачность. Это не цвет, а пустота. Если использовать стандартную карточку Material Design (светлая поверхность с тёмным текстом), она не подойдёт. Светлая поверхность становится ярким световым пятном, которое разряжает батарею и создаёт ореолы. Ореол — это эффект, при котором яркий свет растекается по тёмным участкам, делая текст нечитаемым.
Чтобы решить эту проблему, разработчики должны использовать тёмные поверхности и яркий контент. Использование чёрного цвета в качестве основы обеспечивает «чистую пластину» для пользовательского интерфейса. Это позволяет цифровым элементам гармонировать с физическим миром, не создавая отвлекающих бликов.
От пикселей к визуальным углам
Разработчики программного обеспечения обычно измеряют пользовательский интерфейс в пикселях или точках. В прозрачной пространственной среде эти единицы измерения неуместны. Воспринимаемый размер объекта меняется в зависимости от его расстояния до глаза.
Команда Google теперь измеряет пользовательский интерфейс в визуальных углах или градусах. Дисплей в этих очках проецируется на воспринимаемую глубину в 1 метр, что примерно равно расстоянию вытянутой руки. Это расстояние требует от пользователя активного переключения внимания с фона на пользовательский интерфейс.
Чтобы обеспечить читаемость, Google установил минимальный размер читаемого текста в 0,6 градуса. Удержание текста выше этого порога обеспечивает «взглядопригодность» интерфейса в различных условиях.
Инженерная типографика для света
Стандартные шрифты часто не подходят для прозрачных линз. Команда Google модифицировала Google Sans Flex, используя ось оптического размера, чтобы исправить это. Эти технические корректировки делают буквы более чёткими:
* Увеличенные счётчики: внутренние отверстия в буквах, таких как «а» и «е», стали больше, чтобы предотвратить их размытие.
* Модифицированные точки: точки в буквах «i» и «j» отодвинуты дальше от основного тела буквы.
* Переменное межбуквенное расстояние: система оптимизирует межбуквенное расстояние с помощью кода для максимальной чёткости с первого взгляда.
Формула аддитивного контраста
Команда Google использует специальную формулу для расчёта видимости. Это формула аддитивного коэффициента контрастности:
$\frac{\text{Яркость окружения} + \text{Яркость дисплея}}{\text{Яркость дисплея}}$
В реальном мире цвета ведут себя по-разному. Сильно насыщенные цвета часто «исчезают» или выглядят призрачно на фоне яркого неба. Glimmer по умолчанию использует нейтральную, ненасыщенную палитру. Сохраняя цвета ближе к белому, пользовательский интерфейс остаётся стабильным и видимым независимо от освещения в комнате.
Проектирование движения для привлечения внимания человека
На дисплее с подсказкой движение может сильно отвлекать. В стандартной мобильной разработке уведомление может появиться за 500 миллисекунд. На очках с искусственным интеллектом это слишком быстро. Оно создаёт резкое «мерцание», которое может напугать пользователя.
Glimmer использует более медленные, обдуманные переходы для уведомлений. Эти анимации происходят за 2 секунды. Такая длительность позволяет уведомлению плавно попадать в периферийное зрение пользователя. Это приглашает к фокусировке, а не требует её.
Однако действия, инициированные пользователем (например, голосовая команда или жест), по-прежнему требуют обратной связи с низкой задержкой. Glimmer использует «кольца фокусировки» для мгновенного подтверждения того, что система получила ввод. Это создаёт баланс между фоновыми уведомлениями и отзывчивыми элементами управления.
Ключевые выводы
* Чёрный — это прозрачность, а не цвет: поскольку в очках с искусственным интеллектом используются аддитивные дисплеи, они могут только добавлять свет; они не могут создать настоящий чёрный цвет или тени. В этой среде чёрный — это 100% прозрачность. Чтобы обеспечить читаемость, разработчики должны использовать тёмные поверхности для контейнеров и яркие цвета для текста и значков.
* Визуальные углы заменяют пиксели: стандартные единицы измерения, такие как пиксели (px), заменяются визуальными углами (градусами). Поскольку пользовательский интерфейс проецируется на воспринимаемую глубину в 1 метр, объекты должны быть размером относительно перспективы человеческого глаза. Минимальный порог для читаемого текста установлен на уровне 0,6 градуса.
* Формула аддитивного контраста: разработчики должны учитывать освещение окружающей среды, используя формулу: $\frac{\text{Яркость окружения} + \text{Яркость дисплея}}{\text{Яркость дисплея}}$. Поскольку насыщенные цвета часто «исчезают» на фоне ярких фонов реального мира, для сохранения видимости используется нейтральная, ненасыщенная палитра.
* Оптимизация инженерной типографики: стандартные шрифты страдают от ореолов (растекания света). Google Sans Flex модифицирован с помощью оси оптического размера для увеличения внутренних отверстий букв (счётчиков) и расширения межбуквенного расстояния, предотвращая слияние символов на прозрачной линзе.
* Время движения зависит от контекста: стандартные анимации продолжительностью 500 мс слишком резкие для дисплея с подсказкой. Чтобы уважать периферийное зрение человека, Glimmer использует 2-секундные переходы для уведомлений, чтобы «пригласить» фокусировку, сохраняя при этом обратную связь с низкой задержкой (например, фокусные кольца) для прямых пользовательских вводов, чтобы обеспечить отзывчивость.
1. Какие основные проблемы решают разработчики при создании интерфейсов для очков с искусственным интеллектом, и как Jetpack Compose Glimmer помогает их преодолеть?
В статье указано, что разработчики сталкиваются с проблемами при создании интерфейсов для аддитивных дисплеев в очках с искусственным интеллектом. Эти дисплеи не могут создать настоящий чёрный цвет или тени, поэтому разработчики должны использовать тёмные поверхности для контейнеров и яркие цвета для текста и значков. Jetpack Compose Glimmer помогает преодолеть эти проблемы, предоставляя систему проектирования, специально разработанную для таких дисплеев.
2. Почему в интерфейсах для очков с искусственным интеллектом чёрный цвет воспринимается иначе, чем на традиционных экранах, и как это влияет на дизайн?
На аддитивном дисплее чёрный — это 100% прозрачность, то есть не цвет, а пустота. Это влияет на дизайн, так как стандартные карточки Material Design с светлой поверхностью и тёмным текстом не подходят. Разработчики должны использовать тёмные поверхности и яркий контент, чтобы обеспечить читаемость и гармонию с физическим миром.
3. Какие единицы измерения используются в Jetpack Compose Glimmer вместо пикселей, и почему они более подходят для пространственного интерфейса?
В Jetpack Compose Glimmer вместо пикселей используются визуальные углы или градусы. Это более подходит для пространственного интерфейса, так как воспринимаемый размер объекта меняется в зависимости от его расстояния до глаза. Дисплей в очках проецируется на воспринимаемую глубину в 1 метр, что требует от пользователя активного переключения внимания с фона на пользовательский интерфейс. Минимальный размер читаемого текста установлен на уровне 0,6 градуса.
4. Какие технические корректировки были внесены в шрифт Google Sans Flex для улучшения его читаемости на прозрачных линзах?
В шрифт Google Sans Flex были внесены следующие технические корректировки: увеличены счётчики (внутренние отверстия в буквах), модифицированы точки (точки в буквах «i» и «j» отодвинуты дальше от основного тела буквы), оптимизировано межбуквенное расстояние для максимальной чёткости с первого взгляда. Эти корректировки делают буквы более чёткими и предотвращают их размытие на прозрачной линзе.
5. Как Glimmer управляет временем движения уведомлений на дисплее с подсказкой, и почему это важно для пользователя?
Glimmer использует более медленные, обдуманные переходы для уведомлений, которые происходят за 2 секунды. Это важно для пользователя, так как стандартные анимации продолжительностью 500 мс слишком резкие для дисплея с подсказкой. Плавные переходы позволяют уведомлению попадать в периферийное зрение пользователя, приглашая к фокусировке, а не требуя её. Это создаёт баланс между фоновыми уведомлениями и отзывчивыми элементами управления.