TGViewer
UX Notes UX Notes @uxnotes · 23.7K subscribers
Post #1134 5.44K
Сеара Кроушоу написала о перетаскивании: первая, вторая часть перевода.

— Источник — контейнер с перетаскиваемыми объектами. Цель — статичная или динамичная область, куда эти объекты можно переместить, которая в режиме реального времени даёт обратную связь о процессе;
— Основные сценарии: перемещение объектов (например, файлов на страницу браузера для загрузки), изменение порядка элементов списка, изменение размера, сложные взаимодействия (перемещение якорных точек прямоугольника в Фигме);
— У объектов может быть область захвата, за которую их можно схватить для перетаскивания, выделенная графически или иконкой. При наведении на неё показывайте обратную связь, в том числе меняя курсор (например, на стрелку вверх и вниз, если доступно перетаскивание по вертикали);
— Состояние цели может меняться: по умолчанию в ней может быть текст о возможности перетащить файлы (например, для загрузки) и допустимых форматах, в процессе — количество выбранных файлов и текст, что их надо отпустить над выделенной областью, в конце — сообщение об ошибке (слишком много файлов) или успехе;
— Положение цели тоже может меняться. Например, если перетаскиванием пользователь перемещает элемент в древовидной иерархии;
— Базовое решение при изменении порядка элементов: полупрозрачную копию перетаскиваемого элемента отображать в исходном месте, место, куда он переместится, отмечать лаконичным маркером. Так будет меньше мельтешения, понятен порядок до начала перемещения, но само перемещение происходит в конце, когда пользователь отпускает элемент;
— Продвинутое решение: перетаскиваемый элемент покидает исходное место и сразу отображается в новом месте;
— Перетаскивание — пример непосредственного манипулирования объектами, которое интуитивно понятно пользователям;
— Для повышения доступности полезно начать с реализации альтернативного решения;
— Перетаскивание может быть плохой идеей (или требовать поиска дополнительных решений), если одновременно с ним требуется прокрутка страницы.

In English. #drag_and_drop
www.uprock.ru Проектируем Drag and Drop: лучшие UX-практики (часть 1) — читайте на UPROCK Drag and drop (или перетаскивание) — сложное, но популярное взаимодействие, которое встречается в разных продуктах — от графических и текстовых редакторов до систем управления проектами.. читайте полезные статьи о дизайне в блоге UPROCK
  • 👍 18
  • 👎 1
More from @uxnotes
  1. Oct 2, 2026Сархан Громов написал о проблеме связи брендинга и интерфейса. Фирменные приёмы могут отли…
  2. Oct 1, 2026Post #1813
  3. Sep 30, 2026Александр Краснобаев написал об а/б-тестах на малом трафике. • Нельзя выбирать один из вар…
  4. Sep 27, 2026Елена Плинер написала о юзерфлоу. — User flow — это блок-схема пользовательского пути в ра…
  5. Sep 23, 2026Ночной UX — цифровая вечеринка от Сбера Необычные решения, творчество и ошибки делают нас…
  6. Sep 17, 2026Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →