Table of Contents

Эволюция драг-энд-дропа на iPad

Drag-and-drop на iPad прошел долгий путь с момента его появления на iOS 11. Apple разработала взаимодействие, чтобы отразить физические манипуляции, позволяя пользователям собирать контент с помощью длинного пресса и перемещать его в целевую область. Эта парадигма перенесла iPad с устройства потребления на серьезный инструмент производительности. Ранние реализации были ограничены сторонними приложениями, такими как Файлы и фотографии, но API быстро расширился до сторонних разработчиков. Сегодня drag-and-drop является основным взаимодействием в бесчисленных приложениях iPad, от заметок и управления проектами до проектирования и организации данных. Понимание его эволюции помогает дизайнерам оценить тщательную мысль Apple, инвестируемую в прямые манипуляции на основе прикосновений, где каждый жест должен чувствовать себя так же естественно, как перемещение бумаги через стол.

Основные UX принципы для сенсорной перетаскивания

Немедленная визуальная обратная связь

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

Метафора «Подъем и марширующие муравьи»

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

Доступность Drop Zone

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

Haptic Feedback Интеграция

Модели iPad с тактильными двигателями (iPad Pro 11-дюймовый и 12,9-дюймовый, iPad Air 4-го поколения и более поздние) могут обеспечить тактильное подтверждение во время операций перетаскивания. Тонкий кран, когда начинается перетаскивание, короткий гудение при наведении на действительную зону падения и импульс подтверждения, когда падение завершается, делают взаимодействие более захватывающим. Отзывы о Haptic должны быть в паре с визуальными и аудио сигналами для поддержки пользователей с различными сенсорными предпочтениями.

Понимание архитектуры Drag-and-Drop

UIDragInteraction и UIDropInteraction в глубине

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

Сеансы перетаскивания, элементы и поставщики предварительного просмотра

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

Сокращение предложений и типов операций

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

Дизайн интуитивных жестов и анимаций

Анимация лифта

Подъемная анимация - это первое, что видят пользователи. Используйте пружинную анимацию продолжительностью от 0,2 до 0,3 секунды. Вид должен немного уменьшаться (95-90 процентов) и подниматься с тенью, которая растет от нуля альфа до 0,3 непрозрачности. Избегайте резкого щелчка - анимация должна чувствовать, что пользователь физически поднимает карту со стола. Проверяйте анимацию на реальных устройствах с разными размерами пальцев, чтобы убедиться, что поднятая точка выровняется с местоположением касания.

Drag Preview с масштабированием в реальном времени

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

Весенние зоны падения

Загруженные пружиной зоны падения — это области, которые расширяют или раскрывают контент, когда пользователь делает паузу над ними при перетаскивании. Этот шаблон необходим для иерархических данных, таких как папки или вложенные списки. Когда пользователь парит над папкой около 0,5 секунды, папка открывается, раскрывая ее содержимое как потенциальные цели падения. Реализуйте это с таймером, который запускается после настраиваемой задержки, и обеспечивайте четкую визуальную обратную связь, такую как пульсирующая граница или небольшое увеличение значка папки.

Мультиприкосновение и одновременная перетаскивание

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

Доступность в интерфейсах Drag-and-Drop

Голосовой бросок и Drag-and-Drop

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

Пользовательские действия для управления клавиатурой и коммутатором

Не все пользователи могут выполнять сенсорные жесты. Предоставить сочетания клавиш для операций перетаскивания, такие как Command+C/V для эквивалентов копирования/вставки, или пользовательские команды клавиш для инициирования и завершения перетаскивания. Для управления переключателем разбейте перетаскивание на дискретные шаги: выберите элемент, выберите действие (переместить/копировать), навигируйтесь на цель и подтвердите. Каждый шаг должен быть выставлен в качестве элемента управления переключателем.

Haptic Feedback для обеспечения доступности

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

Расширенные шаблоны взаимодействия

Перетаскивание между Split View Panes

Одна из уникальных возможностей iPad - перетаскивание между приложениями, работающими в Split View. Ваше приложение может получать контент из другого приложения и наоборот. Зарегистрируйте поддерживаемые типы данных вашего приложения (простые тексты, изображения, URL-адреса, пользовательские UTI) в Info.plist в разделе . Когда контент поступает, представьте четкий предварительный просмотр перед передачей данных. Этот кросс-приложение превращает iPad в настоящую многозадачную среду, где пользователи собирают информацию из нескольких источников, не покидая свой рабочий процесс.

Drag from App to App

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

Переупорядочение списков и сеток

Упорядоченные представления коллекции и представления таблиц являются классическими вариантами использования перетаскивания. Используйте и для реализации переупорядочения с анимацией. Элементы должны плавно отклоняться, чтобы освободить место для перетаскивания. Обеспечить тонкий автопрокрутка, когда пользователь перетаскивает около краев прокручиваемой области. Избегайте отключения прокрутки во время перетаскивания - вместо этого, регулируйте смещение контента динамически на основе положения перетаскивания относительно краев обзорного порта.

Drag-and-Drop с обзорами коллекций и просмотрами таблиц

Помимо переупорядочения, просмотры коллекций могут принимать внешний контент. Например, приложение для редактирования фотографий может позволить пользователям перетаскивать изображения из приложения Photos непосредственно в список слоев. Используйте ячейки заполнителя во время перетаскивания, чтобы показать, где будет вставлен контент, и анимировать окончательную вставку с помощью выцветания или слайда. Всегда уважайте намерение пользователя, предоставляя кнопку отмены или жест «Отменить» (двойное нажатие другим пальцем) для случайных капель.

