Обзор Axure RP 10 beta
Поздравляю всех фанатов Axure, дождались-таки! ;)
28 января вышла Axure RP 10 beta.
Уже более 6 лет использую Axure для создания интерактивных прототипов сложных прикладных приложений.
Так сложилось, что, когда я выбирал инструмент для работы в условиях промышленной разработки, на рынке еще не было Figma и прочих модных сегодня инструментов. А когда Figma появилась, она была очень сырой и была только браузерная версия. Сегодня Figma хорошо обросла функциональностью, и некоторые продукты мы в компании делаем на ней. Но я больше сторонник того, что под определенные задачи пока стоит использовать определенные инструменты.
Ни Figma, ни Axure пока что не могут стать mono-инструментом в нашей компании.
Очень здорово, что Axure продолжает развиваться!
Axure 10 Beta доступна только подписчикам Axure RP9. Когда выйдет Stable release неизвестно. Но по моим расчетам, это произойдет не раньше конца Q2 2021.
👉 Уже можно скачать бету здесь: https://go.axure.com/download-beta или здесь http://axure.com/beta
👉 Чтобы стать приоритетным тестировщиком Axure RP, участвовать в качественных исследованиях, как респондент, вам стоит подать заявку здесь: https://axure.com/axure-user-council
Приглашаю вступить в неофициальное Telegram-сообщество Axure, в котором можно задавать вопросы и обмениваться интересными трюками: https://t.me/axure_chat (rus) / https://t.me/axure_rp (eng)
Мои личные мысли по поводу производительности
☝️ Figma Desktop это web-приложение обернутое в Electron, который создан на базе Chromium. Figma сделана на web-технологиях и это позволяет быть уверенным в том, что ваши прототипы (а как итог и production приложения) будут обоснованными и укладываться в возможности рендеринга браузера, в рамки W3C и т. д.
Есть гипотеза, что сложные прототипы будут лагать, как могут лагать сложные веб-приложения в браузере, хотя разработчики Figma говорят, что highload места покрывают WebAssembly. С другой стороны Chromium поддерживает Dart (ЯП от Google), который производительнее JS, и Figma может переехать на него. Но только в настольных версиях, т.к. Dart пока не поддерживается нигде, кроме Chromium.
☝️ Axure сделан на .Net, 10-ка на .Net 5. Это позволяет делать сложные прототипы без тормозов, но из-за этого Axure имеет весьма тяжелый ценник, разработка занимает больше времени, а значит и полезные фичи будут выкатываться дольше. Разработчикам, наверняка, приходится эмитировать поведение стилей, рендеринга на «своем» холсте, как если бы это было в Браузере.
Итак, что же нового в Axure RP 10 beta?
Ключевые изменения, которые ускорят процесс проектирования:
- Улучшена работа с динамическими панелями
Динамические панели это одна из ключевых особенностей Axure. Это своего рода изолированные области в вашем прототипе, структура которых напоминает стопку из кадров. Где каждый кадр изолирован. Каждому кадру можно присвоить наименование. Каждый кадр это состояние Области. Состояние может содержать любые элементы, в том числе и другие динамические панели. Изменяя текущее состояние (кадр) панели, мы изменяем ее текущее отображение.
Динамической называется панель, потому что Axure предоставляет возможность переключать Состояние области динамически: переключать на следующее/предыдущее состояние, листать автоматически с возможностью возврата к первому состоянию. Все остальное зависит от вашей фантазии!
С помощью динамических панелей можно создавать довольно сложные элементы, такие как: carousel, custom radio/checkbox, tabs, progress-bar, searchable editable dropdowns, draggable элементы. Кроме того Динамические панели отлично подходят для проектирования мобильных приложений: один экран с множеством состояний, чтобы состояния (экраны) менялись без обновления страницы при просмотре прототипа.
В Axure RP 10 beta появилась возможность видеть одновременно все состояния панели на одном экране, а не переключаться между ними. Это позволяет быстро копировать элементы между панелями, а также быстро сравнивать положение и стили элементов между состояниями — например, увидеть сразу все экраны мобильного приложения, которое вы проектируете.
В Axure RP 9 редактор динамических панелей выглядит так:
2. Оптимизирован процесс работы с Повторителями (Repeater).
Теперь нет необходимости возиться с разметкой данных в Interactions Editor-е. Просто выбираем виджет-получатель значения в нужной колонке (в примере ниже: в колонке “Heading” указываем виджет “Heading”).
Как видно из примера, добавлен готовый Repeater Card. Будет здорово, если будут готовые частые шаблоны (их также легко наделать для себя и обернуть в библиотеку).
Повтороители это удобно, т.к. можно нарисовать всего 1 строку таблицы, а затем просто вставлять данные, которые автоматически станут новыми строками с дизайном эталона. Если нужны будут правки, то изменять придется только эталон.
Это похоже на шаблон проектирования приложений MVC, когда визуальная часть, данные и логика управления ими отделены друг от друга.
Набором данных можно управлять динамически. Добавлять, удалять, изменять, сортировать и фильтровать строки. Это удобно для создания постраничной навигации, кнопок управления сортировкой и реально работающей формы поиска/фильтрации.
Было бы здорово подключать источники данных из вне, например, Back-endless сервисы или свои собственные mock RESTful APIs или google sheets.
В 10ке можно любые выбранные элементы превратить в Repeater. Let’s do it!
В Axure 9 приходилось повозиться. Нужно было вручную «мапить» колонки к виджетам в Interactions.
3. Добавлена возможность управления ограничениями изменения размеров элементов, объединенных в группу.
Можно задать отступы от краев Группы до краев H1 и Paragraph (линии на холсте дорисованы для наглядности). Тогда, при изменении, например, ширины карточки, мы получим то, что показано под подписью After resize. Можно также сделать зафиксировать высоту тумбочки.
Управлять этим поведением можно на панели стилей в секции Resizing constraints. Сейчас это работает примитивно и не очень понятно (как мне показалось). В будущем может быть очень полезно при создании компонентов.
Также возможен импорт Constraints вместе со скопированными элементами из Sketch, Figma, Adobe XD.
4. Добавлено новое состояние “Error” и возможность задания стилей для виджета с таким состоянием (подобно Focused, MouseOver, и пр.). Добавлен action “Set Error State”.
Теперь можно обернуть форму в динамическую панель и просто установить ей состояние Error в true (при включенной трансляции событий на все элементы панели), тогда заданные error-стили активируются у всех контролов, вместо ручной установки стилей на каждый контрол.
Работает не без косяков. Например, Action RemoveError не срабатывает в отношении нативного Dropdown.
5. В действии Show/Hide в режиме push/pull теперь можно указывать формулу или точное значение, на которое необходимо сдвинуть виджеты снизу или справа от Показываемого/Скрываемого элемента. Раньше длина сдвига вычислялась автоматически и была равна высоте/ширине скрываемого/показываемого элемента.
6. Улучшен редактор условий Condition Builder (Cases).
Произошли визуальные улучшения, а также, на начальном экране редактора теперь доступны частые условия (по экспертному мнению Axure =P).
Добавлено условия для проверки: находится ли виджет в состоянии Error.
7. Axure RP 10 пересобран на .Net 5, который, по заявлению TechEmpower, намного шустрее предыдущей версии. Axure стал шустрее, это хорошо чувствуется.
8. Ширина Checkbox/Radio теперь может автоматически подгоняться под длину текста. Раньше этого не было )
9. Горячие клавиши для Image Slice/Crop упрощены до S/C.
10. После динамического изменения Текста ширина и высота виджета теперь подгоняется автоматически, если установлен флаг fit text to width/height. Раньше это не работало.
11. Скрытые элементы теперь видны, когда выбраны. Раньше приходилось запоминать где-что, либо убирать флаг Скрыть.
Прочее:
- Панель инструментов стала «чище».
Схожие инструменты теперь свернуты в dropdown, пассивные пиктограммы стали черно-белыми, а активные синим (такое сочетание прослеживается во всем ui).
Добавлена возможность быстрой вставки нативных элементов управления и ввода, а также дополнительных динамических элементов.
2. Композиция элементов управления и типографика GUI переработаны.
Кликабельная область всех полей ввода и управляющих кнопок увеличена. Раньше приходилось метиться.
Добавлено комфортное количество воздуха, увеличен кегль.
Border Visibility вынесено из popup-а.
Но вот с Corner Visibility у меня лично возникла проблема — на экране с большим разрешением сложно отличить состояния Active (blue)/Passive (black).
3. Мастер-блоки переименованы в Компоненты
Это надежда на то, что настоящие компоненты вскоре должны появиться. Расшифровал ниже то, что я подразумеваю под настоящими компонентами.
Чего мне не хватает в Axure?
В настоящий момент с коллегами находимся на пороге создания корпоративной дизайн-системы и ряда ключевых аспектов DesignOps.
Поэтому проводим ре-инвентаризацию всех инструментов и выявляем точки роста в процессах.
Запросил у Axure такие функции, которые, гипотетически, могут быть весьма полезными (но это еще не факт, т.к. это не апробировано на реальных процессах)
Коротко описываю:
- Имплементация компонентов на базе одного из следующих фреймворков/ui-библиотек: AngularJS, VueJS или ReactJS. Спросил у разработчиков Axure, возможно ли как-то распарсить файл .rp, чтобы мы сами реализовали это, а потом готовы поделиться инструментом.
Ответ Axure: Файл .rp является проприетарным, этому не бывать, примерно, никогда. Но сказали, что в их бэклоге такая возможность присутствует и, что они понимают важность этого. Кроме того, это один из самых частых запросов в поддержку - Подключение собственного git вместо svn.
Ответ: I’ve submitted a feature request to our product team on your behalf for native integration with source control - Возможность подключения библиотек/фреймворков к прототипу, таких как React/Angular/Vue. У элементов есть наименование, оно же может быть ID, чтобы можно было достучаться до них, как если бы это был DOM. Тогда можно быстро делать очень крутые штуки.
Ответ: I’ve submitted a request to our product team for the ability to utilize React, Angular, Vue, etc, within widget interactions - Редактирование стилей как CSS (как в Google developer console или Firebug).
Ответ: This would be a great feature to have. In working with Axure RP, there have been several instances where this would have come in handy for me personally. I’ve submitted a request to our product team for their consideration. - StyleManager (page/widgets) сделать обычной плавающей панелью. В котором можно редактировать стили, как key/value grid (как в Google dev console или Firebug). И сделать возможным использование переменных везде, где можно задать значение: “Fill:@primaryBgColorClass”. Переменные для стилей могли бы создаваться и редактироваться в том же StyleManager.
Ответ: This is another feature that I would love to see implemented in a future version, I’ve submitted a request to our product team for this as well. - Возможность создания хранилища стилей в облаке, которое, как библиотеку (rplib) можно шейрить между участниками команды и различными командами. С уведомлением об изменениях. И с доставкой изменений во все проекты сразу.
Ответ: … I can certainly see how this suggestion could be beneficial for our users and will happily file a feature request, on your behalf, for our Product team to evaluate and take into consideration for a future build. - Настоящие компоненты.
Именно те сквозные компоненты, при обновлении которых, обновляются ранее вставленные (!) на холст копии, те самые, которые можно было бы редактировать только используя доступные параметры с учетом заранее заданных ограничений (разработчиком компонента/библиотеки).
Сейчас же компоненты это все те же мастеры, которые работают, как snippet-ы. Никакой обратной связки с эталонами, никакой кодовой имплементации, никаких constrains/bounds/default states (в пользу Axure, resize constraints +/- появились =P).
Тогда их подобие, в виде мастеров, не будет нужно. - Кнопка сброса padding в стилях
- Копирование стилей, как CSS не только через Просмотр прототипа в браузере
- Применение Image Crop по нажатию Enter
- Оптимизировать процесс работы с анимациями. Например, как в PowerPoint, задаем delay +path curve+ speed curve
- Позже поделюсь прочими идеями, их на самом деле очень много!
Goodbye, Axure RP 9!
