Разработка навигационной системы на основе жестов в приложениях iOS

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

Почему гистевая навигация имеет значение

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

Основные жесты в навигации iOS

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

сгибать

Жест свайпа, пожалуй, самый универсальный для навигации. Прокрутка влево или вправо может переходить между видами (например, в фотогалерее), раскрывать меню боковой панели (прокрутка с левого края во многих навигационных приложениях) или отклонять экран (прокрутка обратно в UINavigationController).

нажатие

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

щепотка

Жесты пинча в основном используются для увеличения на картах, изображениях и документах. В навигации пинч также может переключаться между режимами обзора и детализации (например, масштабирование до видения сетки).

Длинная пресса

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

Свип-ход

Проскальзывание от края экрана (левый край, чтобы вернуться, правый край для просмотра / всплывания на iPad) - это жест системного уровня, который приложения должны уважать, если у них нет веских причин его отменять.

Принципы проектирования для навигации на основе жестов

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

Открытость

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

Последовательность

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

обратная связь

Каждый жест должен обеспечивать немедленную, четкую обратную связь. Визуальная обратная связь (анимация вида рядом с жестом), тактильная обратная связь (с использованием UIImpactFeedbackGenerator или UINotificationFeedbackGenerator) и звуковые сигналы (при необходимости) подтверждают, что жест распознается. Без обратной связи пользователи могут многократно прокручивать, создавая разочаровывающий опыт.

Доступность

Не все пользователи могут выполнять жесты с точностью. Предоставить альтернативные методы навигации: кнопки, сочетания клавиш (на iPad с клавиатурой), голосовые действия и поддержку управления переключателем. Убедитесь, что жесты не являются единственным способом выполнения критических действий.

Избегайте конфликтов

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

Выступление

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

Внедрение распознавателей жестов в iOS

iOS предоставляет набор конкретных распознавателей жестов в разделе . Вот как реализовать общие шаблоны навигации.

Базовая настройка

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

let swipeBack = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipeBack))
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

Расширенная конфигурация

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

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 guard let swipe = gestureRecognizer as? UISwipeGestureRecognizer else { return false }
 let location = swipe.location(in: view)
 return location.x < 30
}

Одновременная обработка жестов

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

Пользовательские переходы

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

Разработка меню навигации с жестами (пример)

Многие современные приложения для iOS используют меню гамбургера, которое скользит слева. Альтернативой на основе жестов может быть смахивание с края, чтобы показать боковую панель (например, разделенный вид iPad).

  1. Прикрепите распознаватель жестов краевой панели к основному виду контента (с краями: .left).
  2. На жесте начинайте, добавьте вид меню за экраном влево; на измененном, обновите его положение x пропорционально; на конце, оживите его полностью открытым или закрытым на основе скорости / положения.
  3. Предоставьте кнопку для пользователей, которые не могут прокрутить пальцем.
  4. Используйте для интерактивной анимации, чтобы позволить обратить вспять средний жест.

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

Тестирование и уточнение навигации жестов

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

Инструменты и методы

  • Xcode Debugger: Визуализируйте состояния распознавателя жестов (возможные, начатые, измененные, оконченные, отмененные, неисправные) с помощью панели отладки просмотра.
  • Инспектор доступности: Убедитесь, что пользователи VoiceOver могут получить доступ к каждому действию.
  • Пользовательское тестирование: Наблюдайте за реальными пользователями, выполняющими жесты; обратите внимание на колебания, случайные триггеры или повторные попытки.
  • Мониторинг производительности: Проверка частоты кадров при выполнении жестов с помощью инструментов Core Animation.

Общие подводные камни

  • Случайные триггеры: Промах назад может быть неправильно истолкован, когда пользователь пытается выбрать строку.
  • Конфликты жестов системы: На iPhone с Face ID свайп домашнего индикатора может конфликтовать с жестами на нижнем краю. Используйте свойство , чтобы сначала разрешить ваш жест, но всегда обеспечить запасной вариант.
  • Плохая возможность обнаружения: Если пользователи не знают о существовании жеста, они застрянут. Используйте встроенные, постоянные подсказки или адаптивный интерфейс, который показывает кнопки после тайм-аута.

Доступность и инклюзивный дизайн

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

  • Альтернативные элементы управления: Каждое действие с помощью жеста должно быть доступно через кнопку или ярлык клавиатуры. Например, свайп-удаление может также быть длинным нажатием, которое показывает кнопку Удаления.
  • Голосовой: Используйте для раскрытия жестовых действий в виде именованных действий. Например, «Вернись назад» может стать пользовательским действием в роторе.
  • Уменьшить движение: Уважать настройку ; заменить параллакс или слайд-в меню простыми переходами в случае запроса.
  • Прикосновения: Будьте внимательны к вспомогательным прикосновениям и сенсорным приспособлениям, которые изменяют поведение жестов — никогда не предполагайте, что точка касания точна.

Заключение

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

Для дальнейшего чтения, обратитесь к руководству Apple по человеческому интерфейсу жестов , документации UIKit Gesture Recognizer и отличной статье « Разработка жидкостных взаимодействий » от WWDC 2018. Для лучших практик доступности см. Доступность Apple HIG .