axure что это такое

Почему Axure могла нагнуть Sketch и Figma, но не нагнула

Эта статья не является историческим справочником с датами, вехами развития и секретными инсайтами, а лишь мой взгляд в историю развития продуктов и размышление о том почему Axure, имея всё то, за что мы так любим Скетч и Фигму, ещё задолго до появления оных, теперь ютится на задворках, но занимает особое место в сердцах хардкорных проектировщиков.

А ещё: Это не сравнение кто круче и не попытка засрать ваш любимый инструмент работы, каким бы он ни был.

Моё знакомство с Акшурой (здесь и далее я буду писать это название именно так) началось, нет, не с первых версий, как это часто бывает в подобных статьях, а с версии 6 или 7. Но те кто знает с какой периодичностью Акшура выпускает новые мажорные версии, понимает, что это было довольно давно.

Впервые открыв Акшуру я сразу понял, что это комбайн. Реальный. Огромный комбайн с кучей всяких функций. Но начав изучать её я понял, что все основные функции легко доступны и логика расположения панелей очень напоминает, как ни странно, Фотошоп. Это было приятно, ведь тогда Фотошоп ещё использовали для рисования сайтов и прочих интерфейсов. Да, было такое время. Вам, поколению (я даже не знаю какую букву латинского алфавита сейчас надо подставить), этого не понять. Такое знакомое расположение панелей, думаю они выбрали не случайно.

Давайте пробежимся по функциям, которые уже были в версии 7 и, которые широкое распространение получили только с приходом Скетча и Фигмы.

Что есть в Акшуре и нет в Фигме / Скетче

Самое смешное, что даже сам процесс создания и редактирования шейпов в Акшуре гораздо ближе к современным принципам «рисования» в Скетч / Фигма чем в Фотошопе тех лет. Т. е. по факту в Акшуре можно нарисовать финальный дизайн ничем не хуже чем в Фигма. Единственная проблема будет с тенями (в Акшур они не очень) и эффектами наложения слоёв (которых в Акшуре просто нет), но честно говоря наложением слоёв, лично я, и не пользовался никогда.

Адобе, создав вполне не плохой, на мой взгляд, XD всё же смогли если не запрыгнуть, то хотя бы зацепиться кончиками пальцев за уходящий поезд и сейчас трепыхаются по шпалам, но держатся. А вот Акшур запрыгнуть не успели и фактически бегут за поездом в гордом одиночестве и на них с поезда изредка и с грустью в глазах поглядывают проектировщики, которые уже давно взяли волю в кулак всё более невозмутимо открывают Фигму.

На мой взгляд Акшур в какой-то момент пережила экзистенциальный кризис, отголоски которого испытывает до сих пор. С одной стороны стремясь быть похожей на героев нового времени, с другой придерживаться своих концепций и оставаться комбайном для всего и сразу. И, кажется, разработчики выбрали первый путь и стараются держать руку на пульсе, понимая, что мир изменился. Об этом говорит хотя бы то что Акшура теперь поддерживает приём файлов и Скетча, и Фигмы и даже XD (и ни один из них не поддерживает файлы Акшуры). Правда, я не знаю никого, кто будучи в здравом уме захотел бы перейти из Фигмы в Акшур.

Этот пост для меня, как некая дань уважения к Акшуре и ностальгия по работе в ней. А также взгляд в будущее с робкой надеждой на реннесанс Акшур в массовом дизайнерском сознании. Ведь она сейчас стремительно меняется и, по сути, уже не хуже Скетча и точно лучше (оценочное суждение) XD. В новой версии появился CSS код для разрабов и даже настройка анимации для дизайнеров. Да, что я вам рассказываю. Просто проверьте сами.

Источник

Интерактивный прототип в Axure за 20 минут

Пока я писал о проектировщиках и прототипах, внезапно выяснилось, что многие читатели не представляют, о чём идёт речь. Поэтому сегодня я решил рассказать о том, что такое интерактивный прототип, сделанный в Axure (произносится как «Экшер», а я привык говорить «Акшура»). И не только рассказать, но и показать.

