Дизайнерские принципы visionOS

Изучил за вас некоторые рекомендации Apple по дизайну приложений для Vision Pro и суммирую все увиденное. Хотя visionOS похожа на другие операционные системы Apple и во многом разделяет те же принципы, у «пространственных интерфейсов» есть свои особенности. Даже если вы не дизайнер или пока не собираетесь работать над visionOS-приложениями, знание некоторых принципов поможет повысить качество ваших продуктов.

Способы ввода

Начнем с того, как вообще пользователь взаимодействует с интерфейсом в пространстве.

1. Основной и наименее энергозатратный способ ввода — сочетание управления взглядом и «тапов» пальцами. То есть вы просто смотрите на кнопку, которую хотите нажать, и касаетесь указательным пальцем большого пальца. Жест выбран неслучайно и позволяет почувствовать хоть какую-то тактильную отдачу от своей же руки. Важно, что положение рук при этом не имеет значения. Они могут лежать у вас на коленях, на столе, на диване — количество датчиков на гарнитуре позволяет отследить их в любом положении. Разве что за спиной или под столом управлять не получится.

2. Непосредственное взаимодействие с виртуальными объектами. Держать руки на весу может быть утомительно, но иногда это все равно предпочтительнее остальных способов. Что это за ситуации:

Манипулирование 3D-объектами в пространстве, привычные механики на базе мышечной памяти и те сценарии, когда физическая активность составляет суть приложения.
Манипулирование 3D-объектами в пространстве, привычные механики на базе мышечной памяти и те сценарии, когда физическая активность составляет суть приложения.
Если интерфейс находится достаточно близко, с ним тоже можно взаимодействовать руками напрямую. Скроллить страницу в браузере, например.
Виртуальная клавиатура, когда под руками нет физической. Из-за отсутствия тактильной отдачи используется весь доступный альтернативный фидбек: подсветка кнопок при приближении пальцев, изменение их глубины и анимация при нажатии, звуковое сопровождение.
Виртуальная клавиатура, когда под руками нет физической. Из-за отсутствия тактильной отдачи используется весь доступный альтернативный фидбек: подсветка кнопок при приближении пальцев, изменение их глубины и анимация при нажатии, звуковое сопровождение.

3. Голос. Смóтрите на любое текстовое поле и проговариваете вслух то, что хотите в нем написать.

Дизайнерские принципы visionOS

4. Физическая клавиатура и трекпад. Когда печатаете, над клавиатурой отображается превью текста и предложения автокоррекции. Во время использования трекпада курсор работает по аналогии с iPadOS.

Дизайнерские принципы visionOS

5. Физический геймпад, похоже, работает так же, как на macOS и iPadOS. Точно будет поддержка DualSense и Xbox Wireless Controller.

Дизайнерские принципы visionOS

Жесты

Основные жесты строятся на базе тапа: двойной тап, удерживание, перетаскивание, масштабирование и поворот.
Основные жесты строятся на базе тапа: двойной тап, удерживание, перетаскивание, масштабирование и поворот.

Если этого набора вам недостаточно, вы можете спроектировать собственный жест, руководствуясь пятью принципами:

  1. Придумайте такой жест, которому легко научить и который легко воспроизвести.
  2. Избегайте конфликтов с уже существующими системными жестами и движениями, которые люди обычно используют в общении, чтобы не допустить ложных срабатываний.
  3. Жест должен быть достаточно простым, чтобы его не было утомительно переиспользовать и чтобы он срабатывал каждый раз.
  4. Заранее подумайте о том, как этим будет пользоваться человек с ограниченными возможностями.
  5. Старайтесь не использовать жесты, которые считаются грубыми в каких-либо культурах.

Направление взгляда выражает намерение

Иногда мы можем сделать вывод о намерении пользователя, исходя из того, куда он смотрит. Как это использовать? Пара примеров: когда человек смотрит на фотку и начинает зумить ее руками, увеличивается именно тот участок, на который он смотрит; когда рисует в Freeform и хочет перейти в другую область виртуальной доски, он просто смотрит туда и тапает пальцами.

