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

Чаще всего я использую её, если нужно встроить в прототип какой-нибудь iframe. Например, Яндекс.карту. Или видео с Ютуба.

Заметил такую возможность ещё в пятой версии программы, в 2010 году. И она до сих пор с нами в десятой версии, спустя 14 лет.

Сейчас объясню, как это работает, и покажу пример.

Кстати, если кто-то не знает, что такое Axure, я недавно написал небольшую статью на эту тему.

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

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

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

Теперь пропишу имя для верхнего прямоугольника: «box1».

И что же я вижу?

Ну да, название прямоугольника оказалось внутри комментария. И теперь я понимаю, что, если вместо «box1» написать тег, закрывающий комментарий, а затем тег, открывающий комментарий, то между ними можно вставлять что угодно и этот код попадёт в сгенерированную версию страницы. Давайте проверим.

Axure 10 автоматически преобразовала два коротких тире и знак «больше» в стрелочку, но на результат это не влияет.

Попробую встроить Яндекс.карту. Для этого мне нужен код виджета. Я иду на Яндекс.карты, нахожу нужный мне адрес, кликаю по трём точкам в правом верхнем углу, выбираю пункт «Поделиться» и копирую код виджета с картой.

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

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

Но теперь карта находится в левом верхнем углу получившейся страницы. А если я хочу разместить её там, где мне самому нужно, то в этом конкретном случае придётся сделать две вещи:

Первая: в коде, который я получил от Яндекса, нужно оставить только часть, обрамлённую тегами <iframe>, и использовать её:

Вторая: поместить прямоугольник в динамическую панель. После этого — куда мы её, панель, положим на экране — там окажется и её содержимое. Правый клик по прямоугольнику → Create Dynamic Panel.

Вот и всё. Дальше можно опубликовать прототип в облаке Axure — и всё будет работать так, как и задумывалось:

Вот ссылка на получившийся прототип: https://1a1ysi.axshare.com

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

А иногда, в совсем редких случаях, безумцы вроде меня могут сделать полноценную посадочную страницу для каких-нибудь своих товаров и услуг, разместить её в бесплатном облаке Axure и пользоваться им в качестве халявного хостинга. И круто, что можно потом эту страницу редактировать и переопубликовывать, не влезая в сгенерированный код, а делая всё в самой Axure.

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

Полезные ссылки:

Ссылка на получившийся прототип.

Группа по Axure Вконтакте. Вместе с падением популярности Axure упала и актуальность группы. Но нет-нет — да придёт кто-нибудь с вопросом по работе в программе, и я делаю очередной обучающий ролик.

Уроки по Axure в базе знаний Проектората.

Мини-курс Антона Григорьева: Axure 7 для начинающих за 100 минут.

Ну и мой Телеграм-канал. Он про проектирование интерфейсов и работу на фрилансе.