Если совсем грубо, то интерактивный прототип — это набор связанных друг с другом html-макетов. Только работали над этими макетами не дизайнер с верстальщиком, а проектировщик в специализированной программе, позволяющей сделать эту работу в разы быстрее. В чём будет различие в результате? Прототип, подготовленный проектировщиком, в отличие от макетов, подготовленных верстальщиком, не предназначен для разработки. Он призван очень быстро и наглядно продемонстрировать то, что исполнитель будет воплощать в жизнь на следующих этапах. Это всё равно, что трёхмерная модель готовящегося к строительству здания. На её создание уйдёт гораздо меньше времени, чем на постройку, и она позволит виртуально побродить по будущему проекту.

Выгоды от прототипов сложно переоценить.

Специально для Хабра я записал процесс создания простого типового прототипа. Я его взял из головы, целью было продемонстрировать, с какой скоростью проделывается подобная работа. Из видео можно понять, что за 20 минут опытный проектировщик может сделать уже что-то, что можно обсудить и дать обратную связь. Плюс видно, что все сквозные и списковые элементы сделаны с помощью мастеров, что позволит, редактируя один мастер, вносить изменения в весь прототип. Не нравится название пункта меню в шапке? Исправляем одно слово, и это исправление применяется ко всем страницам. Хочется изменить внешний вид отдельной работы в списке портфолио — то же самое. Редактируем отдельный мастер, а затем выравниваем результат на странице со списком работ.

Вы также заметите, что в ролике я пользуюсь вторым прототипом, в котором собраны основные типовые элементы интерфейса. Об этом я постоянно твержу участникам своей группы по Axure — заводите себе подобные «мега-прототипы» и сохраняйте в них все те вещи, которые явно повторяются от прототипа к прототипу. Это увеличит вашу скорость работы. И это удобнее, чем открывать разные свои старые прототипы в поисках нужного куска интерфейса.

Как я уже говорил, сгенерированный прототип представляет собой набор html-файлов, которые можно выложить либо на специальном сервисе, предоставляемом самой Axure, либо на любом своём хостинге. Клиенту лишь нужно будет дать ссылку. Вот ссылка на прототип, который я сделал в ролике:

Не знаю, готов ли тот хостинг к Хабраэффекту, но готов рискнуть.

Попробую предвосхитить некоторые ваши вопросы.

Ну вот и видео. Использовалась бета-версия Axure RP Pro 7. Музычка ещё обрабатывается, скоро заработает.

Источник

Как сделать прототип сайта в Axure: пошаговая инструкция

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

Чтобы создать прототип простого сайта, открыть его в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и её базовые возможности. И, конечно же, владеть знаниями о прототипах и UX-дизайне.

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

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Что такое прототип сайта

Прототип — это детальная схема сайта. С его помощью легко продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать всё это с заказчиком.

Обычно прототип создают чёрно-белым, чтобы сфокусироваться на структуре и расположении контента, а не на красивой обложке.

На встрече с заказчиком делают примерный план сайта на бумаге. После этого — конструируют интерактивный прототип и обсуждают возникшие вопросы, исправляют ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.

Как сделать прототип сайта

В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продаёт строительные блоки.

Скетч — это план организации информации на странице. На его основе создают уже кликабельный прототип. Прототип удобно делать в программе Axure RP. Это полноценный инструмент для сложных макетов сайтов и приложений.

Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure, разобраться в интерфейсе и его базовых функциях.

Создаём новый проект в Axure RP

Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта — главная, блог и запись в блоге.

Создаём новый проект: File → New. По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.

Чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне Pages и выбрать пункт Rename.

Сетка и ширина экрана

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

Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из CSS-фреймворка Bootstrap 4.

Зададим вручную нужную ширину экрана с помощью направляющей: её можно вытащить из линейки справа от рабочей области. Работает это так же, как и в Photoshop.

Чтобы сэкономить время и не задавать вручную все направляющие для макета, создадим их автоматически: выбираем пункт меню Arrange → Grid and Guides → Create Guides. В появившемся окне задаём размеры.

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

Основные элементы для прототипа

После того как мы задали сетку, переходим к созданию прототипа. Для этого используют элементы из библиотеки (окно Libraries).

Как использовать элементы

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

Создание шапки сайта

