Drag and drop дизайн

Drag and Drop в дизайне сайтов и приложений

Drag and Drop используется практически во всех интерфейсах — сортировка писем в почте, перемещения карточек Trello или перетаскивание вкладок в Chrome.

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

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

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

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

Значок три строки указывает на перетаскиваемый элемент? Или это значок с тремя точками? Какой из курсоров показывает, что можно перетащить элемент? Лучше не использовать разные элементы обозначающие одно действие в одном проекте.

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

Примеры использования drag and drop в дизайне

Чаще всего drag and drop применяется в древовидных списках, таблицах и карачках.

1. Изменения порядка в списке элементов;
2. Переупорядочение столбцов в таблице;
3. Переупорядочение строк в таблице;
4. Реорганизация и слияние карточек;

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

Создание библиотеки доступности

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

1. Выбор цвета

Для обозначения drag and drop взаимодействия избегайте цветов, которые уже имеют значение в вашем интерфейсе. Так вы сможете использовать пользовательский опыт, и, когда пользователи будут сталкиваться с выбранным цветом, они смогут ожидать именно этого взаимодействия.

2. Стили состояний

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

Например, когда элемент перетаскивается, он будет иметь следующие стили:

Добавление тонкой тени для тени создает впечатление, что элемент фактически снимается со страницы.

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

3. Системные курсоры

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

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

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

4. Перетаскивыемае цели

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

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

Резюме

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

Источник

Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 1 — Разработка

Предисловие.

В этой серии статей мы рассмотрим задачу разработки и тестирования сортируемых компонентов Drag-and-Drop. Существует множество сценариев использования drag-and-drop поведения, вот некоторые из них:

Загрузка или удаление файлов и изображений (самое банальное).

Сортируемые заметки или стикеры.

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

Проверка капчи (соберите пазл).

Игры (шахматы и шашки).

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

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

Используемые технологии и библиотеки:

Примечание:

Хотелось бы объяснить значение нескольких терминов, так как они могут использоваться в чистом виде:

drag — Тащить, перетаскивать. То есть это перетаскиваемый элемент, что-то, что вы перетаскиваете из одного места в другое.

drop — Бросить, падение. Это область куда перетаскиваемый (drag) элемент будет размещён. То есть область перетаскивания/падения.

Структура проекта.

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

// Omitted pieces of code.

Drag-and-Drop Provider.

Чтобы добавить функционал drag-and-drop в нашем приложении, мы должны обернуть необходимый вам компонент в DnD Provider вместе с переданным ему backend props.

Drop Box container.

Следующим шагом будет создание DropBoxContainer . Он отвечает за хранение данных в правильном порядке, сортировку и отображение компонентов DropBox . В реальном проекте, хранение данных можно вынести на другой уровень, например React context или Redux store, так же как и функционал сортировки, который можно вынести в отдельные utils файлы, но для текущей демонстрации, этого будет достаточно.

Внутри этого файла мы будем перебирать все данные (в нашем случае это столы с едой посетителей) и отображать каждый элемент как отдельный компонент DropBox .

Drop Box item.

Двигаемся дальше, создайте файл DropBox , который будет действовать как отдельный контейнер/коробка для каждого перетаскиваемого файла. Для более точного понимания попробую объяснить простыми словами на примере нашего приложения:

File: src/components/DnD/DropBox/DropBoxContainer.tsx — Это как фуд-корт, место, где все посетители сидят за своими столиками. Это своего рода контейнер, внутри которого все происходит.

File: src/components/DnD/DropBox/DropBox.tsx — Это конкретный столик, за которым размещается посетитель и его еда. Это место, куда размещаются перетаскиваемые элементы.

File: src/components/DnD/DragBox/DragBox.tsx — Это тарелка с едой, или, другими словами, перетаскиваемый предмет, который нам нужно перетаскивать (перемещать) из одного столика на другой.

Компонент DropBox принимает несколько props:

index — который мы берем из функции map() .

selection — это элемент данных, в нашем случае это блюдо.

updateSelectionsOrder — функция для обновления порядка элементов.

А вот тут начинается первая «магия», связанная с поведением перетаскивания.

Как говорит нам документация о хуке useDrop:

useDrophook предоставляет вам возможность подключить ваш компонент к системе DnD в качестве цели для перетаскивания (drop target). Передав спецификацию в useDrophook, вы можете указать, какие типы элементов будет принимать данная цель, какие props собирать и многое другое. Эта функция возвращает массив, содержащий ref для присоединения к узлу Drop Target и собранные props.

