Для чего нужен элемент handlebar в дизайне пользовательского интерфейса
Перевод материала дизайнера по проектированию взаимодействия компании Angie«s List Шанкара Баласубраманьяна о том, как элемент может пригодиться при перераспределении пространства в сенсорных интерфейсах.
По моим наблюдениям, по мере развития сенсорных систем интерфейсы становятся всё более связаны с жестами, а явной навигации и пунктов меню, наоборот, становится всё меньше. Элемент handlebar является началом новой эры дизайна пользовательского интерфейса.
Надеюсь, что изучение системного элемента вроде этого поможет дизайнерам увидеть новые подходы к дизайну приложений.
Что такое handlebar
Представьте полотно, которое разрезано вертикально или горизонтально на две или более отдельных частей. Handlebar — элемент интерфейса, который позволяет пользователю изменить размер и перегруппировать различные части этого полотна (или современного UI).
Если вы уже пользовались разделённым экраном режима многозадачности на iPad с iOS, то маленькие вертикальные и горизонтальные метки-манипуляторы в одном из двух приложений, расположенных на разделённом экране, — и есть то, что я называю «handlebars».
Визуально они похожи на скролл, но на этом их сходство заканчивается. Элемент handlebar выглядит просто, но в нём заложено сложное взаимодействие. Поэтому с помощью handlebars UI-дизайнеры могут справиться со множеством проблем дизайна.
Когда handlebar используется для реорганизации элементов, расположенных на полотне интерфейса, он разделяет полотно либо вертикально, либо горизонтально. Это фундаментальный концепт элемента handlebar, он имеет непосредственное отношение к тому, как организована структура интерфейса.
Механика
Допустим, у вас есть приложение A слева и приложение B справа, экран разделён в соотношении 70 к 30. Если вам нужно изменить соотношение на 50 к 50, тогда вам нужно реорганизовать пространство.
Давайте посмотрим, как это происходит. В работе handlebar можно выделить три чётких этапа:
- Захват.
- Перемещение.
- Отпускание.
Захват
Чтобы изменить соотношение пространства на экране с 70 к 30 на 50 к 50, вам нужно сначала захватить вертикальную метку-манипулятор. Чтобы разблокировать область, нужно выбрать горизонтальную метку.
Перемещение
Когда вы захватили handlebar, можно перемещать элемент влево или вправо. Это позволяет пользователю двигаться по одному измерению, например, по оси X.
Если получилось захватить вертикальный разделитель, палец может свободно двигаться по всей высоте экрана при смещении разделённого экрана влево или вправо.
Пользователь может перемещать элемент быстро или медленно — это даёт пользователю ощущение контроля. Но контроль ощущается только физически, потому что разделённый экран может быть представлен только в нескольких соотношениях пропорций, например: 50 к 50, 70 к 30 и 0 к 100.
Отпускание
Пока пользователь производит такие действия, как захват и перемещение, его палец всегда на экране. Отпускание прекращает действие реорганизации разделённого экрана.
Когда пользователь переместил разделитель в нужное положение, он может отпустить его, поднять палец, после чего разделённый экран зафиксируется в новом положении. Так как положения предзаданы, конечное процентное соотношение пространства на экране определяется близостью handlebar к одному из предварительно заданных значений.
Если пользователь отпускает handlebar на оси Х ближе к точке 50 к 50, то получает разделение в половину экрана; соотношение 30 к 70 устанавливается, если палец прошёл дальше отметки 50 к 50, и так далее.
Почему handlebars полезны
Handlebars полезны всякий раз, когда два отдельных блока информации нужно реорганизовать строго по оси Х или оси У. Handlebars также могут послужить ещё одной ключевой цели — они являются элементами, которые делают невидимое действие видимым.
Они не подходят для изменения размера по диагонали, потому что это действие выполняется только с помощью перетаскивания курсором. Также они не используются для свободного перетаскивания элементов по полотну (для этого нужны маркеры перетаскивания, это совсем другие элементы).
В будущем handlebar будет полезным на сенсорных устройствах, например, при посещении интернет-магазинов, где его можно использовать для сравнения двух продуктов, а вы тем временем сможете дальше делать покупки.
- Handlebars используются для реорганизации пространства на экране и изменения размеров больших блоков пользовательского интерфейса на полотне UI.
- Они требуют точности действий при захвате, но точность действий не требуется для перемещения.
- Отпускание закрепляет полотно в новом положении.
Использование handlebar на полотне с горизонтальным смещением: многозадачный режим на Android
Многозадачный режим на Android похож на то, что реализовано в iOS. Но не будем останавливаться на том, как многозадачный режим запускается, а пройдёмся по нему подробнее.
Захват
В отличие от iPad, многозадачный режим на Android разделяется горизонтально. В результате элемент handlebar является горизонтальным. Ориентация элемента handlebar показывает, как разделено полотно и как можно перегруппировать элементы.
Что касается самого взаимодействия, handlebar можно захватить ровно там, где элемент находится. Остальная часть средника не относится к области захвата.
Перемещение
Так как это горизонтальный элемент, перемещение — вертикальное. Чтобы изменить вид разделённого экрана, нужно переместить элемент вверх или вниз.
Отпускание
Когда вы отпускаете handlebar, элемент фиксируется в определённом положении, в зависимости от того, когда вы отпустили его.
Сравнение с интерфейсами для настольных компьютеров
Прежде чем перейти к примерам использования handlebar, важно отметить, что элемент имеет много общего с курсорами на десктопах, но это не всё. Handlebar более универсален, чем маркеры перетаскивания на интерфейсах для десктопа. На следующем изображении я выделил некоторые ключевые моменты, касающиеся ограничений обычных курсоров в настольных интерфейсах.
Также handlebar используют для того, чтобы вывести элементы полотна в поле зрения.
Панель приложений на Android Nougat и Oreo
Жест, используемый для открытия панели приложений на Android Nougat и Oreo, — отличный пример неточного интерфейса. И интерфейса, в котором handlebar представлен в виде стрелочки — такая форма выполняет ключевую роль для обозначения направления свайпа.
Захват
Чтобы захватить маленький элемент handlebar, просто свайпните в любом месте экрана. Обратите внимание, как handlebar меняет форму, когда пользователь делает свайп вверх — отражая таким образом «захват».
Перемещение
В этом примере пользователь может перемещать элементы вверх или вниз. Область перемещения — то, где палец может двигаться во время перемещения, — это горизонтальная ширина устройства.
Отпускание
В этом примере есть только одно конечное состояние — панель приложений открыта. Как только пользователь «перемещает» элемент вверх на половину экрана, отпускание handlebar приводит к полному открытию панели приложений.
И опять перемещение даёт пользователю ощущение контроля, и намерение пользователя становится понятным через его взаимодействие. Поэтому открытие панели приложений происходит плавно.
Больше примеров использования handlebar в UI-дизайне
У Things 3 есть handlebar, чтобы показывать и прятать боковую панель. Этот handlebar можно использовать и с помощью мыши, и с помощью простого горизонтального свайпа.
В приложении Messages есть handlebar в форме стрелочки, чтобы открывать и скрывать панель стикеров.
Приложение Notes использует эти элементы иначе — вертикальные и горизонтальные handlebars используются для реорганизации колонок и рядов — позволяют пользователю «поднимать» их.
Handlebars в приложении Notes
На экране блокировки на iOS расположены два handlebars, которые выполняют разные функции.
При нахождении внутри приложения индикатор home действует как другой вид handlebar — он сворачивает текущий вид.
Варианты использования handlebars, показанные в примерах выше:
- Сворачивание и разворачивание;
- Отображение и скрытие;
- Реорганизация колонок и рядов в таблице;
- Сворачивание текущего вида.
Будущее естественных интерфейсов
Пытаясь создать жестовые интерфейсы, мы пришли к тому моменту, когда понимаем, что некоторые действия нельзя выполнить без таких точных элементов, как handlebar. Пока мы не сделаем так, что каждый пользователь будет чувствовать себя комфортно, выполняя невидимые жесты, нам будет нужен элемент handlebar, который сделает их видимыми.
#дизайн
© vc.ru