Шапка — это самый верхний блок сайта, где обычно размещают логотип компании, телефоны и меню сайта. В списке элементов выбираем Box 1, перетягиваем его на рабочую область и задаём нужный размер.

Мы задали размеры шапки, теперь разместим логотип, телефонный номер и меню. Логотип условно обозначим более тёмным прямоугольником Box 2.

Телефон компании пишем, используя элемент Header 3, а кнопку с вызовом формы обратной связи указываем с помощью уже готового Button.

С помощью текстового элемента Paragraph создаём и заполняем область меню.

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

Мастер — это специальный виджет, который применяют к нескольким страницам, но содержание редактируется один раз. Подходит для создания шапки сайта, подвала, формы заказа, меню и других повторяющихся элементов. Шапку, которую мы создали, можно конвертировать в мастер. Так её легче добавлять на другие страницы и редактировать содержимое с помощью одного клика.

Чтобы добавить шапку на новую страницу, перетащите на неё виджет.

Источник

Я постараюсь найти ответы на эти вопросы ниже. Сравнительно недавно я решил уйти от Adobe Photoshop к Axure, внезапно раскрыв для себя потенциал этого инструмента, не только как средства для прототипирования.

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Возможно жизнь уже не будет такой, как до Axure. Если и приходится иногда открывать Photoshop для растровых мелочей, то начинаешь понимать всю его неповоротливость. За последние годы он так сильно оброс функционалом, что когда возвращаешься к нему от заведомо простой, но не менее сильной альтернативы, подмечаешь насколько это очевидно. Причем 70% функционала UX/UI дизайнер даже не использует. В Axure же нет ничего лишнего, и многие свои типовые сценарии при разработке интерфейса я могу выполнять теперь гораздо быстрее.

Я считаю, что тот, кто любит свое дело, понимает что нужно постоянно обучаться и эволюционировать. Во-первых: новые инструменты упрощают рутину, во-вторых: фактор конкуренции нельзя не учитывать. Уже завтра дизайнера могут не взять на работу, если в его резюме не будет нескольких важных строчек, о которых несколько лет назад никто и не слышал. А другого дизайнера, возьмут, потому, что он давно работает с программами, более заточенными под дизайн интерфейсов. Это означает, что надо держать “руку на пульсе” как в технологиях, так и в инструментах. Я — консерватор и такой капитальный переход с Photoshop/Illustrator в Axure для меня в некотором роде звучал бы невероятно еще полгода назад. Но тут руки сами начали нажимать нужные кнопки…

Экспериментальная задача: из *.PSD в Axure

Чтобы окончательно развеять все свои сомнения, я решил конвертировать в интерактив один из своих макетов, которым завершал проект. Хотя до этого 98% проекта я показывал раскадровкой и вобщем-то все мои идеи и сценарии понимались и утверждались. Но это лишь часть плана. Вторая — была проверить и сравнить качество отображения элемента в связке “редактор-браузер”. Одна из фишек Акшура в том, что он эмулирует работу сервера (насколько я это себе представляю) и транслирует сразу же html/css параметры элемента, который вы только что нарисовали. Вы рисуете rectangle в мониторе слева, в правом у вас браузер. Вы жмёте Preview в нём и вот ваш элемент уже виден таким, каким его увидит весь интернет. Высший класс! Можно и код поинспектить, стили, отступы, что угодно.

Эта история не без подвоха

Дизайнеры всегда показывали клиентам что? Картинки! В этом весь подвох для первых. Макеты были нарисованы в редакторах, которые сглаживают шрифты, делают супер-тени и прочие эффекты. И что дальше делать девелоперам с этим всем, дизайнеров не волновало. Если дизайнер не объяснял в спецификациях направление тени, её размытие и прозрачность, девелопер делал тень сам “на глазок”. Со всеми вытекающими. Вот вам сразу пример, как отличается начертание шрифта Helvetica одного размера и плотности (верхний абзац отрисован в PS, нижний — это PrtScn из Axure):

Если подытожить общее визуальное впечатление от “Акшуры”: в нем что-то есть от классического векторного редактора (+ hotkeys совпадают с PS, что есть удобно), а что-то от классического такого Dreamweaver эпохи Macromedia. То есть WYSIWYG-редактор с элементами векторной риcовалки.