Эргономика

Поворачивать голову намного проще, чем наклонять, поэтому если вы делаете окно большого размера, отдавайте предпочтение расширению по горизонтали, а не по вертикали.
Поворачивать голову намного проще, чем наклонять, поэтому если вы делаете окно большого размера, отдавайте предпочтение расширению по горизонтали, а не по вертикали.
Старайтесь размещать интерфейсные элементы внутри поля зрения человека. Чем дальше они от центра, тем менее они заметны.
Старайтесь размещать интерфейсные элементы внутри поля зрения человека. Чем дальше они от центра, тем менее они заметны.
Размещайте окна дальше вытянутой руки, чтобы пользователи задействовали дистанционные методы ввода, которые вызывают меньше усталости.
Размещайте окна дальше вытянутой руки, чтобы пользователи задействовали дистанционные методы ввода, которые вызывают меньше усталости.
Иногда часть интерфейса наоборот приходится переносить поближе к пользователю: панель управления в режиме кинотеатра расположена ближе, чем экран, потому что иначе ее пришлось бы делать гигантского размера.

Интерфейс не должен следовать за направлением головы, перекрывая обзор. Вместо этого его следует фиксировать в пространстве. По отзывам тех, кто пользовался Vision Pro, реализовано это очень убедительно, и окна действительно остаются совершенно неподвижными и зафиксированными в конкретной точке пространства, вне зависимости от положения тела.

Пользователь может в любой момент обновить позиционирование всех окон, чтобы они снова были направлены на него, если пересел с кресла на диван, скажем. Это происходит по нажатию на физическую кнопку на девайсе, разработичкам не нужно как-то дополнительно это учитывать.

Ориентироваться стоит на максимально стационарное использование устройства, если только вы не делаете приложение, в котором физическая активность является частью концепции и принципиально необходима.

Окна

Палочка — и точка. За палочку в нижней части окна можно схватиться, чтобы перетащить окно, а если посмотреть на точку, она превратится в кнопку закрытия.
Палочка — и точка. За палочку в нижней части окна можно схватиться, чтобы перетащить окно, а если посмотреть на точку, она превратится в кнопку закрытия.
Тянем за уголок — окно масштабируется.
Тянем за уголок — окно масштабируется.
Окна могут менять размер динамически, например, при появлении сайдбара в браузере.
Окна могут менять размер динамически, например, при появлении сайдбара в браузере.
Можно открыть несколько окон одного приложения.
Можно открыть несколько окон одного приложения.
Если решите сделать кастомные, а не системные окна, не забудьте добавить аналогичные тени.
Если решите сделать кастомные, а не системные окна, не забудьте добавить аналогичные тени.

Размеры

Поэкспериментируйте с форматами и размерами, чтобы почувствовать, как это влияет на восприятие и вовлеченность.
Поэкспериментируйте с форматами и размерами, чтобы почувствовать, как это влияет на восприятие и вовлеченность.
К примеру, кино на небольшом дисплее и на гигантском экране внутри виртуальной сцены с озером выглядит по-разному.
Некоторые пользовательские сценарии отлично работают с объектами реального размера.
Некоторые пользовательские сценарии отлично работают с объектами реального размера.
Минимальный размер любого интерактивного элемента должен быть не менее 60 pt. Внутренние отступы — не менее 8 pt.
Минимальный размер любого интерактивного элемента должен быть не менее 60 pt. Внутренние отступы — не менее 8 pt.
Окно динамически масштабируется, когда пользователь двигает его дальше от себя, чтобы все интерактивные элементы сохраняли достаточный размер для комфортного использования.
Окно динамически масштабируется, когда пользователь двигает его дальше от себя, чтобы все интерактивные элементы сохраняли достаточный размер для комфортного использования.

