Handlebars в дизайне пользовательского интерфейса

Handlebars in UI Design

Новый элемент, появившийся в дизайне пользовательского интерфейса

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

Цель этой статьи - помочь разработчикам увидеть, как handlebars используются сегодня (например, на iOS и Android), и как они могут быть полезны для «пространственной перегруппировки» в сенсорных интерфейсах. Я надеюсь, что наблюдение за таким системным элементом поможет дизайнерам подумать о новых способах разработки приложений.

Что такое handlebars в дизайне пользовательского интерфейса?

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

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

Они очень похожи на полосу прокрутки, но это сходство только внешнее. Хоть handlebars выглядят просто, у них есть более сложные функции. Таким образом, это позволяет дизайнерам пользовательского интерфейса решать немало проблем.

ВЫВОД

Handlebars элементов используются либо с горизонтальным разрезом, либо с вертикальным разрезом. Это фундаментальная концепция, которая тесно связана с расположением объекта. `

Механика

Скажем, у вас есть App-A слева и App-B справа в соотношении 70-30. Если вы решите изменить его на 50-50, вам придется перестроить всю область.

Давайте посмотрим, как это делается шаг за шагом. Handlebars работают в три этапа:

1. Захват

2. Управление

3. Отпускание

Как эти этапы работают в вышеуказанном сценарии?

Захват

Чтобы перейти от 70-30 до 50-50, вам нужно сначала захватить вертикальную handlebars. Для ее захвата требуется точность - полоска очень узка, поэтому вам будет трудно ее захватить, чтобы начать перегруппировку.

Управление

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

Управление handlebars более простое действие, чем захват. Когда у вас будет захвачена вертикальная handlebars, ваш палец сможет свободно перемещается по всей высоте экрана справа налево, чтобы изменить размер. Область управления - это вся полоска. Это делает управление менее удобным, так как большинство пользователей будут пытаться держать палец в том же месте. Уместно называть это действие управляющим, ведь пользователь может медленно или быстро передвигать свой палец, тем самым, якобы, давая ему чувство контроля. Этот контроль является чисто психологическим, поскольку просмотр доступен только в дискретном наборе значений, таких как 50-50, 70-30 и 0-100.

Отпускание

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

Как только пользователь установит handlebars в нужное положение, он сможет ее освободить - поднять палец, чтобы увидеть завершение действия перегруппировки. Поскольку устройства являются дискретными, конечный процент разделения определяется близостью handlebars к предварительно назначенному месту. Если пользователь освобождает handlebars ближе к точке на оси x, которая имеет соотношение 50-50, она получает 50-50, 30-70 - если она выпуститhandlebars за меткой 50-50 и так далее.

Когда используются handlebars?

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

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

Возможно, в будущем, они смогут стать полезными, например, на сайтах электронной коммерции. Они могут быть нужны для сравнения двух разных продуктов (handlebars будут перемещать один продукт в и из вида - скажем, из вашей тележки), в то время как вы будете просматривать другие продукты.

Вывод

1. Handlebars используются для перестановки и изменения размера огромных блоков пользовательского интерфейса.

2. Они требуют точности при захвате, но не требуют точности при управлении.

Использование handlebars при горизонтальном управлении: многозадачность для Android

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

Захват

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

Приступая к действию, вы захватываете handlebars именно там, где она находится. Остальная зона не является областью захвата.

Управление

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

Отпускание

Как только handlebars отпускается, она привязывается к заранее определенным дискретным позициям в зависимости от того, где вы ее отпустите.

Сравнение с настольными интерфейсами

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

Handlebars также используются для изменения положения элементов рабочего стола

Android N / O App Drawer

Прекрасным примером неточного интерфейса является движение для открытия приложения на Android Nougat / Oreo. Это пример интерфейса, в котором показанаhandlebars и стрелка, указывающая направление движения.

Захват

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

Управление

В этом примере пользователь может перемещать handlebars вверх или вниз.

Отпускание

Здесь есть только одно конечное состояние - приложение открыто. Как только пользователь переместит свой палец на половину экрана, отпускание пальца приведет к тому, что приложение полностью откроется.

Повторяю - управление handlebars обеспечивает чувство контроля для пользователя. Это делает приложение привлекательным.

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

Дополнительные примеры использования handlebars

В следующих примерах показаны различные сценарии использования handlebars в дизайне интерфейса:

Все три картинки имеют handlebars для отображения и сокрытия боковой панели.

Сообщения имеют заостренные handlebarsя, чтобы перенести стикеры в и вне поля зрения.

Примечание:handlebars могут использоваться совершенно по-другому - вертикальное и горизонтальное перемещение применяется для перераспределения столбцов и строк соответственно. Они позволяют пользователю поднимать или опускать строки / столбцы.

В iOS lockscreen есть две handlebars на одном экране, которые делают разные вещи. Они выступают в качестве обозначения разных действий.

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

ВЫВОД

Вот все способы использования handlebars в приведенных выше примерах:

* Сокрытие и отображение изображений.

* Расширение и свертывание изображений.

* Перестановка столбцов и строк в таблице.

* Просмотр изображения.

Будущее интерфейсов

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