Теперь можно от теории перейти к практике. Начинаю вот с этим макетом (название изменено в интересах следствия), который есть в *.psd:

Динамические хедер и футер

Нужно для того, чтобы макет эффективнее смотрелся на высоких разрешениях. Дизайнеры часто прибегают к приему “макет поверх дополнительного фона и бросить тень вниз”. Пыль в глаза! Теперь это не нужно.

А нужно нам: в момент загрузки страницы передать о том, что нам надо несколько слоев растянуть на всю ширину экрана. Смотрите как просто. Всего лишь покликать по множеству разных слов откуда-то из области front-end разработки. Вау! Это правда любопытно, эдакое визуальное программирование для домохозяек.

Переношу кнопки

Надо перенести параметры шрифтов из PSD, высоту кнопок и так далее. К счастью, я почти все спецификации смог воспроизвести по памяти.

Нам нужно: в дальнейшем задать им стиль-onhover через CSS, а значит надо задать им высоту и отступы. Выровнять по осям X и Y внутри данного элемента. Еще углы скруглить. Это все для того, чтобы при наведении курсора фон под ссылкой-кнопкой закрашивался. Отступы тоже надо задать, с учётом будущей иконки левее каждого раздела в меню. Много всего, но делается реально в два счёта. Показываю:

Создаю первый интерактив

Профит на лицо — статичная картинка не покажет динамики. А в макете сделанном в Axure можно навести мышкой на элемент и сразу получить опыт и впечатления.

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

Нажатием F6 мы переносимся из Axure в браузер и проверяем как это работает:

Группировка элементов

Внутри каждой карточки растягиваю элементы в соответствии со спецификациями. Выравниванию отступы. В Axure прилипание к сетке работает как-то особенно хорошо. Элементы быстро клонируются как в PS комбинацией клавиш Ctrl-Alt + левый курсор мыши. Разработчики Акшура видимо знали своего потребителя, и откуда он придёт. И не ошиблись.

Что пока не нужно: Convert to Master
Быстрое внесение группы в окно Мастеров, через правый клик по элементу. Очень удобно для многостраничных интерактивов. В данном кейсе использовать смысла нет, а так удобно: в одном месте редактируешь, а меняется на всех экранах. Хотелось бы, чтобы в следующих версиях сделали не исключение всей группы из “Мастеров”, а только нужного элемента, например Label. В противном случае, изменив текст-заголовок мастер-карточки, этот текст пропишется вообще по всем страницам для нее.

Тестируем по F6 как ведёт себя кнопка внутри каждого тарифного плана в браузере:

Работа с динамическими панелями

Если говорить простым языком — это особая группировка элементов, чтобы применять к нему разные actions. Можно сделать прилипающее меню при ScrollDown, или примитивную карусель. У панелей активно одно из нескольких состояний, внутри состояния свой набор элементов. Получается эдакий динамический artboard.

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

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

Стало

Если хочется более мягкого появления кнопки при наведении мыши, то можно в списке Animate выбрать эффект Fade и задать длительность в миллисекундах.

Подведу некоторые итоги

На конвертацию макета ушло не более 4 часов. В итоге PSD превратился в машинный код. Кроссбраузерный, валидный, но тем не менее машинный. Я все еще
провожу исследование, насколько приемлемо отдавать результат в такой интерпретации, вместо исходника PSD. Никто не хочет делать двойную работу и переводить Axure > PSD, просто чтобы “было”.

Действительно ли Axure не более чем инструмент прототипирования?

Как оказалось, гораздо больше чем. В нём уже помимо UI дизайна можно разрабатывать дизайн микроитераций. Для этого есть все необходимое. Что куда исчезает, какой элемент в какой перерождается. Нет, супер-крутой анимации, которую дизайнеры делают в Adobe After Effects не получится, но получится результат с вполне реализуемыми эффектами: CSS-ные fade-, bounce-, swipe-, flip-эффекты и остальные дают в сочетании достаточно мягкие и точные микровзаимодействия. И все это вы видите в своём браузере и можете забирать код с нужными координатами и длительность…

Может ли UI дизайнер полностью перейти на работу в Axure, отказавшись от других инструментов?