Материалы

Как вы заметили, интерфейс чаще всего собирается на прямоугольнике из матового стекла. Выбор материала обусловлен тем, что так пользователь не теряет связь с реальностью и видит, что происходит на заднем плане. По этой же причине не стоит использовать кастомные непрозрачные окна.

Светлой и темной темы не существует, материал динамически меняется в зависимости от освещения и фона.

Для отдельных интерфейсных блоков типа сайдбара и для полей ввода используется более темное стекло, для интерактивных элементов — более светлое. Цвет текста по умолчанию всегда белый.

Не следует класть несколько светлых элементов друг на друга — это приведет к слишком низкому контрасту.
Не следует класть несколько светлых элементов друг на друга — это приведет к слишком низкому контрасту.

Интерактивные элементы

Избегайте использования острых углов, толстых обводок и других эффектов, которые заставляют обращать внимание не внешний контур объекта вместо его содержимого.
Внутренние отступы должны быть достаточно крупными по той же причине.
Внутренние отступы должны быть достаточно крупными по той же причине.
Интерактивные элементы легко распознать, просто взглянув на них, — они реагируют на взгляд и подсвечиваются. Неинтерактивные и заблокированные никак на взгляд не реагируют.
Между интерактивными элементами должен быть отступ размером по крайней мере 4 pt., чтобы они не конфликтовали в состоянии при наведении.
Между интерактивными элементами должен быть отступ размером по крайней мере 4 pt., чтобы они не конфликтовали в состоянии при наведении.
Формула скругления прямоугольника с вложенным прямоугольником: скругление внутреннего прямоугольника + отступ до края = скругление внешнего прямоугольника.
Формула скругления прямоугольника с вложенным прямоугольником: скругление внутреннего прямоугольника + отступ до края = скругление внешнего прямоугольника.

Apple рекомендует использовать Continuous Corners. Но это на программистском, а на дизайнерском, в Фигме, это называется Corner Smoothing: 60%.

Типографика

В ситуациях, где на iOS мы привыкли использовать начертание Regular, на visionOS используется Medium. Там, где Semibold, — теперь Bold, ну и так далее. Трекинг тоже слегка увеличился.
В ситуациях, где на iOS мы привыкли использовать начертание Regular, на visionOS используется Medium. Там, где Semibold, — теперь Bold, ну и так далее. Трекинг тоже слегка увеличился.

Текст не стоит делать объемным — это ухудшит читабельность. Шрифт лучше использовать системный, как и на других ОС от Apple.

Цвета

Лучший выбор для текста и большинства интерфейсных элементов — белый цвет разной степени прозрачности. Если очень хочется что-нибудь покрасить поярче, постарайтесь использовать цветную заливку вместо цветного содержимого. На примере ниже видно, почему именно так, — стекло всегда находится на непредсказуемом фоне, поэтому цветной объект небольшой площади может начать с ним сливаться.

Жаль, что в примере «как надо» Apple показывает кнопку с очень поганой контрастностью по результатам проверки любым контраст-чекером, но идея понятна.
Жаль, что в примере «как надо» Apple показывает кнопку с очень поганой контрастностью по результатам проверки любым контраст-чекером, но идея понятна.

Яркость

Системные стеклянные окна позволяют выбирать одну из трех степеней яркости содержимого. Самая высокая подходит для стандартного текста, а те, что потусклее, — для описаний, сносок и подзаголовков.
Системные стеклянные окна позволяют выбирать одну из трех степеней яркости содержимого. Самая высокая подходит для стандартного текста, а те, что потусклее, — для описаний, сносок и подзаголовков.

Табы

Панель сбоку в visionOS — аналог нижнего таб-бара в iOS. В ней желательно размещать не больше 6 пунктов меню, а для навигации внутри таба использовать сайдбар, как на iPadOS. Когда пользователь удерживает взгляд на табе, панель разворачивается.

Ornament

