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

Изучил за вас некоторые рекомендации 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.

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

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

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

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

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

#дизайн #интерфейс #apple #visionpro #visionos