Axure — по клику сдвигаем область контента и возвращаем на место

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

Пример иллюстрирует ситуацию, когда на странице присутствует блок, имеющий дополнительные настройки, спрятанные в раскрывающейся области. А ниже этого блока расположен контент.
Таким блоком может быть «Поиск» с дополнительными параметрами или «Фильтр».
Раскрывать область дополнительных настроек поверх нижележащего контента не удачный UX. Я покажу, как сдвинуть контентную область при раскрытии дополнительных настроек и вернуть её на место при их закрытии.

Я использую Axure 9-й версии (вышла в апреле этого года), но все действия применимы и для «восьмерки».

1. Создаем основной блок, в моем примере это блок Поиска по каталогу.

Здесь все просто. Я использовал 5 элементов: Box, Button, Heading, Text Field и svg иконку.

Я настроил элемент Text Field (поле ввода поискового запроса). В 9-м Axure изменился интерфейс, теперь они располагаются вот здесь (при выделении элемента):

Настройки:

Hint Text — плейсхолдер
Hide After со значением Typing позволяет скрыть текст плейсхолдера при клике в поле ввода.

Для кнопки «Найти» и svg-иконки просто назначил Interaction styles Mouseover и выбрал значения, которые будут изменяться при этом состоянии.

Для кнопки (цвет фона и текста):

Для svg-иконки (цвет фона):

Важно! Помещенная в проект svg-иконка, после применения команды Convert SVG to Shapes

может содержать не один, а два и более шейпа:

И если на эту группу применить Mouseover с какими либо параметрами, то они будут применяться по отдельности для каждого шейпа. Выглядеть это будет примерно так:

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

Шейп становится единым:

Теперь Mouseover отрабатывает как нужно:

Для удобства все элементы блока группируем (Ctrl+G), группе даем наименование:

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

Здесь я использовал элементы: Box (для подложки), Drop List, Checkbox и Radio Button.

Настройка Drop List простая: при помощи кнопки +Add добавляем нужное количество пунктов, самый первый отмечаем, он будет показан в списке по умолчанию:

Остальные будут доступны для выбора:

Для Chekbox отмечаем опцию Selected — птичка будет установлена по умолчанию:

Настройка Radio Button. Тут есть один нюанс: если просто разместить несколько радиобатонов, все они будут вести себя независимо друг от друга, то есть каждый из них можно сделать активным, что полностью противоречит назначению этого элемента (UX минус 3000):

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

Далее ввести наименование общей группы, например «Product-Status» и нажать ОК.

Для остальных элементов просто выбрать эту группу из списка:

Теперь внутри одной общей группы радиобатоны работают правильно (выбрать можно только один):

Для того, чтобы один из батонов был выбран по умолчанию, выделяем его и из списка по правой кнопки мыши назначаем свойство Selected:

Теперь все как надо:

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

Даем панели наименование

и устанавливаем для неё свойство Set Hiden

3. Поверх скрытого блока Дополнительных настроек создаем блок контента:

В нем размещаем что угодно.
Группируем его элементы, группе даем наименование:

4. Приступаем к интерактиву. Создаем появление панели дополнительных настроек при клике на иконку.

Это, как мы помним, будет происходить при клике на иконку.
Выделяем её и создаем копию:

Переименовываем каждую из них:

И размещаем в одинаковых координатах:

Суть: клик по первой (Icon-Open) будет выдвигать панель дополнительных настроек, клик по второй (Icon-Close) — прятать панель.

Выделяем иконку Icon-Open

и переходим во вкладку Interactions

Из списка Interactions выбираем событие OnClick

Далее выбираем действие для события OnClick — Show/Hide

и указываем блок (виджет), к которому это действие будет применено:

Этим блоком является Динамическая панель с дополнительными настройками.

Указываем параметры для действия Show/Hide:

Включаем переключатель в режим Show.
Значение Animate устанавливаем Slide Down.
Тип движения устанавливаем Linear. Это значение по вкусу. Оно влияет на поведение анимации — ускорение или замедление вначале или вконце, с отскоком и т.п.
Раскрываем свиток More Options и включаем значение Bring to Front.
Нажимаем Done, сохраняем проект.

Что было сделано: при клике по иконке (Icon-Open) отобразится динамическая панель (Search-Parameters-Panel) с применением анимации скольжения вниз (Slide Down) по линейной функции (Linear, то есть равномерно на протяжении всего времени без изменения скорости) и панель Search-Parameters-Panel будет помещена поверх всех элементов страницы (Bring to Front).