Давайте рассмотрим всё по частям:

accept : Обязательный. Строка, символ или массив любого из них. Указывает тип, на который будет реагировать конечная drop цель, она будет реагировать на элементы, созданные источниками drag, только указанного типа или типов. Проще говоря, если вы попытаетесь перетащить на drop элемент, тип который не указан в свойстве accept , конечная drop цель не отреагирует на него и проигнорирует. Это предотвращает взаимодействие с нежелательными и не указанными элементами.

drop(item, monitor) : Необязательный. Вызывается, когда совместимый drag элемент перетаскивается на drop цель. В нашем случае, когда мы берём блюдо и отпускаем его на стол, вызывается эта функция, и мы запускаем предоставленную функцию обратного вызова updateSelectionsOrder , чтобы обновить расположение блюд.

collect : Необязательный. Функция сбора. Она должна возвращать обычный объект props для инъекции в ваш компонент. Она получает два параметра, monitor и props . Мы используем ее с DropTargetMonitor, чтобы получить информацию о том, находится ли drag операция в процессе выполнения. Это помогает применить некоторые визуальные эффекты, когда мы наводим тарелку на стол и рисуем пунктирную линию вокруг элементов.

Чтобы обозначить drop цель, мы присоединяем возвращаемое значение drop из хука useDrop к участку drop цели в DOM.

Drag Box item.

Наконец, мы достигли нашей цели и самой аппетитной части (по вкусу ALF). Рассмотрим наше блюдо DragBox . Оно получает следующие props:

dragItem : Данные перетаскиваемого элемента. Для данного приложения они были упрощены до свойств id , name и icon .

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

Чтобы подключить наш компонент в drag источника, мы используем хук useDrag. Здесь мы указываем type , который мы обсуждали выше в хуке useDrop, item — данные перетаскиваемого элемента, которые будут переданы в функцию drop хука useDrop в компоненте DropBox , и функцию collect для получения информации о том, перетаскивается ли наш элемент в данный момент, для визуальных эффектов.

Чтобы обозначить перетаскиваемый элемент, мы присоединяем возвращаемое значение drag из хука useDrag к перетаскиваемому участку DOM.

Заключение.

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

Источник

UX паттерны для перетаскивания (Drag and Drop) компонентов в дизайн-системе

Копирайтер, UX-писатель, редактор и контент-стратег. Увлекается переводами в tech-тематиках. Помогает собрать гибкую контент-стратегию, улучшить коммуникации с пользователями и проработать tone of voice. Работала с UsabilityLab и «iSpring».

Июн 25, 2018 · 7 мин читать

Вы скорее всего встречали функционал drag-and-drop в куче интерфейсов: в гугл-почте можно перетаскивать письма в папки, в Трелло — передвигать карточки, в Хроме — менять вкладки местами. Эти взаимодействия гораздо сложнее, чем кажется — я это поняла, когда проектировала drag-and-drop паттерны в VMware.

Перетаскивание писем по папкам в гугл-почте

Перемещение карточек в Трелло (Asian crackers )

Перетаскивание писем по папкам в гугл-почте

Часто пользователи вообще не замечают drag-and-drop взаимодействий — настолько естественно они выглядят. Но все же, если присмотреться, все они разные: в UX пока нет единого стандарта по drag-and-drop.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Нет ничего плохого в том, что в каждом интерфейсе свой подход к drag-and-drop. У каждого дизайнера свои аргументы в пользу того или иного паттерна. Вот, например, в Трелло карточки при перетаскивании наклоняются. Скорее всего, дизайнер намеренно использовал этот эффект, потому что он соответствует дружелюбному стилю приложения.

Проблема в том, что иногда мы встречаем разные drag-and-drop паттерны в рамках единого интерфейса. Возможно, вам приходилось сталкиваться с такими приложениями. К примеру, посмотрим на библиотеку доступных drag-and-drop паттернов в Salesforce. Там мы видим пять совершенно разных паттернов.

Доступные drag-and-drop паттерны Salesforce

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

Но какая обозначает drag-and-drop? Ответ: все.

Какая иконка обозначает, что объект можно перетащить? Три полоски? Или три точки? А каким из пяти курсоров можно перетаскивать объекты? Представьте, что будет, если все пять паттернов использовать в одном интерфейсе?

Компоненты в рамках дизайн-системы должны восприниматься как единое целое. По аналогии, и drag-and-drop взаимодействия в интерфейсе должны быть согласованы.

