Суперпрототип в Axure: упрощаем себе жизнь с JavaScript

327 full reads
417 story viewsUnique page visitors
327 read the story to the endThat's 78% of the total page views
6 minutes — average reading time

Суперпрототип в Axure: упрощаем себе жизнь с JavaScript

В идеальном мире так: каждый проектировщик - это человек-филармония, обладающий огромным количеством софт-скиллов. Он не только первоклассный дизайнер интерфейсов и прекрасный копирайтер, но и умеет все эти ваши "HTML+CSS+JS". А еще он сносный сисадмин, шарит в SEO и умеет по полнолуниям обращаться продуктовым менеджером. Но это в идеальном мире. В реальности все иначе. Однако мы же все стремимся к идеалу, верно? Так вот в этой коротенькой статейке я расскажу, как заюзать JS в Axure, обладая минимальными знаниями этого прекрасного языка программирования. Или даже вообще без них.

Зачем?

Начнем с очевидного: Axure и так вся на JavaScript. Используя все эти "if/else", вы уже программируете, только в визуальном редакторе (который послушно преобразует в JS вашу логику). Так что само собой напрашивается идея внедрить в прототип собственный кусочек кода, который позволит сэкономить время или вывести интерактивность на новый уровень.

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

Как?

Тут несколько вариантов: есть посложнее и попроще. Сложный подразумевает подключение внешнего плагина к прототипу через share.axure.com или внедрение собственной надстройки прямо в прототип. Так, например, можно врубить аналитику или сделать динамический input со сложной валидацией. Простой вариант поможет выполнить нативные JS-функции, вроде вывода сообщений или обращений к элементам.

Сложные варианты мы не будем сейчас рассматривать, они заслуживают отдельного поста (и ведь заслужат, в ближайшее время). Ограничимся пока простым.

Чтобы выполнить любую джаваскриптовую команду, достаточно при нужном событии объявить открытие в текущем окне не обычный ссылки, а конструкции вида "Javascript:НАЗВАНИЕ_КОМАНДЫ;" (причем не важно, напишете вы JavaScript, Javascript или javascript - Axure понимает все три команды).

В ряде случаев целесообразно использовать "Javascript:void(НАЗВАНИЕ_КОМАНДЫ);", но об этом я расскажу в другой раз.

Кажется сложным? Вовсе нет.

Простой пример: если какой-нибудь кнопке на OnClick в Open Link -> Current Window -> Link to an external url or file назначить не открытие внешнего URL, а просто вписать "Javascript:alert('Прекрасно, вы прошли квест!');" вот так:

Суперпрототип в Axure: упрощаем себе жизнь с JavaScript

то при нажатии на нее вы увидите результат выполнения alert'а:

Суперпрототип в Axure: упрощаем себе жизнь с JavaScript

Команда "alert('Текст сообщения');" очень простая, но позволит кое-где изрядно подсократиться на попапах и разного рода информационных сообщениях. При этом никто вас не ограничивает в командах - можете брать любую, не только alert (из подобных есть еще prompt и confirm). Просто загуглите, возьмите готовый JS-код и вставьте его после "Javascript:".

Более того, команды можно комбинировать. И (сейчас я кому-то открою новый мир) - прямо из таких команд можно обращаться к элементам прототипа, проставлять им текст, скрывать их или показывать. Для этого нужно лишь найти их через "$axure('@НАЗВАНИЕ_ЭЛЕМЕНТА')". Например, если у меня есть элемент с названием "seller items", я могу манипулировать им с помощью команды " $axure('@seller items')"

Просто зацените:

Сокрытие блока в зависимости от выбора пользователя через JS
Сокрытие блока в зависимости от выбора пользователя через JS
Сокрытие блока в зависимости от выбора пользователя через JS

Вот что тут происходит, построчно:

1. "JavaScript:" - сообщаем Axure, что нужно выполнить JS;
2.
"var isHide = confirm("Скрыть блок?");" - командой "confirm" выводим окошко с вопросом;
3.
"if(isHide) {" - если пользователь ответил утвердительно, то...
4. "
$axure("@seller items").hide();" - скрываем элемент/группу с названием "seller items";
5. "
}" - закрываем скобку условия (обязательно, скобки и кавычки - это важно).

То есть в результате выполнения этого кода пользователю покажется окно с вопросом "Скрыть блок", и если он ответит положительно, то блок с названием "seller items" будет скрыт.

Кроме ".hide()" можно использовать ".show()" , "text()", "val()" и так далее (полный список команд даже не смогу привести - гугл знает их лучше меня).

Кто-то сейчас скажет, что "нафига, это ж спокойно решается через функции самой Axure". Да, решается. Но значительно дольше: нужно выводить динамическую панель лайтбоксом, вешать на кнопки разные обработчики и так далее. Причем конкретно этот пример - очень и очень простой. А представьте, что можно вытворять таким образом с текстовыми полями?

И все?

Конечно, нет. С действительно сложными функциями, вроде валидации полей или пересчета каких-нибудь цен, так работать не очень удобно: нет переиспользования кода, каждый раз приходится копипастить заново или использовать триггеры. Да и при работе с мастерами могут возникнуть проблемы. Но для базовых вещей такого подхода хватит. А о более сложных я расскажу в следующих постах. Подписывайтесь.

Еще больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале.