В идеальном мире так: каждый проектировщик - это человек-филармония, обладающий огромным количеством софт-скиллов. Он не только первоклассный дизайнер интерфейсов и прекрасный копирайтер, но и умеет все эти ваши "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('Прекрасно, вы прошли квест!');" вот так:
то при нажатии на нее вы увидите результат выполнения alert'а:
Команда "alert('Текст сообщения');" очень простая, но позволит кое-где изрядно подсократиться на попапах и разного рода информационных сообщениях. При этом никто вас не ограничивает в командах - можете брать любую, не только alert (из подобных есть еще prompt и confirm). Просто загуглите, возьмите готовый JS-код и вставьте его после "Javascript:".
Более того, команды можно комбинировать. И (сейчас я кому-то открою новый мир) - прямо из таких команд можно обращаться к элементам прототипа, проставлять им текст, скрывать их или показывать. Для этого нужно лишь найти их через "$axure('@НАЗВАНИЕ_ЭЛЕМЕНТА')". Например, если у меня есть элемент с названием "seller items", я могу манипулировать им с помощью команды " $axure('@seller items')"
Просто зацените:
Вот что тут происходит, построчно:
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". Да, решается. Но значительно дольше: нужно выводить динамическую панель лайтбоксом, вешать на кнопки разные обработчики и так далее. Причем конкретно этот пример - очень и очень простой. А представьте, что можно вытворять таким образом с текстовыми полями?
И все?
Конечно, нет. С действительно сложными функциями, вроде валидации полей или пересчета каких-нибудь цен, так работать не очень удобно: нет переиспользования кода, каждый раз приходится копипастить заново или использовать триггеры. Да и при работе с мастерами могут возникнуть проблемы. Но для базовых вещей такого подхода хватит. А о более сложных я расскажу в следующих постах. Подписывайтесь.
Еще больше букв и картинок про дизайн и проектирование можно увидеть на моем сайте и здесь, в дзен-канале.