Axure. Удар интерактивом по интерфейсу. Пробы и ошибки

    Axure


    • Действительно ли этот продукт не более чем инструмент прототипирования?
    • Может ли UI designer полностью перейти на работу в Axure, отказавшись от других инструментов?
    • Какие сильные и слабые стороны у этой программы?



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

    Возможно жизнь уже не будет такой, как до 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 разработки. Вау! Это правда любопытно, эдакое визуальное программирование для домохозяек.

    1. Клик на рабочей области экрана, Page Alignment во вкладке Style ставим выравнивание по центру — дабы интерактив в браузере отобразился по центру
    2. В Properties ищу сценарий OnPageLoad — сработает во время загрузки страницы
    3. Выбираю Set Size слева — хочу задать свой размер
    4. Дальше клик по элементам, которые “тянем” — хедер и футер
    5. Теперь клик в иконку fx — раздел для продвинутых :)
    6. Выбираю Windows.Width — оно перехватит “шифровку” о ширине браузера и присвоит эту ширину слою
    7. И обязательно в выпадающем списке Anchor выбрать Center — для начальной точки, из которой тянуть



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


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

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

    1. Перетягиваю в рабочую область элемент Button — его можно настроить под кнопку
    2. Во вкладке Style задаю высоту — мне удобнее все спексы держать кратными 5 или 10
    3. Поля L,R,T,B внутренние отступы со всех сторон — левый делаю 44 с учётом сетки 10px и будущей иконки 24x24px
    4. Далее привожу цвета в соответствии с макетом и отправляю кнопки в шапку



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


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

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

    1. Выбираю все кнопки, к которым применить Onhover
    2. Захожу во вкладку Properties — там все стили для взаимодействия
    3. Выбираю MouseOver — событие, которое нам нужно
    4. В новом окне отмечаю чекбокс рядом с Fill Color — задаю новый цвет



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



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


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

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



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



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


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

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

    1. Сначала каждую группу перевожу в динамическую панель — выбираю Convert to Dynamic panel в контекстном меню в списке элементов
    2. Правый клик на состоянии State1 внутри панели
    3. Делаю дубликат State2 кликом по соответствующему разделу в контекстном меню
    4. Начинаю редактировать артборд верхнего состояния State1 — удаляю оттуда кнопку и уменьшаю высоту карточки
    5. Делаю всё в той же вкладке Properties событие наведения мыши OnMouseEnter (...Hover, кстати, для динамических панелей не работает)
    6. В новом окне клик в колонке слева — выбираю действие Set Panel State
    7. Выбираю нужную мне карточку и состояние панели, на которое переключать
    8. Применяю этот сценарий ко всем тарифным планам



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

    Было




    Стало




    Если хочется более мягкого появления кнопки при наведении мыши, то можно в списке 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, чтобы скорее перейти к тестам и выявить все проблемы будущего продукта. На что превью даже через мобильный браузер вполне годится.

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


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

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

    • отсутствие корректной поддержки SVG (иконку можно вставить, она будет динамически ресайзиться, но цвет изменить или подвигать кривые не выйдет)
    • отсутствует внятный генератор спецификаций, размеров и отступов.
    • экспорт в PNG выдаёт некачественную конвертацию всего текста в графику
    • не хватает масок, сложновато импортировать фотографии, а потом подгонять их по размеру или обрезать.
    • машинный код у девелоперов может вызвать гомерический хохот, возможно падение со стула, получение травм, ушибов.

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

    Очень полезный канал с обучалками по “Акшуре” у Ekamelev. Рекомендую!

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

      Отсутствие настройки трекинга и open-type. Первый вообще очень важная штука для многих современных дизайнов.
      Отсутствие настроек дизайна стандартных компонентов (инпут, чекбокс, радиокнопка и т.п. — индивидуальный дизайн приходится создавать нагромождая костыли и велосипеды, и времени это отнимет на порядки больше, чем отрисовка в иллюстраторе например)

      В целом солидарен. Акшур действительно может быть инструментом дизайна. Однако прибегать к нему нужно не во всех случаях. Часто он подчиняет себе полёт мысли — начинаешь слишком сильно отвлекаться на проработку интерактива и желание воссоздать реальное поведение интерфейса максимально приближенное к конечному результату (а так как это сложно и порой просто невозможно, то ковыряние в Condition Builder начинает попросту убивать дизайн).

      Жду когда внедрят больше необходимых для дизайна инструментов и тогда, наверное, перейду на него с иллюстратора.
        0
        Я обычно пошагово подхожу к процессу, тогда весь интерактив можно делать ближе к заключительной части.
        0
        Вот так всегда. Сравниваем редактор фотографий с инструментом проектирования интерфейсов сайтов, и пытаемся использовать только что-то одно? Это как строить избу одним только топором — можно, но добавление пилы и рубанка делает процесс приятнее и быстрее.

        Я использую Axure для прототипирования и утверждения лайаута и структуры c менеджером проекта, верстальщиком и прогерами. Потом уже на чистовую делаются макеты и собирается первью для клиента в Axure.
          0
          Сравниваем редактор фотографий с инструментом проектирования интерфейсов сайтов

          А кто виноват-то? Верстальщики уже настолько привыкли работать в фотошопе, что не стесняются ругать обидными словами тех, кто им макеты сайта не в psd сдает. Отсюда такие сравнения. Вот как бы вы аргументировали перед верстальщиками, что акшур — лучше фотошопа для таких нужд?
            0
            Макет в акшуре можно рассматривать как часть ТЗ для верстальщика, дополнительно к основному макету в psd. Я вообще верстальщикам отдаю fw.png, но они старой школы )
              0
              Я вообще верстальщикам отдаю fw.png

              То есть без исходника (psd/ai/проч)? Расскажите пожалуйста, как они потом работают с таким макетом в формате png?
                +1
                … вот и выросло поколение… )
                fw.png — формат Adobe Fireworks — многостраничный, слоенный, векторно интегрированный png )
                  0
                  :)

                  Что скажете про Fireworks? Почему его забросили? Имеет ли смысл его продолжать использовать, несмотря на заброшенность, на замену Иллюстратору/Фотошопу/Акшуру?
                    0
                    Почему его забросил адоб? Потому что пид**сы! )

                    Мы используем его по инерции, так как лучше еще ничего не придумали.
                    Лично я им пользуюсь с 4 версии, когда он был еще macromedia. Так что от команды зависит. Но в CS6, последней версии, он достаточно адекватно конвертит в psd, и я этим постоянно пользуюсь.
                    Ждемс во что выродится Adobe XD.
                      0
                      Sketch отличная замена Fireworks. Еще в прошлом году он обогнал FW по нужным функциям. И недостатки похожие…
                        0
                        Осталось купить мак )
          +1
          Немного от меня:

          1. Изображения очень удобно вставлять через Динамические панели. Делается динамическая панель, ее фоном выбирается картинка, выбирается тип заполнения (как правило Stretch to Cover), и теперь меняя размеры панели, у нас ресайзится изображение.

          2. С помощью динамических панелей, используя 1 пункт можно делать довольно интересные карусели, и другие интерактивные элементы. Вот примеры из последнего проекта. Проект еще не сдан, так что лоск со шрифтами и цветами еще не навели. http://utm5kc.axshare.com

          3. По поводу разнообразия форм и кнопок. Этот вопрос решается со временем. Накапливаются проекты, в проектах накапливаются различные реализации, с каждым проектом работать все проще и проще.

          4. Есть приложение для мобильных, работает с облаком от Axure. В целом можно быстро показать прототип, но конечно не совсем то, чего хочется.

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

          Вообще у меня есть мнение что почти весь интерактив в axure можно реализовать, за исключением каких то совсем моушен элементов.
            0
            Спасибо за Ваши 5 коп.
            Действительно, д-панели для картинок — это вариант, но в дальнейшем могут немного усложнить процесс подгонки или изменения изображения. Я иногда немного читерю и просто отрезаю лишнее инструментом Slice :)
            Это если нужно вставить быстро временное изображение.

            по п.4 — к сожалению не решается проблема, чтобы дистанционно показать клиенту реализацию? Не предложишь же ему ставить какую-то «Акшуру», логинится в мой аккаунт и потом открывать нужный проект, среди множества тех, которые его не касаются…

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

              Загружаем в облако, и отправляем ссылку клиенту. В целом для оценки прототипа годится. Axure, конечно криво, но выбирает чаще всего нужное разрешение. Но это все очень редко. Обычно ограничиваемся мобильным прототипом под одно разрешение, этого как правило хватает что бы показать клиенту.

              Продвинутый моушн акшур может и потянул бы, но трудозатрат на этот элемент будет бесконечное количество.
            0
            Акшура была бы прекрасная всем, если бы не модель ценообразования.
            Связка Sketchapp и https://zeplin.io даже с учётом ещё покупки полного пакета Creativ Cloud получается почему-то дешевле, чем Акшура. :)
              +1
              Стоило задуматься о том, чтобы начать делать прототипы/зарисовки в специализированной среде, а не в фотошопе/салфетках соотвественно, как сразу на хабре попадаются статьи о замечательном Sketch и теперь вот Axure. А какие еще инструменты стоит рассмотреть? А то я чуть Sketch не купил (99$).
                0
                гуглите Affinity Designer. но для меня это совсем темная лошадка.
                image
                  0
                  Adobe XD, Figma. Но Sketch пока выше их на голову. Вложенный символы — им за это памятник нужно ставить. Хотя у Figma есть возможность работать нескольких людей одновременно — очень интригует.
                    +1
                    Скетч — ужасная работа с символами((( Как будто разработчики не видели индизайн-фарйворкс и конкурентов. Многие их даже не используют. Но великолепная поддержка кодеров!

                    Affinity — самый навороченный. Символы, Assets, Styles, продвинутая типографика, крутой экспорт в SVG. Нельзя работать с кодерами(((
                    Figma — Символы. Совместная работа офигенна. Маркетолог, проектировщик думает над текстом и смыслом, дизайнер оформляет модно. Переводчики переводят. Нет работы с кодерами(((
                    Adobe XD — символы и Flinto/Marvell.

                    Axure прекрасен для тестов в реальности и интерактива. Но настолько тяжело и медленно с ним работать, что в дополнение к нему стоит для скорости использовать Sketch, Photoshop, Illustrator и т.д. — для быстрого набрасывания красоты.
                    +1
                    Отмечу аналоги Justinmind и Proto.io
                    Justinmind — близок к Axure. Работа с анимациями и интерактивом проще и быстрее.
                    Proto.io — менеее близок к Axure, но с великолепными удобными анимациями и переходами между страниц.

                    Я периодически использую Axure (сложное многостраничное) и Proto.io (интерактив в html).
                      0
                      Посмотрел уроки по Justinmind. Внешне выглядит стильно, но мне показалось что проектирование interactions реализовано не намного проще чем в Акшуре. А что насчёт кода? Насколько применимый глазами разработчиков код, который генерит JiM?
                        0
                        Кажется у всех известных мне сервисов прототипирования код просто невозможный для применения разработчиками. Мне Justinmind показался удобнее и быстрее в мелочах. Но когда прямо закопаешься в многостраничном проекте (админке?) понимаешь удобство и универсальность Axure.

                        Если охота посмотреть на хороший код для разработчиков — можно поизучать такие штуки как bootstrapstudio и Webflow (это не совсем прототипирование, больше генерирование кода :) ).
                      0
                      del
                        +1
                        А учитывая то, что Axure теперь научилась создавать адаптивные прототипы, ей просто цены нет. Не удивлюсь, что следующим шагом в её развитии окажется отдельный экспорт вёрстки и стилей проектов под различные платформы (CMS).
                          0
                          Не важно в каком замечательной программе выделали дизайн, если вы не можете передать его заказчику (хотя возможно это вы и имели ввиду в последнем пункте)

                          Ну и к явным минусам я отнесу невозможность рисовать иконки… а я порой в скетче и иллюстрации рисую (ну это я к тому что один софт под все задачи)
                          image
                            0
                            В акшуре есть одна проблема — её создатели.
                            Парадокс, но создаётся впечатление, что в продукте, специализированном для UX, работают откровенно слабые проектировщики.

                            Проблемы начинаются ещё в работе с пунктами меню и подстерегают тебя там, где ты совсем не ждёшь подвоха:

                            Хочешь выделить текст для копирования в каком-нибудь инпуте? Ctrl+A — для слабых, сильные выделяют мышкой!

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

                            Ты как клёвый парень всё раскидал по полочкам и папкам в прототипе и хочешь с помощью клика в рабочей области найти нужный слой в окне слоёв? — На, пожалуйста, нужный тебе слой мы выделим жирным, но мы приняли решение развивать твою память и теперь все родительские папки, в которых находится слой, мы оставим закрытыми и такими же как остальные. Кликай, узнавай, развивай!

                            И вот этих мелочей — вагон и маленькая тележка.

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

                            Со скетчом такого не было.
                              0
                              Именно сейчас с PSD в AXURE мигрируем. Очень нравится что наглядно можно показать, работу сайта. А не на пальцах с кучей картинок и текстами. А потом еще и с версткой вдруг не так хотели, не так поняли.
                              Очень радует, что меньше приходится спорить с клиентами. Так как все наглядно.
                              Картинки и иконки, ну да в векторных и растровых редакторах. Зато верстальщику, красота, все понятно. И картинки на половину готовы ))
                                0
                                В любом случае — с почином!
                                однако бесит, что в 21-м веке они до сих пор корректное отображение веб-шрифтов не могут наладить под всеми ОС. Вопрос в том, как будете передавать ресурсы верстакам? Код то так и неахти на выходе.

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

                              Самое читаемое