Эта панелька называется Ornament. Подходит для настроек отображения, управления воспроизведением, <span>панелей инструментов и всего такого. Делает приложение интереснее, потому что добавляет еще один слой глубины.</span>
Эта панелька называется Ornament. Подходит для настроек отображения, управления воспроизведением, панелей инструментов и всего такого. Делает приложение интереснее, потому что добавляет еще один слой глубины.
Интерактивность панели очевидна, поэтому лучше использовать кнопки-иконки без внешних границ.
Интерактивность панели очевидна, поэтому лучше использовать кнопки-иконки без внешних границ.
Ornament располагается на 20 pt. поверх основного окна, чтобы показать взаимосвязь. Для красоты, конечно, тоже.
Ornament может трансформироваться в окошко побольше с собственной внутренней навигацией.

Меню

Меню всегда центрируется относительно кнопки, которая его открывает, потому что теперь ничто не мешает ему выходить за пределы окна.

Открытое меню должно сопровождаться нажатым состоянием кнопки. В visionOS такие кнопки всегда красятся в белый цвет, а их содержимое — в черный, поэтому желательно не использовать такой же стиль для других состояний интерактивных элементов.

Поскольку всегда очевидно, какая кнопка вызвала меню, стрелка, указывающая на нее, не нужна.

Попапы

Попапы в visionOS называются Sheets.

Попап появляется на месте основного окна, а то в свою очередь отъезжает назад и затемняется.

Попап в попапе — норм. Появляется опять же на месте прежнего слоя, а остальные двигаются и затемняются. Еще на скрине можно заметить подтверждение покупки на Vision Pro — оно происходит по двойному нажатию на физическую кнопку.
Попап в попапе — норм. Появляется опять же на месте прежнего слоя, а остальные двигаются и затемняются. Еще на скрине можно заметить подтверждение покупки на Vision Pro — оно происходит по двойному нажатию на физическую кнопку.
Бывают еще попапы с внутренней навигацией и приятной анимацией. Кнопка «Назад», как и кнопка «Закрыть», всегда располагается в левом верхнем углу попапа.

Иконки приложений

Многослойные иконки мы уже видели в tvOS, но в visionOS они круглые и автоматически сопровождаются тенями.
Устроено все по аналогии с tvOS: иконка состоит из нескольких изображений размером 1024×1024 пикс. — фона и нескольких слоев с прозрачностью.
Устроено все по аналогии с tvOS: иконка состоит из нескольких изображений размером 1024×1024 пикс. — фона и нескольких слоев с прозрачностью.

Используйте основное преимущество visionOS

Принципиальное отличие приложений для visionOS — они могут заполнить собой все пространство вокруг и захватить все внимание пользователя. Постарайтесь учесть это при проектировании — найдите такой ключевой момент, в котором вы сможете задействовать основное преимущество этой платформы.

Один из подобных ключевых моментов в приложении Фото — просмотр панорамы в таком размере и формате, которые намного убедительнее погружают в сцену.

💥💥💥

Если вам понравилась эта статья, подпишитесь на мой канал о дизайне в Телеграме

60
13 комментариев

Отличный обзор, спасибо

11
Ответить

Название бы только поменять для статьи ))))
Что то типа "Разбираемся в новиках UI Vision OS для очков виртуальный реальности от Apple" или что-то в этом духе. А то многие не заметят отличную статью под броским названием.

1
Ответить

Спасибо, ждал именно такого обзора на десигн новой системы

2
Ответить

Такое ощущение есть, что с visionOS Apple начинает по-тихоньку возвращаться к скевоморфизму.

1
Ответить

Ну это не скевоморфизм, это скорее развитие материал дизайна. Скевоморфизм имитировал реальные физические объекты, 3D -> 2D, здесь - наоборот, 2D -> 3D.

1
Ответить

Комментарий недоступен

1
Ответить

Супер, спасибо за обзор

1
Ответить