Изучил за вас некоторые рекомендации Apple по дизайну приложений для Vision Pro и суммирую все увиденное. Хотя visionOS похожа на другие операционные системы Apple и во многом разделяет те же принципы, у «пространственных интерфейсов» есть свои особенности. Даже если вы не дизайнер или пока не собираетесь работать над visionOS-приложениями, знание некоторых принципов поможет повысить качество ваших продуктов.
Способы ввода
Начнем с того, как вообще пользователь взаимодействует с интерфейсом в пространстве.
1. Основной и наименее энергозатратный способ ввода — сочетание управления взглядом и «тапов» пальцами. То есть вы просто смотрите на кнопку, которую хотите нажать, и касаетесь указательным пальцем большого пальца. Жест выбран неслучайно и позволяет почувствовать хоть какую-то тактильную отдачу от своей же руки. Важно, что положение рук при этом не имеет значения. Они могут лежать у вас на коленях, на столе, на диване — количество датчиков на гарнитуре позволяет отследить их в любом положении. Разве что за спиной или под столом управлять не получится.
2. Непосредственное взаимодействие с виртуальными объектами. Держать руки на весу может быть утомительно, но иногда это все равно предпочтительнее остальных способов. Что это за ситуации:
3. Голос. Смóтрите на любое текстовое поле и проговариваете вслух то, что хотите в нем написать.
4. Физическая клавиатура и трекпад. Когда печатаете, над клавиатурой отображается превью текста и предложения автокоррекции. Во время использования трекпада курсор работает по аналогии с iPadOS.
5. Физический геймпад, похоже, работает так же, как на macOS и iPadOS. Точно будет поддержка DualSense и Xbox Wireless Controller.
Жесты
Если этого набора вам недостаточно, вы можете спроектировать собственный жест, руководствуясь пятью принципами:
- Придумайте такой жест, которому легко научить и который легко воспроизвести.
- Избегайте конфликтов с уже существующими системными жестами и движениями, которые люди обычно используют в общении, чтобы не допустить ложных срабатываний.
- Жест должен быть достаточно простым, чтобы его не было утомительно переиспользовать и чтобы он срабатывал каждый раз.
- Заранее подумайте о том, как этим будет пользоваться человек с ограниченными возможностями.
- Старайтесь не использовать жесты, которые считаются грубыми в каких-либо культурах.
Направление взгляда выражает намерение
Иногда мы можем сделать вывод о намерении пользователя, исходя из того, куда он смотрит. Как это использовать? Пара примеров: когда человек смотрит на фотку и начинает зумить ее руками, увеличивается именно тот участок, на который он смотрит; когда рисует в Freeform и хочет перейти в другую область виртуальной доски, он просто смотрит туда и тапает пальцами.
Эргономика
Интерфейс не должен следовать за направлением головы, перекрывая обзор. Вместо этого его следует фиксировать в пространстве. По отзывам тех, кто пользовался Vision Pro, реализовано это очень убедительно, и окна действительно остаются совершенно неподвижными и зафиксированными в конкретной точке пространства, вне зависимости от положения тела.
Пользователь может в любой момент обновить позиционирование всех окон, чтобы они снова были направлены на него, если пересел с кресла на диван, скажем. Это происходит по нажатию на физическую кнопку на девайсе, разработичкам не нужно как-то дополнительно это учитывать.
Ориентироваться стоит на максимально стационарное использование устройства, если только вы не делаете приложение, в котором физическая активность является частью концепции и принципиально необходима.
Окна
Размеры
Материалы
Как вы заметили, интерфейс чаще всего собирается на прямоугольнике из матового стекла. Выбор материала обусловлен тем, что так пользователь не теряет связь с реальностью и видит, что происходит на заднем плане. По этой же причине не стоит использовать кастомные непрозрачные окна.
Для отдельных интерфейсных блоков типа сайдбара и для полей ввода используется более темное стекло, для интерактивных элементов — более светлое. Цвет текста по умолчанию всегда белый.
Интерактивные элементы
Apple рекомендует использовать Continuous Corners. Но это на программистском, а на дизайнерском, в Фигме, это называется Corner Smoothing: 60%.
Типографика
Текст не стоит делать объемным — это ухудшит читабельность. Шрифт лучше использовать системный, как и на других ОС от Apple.
Цвета
Лучший выбор для текста и большинства интерфейсных элементов — белый цвет разной степени прозрачности. Если очень хочется что-нибудь покрасить поярче, постарайтесь использовать цветную заливку вместо цветного содержимого. На примере ниже видно, почему именно так, — стекло всегда находится на непредсказуемом фоне, поэтому цветной объект небольшой площади может начать с ним сливаться.
Яркость
Табы
Ornament
Меню
Открытое меню должно сопровождаться нажатым состоянием кнопки. В visionOS такие кнопки всегда красятся в белый цвет, а их содержимое — в черный, поэтому желательно не использовать такой же стиль для других состояний интерактивных элементов.
Поскольку всегда очевидно, какая кнопка вызвала меню, стрелка, указывающая на нее, не нужна.
Попапы
Попапы в visionOS называются Sheets.
Попап появляется на месте основного окна, а то в свою очередь отъезжает назад и затемняется.
Иконки приложений
Используйте основное преимущество visionOS
Принципиальное отличие приложений для visionOS — они могут заполнить собой все пространство вокруг и захватить все внимание пользователя. Постарайтесь учесть это при проектировании — найдите такой ключевой момент, в котором вы сможете задействовать основное преимущество этой платформы.
💥💥💥
Если вам понравилась эта статья, подпишитесь на мой канал о дизайне в Телеграме
Отличный обзор, спасибо
Название бы только поменять для статьи ))))
Что то типа "Разбираемся в новиках UI Vision OS для очков виртуальный реальности от Apple" или что-то в этом духе. А то многие не заметят отличную статью под броским названием.
Спасибо, ждал именно такого обзора на десигн новой системы
Такое ощущение есть, что с visionOS Apple начинает по-тихоньку возвращаться к скевоморфизму.
Ну это не скевоморфизм, это скорее развитие материал дизайна. Скевоморфизм имитировал реальные физические объекты, 3D -> 2D, здесь - наоборот, 2D -> 3D.
Комментарий недоступен
Супер, спасибо за обзор
Комментарий недоступен
Комментарий недоступен
При Джобсе такого не было...
обожаю эти стеклянные кнопочки
Отличный обзор! Спасибо!
Хороший обзор, спасибо!