Практически да! Хотя складывается впечатление, что Axure более ориентирован на разработку десктопных продуктов, чем мобильных. Пока что любой мобильный прототип приходится показывать через браузер. Анимация становится недоступна в таком режиме. Хотелось бы какого-то софтового решения и для мобильных: например, ставился бы клиент на телефон и по нажатию F6 Preview я бы выбирал, где показать результат. Смартфон мгновенно бы получал версию Axure с десктопа и воспроизводил в режиме preview. Иначе придётся пилить под ширину 320 и выше, а потом растягивать всё руками, чтобы отдавать ресурсы мобильным разработчикам. Но кто знает, может быть тут ценнее собрать полный high-fidelity prototype, чтобы скорее перейти к тестам и выявить все проблемы будущего продукта. На что превью даже через мобильный браузер вполне годится.

Какие сильные и слабые стороны у этой программы?

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

Из слабых сторон отметил бы:

В следующем выпуске хочу собрать интерактивную кредитку, для ввода своих платежных данных. Расскажу, что и как пошагово делал. Задам всю логику перехода по инпутам, возможно даже добавлю какую-то оправданную анимацию и конвертирую всё это в HTML/CSS. ↑ Stay tuned.

Источник

Axure что это такое

Infinite Interactions, Unlimited Power

Axure RP is the only UX tool that gives UX professionals the power to build realistic, functional prototypes.

Interactive Possibilities

Create UX prototypes with unlimited combinations of event triggers, conditions, and actions to truly explore digital experiences.

Use mouse, touch, and keyboard events to trigger interactions

Add conditions and variables to take your prototypes to the next level

Dynamic Content for realistic UX prototypes

Working text fields, droplists, and radio buttons are just a drag-and-drop away

Use multi-state dynamic panels to make everything from popups to scrollable, swipe-able, mobile screens

Create data-driven tables and grids that you can dynamically sort and filter with the repeater widget

Design for desktop, tablets, and phones on a single page and automatically show the appropriate view

All This Power and No Code Required

Making realistic, functional, UX prototypes has never been easier.

Download Axure RP 10

Emily, UX Researcher

A complete tool for UX Professionals

Built-in flow shapes and connectors that magically reflow make it easy to make diagrams in RP

Notes and Specifications

Add notes to capture requirements and specifications for developers and stakeholders

Share Functional Prototypes with just a click

Comments and Feedback

Gather feedback directly on-screen and use Slack and Microsoft Teams integrations for notifications.

Streamline hand off to developers with automated redlines, design assets, and CSS inspection.

Get Your Team on the Same Page

Embed fully-functional prototypes directly into Jira and Confluence, and use our Microsoft Teams and Slack integrations keep everyone up to date on the latest activity.

Design Tool Integrations

Figma

Adobe XD

Import layers from Adobe XD to Axure RP, editable and ready to add interactions.

Sketch

Quickly bring artboards from Sketch into RP to create beautiful UX prototypes.

Ravid, UX Project Manager

Download Axure RP 10

Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure

Legal

Resources

Support

Please include the following in your purchase order or quote request:

Email the PO or quote request to sales@axure.com,
or fax it to (415) 651 – 9527.

If you prefer, you can mail orders to:
Axure Software Solutions
Attn: Sales
707 Broadway, Suite 1600
San Diego, CA 92101, USA

Request a Free Education License

More than 30,000 Axure RP licenses have been provided to students, teachers, and classrooms around the world.

Students receive a one-year subscription that can be renewed each year of study.

Teachers receive a renewable two-year subscription and can request an additional classroom key for use in computer labs.

Click here to request a free education license.

If you would like to check the status of your request, email sales@axure.com.В Please do not resubmit your request.

Request information about Axure for Enterprise

See why the most successful companies in the world use Axure to accelerate modern software projects and deliver amazing experience.

Cookie Overview

These cookies are essential to provide Axure products and services. For example, cookies are necessary to remember that you are logged in to Axure Cloud.

These cookies collect information on how visitors interact with the website and products. They allow us to measure and improve the performance and customer experience of our website and products. (The information these cookies collect is anonymous.) For example, we use Google Analytics cookies to help us understand how visitors navigate the website and look for ways to improve the experience.

Источник