20 принципов дизайна интерфейсов для Apple Vision Pro + UI kit для Figma

5 июня 2023 года в Apple представили свои очки дополненной/виртуальной реальности Apple Vision Pro с новой visionOS на борту. Меня, как продуктового дизайнера, презентация очень вдохновила на изучение новой платформы с точки зрения дизайна интерфейсов и я начал смотреть доступные материалы.

На момент написания статьи на сайте Apple еще не выложили официальный UI кит для visionOS (UPD: выложили 21 июня, ссылка в конце статьи), поэтому практически единственным источником правил дизайна интерфейса новой платформы является это 22-минутное видео. Есть и другие, но они, в основном, касаются взаимодействием с интерфейсом, а не самого интерфейса.

Поэтому я решил сложить все примеры и правила «пространственного» (Spatial) дизайна интерфейсов для visionOS от Apple в одну статью для удобства.

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

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

Как сделать иконку?

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

Для того, чтобы приложения адаптировались к условиям освещения в любом окружении (большой светлой комнате, маленьком помещении, самолете, или в ночное время) и им было удобно пользоваться на любом расстоянии при любом освещении, Apple выбрала материал стекла. Стеклянное окно ощущается как часть физического мира, люди понимают, что оно способно пропускать свет от окружающих людей и других приложений.

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

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

Чтобы текст всегда оставался разборчивым и контрастным на стеклянном материале, используйте системные шрифты San Francisco с увеличенным начертанием.

Например, на iOS для стиля Body используется начертание Regular. На visionOS нужно использовать Medium. На iOS для Title — Semibold, на visionOS — Bold. И так далее.

Vibrancy — это уникальный визуальный эффект Apple, когда контент на размытом фоне «выжигается» и становится ярче. Из-за этого текст остается контрастным и читаемым.

Vibrancy также можно использовать для иерархии текста, символов и заливок. Есть три варианта: Primary, Secondary и Tertiary. Используйте Primary для заголовков, а Secondary и и Tertiary для описания, сносок и подзаголовков.

👉 Шаблон с размытиями и Vibrancy в Figma от Ивана Емелюшкина

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

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

Интерактивные элементы должны иметь целевую область не менее 60 pt, чтобы их можно было легко выбрать и нажать. Сам элемент может быть визуально меньше, например, стандартная кнопка имеет размер 44 pt, но нужно добавить дополнительные 8 pt с каждой стороны, чтобы область выделения стала 60 pt.

Если у вас несколько кнопок в списке, расстояние между ними должно быть не менее 16 pt.

Для маленьких элементов, например, стрелочки раскрытия информации, можно использовать мини-кнопки размером до 28 pt, как размер заголовка, но область ее выделения должна быть также 60 pt.

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

Когда элемент становится неактивным (например, кнопка «Поделиться»), он перестает давать сигнал фокусировки. Это дает людям уверенность в том, что они сфокусированы на нужном элементе, а значит, они могут нажать на него.

При создании макетов важно учитывать эффект наведения. Например, если вы создаете список или меню, необходимо предусмотреть небольшое расстояние между каждым элементом, чтобы избежать перекрытия эффекта наведения. Рекомендуется использовать 4 pt.

При дизайне карточек предусмотрите hover-состояние, чтобы при фокусировке карточка выделялась на отдельной подложке. Каждая карточка — это отдельный интерактивный элемент. Когда люди смотрят на нее, вся область карточки должна становиться ярче. И не забудьте оставить небольшое расстояние (не менее 4 pt) между карточками.

Еще один момент, о котором следует помнить, — это то, что вложенные элементы внутри карточки должны иметь пропорциональные радиусы углов и внутренние отступы (padding), чтобы они были консистентны друг другу. Чтобы определить правильный радиус скругления, можно воспользоваться формулой:

И не забудьте задать Corner Smoothing на уровне iOS в Фигме, чтобы они были сглаженны.

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

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

⚡ К счастью, Apple уже выложили с свой официальный аккаунт в Figma Community UI kit для visionOS: https://www.figma.com/community/file/1253443272911187215

Окном для всех элементов в iOS служит непрозрачный фон, сверху которого располагается контент.

В visionOS же окно имеет стеклянный полупрозрачный материал, поверх которого также располагается контент.

На iPhone в нижней части окна находится Tab bar (панель вкладок для основной навигации) , предоставляющий людям быстрый доступ к разделам верхнего уровня приложения.

На Vision Pro Tab bar расположен вертикально, плавая в фиксированном положении в левой части окна.

Не используйте более шести пунктов в панели, чтобы пользователь мог быстрее сориентироваться в навигации. Когда пользователи смотрят на Tab bar, они могут быстро выбрать вкладку. А если они смотрят на него немного дольше, он автоматически расширяется, показывая названия для каждого раздела. Когда люди отводят взгляд, он автоматически закрывается, позволяя им сосредоточиться на содержимом.

Если вы хотите сделать поднавигацию, как в примере с альбомами, Sidebar (боковая панель) располагается в окне рядом с Tab bar. Это дает людям четкое представление о том, где они находятся в данной вкладке.

Теперь рассмотрим новый и уникальный для visionOS элемент управления — Орнаменты.

В примере в приложении Photos на iPadOS есть плавающий элемент в верхней центральной части для навигации между годами, месяцами и днями.

В visionOS, поскольку мы не ограничены экраном, этот элемент размещен как «орнамент» внизу, немного впереди окна.

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

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

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

Вот еще одно использование Орнамента в приложении «Музыка». Элементы управления проигрывания представлены в виде орнамента, который не меняется независимо от того, где вы находитесь в приложении. Это позволяет людям искать следующую песню и одновременно управлять музыкой.

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

Орнаменты могут появляться и исчезать полностью. Однако это рекомендуется делать только при сосредоточении внимания на одном фрагменте контента. Например, при просмотре фотографии или фильма.

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

Кроме того, орнаменты могут расширяться, представляя дополнительный контент, или даже иметь собственную навигационную иерархию, как в примере ниже.

В общем, Орнаменты — это мощный и гибкий навигационный элемент visionOS, который добавляет эффект глубины, не загораживая контент.

На iPad меню выравнивается по правому краю нажатой кнопки, а сама кнопка уменьшается при открытии меню. А всплывающие окна указывают на нажатый элемент, и панель навигации становится неактивной.

В visionOS меню и всплывающие окна могут выходить за пределы окна.

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

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

В качестве общего правила на этой платформе: избегайте использования кнопок с белым фоном, если они не выбраны.

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

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

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

В последовательной навигации кнопки закрытия модального окна и кнопка «Назад» будет стоять в одном и том же месте — в левом верхнем углу.

В качестве системного паттерна: всегда размещайте кнопки закрытия в левом верхнем углу.

Подумайте о том, что сделает ваше приложение особенным и как использовать пространство за окнами для создания Rich spatial moments — «насыщенных пространственных моментов».

Например, в приложении Photos сохранили привычный опыт просмотра и сосредоточились на создании новых способов восприятия изображений, таких как «Пространственные снимки», которые дают пользователям возможность заново пережить моменты и прочувствовать контент уникальным образом. Также на visionOS новыми красками заиграли панорамы, которые раскрываются на все на все окружение пользователя.

Итак, все приницпы дизайна интерфейсов для visionOS от Apple:

И обещенная ссылка на официальный UI kit от Apple для visionOS в Figma:

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