Дизайн-система — это не только согласованные элементы интерфейса. Процессы взаимодействия также должны быть согласованы.

Разбор кейса

Сейчас я расскажу вам, как разрабатывала drag-and-drop паттерны для дизайн системы Clarity (VMware). Clarity — дизайн система с открытым кодом, так что ею пользуются все желающие, а не только работники VMware.

Нашим пользователям нужна была функция drag-and-drop для некоторых компонентов интерфейса: древовидное меню, таблицы данных и карточки. Передо мной стояла задача — создать единый опыт взаимодействия по всем сценариям, связанным с drag-and-drop:

Сценарии взаимодействия с drag-and-drop:

• Изменять порядок и уровень вложенности элементов дерева
• Изменять порядок колонок в таблице данных
• Изменять порядок рядов в таблице данных
• Перетаскивать элементы между древовидным меню и таблицей данных
• Упорядочивать и объединять карточки

Когда в интерфейсе большое количество данных (как раз случай VMware), без drag-and-drop не обойтись — он упрощает работу со сложными и массивными объемами информации.

Создаем библиотеку аффордансов

Для начала я создала небольшую библиотеку простых, но эффективных дизайн-аффордансов — свойств, которые будут обозначать drag-and-drop и связывать воедино этапы перетаскивания объектов. Когда появятся новые сценарии использования drag-and-drop, мы сможем применить к ним разработанные аффордансы.

Если вы с командой как раз создаете дизайн-систему, эта статья поможет вам при разработке ваших собственных drag-and-drop паттернов.

1. Лиловый цвет

Используйте для обозначения drag-and-drop взаимодействий определенный цвет, который не задействован в вашем дизайне. Не стоит использовать цвета, которые имеют определенное значение в дизайне (например, красный ассоциируется с разрушительными действиями).

Для обозначения drag-and-drop мы выбрали лиловый. В Clarity он не является основным цветом, так что у пользователей он будет ассоциироваться только с drag-and-drop. Мы намеренно отказались от синего (обычно для drag-and-drop используют его), потому что в Clarity синие кнопки и другие кликабельные элементы.

2. Стили состояний

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

В Clarity к перетаскиваемому элементу применяются такие стили:

Изменение порядка элементов дерева

Благодаря небольшой тени создается впечатление, что элемент на самом деле перемещается над страницей.

Еще одно состояние, которое мы добавили — это исходное местоположение элемента на странице, которое мы называем “предыдущим положением”.

Перемещение из одной папки в другую в рамках дерева

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

Имейте в виду: мы не будем учитывать “предыдущее положение” при создании эффекта естественного движения (когда все окружающие элементы сдвигаются, уступая место перетаскиваемому объекту).

3. Системные курсоры

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

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

Для Windows мы используем курсор перемещения (перекрещенные стрелки). Этот курсор появляется при наведении на объект, который можно перетаскивать, а также в процессе перетаскивания. Опять же, если пользователь попытается “бросить” объект в недоступную область, курсор будет в недоступном состоянии.

4. Место назначения объекта

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

Поскольку в нашем случае пользователи будут менять объекты местами посредством drag-and-drop, мы обозначаем место назначения объекта линией.

Меняем местами ряды в таблице данных

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

Аффордансы, которые зависят от ситуации

Единственное, что зависит от ситуации — это отображать маркер перетаскивания или нет. Маркеры перетаскивания — это небольшие иконки, которые показывают, что элемент можно перетаскивать. В интерфейсах Gmail в качестве маркера используют иконку из 12 точек, а мы выбрали иконку из 6 точек:

Когда маркер перетаскивания нужно отображать, а когда — нет? Это зависит от контекста. Если drag-and-drop доступен для элемента, который обычно нельзя перетаскивать, то обязательно нужно добавить маркер перетаскивания. А если drag-and-drop взаимодействие и так подразумевается, можно обойтись и без маркеров.

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

Есть много разных иконок для обозначения маркеров перетаскивания. Нужно выбрать одну — и использовать ее везде.

Одна большая drag-and-drop семья

Благодаря этим стандартам можно добиться согласованности между разными сценариями использования drag-and-drop.

Здесь вы можете посмотреть все сценарии использования drag-and-drop, о которых я рассказывала.

Команда Clarity только начинает процесс разработки для всех этих drag-and-drop паттернов, начиная с упорядочивания колонок в таблице данных. Можете следить за процессом разработки на GitHub. 🎉

Источник