Как в axure сделать всплывающее окно
Решили создать небольшую инструкцию по созданию прототипа сайта. Нам как разработчикам сайтов, очень удобно когда клиент предоставляет прототип сайта и коротенькое ТЗ, а не портянку текста со скринами из экселя.
Регистрируемся в любом из сервисов для создания прототипов.
Перед нами рабочая область, в ней мы рисуем блоки страницы.
Для шапки рекомендуем сверху добавить новую секцию чтобы её можно было сделать одинаковой (сквозной секцией) для всех страниц, и все наши правки применялись сразу на всех страницах. Для этого иконку секции, что вверху перетаскиваем в рабочую область и отпускаем вверху, там где написано «Вставить секцию»
Дальше нам нужно прикинуть какие страницы будут вообще, и создать их в списке страниц. Делать это лучше сразу, потому что так удобнее создавать ссылки, просто перетаскивая нужные страницы из списка, ссылки создаются автоматически.
Нужно вставить элементы, например логотип, если есть, если нет обозначить область где он будет, чтобы мы понимали какой он будет формы, есть слоган или нет, будет ли в шапке текстовый дескриптор, и так далее. Все это перетаскивается из левого меню виджетов в рабочую область
Чтобы показать 80% функционала достаточно прямоугольника и текста. Но некоторые вещи лучше показать именно так как одни будут работать.
Например второе меню которое показывается при прокрутке страницы. В ТЗ это занимает лишнее место, а в прототипе делается очень просто.
1 — Создаем новую секцию.
2 — Делаем секцию скрытой. (Нажатием на иконку глазика)
3 — В панели настроек выставляем позицию сверху и расстояние прокрутки через которое секция должна быть показана.
(C) сервис esk.one раздел инструкции.
Покажите каким именно меню должно быть, какие элементы в нем должны быть. Часто бывает так что в ТЗ написаны одни пункты а на деле блокам просто не хватает пространства, и мы теряем время согласовывая новое меню.
Если у формы есть несколько уровней, или после отправки она должна что-то показать эдакое, все виды формы лучше тоже нарисовать.
Для этого просто дублируете ту панель обратного звонка что уже сделали, даете ей название например "Панель 2" и на кнопке отправки панели назначить что нужно показать всплывающее окно с панелью 2.
Чтобы не рисовать одно и тоже на каждой странице воспользуйтесь сквозными секциями и сквозными блоками. Это такие элементы которые пишутся и редактируются в одном месте, а меняются сразу на всем прототипе автоматически. Это сильно экономит время.
Для хедеров и футеров предусмотрена сквозная секция. Эта секция висит на всех страницах прототипа. Редактируя то-то в ней, изменения происходят на всех страницах прототипа.
1 — Создать секцию или выбрать существующую.
2 — В контекстном меню выбрать пункт «Сквозная секция»
3 — Во всплывающем окне выбрать «Выделить все» и позицию добавления.
4 — Нажать кнопку «Применить»
Примечание: если после того как секция стала сквозной в прототипе создавались ещё страницы, чтобы секция появилась на них, нужно повторить пункты снова. Чтобы избежать случайных дублей, страницы на которых секция уже установлена в окне показаны не будут. Редактировать содержимое сквозной секции можно на любой странице. (C) сервис esk.one раздел инструкции.
Сквозной блок работает как и секция, но создается немного по другому.
На странице панелей нажимаем W и рисуем блок, который часто будет повторяться на страницах, например выпадающее меню каталога с фильтрами.
Чтобы вывести его, в рабочей области нажимаем W и рисуем (или перетаскиваем виджет враппер), в настройках враппера указываем «брать данные из панели» в списке выбираем нужную панель. Все, панель подключена, теперь блок с этой панелью можно копировать на другие страницы, если вы поправите блок в панелях, изменения на всех страницах будут применены автоматически.
Хотите показать чуть более удачный по структуре блок текущего сайта, вставляете скрин, все ненужное закрываете прямоугольником с таким же цветом как фон сайта, и рисуете новое расположение элементов, так делают в основном при редизайнах.
Прототипирование - это круто. Вы получаете результат который хотите, а разработчикам удобно с вами работать.
Сервис сыроват еще, на вид местами не для перфекциониста) вот ссылка на сервис кому интересно esk.one
Ну, хорошо.
Пока он бесплатный, пока у вас глаза горят и руки делают.
Мне кажется, что монетизацию надо продумывать уже сейчас, когда есть работающий прототип. Так как вы втяните в своей сервис N-количество людей, они привяжутся к вам, встроят в свой процесс, а в какой-то не очень прекрасный день, у вас настроение переменится и вы забросите разработку.
Удалять жалко, но и развивать нет сил. Получается, что продукт остановится в развитии, а если сломается, что и чинить его никто не будет.
Бесплатными облачными сервисами будут пользоваться любители и энтузиасты, а они быстро свинтят на тот же мокапс.ком, если ваша детище чуть-чуть замедлит в развитии или будет тупить.
Для профи же есть Axure, Sketch и Adobe XD
Добровольная поддержка это и есть монетизация. Как-то же существуют полностью бесплатные продукты на донатах, их поддерживают и обновляют. Вот и мы решили попробовать.
Добровольная поддержка это и есть монетизация
Это чушь, такая форма «монетизации» не работает. Зачем платить, если можно пользоваться бесплатно?
Как-то же существуют полностью бесплатные продукты на донатах
Например?
Вы в комментариях пишите, что хотите сделать, не много не мало, а облачный аналог Axure. То есть в планах у вас конкуренция с софтом промышленного стандарта. Вы планируете оплачивать сервера, инженеров и поддержку из «донатов»? :) Серьёзно?
Ну тут проблемы с позиционированием на рынке,и уже как следствие наивные мечты о монетизации посредством донатов.
Промышленные инструменты на донатах не живут. Промышленный софт, а акшура это именно энтерпрайз решение, не будет мирится с тем что ваши сервера вдруг не выдержали нагрузки и упали, или все резко потерялось. От вас мало того что уйдут, так еще и судебными исками закидают.
Вот, да. Именно об этом и речь.
Сама же постановка вопроса, типа «жить будем с донатов», даже немного оскорбляет и бесит. Идея классная, но рискует быть похерена за недальновидностью руководителей :(
мне кажется идея опоздала немного.
С акшуры уходят, она теряет рынок. Да на ней до сих пор сидит сап, ibm, и еще куча титанов, но этот рынок сжимается, балом правят веб студии и разработчики приложений, которые хотят фирму, инвижн, и т.д.
Умение работать в акшуре уже сейчас не сильно востребовано на рынке, (на западе еще боле менее, в России нафиг никому почти не надо)
Не могу ничего сказать на этот счет, так как не знакома с последними отчетами о выручке Axure и доли ее на рынке.
Однако, буквально на днях был анонс официального плагина для совместимости со Sketch :) То есть эти ребята сознают своё положение и готовы к битве.
А с их опытом это сулит только развитие Axure по всем фронтам. Гляди и цены пересмотрят.
Что касается инвижн и прочих, мне кажется, что нативное приложение всё такие лучше любого веб-аплета, даже такого вылизанного, как перечисленные вами выше.
Производительность работы решает многое, особенно, когда работаешь с ноута в разных частях мира.
Прочитал статью на медиуме о плагине Axure/Sketch.
Круто и хочется потестить.
Молодцы что развиваются.
Тогда относительно этой статьи. Ребята торопитесь с выходом на рынок, иначе все будет плохо.
"конкуренция с софтом промышленного стандарта"
Звучит круто, но там ничего такого прям невыполнимого нет. Мы для CRM-ок на заказ больше пилили чем функционал акшуры. События. Сценарии. Панели. Переменные. Все это делается без проблем.
"Вы планируете оплачивать сервера, инженеров и поддержку из «донатов»? :) Серьёзно?"
Всего не расскажу. Монетизации не то что бы не будет совсем, просто пользователям не нужно будет платить за сервис.
Такие инструменты как акшура очень сильно отличаются от crm-ок на заказ. Вопрос не в сложности разработки, вопрос в продвижении на рынке. Одно дело когда к вам приходят за учетной системой, а другое когда вы лезете на рынок где господствует акшура.
Тут абсолютно другой маркетинг, абсолютно другие сложности лежащие вне плоскости трудоемкости разработки.
Вопрос вообще не в функционале, а в том, как вы серверную составляющую поддерживать планируете и как продвигать продукт на рынок.
Для популяризации вашего сервиса одной статьи на vc не достаточно.
А написание CRM под заказ в 2018 году — это вообще странная тема, мягко говоря.
Может вы лукавите, и не «разработкой под заказ», а интеграцией готовых продуктов под бизнес-процесс клиента занимаетесь? :)
Мы делаем мультисайтовые системы управления с интеграцией в собственную же CRM для ловли лидов и сквозной аналитики из сетей на 100-1000 сайтов, готовых таких решений нет, хоть и 2018 год на дворе. Но и эта тема кстати тоже отживает.
Звучит масштабно, а на деле это Wordpress с мультисайтом и пачка CPA подделок от Пузата? :'))
Но если вы такие клёвые, то хотя бы копирайт повесьте и реквизиты заведите на сайте.
Чтобы люди понимали, что это не очередная дипломная работа, а серьезный прототип будущего серьезного сервиса от не менее серьезных ребят.
Ребят, вам действительно желаю больших успехов, но выскажусь
Большим компания где присутствует большое количество ux аналитик и проектирования нравится Axura, аналогов (прямых) ей к сожалению нет.
Другим тоже большим компаниям плевать на серые прототипы, они делаю прототипы в AdobeXD, фигме, скетче, анимируют через фреймер. (сейчас еще студия от инвижна появилась).
Маленьким компания для составления тз, средства прототипирования чаще всего не требуются. Мой опыт работы пресейлом в топовой студии, говорит о том что на стороне заказчика макеты рисует девочка которая не будет разбираться в средствах прототипирования, и делает она это в лучшем случае в пэинте, а то и просто блоками в ворде, там же где все остальное тз.
Если вы сделаете облачный аналог акушеры - вы будете крутыми.
Если вы позицинруете себя как средство быстрых прототипов для того чтобы заказчик вставил ссылку на прототип в тз - это тупиковый вариант.
На данный момент в функционале меню Axure RP Pro 7.0 можно добавлять только пункт меню, а требуется при наведении на ссылку выводить блок с различным контентом внутри блока, естественно с передачей фокуса наведения курсора данному блоку.
Сейчас использую в качестве плохой альтернативы следующие события по клику для отображения импровизированного модульного окна. Чтобы блок с различными элементами внутри него появлялся и исчезал, для создания расширенного функционала пункта горизонтального меню.
Привет!
Если я правильно понял, то для такого поведения меню надо добавить проверку на видимость каждой соответствующей динамической панели.
Т.е. на каждый пункт меню на событие OnMouseEnter создаем проверку Visibility of widget для динамической панели как, например, false и вешаем событие Show MyMenuItem, которая по умолчанию скрыта. Тогда второй кейс для того же OnMouseEnter при условии ElseIfTrue будет Hide MyMenuItem.
И пара нюансов:
- для чего вам пустое состояние? Крайние состояние, такие как пустые и перегрузочные, лучше прорисовывать в конце когда основная архитектура готова и все (=большинство) требований устаканились. А иногда можно и на графического дизайнера это оставить);
- лучше сразу указывать нормальные названия всем состояниям, переменным и состояниям, в будущем запутаться не долго.
Если что-то я криво описал — укажи, переформулирую)
Сегодня сам разобрался частично, а точнее проверил состояния и нашёл OnMouseEnter.
Оказывается для пунктов меню действуют только 3 состояния: OnClick, OnFocus, OnLostFoсus, то есть для необходимой мне реализации вида меню обычных выпадающих списков этих действий недостаточно. Тем самым в моём случае не нужно использовать стандартное меню, а делать его самому из обычных блоков Rectangle, сгруппировав и прописав условия проверки, указанные вами, которые я ещё не знал до этого момента; оказывается это очень удобно использовать, надо только знать как.
Кстати, не порекомендуете случайно хорошую книжку по Axure, желательно на русском и в электронном виде, где множество подобных примеров решений частых ситуаций поведения объектов при проектировании?
Я только первый месяц занимаюсь Axure и ещё вероятно не всё изучил. Пустое состояние использовал, потому что не знал, что по умолчанию можно сделать блок скрытым, точнее во вкладке Style > Location+Size опция Hidden. И не использовал ранее условия для событий Case'ов по кнопке Add Condition, что считал на первое время сложным. Теперь конечно я понимаю, что то моё пустое состояние было избыточным и не нужным, и можно организовать всё это более грамотно.
Про названия знаю, стараюсь указывать, тут для примера написал.
После установки Axure вам будет представлен интерфейс, как показано на следующем снимке экрана.
Этот экран всегда будет отображаться при запуске, пока вы не решите не показывать его.
- Начать новый файл в Axure
- Откройте существующий проект Axure
Давайте теперь создадим новый файл с Axure.
Когда вы нажмете кнопку «НОВЫЙ ФАЙЛ», вы увидите следующий экран для создания нового прототипа.
Как показано на рисунке выше, рабочее пространство разделено на 6 частей.
- страницы
- Библиотеки
- Инспектор
- Контур
- Мастера
- Площадь дизайна
Давайте пройдемся по этим частям по очереди.
страницы
В этом разделе показаны страницы, над которыми вы работаете. Эти страницы отображаются в древовидной структуре по умолчанию следующим образом. Домашняя страница имеет следующие дочерние страницы.
Главная
Как и большинство доступных инструментов, этот раздел позволяет вам взаимодействовать со страницами вашего прототипа. Вы можете использовать его для планирования экранов в предполагаемом прототипе.
Панель библиотек
Общие библиотеки включают в себя основные фигуры, кнопки, текст заголовка, Hot Spot, панель Dynamic и т. Д.
С Axure RP, для всех ваших требований к прототипированию, появляется очень эффективный контроль, называемый Hot Spot. Используя этот элемент управления, вы можете обеспечить взаимодействие щелчка практически с любым элементом управления в пользовательском интерфейсе. Пример будет приведен на последующих страницах.
В библиотеку форм, как следует из названия, включены элементы управления List Box, Checkbox, переключатель, текстовая область и текстовое поле. Для разработки формы пользовательского ввода вы можете использовать элементы управления из этого раздела в библиотеке.
Меню и таблицы имеют традиционную структуру. Такая структура, возможно в горизонтальной или вертикальной форме, доступна в этой библиотеке, называемой Меню и таблицы.
Наконец, что не менее важно, идет библиотека разметки, которая включает в себя стикеры, маркеры и стрелки. В основном, это будет использоваться для аннотаций в вашем прототипе.
Площадь дизайна
Это настоящая площадка для инженеров UX. Это пространство будет использоваться для создания прототипов в соответствии с вашими требованиями. Для начала обратитесь к области, выделенной цифрой 6 на следующем скриншоте.
В этой области вы можете перетащить нужные элементы управления из библиотеки. Давайте создадим быструю строку меню, используя библиотеку.
Как только вы перетащите элемент управления в область дизайна, вы увидите следующий экран.
Как показано на приведенном выше экране, Axure RP достаточно интеллектуален, чтобы отображать нужный текст в меню. Учитывая, что это строка меню, Axure RP автоматически создал File, Edit и View как меню в элементе управления.
Как указано стрелкой, в разделе инспектора отображаются свойства элемента управления. Используйте этот раздел, чтобы создать имя для вашего элемента управления для уникальной идентификации при создании сложных прототипов.
Давайте дадим имя этому элементу управления TestMenu. Мы будем использовать это имя в следующих примерах.
Свойства страницы
При планировании прототипа имеет смысл иметь четкое представление о пользователе и, следовательно, об устройстве, на котором будет демонстрироваться / просматриваться прототип. Для лучшего взаимодействия с прототипом в Axure предусмотрена функция настройки свойств страницы.
Как показано на рисунке выше, область, обозначенная цифрой 3, является разделом свойств страницы. В этом разделе вы сможете увидеть выпадающий список взаимодействий и подраздел Adaptive.
Давайте обсудим эти разделы подробно.
В разделе «Взаимодействия» рассматриваются возможные взаимодействия (случаи) со страницей. Как видите, случай взаимодействия OnPageLoad обрабатывает события при загрузке страницы. В большинстве прототипов инженеры UX предпочитают помещать анимацию, чтобы произвести первое впечатление. Это конкретное событие для отображения анимации обычно вызывается в случае OnPageLoad.
Благодаря адаптивному разделу Axure RP начинает адаптивный веб-дизайн. В настоящее время разработка опыта для веб-сайтов не является достаточной, наряду с этим, предприятия предпочитают, чтобы мобильные сайты сосуществовали с веб-сайтами.
Одна и та же страница, если смотреть с разных размеров экрана и макетов, представляет собой разные адаптивные виды. Как правило, адаптивные представления предназначены для мобильных телефонов и планшетов. Axure предоставляет эту функцию адаптивных представлений, так что инженеры UX могут контролировать адаптивный аспект прототипов с нуля.
Панель инспектора для виджета
Панель взаимодействий виджетов является наиболее важной частью Axure. Вы можете увидеть эту панель, щелкнув любой виджет в области дизайна.
Рассмотрим пример пункта меню, который мы использовали в предыдущем разделе. Выберите пункт меню с именем TestMenu и обратите внимание на раздел, выделенный на следующем снимке экрана.
Как вы можете видеть на вкладке Свойства, существуют различные взаимодействия, такие как OnMove, OnShow, OnHide и OnLoad. Они относятся к элементу управления меню в целом.
Теперь нажмите «Файл» в элементе управления меню.
Вы заметите изменение типа взаимодействий на панели свойств виджета. Кроме того, он предоставляет гибкость, чтобы дать имя для этого пункта меню. Давайте возьмем случай OnClick в качестве примера.
Панель «Примечания». В самой панели инспектора имеется подраздел «Примечания». В области заметок вы сможете добавить некоторые запоминающиеся моменты для управления по вашему выбору.
Эти моменты будут понятны, когда мы погрузимся в пример в следующей главе.
Сетки и направляющие
Для прототипа с максимальным уровнем качества и точности инженерам UX требуется умение совмещать / позиционировать элемент управления с другим элементом управления.
Например, предположим, что вы хотите показать всплывающее окно входа в систему. Если это всплывающее окно должно отображаться в центре экрана, вам нужны общие размеры экрана. Кроме того, чтобы выровнять точно в середине экрана, у вас должны быть сетки, чтобы выровнять его соответствующим образом.
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.
Читайте также: