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-редактор з елементами векторної малювалки.

Тепер можна від теорії перейти до практики. Починаю ось з цим макетом (назву змінено в інтересах слідства), який є у *.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 як веде себе кнопка всередині кожного тарифного плану в браузері:



Робота з динамічними панелями
Якщо говорити простою мовою — це особлива групування елементів, щоб застосовувати до нього різні дії. Можна зробити прилипающее меню 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.

А якщо вам потрібні послуги UX/UI-дизайнераЯ можу бути корисний для вашого мобільного/десктопного продукту! Розробляю інтерфейси для будь-яких систем і платформ. Надаю послуги по юзабіліті консалтингу. Використовую інженерно-итуитивный підхід для побудови оптимальних користувальницьких сценаріїв. Володію вроджену здатність поставити себе на місце користувачів і виявити можливі неоптимальності їх майбутнього досвіду. Розумію, що в хорошому інтерфейсі багато що будується на дрібницях, тому педантично ставлюся до кожного пікселю. Пишіть у скайп: creativiter / або поштою: kamushken@gmail.com
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.