Дизайн интерфейсов для прозрачных дисплеев

Бесплатная версия Журналуса. Полная версия: – на сайте zhurnalus.artlebedev.ru – в боте @designersdigestbot

прозрачные дисплеиui-дизайнтипографика

Дэвид Аллин Риз рассказал, как команда Google проектирует интерфейсы для прозрачных дисплеев в ИИ-очках и почему для этого пришлось пересмотреть многие базовые принципы UI-дизайна.

В статье он объяснил, как работают такие дисплеи, почему на них чёрный цвет, тени и насыщенные цвета ведут себя иначе и какие решения легли в основу фреймворка Jetpack Compose Glimmer для XR-интерфейсов. Получился подробный разбор того, как меняется цвет, типографика, глубина и анимация, когда интерфейс существует не на экране, а поверх реального мира.

Главное:

  • Интерфейс в ИИ-очках не размещается на поверхности линзы, а проецируется примерно на расстоянии одного метра. Поэтому пользователь должен сознательно перевести фокус с реального мира на UI
  • Дисплеи очков могут только прибавлять свет к уже имеющейся картинке реального мира. При таком подходе чёрный цвет выполняет функцию прозрачности, а не заливки
  • Чёрный цвет выступает в качестве гарантированно читабельной подложки для контента
  • Светлые интерфейсы не получается использовать, потому что они создают отвлекающие блики на экранах и сильнее расходуют батарею
  • Типографика измеряется не в пикселях, а в углах зрения. Текст делают таким, чтобы его можно было прочитать одним взглядом. Минимальный размер для читаемости — около 0,6 градусов
  • Пространственная дистанция становится ключевым параметром при проектировании
  • Анимации медленнее, чем в привычных интерфейсах. Уведомления появляются почти за две секунды, мягко привлекая внимание пользователя
  • При действиях пользователя, наоборот, требуется мгновенная обратная связь. Для этого применяются фокус-индикаторы и подсветки
  • Вся система построена вокруг идеи «спокойного интерфейса». Информация появляется только тогда, когда она действительно нужна, и не мешает восприятию реального мира

#статья@zhurnalus_lite

Иллюстрация дизайна прозрачных дисплеев: слева — интерфейс на реальном фоне, справа — тёмная панель с тенью и подсветкой
Сравнение светлой и тёмной подложки в AR‑интерфейсе (иллюстрация из материала Google)

Читайте так же