Обычные подводные камни и как их избежать

Случайная активация драга

Если простой нажатие или длинный нажатие вызывает сопротивление, пользователи будут испытывать разочарование. Установите разумную минимальную продолжительность нажатия (0,1-0,2 секунды) и минимальный порог движения (5-10 точек) до начала сопротивления. Различают между длинным нажатием для контекстных меню и длинным нажатием для сопротивления. На iPad длинный нажатие, которое остается в пределах небольшого радиуса, должно показывать контекстное меню, в то время как движение за радиус должно инициировать сопротивление.

Слишком чувствительные зоны падения

Зоны падения, которые активируются одним пикселем перекрытия, вызывают случайные падения. Используйте щедрую зону попадания - расширьте зону падения, введенную по крайней мере на 10 пунктов от визуальной границы. Примените активацию на основе расстояния: зона падения становится «горячей» только тогда, когда центр перетаскиваемого элемента находится в пределах зоны. Обеспечьте анимацию «защелкнуть-цель», когда пользователь выпускает в буферной области, поэтому предметы приземляются точно, не требуя точного выравнивания.

Отсутствие поддержки Undo

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

Проблемы с производительностью с тяжелым контентом

Перетаскивание больших изображений, сложных векторных рисунков или многомегабайтных данных может вызвать падения кадров. Создайте легкие миниатюрные предварительные просмотры для операции перетаскивания и фиксируйте полные данные только тогда, когда падение подтверждено. Используйте с фиксированным максимальным размером (например, 200x200 точек) и асинхронной загрузкой данных. Профилируйте свое приложение с помощью инструмента Core Animation Instruments, чтобы обеспечить взаимодействие перетаскивания поддерживает 60 кадров в секунду, даже когда несколько элементов находятся в полете.

Тестирование и итерация на Drag-and-Drop UX

Тестирование пользователей на физических устройствах

Симуляторы не могут точно воспроизвести сенсорное ощущение iPad. Тест перетаскивания на реальных iPad с различными размерами экрана (iPad mini, iPad Air, iPad Pro 11-дюймовый и iPad Pro 12,9-дюймовый). Наблюдайте за размещением пальцев пользователей - многие люди используют сторону большого пальца, а не кончик пальца, что изменяет визуальное смещение между точкой касания и центром предметов. Запись экрана и сенсорная визуализация с инспектором доступности для выявления несоответствия.

Случаи Edge: большие файлы, несколько элементов, смешанный контент

Тест с файлами до 1 Гб (видеофайлы, большие PDF-файлы) для подтверждения того, что приложение показывает индикатор прогресса во время передачи данных. Для нескольких элементов тест с 10-20 элементами одновременно, чтобы убедиться, что стек предварительного просмотра не замедляется. Смешанный контент (изображения и текст вместе) должен отображать отдельные предварительные просмотры для каждого типа элемента. План для сетевых передач: если перетаскиваемые данные находятся на удаленном сервере, покажите спиннер загрузки с опцией отмены.

Профилирование производительности с помощью инструментов

Используйте инструменты Core Animation, Time Profiler и Leaks для профилирования производительности перетаскивания. Ищите всплески использования GPU при анимации предварительного просмотра перетаскивания. Убедитесь, что предварительный просмотр каждого элемента перетаскивания растеризован за пределами экрана и кэширован. Избегайте выполнения дорогостоящих расчетов макета во время перетаскивания - используйте легкие, предварительно кэшированные снимки. Сеанс WWDC 2019 «Drag and Drop with Collection and Table Views» предоставляет практические советы по производительности и примеры кода.

Тематические исследования: приложения, которые хорошо перетаскивают и капают

Приложение Files демонстрирует стандартное поведение перетаскивания: длинный пресс для подъема, четкие выделения зоны падения, весенние папки и многоэлементное перетаскивание. Медведь (заметка) позволяет пользователям перетаскивать вложения непосредственно в тела заметок, теги перезаписи и перемещать заметки между папками — все с плавной анимацией. (управление задачами) использует перетаскивание для переупорядочения задач, перемещения элементов между проектами и планирования задач по календарю. Procreate (цифровое искусство) позволяет художникам перетаскивать цвета, слои и кисти с предварительными просмотрами в реальном времени, демонстрируя передовые характеристики обработки. Изучите эти приложения, чтобы увидеть, как они обрабатывают крайние случаи, обеспечивают обратную связь и поддерживают текучесть.

Будущее Drag-and-Drop на iPad

С продолжающейся эволюцией iPadOS, перетаскивание, вероятно, будет глубже интегрироваться с системными функциями, такими как Stage Manager и внешние дисплеи. Представьте перетаскивание контента с iPad на подключенный монитор с помощью Universal Control или между виртуальными рабочими столами на одном устройстве. Apple также изучает взаимодействие наведения с Apple Pencil, где перетаскивание может начаться с комбинации наведения. Дизайнеры должны создавать гибкие архитектуры, которые могут адаптироваться к этим новым парадигмам, не нарушая существующих сенсорных взаимодействий. Инвестируйте в общее представление данных и модульную обработку перетаскивания, чтобы будущие улучшения интегрировались плавно.

Заключение

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

Для дальнейшего изучения, просмотрите Руководство Apple по человеческому интерфейсу для перетаскивания и сброса и изучите официальный код выборки , чтобы увидеть готовые к производству шаблоны в действии.