Если сейчас запустить предосмотр (Preview), и кликнуть по иконке, ничего не произойдет.
Потому что иконка Icon-Open сверху перекрыта Icon-Close (для которой никаких действий ещё не назначено) и клик происходит именно по ней.
Назначим для неё атрибут Set Hidden.
Сохраним проект и запустим предосмотр (Preview).

Теперь при клике панель должна появиться из-за блока поиска и перекрыть собой блок контента.

5. Подвинем контентный блок на необходимое расстояние одновременно с раскрытием панели доп.настроек.
Для этого снова выделяем иконку Icon-Open и открываем вкладку Interactions.

Нажимаем на Плюс

и добавляем действие Move.

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

И настраиваем параметры:

Значение Move переключаем с By на To:

Указываем значения координат, которые примет блок, когда сдвинется.
Движение будет происходить по оси Y.
Текущее значения смотрим во вкладке Style:

Значение для X указывам такое же (оно изменяться не будет), а для Y определяем при помощи направляющей на странице проекта:

Таким образом, настройки действия Move выглядят примерно так:

Координаты указали, Animate я также устанавливаю в значение Linear.
Раскрываем свиток More Options и устанавливаем значение Trajectory в значение Straight (движение будет осуществляться прямо).

Сохраняем проект, открываем предосмотр.
Контентный блок сдвигается синхронно раскрытию панели доп. настроек.

5. Теперь нужно реализовать обратный функционал — по клику на иконку Icon-Close свернуть панель дополнительных настроек и вернуть контентный блок на место.
Иконка Icon-Close у нас сейчас в режиме Hide (скрыта, чтобы не заслонять иконку Icon-Open). Для того, чтобы навесить на неё необходимый интерактив, её нужно отобразить.
Для этого на OnClick иконки Icon-Open добавим ещё одно действие Show/Hide, в котором сделаем видимой иконку Icon-Close.

Выделяем иконку Icon-Open, переходим во вкладку Interactions, кликаем на Плюс и выбираем Show/Hide:

В настройках выбираем виджет Icon-Close и устанавливаем режим Show. Анимации не задаем, здесь она не нужна.
Кликаем ОК.

И давайте скроем иконку Icon-Open в качестве бонуса.

Снова выделяем её и в Interactions плюсуем Show/Hide. В качестве виджета указываем This Widget (Этот виджет, то есть которому создаем интерактив).

В настройках Show/Hide переключатель устанавливаем в режим Hide, также без анимации:

Кликаем ОК, сохраняем проект.

Теперь при клике на иконку Icon-Open появляется панель настроек, сдвигается вниз контентный блок, сама иконка Icon-Open прячется и вместо неё появляется Icon-Close на том же месте. При отсутствии анимации подмена незаметна.

Далее нужно добавить интерактив для иконки Icon-Close.

Выбираем её в панеле Outline:

Переключаемся во вкладку Interactions.

Добавим событие OnClick и первое действие Show/Hide.
В качестве виджета для Show/Hide выберем динамическую панель дополнительных параметров поиска (Search-Parameters-Panel).

В настройках устанавливаем следующие параметры:

Режим в значение Hide.
Animate — Slide Up (скольжение вверх).
Режим анимации — Linear.
Done, сохраняем проект, переходим в предосмотр.

Теперь при клике происходит появление панели, сдиг контентной части, при повторном клике панель прячется за блок поиска.
Но третий клик не срабатывает.
Это из-за того, что мы отобразили иконку Icon-Close и она осталась вместо Icon-Open.

Исправим это, добавив плюсом действие Show/Hide, указав в качестве цели иконку Icon-Open и включим режим Show.

Сейчас мы вернули отображение иконки Icon-Open при клике на Icon-Close, но её интерактив не работает, потому что, как помним, она перекрывается иконкой Icon-Close.
Спрячем при помощи Show/Hide иконку Icon-Close.

Сохраняем проект, переходим в предосмотр.

Панель дополнительных настроек работает как надо — первый клик разворачивает, второй — сворачивает. И так далее.

Теперь при втором клике вернем контентный блок на место.
Для этого на элемент Icon-Close добавим действие Move, в качестве цели выберем группу с элементами контента и настроим.

Значения координат равны значениям исходного положения блока. Их узнаем из вкладки Style (предварительно выделив блок).

Остальные значения аналогичны настройкам Move при создании сдвига вниз по оси Y.

Done. Сохраняем, просматриваем. Все работает.

Demo