Як зробити прототип в Axure RP, якщо нічого в цьому не розумієш

Axure RP – найвідоміша і популярна програма зі створення прототипів веб-сайтів і додатків. Достатньою мірою глибока, щоб робити складні елементи, при цьому достатньо легка, щоб вже через десять хвилин колупання в інтерфейсі підготувати макет. Зрозуміло, вона далеко не єдина – є безліч інших способів зробити прототип.

Однією з основних особливостей Axure (порівняно з конкурентами) є можливість запрограмувати поведінка кнопок, контейнерів, віджетів. Виходячи з цього, отриманий прототип можна зробити так, що він буде функціонувати як повноцінний сайт/додаток.

Дисклеймер: це моя перша стаття. Писати не вмію, зате є накопичений досвід. Тому взяв за основу цю статтю. Сподіваюся, матеріал буде корисний. Гайд не претендує на істину в останній інстанції – деякі рішення і думки суб’єктивні, хоч і випробувані на багатьох проектах.

З точки зору структури гайда, вона буде наступна:

Зміст

До статті додається розглянутий прототип в .rp форматі, який можна завантажити в якості прикладу. До прототипу додаються використовувані бібліотеки з іконками, готовими віджетами.

Розглянутий прототип буде розташовуватися за посиланням http://fys0bf.axshare.com.

Для кожного розглянутого прикладу додається відеоінструкція. Так що у вас не повинно бути проблем, як у деяких підручниках по дизайну.

Трохи про UX/UI

Якщо коротко, UX (User Experience) – це досвід, як користувач сприймає інтерфейс, які емоції відчуває при взаємодії з ним. UI (User interface) – це те, що конкретно він бачить, з чим взаємодіє.

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

Якщо проводити паралель з молотком, то UI молотка – це ручка, бойок і носок. UX молотка – це те, що людина відчуває, коли забиває молотком цвях.

При проектуванні інтерфейсу треба прагнути, щоб він був настільки ж простим, як інтерфейс молотка або палиці-копалки. Будь-яке ускладнення змусить користувачів напружувати голову, а це вони не люблять.

Як сказав Стів Джобс: «Дизайн – це не те, як пристрій виглядає, а те, як воно працює». Відповідно, основна мета – змусити його працювати так, щоб користувачі не роздумували в процесі. Про наявність інтерфейсу зазвичай згадують у двох випадках:

— Він незручний. Маленькі кнопки, треба «прицілюватися» щоб клікнути. Міжрядковий інтервал занадто короткий, доводиться вдивлятися. На посадочній сторінці безліч непотрібної інформації, а конверсійний елемент треба ще знайти. Ну, ви зрозуміли.

— Професійне. Хто працює з інтерфейсами або цікавиться темою, звернуть увагу, як добре він зроблений.

Для тих, хто в танку: причому тут прототип інтернет-магазину і такі високі поняття «що відчуває користувач»? А при тому. Зручність майбутнього інтерфейсу повинно бути продумано на рівні скелета, шляхів проходу людини по сайту (Customer journey mapping). Природно, на рівні дизайну буде багато чого скориговано, додані кольору, зображення. Але база зберігається, і вона закладається саме на етапі створення прототипу.

В цілому, можна сформулювати такі «благодійники»:

— Простота. Не треба намагатися зробити химерніше, складніше. Спрощуйте, скорочуйте.

— Шаблони. Не намагайтеся придумати велосипед, новий елемент інтерфейсу, особливу фішку, якої ніде немає. Чим більше на сайті буде типових елементів на своїх місцях, тим більше шансів, що користувач зрозуміє, для чого вони потрібні. Це правило підходить, звичайно, при створенні чогось типового. Якщо ви розробляєте якийсь новий сервіс, або інтерфейс на новій платформі (припустимо, для окулярів віртуальної реальності), потрібно експериментувати.

— Цільова аудиторія. Як би банально це не звучало, треба розуміти, для якої ЦА призначений інтерфейс. Вік, стать, освіта, сфера діяльності, рівень достатку. Все це повинно враховуватися при формуванні прототипу. Наприклад, якщо ваш лендінгем орієнтований на продаж дуже дорогих годин, то можна не використовувати кричущі слогани про знижки, величезну CTA кнопку на кожному екрані або миготливого лічильника, що залишилося 10 хвилин зробити замовлення за вигідною ціною. У разі, якщо LP являє собою заробіток в інтернеті за системою мережевого маркетингу (чарівні Бади, які дозволяють поговорити з померлою бабусею), то такі елементи будуть більш ніж доречні. Скажу навіть більше: їх використання допоможе відсіяти цільові обігу на рівні інтерфейсу.

— Конкуренти. Хтось із відомих сказав: «Хороші художники копіюють, великі художники крадуть». Власне крадіть ідеї при проектуванні інтерфейсів у конкурентів. Конкуренти можуть бути як прямі, так і непрямі. Також рекомендую підглядати за хорошими рішеннями на зарубіжних сайтах.

Мета цього матеріалу показати, як зробити прототип в Axure RP. Тому далі більше не буде підніматися питань чому цей елемент розташовуємо так інакше.

Принципи та особливості прототипування в Axure

Перш ніж приступати до проектування інтерфейсу, важливо розуміти для яких цілей ви плануєте його використовувати. Від цього буде залежати, наскільки даний гайд слід використовувати як пряму інструкцію:

— Якщо ви робите прототип сайту, щоб надалі віддати на дизайн і потім прикласти до технічного завдання – саме для такої схеми і розрахований гайд.

— Якщо ви дизайнер, замовник (і у вас є бачення продукту і це треба донести) або вам потрібно підготувати робочу схему для демонстрації можна додавати більше зображень, морочитися з глибоким програмуванням елементів, гратися з кольором. Також рекомендується зробити адаптовану версію в межах однієї сторінки.

В цілому, вимоги до оформлення прототипів були сформульовані вже давно, в цьому матеріалі. Перенесу найбільш важливі та актуальні, плюс додам з практики:

• Всі наскрізні елементи (шапка, підвал) робимо через майстра.
• Не робимо чехарду зі стилями, шрифтами. Мова про заголовках, основному тексті.
• Всі елементи, в яких буде інтерактивність (слайдер, банери випадаючі списки і т. д.) реалізовувати через Interactions. Це потрібно для того, щоб візуально було зрозуміло, які елементи статичні, а які ні.

• Ідеальний прототип повинен бути залинкован, щоб було зрозуміло, куди здійснюється перехід при кліці по елементу. Текстові посилання відзначаємо підкресленням, псевдоссылки – пунктирною лінією.
• Прототип робиться під типові сторінки. На прикладі інтернет-магазину: головна, каталог, картка товару, контакти, звичайна текстова сторінка (оплата, доставка, про компанії), особистий кабінет, кроки оплати. В залежності від обсягів та вимог можуть бути додані FAQ, статті, контакти в різних містах і т. д.
• Прототип повинен робитися по розмірній сітці.
• Якщо вже є готовий текст для прототипу, треба використовувати його. Дозволено використовувати рибний текст (Lorem Ipsum), але треба приблизно розуміти, який обсяг тексту буде в результаті.
• Заголовки, текст в pop-up вікон, елементи меню – повинні бути осмисленими. Навіть якщо це потім буде змінено на етапі редагування, можна написати «робочий» назву, передавальний сенс.
• Все повинно бути гранично схематично, без розфарбовування елементів. Але бувають винятки. Щоб продемонструвати замовнику (керівництву, колегам, тестерам) наближений до кінцевого увазі результат, іноді має сенс додати повнокольорові зображення, логотипи і колірні рішення.
• Всі інтерактивні елементи, сторінки, майстра, деякі об’єкти – треба осмислено іменувати.
• Прототипи рекомендується закривати паролем. За замовчуванням вони доступні просто по прямой ссылке виду 23oh42.axshare.com.
• Варто опрацьовувати ієрархію на рівні сторінок, щоб була видна вкладеність.
• Для кожного дозволу рекомендується робити окрему сторінку: це допоможе уникнути плутанини при складанні на всіх подальших етапах: дизайн, складання ТЗ, верстки, програмуванні. Кожне дозвіл відокремлювати папками.
• Можна використовувати стартовий екран, на якому буде написано, що за проект, версія проекту, хто робить прототип і посилання на основні дозволу. Цей пункт є опціональним.

У Axure є свої «фішки», які вигідно відрізняють його від конкурентів, ось їх неповний набір:

• Прототипи збираються на основі базових елементів, як в конструкторі. Елементи в свою чергу об’єднані в бібліотеки. Це можуть бути іконки, текстові поля, кнопки, підібрані шрифти, а також складні об’єкти з безліччю динамічних панелей.
• Більшість базових елементів являють собою прямокутні контейнери. Навіть рибний текст або заголовки виглядають як контейнер з прозорим фоном з прибраній кордоном. Таким же чином будь-якому контейнері можна розташувати текст і як завгодно його відформатувати.
• Динамічні панелі. Для створення складних інтерактивних елементів потрібно буде використовувати динамічні панелі. Це об’єкт або група об’єктів, які переносяться в окрему нескінченну область, усередині якої також можна створити нескінченну кількість робочих областей, станів (State) як на одному рівні, так і на наступному рівні вкладеності. Найкраще ілюструє дану схему сон всередині сну з фільму «Початок». Самі динамічні панелі можна приховувати, переміщати, змінювати контент на сторінках. З їх допомогою реалізуються таби, модальні спливаючі вікна, складні ефекти при наведенні, при завантаженні сторінки і т. д.

• Майстри. Як вже писалося вище, майстра – це не тільки цікава фішка, але і життєво необхідна умова. З його допомогою можна реалізувати наскрізні елементи, які будуть незмінними на всіх сторінках: шапка, підвал, форма підписки, картка товару в списку. Майстер — це по суті динамічна панель, тільки у нього окрема робоча область (за замовчуванням в лівому нижньому куті) і функціонал «додати/видалити на всіх сторінках. Виникає питання, а в чому складність просто копіювати елемент на кожну нову сторінку? Так воно і є, якщо прототип складається з 2-3 сторінок з майстром можна не заморочуватися. Але якщо 20 сторінок, і в процесі роботи потрібно внести правки в наскрізний елемент, то доведеться вносити зміни на всіх сторінках, що вкрай незручно.

Розмірна сітка

Розмірна сітка призначена для того, щоб внести деяку організованість. Це як якщо порівнювати альбомний аркуш А4 і міліметровий папір: креслення можна зробити і на чистому аркуші, але куди зручніше його реалізовувати з використанням розмітки.

Для прототипу буде використана сітка в 16 колонок для ширини екрану 1280 пікселів.

При розрахунку розмірів сітки рекомендується використовувати сервіс gridcalculator.dk.

У документі за промовчанням розліновка і напрямні. Тому перед початком роботи над прототипом потрібно її створити. Для цього потрібно:

• Клацнути правою кнопкою миші на порожньому місці робочої області.
• Вибрати Grid and Guides à Create Guides.
• Далі можна вибрати з готових пресетів або задати свої.

Рекомендується закріпити напрямні, щоб випадково їх не посунути в процесі роботи. Для цього потрібно клікнути правою кнопкою миші по порожньому місцю і вибрати Grid and Guides à Lock guides. Так само можна створити точкову сітку: Grid and Guides à Show Grid.

Тема сіток для адаптивного дизайну добре розкрита в цій статті на Хабре.

Огляд інтерфейсу

Інтерфейс Axure досить простий для сприйняття і має низький поріг входу. У той же час він досить складний, щоб задіяти всі його функції. Робочий екран можна розділити на наступні елементи:

Main Toolbar, Toolbar Style і основне меню.

Pages.

Libraries.

Masters.

Робоча область.

Interactor.

Outline.

Далі про кожному докладніше.

Main Toolbar, Toolbar Style і основне меню

Main Toolbar – це панель інструментів, які, так чи інакше, зачіпають переміщення віджета або групи віджетів по екрану. Переміщення мається на увазі по робочій області при роботі з об’єктом, а не його інтерактивність для користувача. У цьому тулбарі можна:

Поміняти спосіб виділення віджета (або повністю виділити, або частково). Тут же Connect Tool – для з’єднання віджетів, які можна використовувати при складанні інтелект-карт (Mind map).

Pen – інструмент «перо» як в Photoshop. Можна вирізати небажаний елемент з віджета.

More – набір елементів, з яких ви будете використовувати хіба що обрізання (Crop). Але його буде набагато зручніше використовувати через контекстне меню (правий клік по елементу).

Zoom. Зміна масштабу. Зручний, щоб бачити, який поточний масштаб у робочої області. Для зміни масштабу рекомендую використовувати класичний функціонал: Ctrl + прокрутка коліщатка миші.

Front/Back. Для регулювання шарів віджетів. Найчастіше віджети нашаровуються один на одного, з допомогою цих кнопок можна налаштовувати їх рівень.

Group/Ungroup. Для групування віджетів та її зняття. Часто застосовується, якщо треба одну групу елементів вирівняти відносно іншої групи елементів. Гарячі клавіші розташовані досить зручно, щоб можна було використовувати однією лівою – Ctrl + G для групування об’єктів, Ctrl + Shift + G для зняття угруповання.

Align/Distribute. Для вирівнювання об’єктів: по центру, по краях, рівномірно розташувати об’єкти в ряд. Наочно це можна подивитися за посиланням. За цим посиланням можна подивитися, як працює угруповання і вирівнювання груп елементів.

Lock/Unlock. Блокування елемента. Потрібні для фіксації елемента, щоб випадково не посунути.

Left/Right. Можна прибрати ліву і праву область з інструментами, щоб виділити більше місця під робочу область.

Preview/Share/Publish. Подивитися, як виглядає прототип у браузері. Preview дозволяє згенерувати проект у браузері локально. Але швидше натиснути F5. Publish – можна відправити на сервер Axure, де буде доступна будь-кому (якщо не буде захищений паролем).

Style Toolbar – це панель інструментів, які відповідальні за зовнішній вигляд, розмір, форматування.

• Форматування шрифту, тип, розмір, колір, вирівнювання тексту – все досить стандартно.
• Також у самих блоків можна змінювати розмір кордону, додавати тінь, міняти колір блоків, колір кордонів. Є можливість ставити різні рівні прозорості або лінійний градієнт.
• Можливість змінювати стан об’єкта по осі x і y, розмір довжини і висоти (з можливістю змінити розмір пропорційно).
• Можливість зробити об’єкт невидимим (Hidden).

Взаємодія з Toolbar Style можна подивитися у відео по посиланню.

Pages

В даному блоці формується ієрархія прототипу, самі сторінки. Також можна створювати папки для зручного розбиття сторінок. Для швидкого створення сторінки можна за допомогою натискання клавіш Ctrl + Enter. Для корекції ієрархії або стрілочки в інтерфейсі, або Ctrl + стрілочки на клавіатурі.

Libraries

Самі віджети з можливістю вибрати бібліотеку. Бібліотеки віджетів є стандартні, які поставляються разом з програмою. В інтернеті повно власних бібліотек (гуглите із запитом «Axure libraries download»). Бібліотеку можна зробити навіть самому для зручності – наприклад, бібліотека спеціалізованих іконок, тулбари, таби і т. д. Разом з готовим прототипом, як вже говорилося на початку, буде прикладена велика бібліотека, користуйтеся на здоров’я.

Сам тулбар досить простий у використанні – просто перетягуєте потрібний віджет на робочу область.

Masters

Блок з майстрами, про яких говорилося вище. Майстри на сторінки можна додавати як вручну, перетягуючи на робочу область як віджет, або через Add Pages (права кнопка миші на майстра). Створення, додавання і роботу з майстрами можна подивитися на відео. Майстер можна створити двох видів: заблокованим на одному місці і з можливістю пересувати. Шапку сайту можна створювати закріпленої на тому місці (Lock to Master Location), де створювалося, а решта робити краще без (Place Anywhere).

Робоча область

Робоча область – місце, на якому конструюється прототип. Використовувані сторінки, майстри, динамічні панелі розташовуються вкладками над робочою областю.

Interactor

Якщо коротко – з допомогою цього тулбара програмується весь «екшн». Складається з трьох вкладок: Properties, Notes, Style.

Properties

Набір подій, які можна задіяти для певного взаємодії елемента або групи елементів. Їх близько 30, але зазвичай використовуються штук 5 із них:

• OnClick – як зрозуміло з назви, спрацьовування по кліку. Наприклад, потрібно зробити так, щоб при кліку по кнопці з’являлося модальне вікно. Найбільш часто використовуване подія.
• OnMouseEnter/OnMouseOut – дію, що буде відбуватися при наведенні на елемент, зняття наведення.
• OnSwipeLeft/OnSwipeRIght – свайп, прокручування пальцем на мобільних пристроях.

Крім програмування елементів при взаємодії з ними можна також задавати поведінку елементів просто при завантаженні сторінки або скролле. Для цього не повинно бути виділено жодного елемента, тоді в цьому блоці з’являться наступні властивості:

• OnPageLoad – дія, яка запускається, як тільки завантажиться сторінка. Приклад – гортання у слайдера, анімація елементів.
• OnWindowScroll – подія, що спрацює як тільки користувач доскроллит до певного маркера. Приклад – анімація в лендингах, поява кнопки «вгору».

Приклади використання цих подій будуть розглянуті далі в прототипі.

Shape

Дозволяє змінити форму віджета використовуючи готові пресети, а також з можливістю зробити свою форму.

Interaction styles

Має 4 значення:

• MouseOver – зміна об’єкта при наведенні. Використовується для підсвічування посилань, меж елемента.
• MouseDown – клік по елементу. При цьому сам елемент підтримує це зміна, поки кнопка миші тримається натиснутою.
• Selected – зміна при вибраному значенні. Спрацьовує у зв’язці зі зміною значення в Interactions.
• Disabled – схоже з механіки на selected, тільки смислове значення «відключено».

Notes

Дає можливість залишати коментарі до кожного елементу. Це може стати в нагоді, коли потрібно описати роботу віджета, а можливість запрограмувати немає, або це не настільки наочно і треба пояснити текстом.

Style

Частково дублює функціонал Style Toolbar, тільки з кількома особливостями. При вибраному елементі дозволяє редагувати міжрядковий інтервал, а також внутрішні відступи тексту в контейнері. Якщо елемент не вибрано, то з’являється наступні можливості:

• Задати колір для всіх сторінок.
• Залити на бекграунд зображення.
• Зробити прототип чорно-білим.
• Застосувати до прототипу ефект скетчу, намальованих від руки.
• Можливість задати позиціонування (Page Alignment) прототипу по центру сторінки, а не за замовчуванням ліворуч.

Outline

У цьому панелі інструментів розташовані всі віджети, які використовуються на сторінці. При кліці по елементу в списку, він буде виділено в робочій області. Найчастіше ця область буде використовуватися для пошуку динамічних панелей і їх станів (State).

Гарячі клавіші та лайфхаки

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

Затиснутий пробіл дозволяє рухати робочу область замість вертикального або горизонтального скролла.

Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 – стандартний функціонал, рекомендується використовувати.

При затиснутому шифте можна пересувати віджет з робочої області рівно по осі x і y.

Затиснутий Ctrl при обраному об’єкті дозволить скопіювати віджет. Якщо при цьому натиснути ще й Shift, то скопійований об’єкт залишиться на одній лінії з оригіналом.

Ctrl + G – групування віджетів. Ctrl + Shift + G – зняття угруповання.

F5 – режим превью у браузері. Надалі можна просто оновити вкладку в браузері, щоб побачити зміни.

F6 – відкриття вікна для публікації прототипу на сервер Axure.

На жаль, в Axure відсутня вбудованої можливості оцінювати відстань між об’єктами, як це реалізовано в Sketch і в новому Adobe XD. Але можна скористатися «милицею» у вигляді звичайного прямокутника. Процедура проста, але на всякий пожежний є відео.

У Axure передбачені смарт-гайди. Це необхідно для точного позиціонування об’єктів відносно один одного. Коли ви перетягуєте, показуються кордони і центр інших об’єктів (за замовчуванням у вигляді бірюзових ліній). Відповідно, при перетягуванні рекомендується на них орієнтуватися, щоб прототип був рівним і чітким.

Рекомендується задавати позиціонування по центру сторінки. Справа не тільки в тому, що так виглядає приємніше оку, але і в позиціонуванні об’єктів. Якщо динамічні панелі закріплювати на визначеному місці екрана, буде відбуватися зсув, якщо контент сторінки за замовчуванням (ліворуч).

Динамічні панелі або об’єкти, які потім будуть застосовуватися при програмуванні взаємодії, потрібно осмислено іменувати. В іншому випадку шуканий об’єкт складно буде знайти в списку.

Прототип головної інтернет-магазину (десктоп).

Вступ закінчилося, і почалося обговорення самого прототипу. Був обраний інтернет-магазин, тому що у нього найбільше різних функціональних фішок, які можна показати, а також лендінгем, елементи якого будуть відображені на головній сторінці. Важливо врахувати, що даний прототип в першу чергу важливий, щоб показати функціонал, як це працює, а не як готовий продукт. Тому, щоб максимально дистанціюватися від підсумкового застосування, я обрав тему з продажу бонсай, додавши трохи трешу. Відповідно, сприймайте головну як певний набір елементів для застосування, а не як підсумкову інструкцію на своїх проектах.

Мета прототипу – показати функціонал, тому в ньому будуть відсутні сторінки «Контакти», «Новини», «Статті», оскільки ці сторінки з частини функціоналу не можуть продемонструвати нічого нового.

Шапка

Шапку реалізовуємо за допомогою майстра. Як створити майстер було розказано раніше. В шапці кілька елементів, на яких варто зупинитися детальніше.

Логотип

У цьому немає складності, але з ним пов’язаний один лайфхак. Якщо елемент, який повинен бути активним (посилання на сторінку або певну дію при наведенні кліку), але при цьому він сам складається з декількох елементів, можна поверх нього вставити прозорий контейнер. Таким чином, в прототипі реалізований логотип, картка з актуальними статтями.

Меню

Нижнє підкреслення при наведенні реалізовуємо з допомогою тулбара Inspector -> Properties -> Interaction Styles -> MouseOver. У вікні ставимо галочку у Underline.

Спливаюче меню можна реалізувати різними способами. Якщо воно просте (без додаткових спливаючих вікон, можна скористатися готовим віджетом.

У випадку з інтернет магазином з продажу бонсай, воно складне. Механіка наступна:

• На першому рівні знаходиться одна динамічна панель з двома станами (State). У першому стані – текстовий віджет «Каталог». На другому стані – той же віджет, тільки вже з усіма пунктами меню. При наведенні на елемент (OnMouseOver) спрацьовує перемикання на другий стан (Set Panel State -> вибираємо динамічну панель -> State2 і «Ок»). Якщо виділення з динамічною панелі знімається (OnMouseOut), то відбувається перемикання на перший стан (Set Panel State -> вибираємо динамічну панель -> State2 і «Ок»).
• В рамках другого стану створюється ще одна динамічна панель, яку приховуємо (Hidden). Всередині робимо два стани у вигляді двох карток товару з ціною, назвою і зображенням. При наведенні на назву (OnMouseOver) відбувається перехід на наступний стан (SetPanelState -> вибираємо динамічну панель -> вибираємо Next). Можна зробити так щоб відбувався перехід на конкретний стан, відповідно кожному назва прив’язати свою картку. Для цього замість Next треба вибрати відповідний стан. Обов’язково ставимо галочку на «Show panel if Hidden».

Замовлення зворотного дзвінка

Замовлення назад дзвінка складається з тригера, в нашому випадку – кнопки і самого модельного вікна замовлення зворотного дзвінка.

Кнопка робиться через звичайний контейнер, до якого застосовуємо Interaction Styles MouseOver. Ефект при наведенні можна показати яким завгодно чином, в залежності від вашого дизайнерського скілу. Якщо його не вистачає, можна просто змінити відтінки сірого на кнопці. На прикладі змінюється заливка, колір шрифту і колір кордону контейнера.

Модальний робимо з допомогою динамічної панелі з одним станом і відразу ж приховуємо (Hidden). Перш ніж приступити до контенту, треба передбачити розміщення модального вікна рівно посередині екрану. Можна звичайно вирівняти вручну, але з-за того, що у різних користувачів висота і ширина екрану різні, вони можуть з’явитися не посередині. Тому робимо наступне:

• Клік правою кнопкою миші по динамічної панелі.
• Вибираємо Pin to Browser.
• Ставимо галочку «Pin to browser window».
• Вибираємо Center, Middle, потім натискаємо «Ок».

Що приємно, після цього динамічну панель можна прибрати куди завгодно, та вона все одно буде з’являтися рівно посередині.

Поява модального вікна робиться наступним чином:

• Виділяємо кнопку-тригер.
• У Interactions вибираємо OnClick.
• У блоці Widgets вибираємо Show/Hide.
• Знаходимо шуканий віджет.
• Параметр Visibility переводимо в Show.
• В more Options вибираємо treat as lightbox та як бекграунду вибираємо щось сіре і напівпрозоре.

Модальне вікно складається з двох віджетів Input Field (називається Input Field (selected)), кнопки «Замовити», хрестика закриття вікна, а також двох написів, які будуть з’являтися при коректній і некоректною відправці форми.

Хрестик – це звичайна іконка з набору Icons. Дія – приховати модальний при кліці на хрестик. Робиться аналогічно, як і поява модального вікна, тільки в параметрі Visibility радіокнопку переводимо в положення Hide.

У формі замовлення зворотного дзвінка запрограмована проста валідація на заповнення. Якщо в полі «телефон» не введено жодного символу, буде з’являтися повідомлення: «Не забудьте вказати номер телефону!». Якщо введений будь-який символ, з’явиться повідомлення «Заявка успішно надіслана! Наші фахівці зв’яжуться з вами найближчим часом!».

Валідація програмується таким чином:

• Створюємо два блоку з текстом успішної відправки і невдалою. Переводимо в положення Hidden.
• На кнопці-тригері задаємо дію OnClick.
• В самому верху вікна Edit вибираємо Condition.
• У вікні набираємо: text on віджет, віджет поля вводу з телефоном, equals, value, порожнє значення. В полі Description повинно бути написано наступне: «if text on «Назва віджета поля вводу з телефоном» equals «»». Натискаємо Ok.
• Вибираємо Show. Можна додати анімацію, на прикладі просто fade (поява) за 1 мілісекунду.
• Додаємо Wait в лівому блоці, можна поставити 2 секунди. Використовується для відліку, наприклад, очікування між діями.
• Ставимо Hide і вибираємо віджет з попередженням про те, що треба заповнити дані.

Таким чином, якщо в поле вводу з номером телефону буде порожньо, при натисканні на кнопку «Замовити» з’явиться попередження, що його треба заповнити. Зникне через 2 секунди.

Повідомлення про успішну відправку налаштовується через друга умова (Case):

• У Interactions кнопки «Замовити» клікаємо на OnClick, Case 2 створитися автоматично.
• Проявляємо текст з успішною відправкою через Show.
• Далі вичікуємо (Wait), наприклад, 3 секунди.
• І приховуємо (Hide) модальне вікно.

Виходить так, що якщо не виконується перша умова (тобто якесь значення в поле вводу з номером телефону є), то виконується друга умова. З’являється повідомлення, що фахівці скоро зв’яжуться, і через 3 секунди модальне вікно зникне.

Кнопка «вгору»

Кнопка «вгору» застосовується для того, щоб проскроллить до першого екрана. Нагадаю, що ми досі перебуваємо в межах майстра «Шапка». Реалізуємо її наступним чином:

• Додаємо на робочу область іконку у вигляді стрілочки, або, як на прикладі, використовуємо контейнер-трикутник.
• Переводимо в динамічну панель і приховуємо її (саме панель, а не сам елемент).
• Далі закріплюємо панель в одному місці браузера. Правою кнопкою миші по панелі -> Pin to browser. У віконці вибираємо з якого боку її прикріпити. На прикладі використовується праворуч і знизу (і Bottom Right) з відступом 30 пікселів.

Тепер потрібно передбачити, щоб кнопка сама з’являлася при скролле до певного місця сторінки. Клікаємо на порожньому місці робочої області -> в Interactions вибираємо OnWindowScroll -> в самому верху вікна натискаємо на Edit Condition -> В умовах вибираємо value -> натискаємо на fx -> у вікні натискаємо на Insert Variable of Function -> вибираємо в Window функцію Window.scrollY і натискаємо «Ок» -> такі значення повинні бути Is greater than і value -> В останньому полі введення вказуємо через яке кількість проскролленых пікселів з’явиться кнопка вгору. На прикладі використовується 600 px. У підсумку, в полі Description повинно бути записано наступне: if «[[Window.scrollY]]» is greater than «600». Тепер треба вибрати сама дія. У Widgets вибираємо Show/Hide -> натискаємо в списку на динамічну панель кнопки вгору -> в опціях вибираємо Bring to front.

Кнопка з’являється, тепер треба зробити так, щоб вона сама зникала, коли ми переносимося на перший екран. Для цього ще раз клікаємо в Interactions на OnWindowScroll -> з’явиться Case 2 c умовою Else If True -> Віджети вибираємо Show/Hide -> шукаємо кнопку наверх і вибираємо hide.

Опціонально, можна зробити ефект при наведенні на кнопку вгору, з використанням двох станів(State), OnMouseEnter і OnMouseOver.

Бекграунд на всю ширину екрану

Багато елементи на сайті розтягуються на всю ширину екрану, в тому числі і шапка. Зробити це можна двома способами: через звичайний контейнер і OnPageLoad і з допомогою динамічних панелей. Для шапки оберемо другий варіант.

• Переведемо будь контейнер в динамічну панель, залишивши її порожньою (видаливши контейнер або зробивши прозорим).
• У Properties динамічної панелі знаходимо запис 100% Wide (browser only) і ставимо галочку.
• У Style у пункті back color задаємо колір, у випадку з нашим прототипом це білий або #FFFFFF.

Тепер панель буде автоматично розтягуватися під будь-який дозвіл.

Фіксоване меню

Фіксоване меню – це коли при скролле вниз, частина навігаційних елементів з шапки залишаються в самому верху екрана.

Робиться це наступним чином:

• Для початку визначаємося, які елементи будуть у фіксованій шапці. На прикладі — це зменшена версія логотипу, меню без спливаючих елементів і кнопка замовлення дзвінка.
• Далі копіюємо відібрані елементи і переводимо в окрему динамічну панель.
• Приховуємо (Hidden) динамічну панель.
• Підкладку другий шапки робимо на всю ширину, як на попередньому прикладі.
• Правою кнопкою миші по панелі -> Pin to browser -> В Horisontal Pin вибираємо Center, Vertical Pin – Top. І «Ок».
• Тепер потрібно задати поява фіксованого шапки. Робиться це по аналогії з кнопкою наверх. Для цього в Interactions сторінки в OnWindowScroll створюємо третій кейс (правою кнопкою миші на OnWindowScroll -> Add Case).
• Додаємо умова (Add condition). В умовах вибираємо value -> натискаємо на fx -> у вікні натискаємо на Insert Variable of Function -> Вибираємо в Window функцію Window.scrollY і натискаємо «Ок» -> такі значення повинні бути Is greater than і value -> В останньому полі введення вказуємо через яке кількість проскролленых пікселів з’явиться фіксована шапка. Вказуємо висоту шапки – 120px. У підсумку, в полі Description повинно бути записано наступне: if «[[Window.scrollY]]» is greater than «120». Тепер треба вибрати сама дія. У Widgets вибираємо Show/Hide -> натискаємо в списку на динамічну панель фіксованого шапки -> в опціях вибираємо Bring to front. Для плавного появи шапки, можна вказати анімацію slide-down.
• Також важливо змінити умова спрацьовування у третього кейса, т. к. за замовчуванням йде Else if true, тобто до цього для кнопки вгору вже задавали умова If. Тому тепер треба клікнути правою кнопкою миші по case 3 і вибрати Toggle if/else if.
• Далі задаємо умову 4 кейсом (Add Case), де фіксована шапка буде ховатися, якщо ми поскроллили наверх і перетнули кордон в 120 пікселів. Досить в такому випадку приховати фіксовану шапку (Hide).

Перший екран або як зробити паралакс і розтягнути зображення по ширині.

Крім основного зображення, до якого ми хочемо застосувати ефект паралакса і розтягнути його, знаходиться стрілка, при кліці по якій відбувається скролл до другого екрану. Робить це по аналогії з кнопкою наверх.

• Іменований елемент (можна прозору точку створену заздалегідь) до якого повинен здійснюватися скролл.
• Вибравши стрілочку, в Properties натискаємо на OnClick.
• У списку Actions вибираємо Scroll to Widget (Anchor link), далі знаходимо наш елемент, відзначаємо Scroll vertically only. Можна також вибрати анімацію, наприклад Swing.

Розтягуємо зображення по ширині

Раніше ми вже розтягували динамічні панелі по всій ширині екрану, тільки з використанням заливки. Зараз покажу, як можна розтягувати зображення. Для цього:

• Створюємо динамічну панель на основі будь-якого елемента, потім його видаляємо і розподіляємо панель на передбачуваний розмір у висоту зображення.
• У Properties динамічної панелі знаходимо запис 100% Wide (browser only) і ставимо галочку.
• У Style знаходимо Back image -> натискаємо import і вибираємо зображення у себе на комп’ютері.
• У випадаючому меню, де вибрано repeat No, вибираємо Stretch to Cover.

На прикладі показано що сама динамічна панель має ширину 300 px, при цьому розтягується до всієї ширини екрана.

Як зробити ефект паралакса

Ефект паралакса (на прикладі вертикальний) створюється з допомогою уповільнення скролла одних елементів на тлі інших. Задається це наступним чином:

• У Interactions сторінки (тобто коли не виділено ні один елемент) з допомогою функції OnWindowScroll.
• У Widgets вибираємо Move -> клікаємо по потрібному елементу (у нашому випадку це динамічна панель із зображенням бонсай) -> властивості повинно бути вибрано Move to, у поля введення y клікаєм на fx.
• Як у попередньому прикладі з кнопкою наверх, вибираємо Вікно.scrollY -> далі доведеться скоригувати формулу руками, дописавши в полі введення, щоб вийшли такі значення: [[Window.scrollY*0.25]]. Значення 0.25 означає, з якою затримкою буде рухатися елемент. Його можна змінити за вашим смаком.

Другий екран або підкат переваг

Далі реалізуємо ще один ефект при скролле, а саме – красиве поява переваг. На цей елемент креативності не вистачило, тому назвав їх відповідно займаному положенню. Є просто два текстових віджета з заголовком і рибних текстом, а також іконкою. Якщо при створенні прототипу необхідно передбачити цей контент, то робимо більш обдумано, ніж на прикладі.

Алгоритм появи приблизно такий же, як і біля кнопки вгору. Тут головне вгадати, по досягненні якої відстані вони будуть випливати. Сама поява можна реалізувати через Move, але на прикладі зроблено простіше. Самі елементи нікуди не рухаються, вони з’являються (Show) з анімацією (Animate) ковзання наліво (slide left), вверх (slide up) і праворуч (slide right).

Третій підлозі-екран або типи товарів

Мета даного блоку показати, яку можна зробити анімацію при наведенні на картку товару або категорію, як на прикладі. Для цього, як раніше говорилося достатньо створити один елемент, заздалегідь підігнаним за розміром. На прикладі, його ширина становить 300 px, тобто на екрані вміститися рівно 4 елемента.

Отже, мета анімації зробити так, щоб при наведенні на елемент висувалася напівпрозора плашка з інформацією, а при знятті виділення вона від’їжджала. Для цього:

• Беремо контейнер заданого розміру (або підходяще зображення, як на прикладі) і переводимо в динамічну панель (назвемо її «Бонсай в сортах»).
• Всередині динамічної панелі з зображенням створюємо контейнер з прозорістю (29 на прикладі), додаємо текстові блоки з описом (білого кольору для контрастності). Потім все це переводимо в динамічну панель (назвемо «Бонсай в сортах слайд»). Розташуємо його відразу після основного зображення. Таким чином, через віконце динамічної панелі «Бонсай в сортах» в 300 на 300 пікселів, динамічна панель («Бонсай в сортах слайд»), яка знаходиться всередині, не буде видно.

• Далі, робимо так, що при наведенні на динамічну панель «Бонсай в сортах» пересувалася панель «Бонсай в сортах слайд». Для цього треба виділити панель «Бонсай в сортах», вибрати в Interactions OnMouseEnter.
• У Widgets вибираємо Move, у списку елементів вибираємо «Бонсай в сортах слайд» і в умовах, де y ставимо -300 (пересування по осі y на мінус 300 пікселів, тобто вгору). У move повинно стояти значення by. Можна додати анімацію, наприклад, Swing.
• Щоб панель зникла, процедура ідентична, тільки треба вибрати OnMouseOut, і значення повинно бути позитивним.

Коли один елемент готовий, його можна розмножити на чотири. А там уже при необхідності в кожному поміняти зображення й опис.

Четвертий екран або криповатая акція

В даному блоці трохи хуліганства і безглуздих прикрас.

Зворотний звіт

З даними елементами, зазвичай не варто морочитися, часом досить позначити картинкою або блоком. Але якщо є бажання можна реалізувати зміну хвилин і секунд. Єдиний мінус, що це не настільки технологічно як може здатися (якщо цю статтю прочитають ще майстри Axure, і які знають, як це можна зробити короткою формулою – напишіть, бо в буржуйнете цих знань не знайшлося).

• Створюємо кілька контейнерів під кожну цифру, які називаємо, щоб не заплутатися (на прикладі «Одиниці, секунд», «Десятки секунд»).
• У Interaction сторінки (нагадую, знімаємо виділення елемента) клікаємо на OnPageLoad.
• У Widgets беремо Set Text і в елементах вибираємо «Одиниці секунд» і виставляємо значення 8.
• У Widgets беремо Wait виставляємо значення 1000 ms (тобто 1 секунда).
• У Widgets беремо Set Text і в елементах вибираємо «Одиниці секунд» і виставляємо значення 7.
• У Widgets беремо Wait виставляємо значення 1000 ms.

Повторюємо стільки разів, поки не будете задоволені результатом. Після того як вважали до 10, міняємо десятки секунд, і дорахувавши до 60 хвилини. При цьому, не обов’язково кожен раз ручками вибирати Widgets елементи. У полі Organize actions можна їх копіювати і вставляти.

Похилі елементи

Щоб повернути елемент, досить підвести курсор до його кутку і натиснути Ctrl. Далі рухом мишки повертаємо. Розробники не стали вигадувати велосипед і реалізували це як у всіх графічних редакторах.

Відразу після лічильника присутній елемент, який постійно змінює своє положення. Його реалізація схожа на попередній приклад з таймером, з тією лише різницею, що реалізація простіше:

• Беремо текстовий віджет, ставимо значення в «1000 руб», нахиляємо в одну сторону.
• Переводимо його в динамічну панель і копіюємо перший стан(State).
• Другий стан нахиляємо в іншу сторону.
• У Interactions сторінки вибираємо OnPageLoad.
• У Widgets вибираємо Set Panel State і в графі Select state вибираємо next. Ставимо галочку у Wrap from last to first (з допомогою цього ми зацикливаем процес). Також, ставимо галочку у Repeat every. Число в мілісекундах вказують, з якою швидкістю стану (State) будуть змінювати один одного. Можна також додати анімацію. І натискаємо «Ок».

Таким чином можна реалізувати будь-які анімації. В якості прикладу я зробив анімацію кролика, і, що більш стосовно для роботи, анімацію завантаження.

Ефект вирізаного зображення

Ще один лайфхак – накладення кастомно обрізаного контейнера на інший об’єкт, наприклад, зображення. Для цього потрібно взяти контейнер, в Properties -> Select shape -> Convert to custom shape. А далі натискаючи на елементи або додаючи нові надаємо будь-яку форму.

П’ятий екран або як залити в прототип відео з Youtube

Можна досить просто зробити так, щоб в прототипі було відео. В бібліотеці за замовчуванням треба знайти віджет Inline Frame. Розмістити його на робочій області так як ви хотіли б, щоб розташовувалося відео. Далі клацнути на цей елемент. У вікні, вибрати link to an external url or file і в поле вводу ввести url виду https://www.youtube.com/embed/b5dexpeO-l4. Його можна отримати на YouTube клікнувши під відео на кнопку «поділитися» і вибравши html-код. Сам код ігноруємо, копіюємо лише URL з прикладу вище.

Шостий екран або як зробити слайдер в Axure

Дійшли до типового елемента, який ви напевно вже знаєте, як зробити. Але якщо ви доскроллили сюди тільки за цим повторю з самого початку:

• Беремо контейнер або будь-який інший об’єкт, що може позначати вміст слайдера.
• Переводимо його в динамічну панель.
• Копіюємо або додаємо стану (State). На прикладі копіювався звичайний контейнер, на якому було написано «Слайд 1».
• Додаємо елементи, які можуть бути тригером для перемикання слайдера. Можна зробити так щоб він переключався автоматично, на прикладі що розглядалося раніше з допомогою Interactions сторінки і OnPageLoad. Тут же ми використовуємо іконки стрілочок, розташувавши їх ліворуч і праворуч.
• На іконку в Properties вішаємо OnClick. У Widgets зліва вибираємо Set Panel State. У списку знаходимо потрібну динамічну панель-слайдер. В Select state на кнопку праворуч вибираємо Next, на кнопку ліворуч – Previous і ставимо галочку Wrap from first to last. Анімацію робимо відповідно на кнопку ліворуч slide left, направо slide right.

Сьомий і восьмий екран або інформація про компанії і останні статті

Типові об’єкти, які можна розмістити, як вам захочеться (природно слідуючи логіці і розмірній сітці). Блок «Нові матеріали в нашому блозі» реалізуємо через прозорий контейнер, який виведений вперед (Front). Окантовка при наведенні задається через MouseOver.

Дев’ятий екран або як пройти

Карту можна позначить кількома способами:

Контейнером, підписавши, що це карта.

Скріншотом з Google Maps або «Яндекс.Карт».

Вставивши повноцінну інтерактивну карту прототип.

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

Для початку потрібно використовувати той же самий віджет за замовчуванням, що ми використовували для вставки відео з YouTube – Inline Frame. Розмістити його по робочій області, як буде зручно. Далі треба взяти з «Яндекс.Карт» код, який уже розмістити посиланням в самому віджеті:

• Подвійний клік по елементу Inline Frame
• Вставляємо посилання Link to an external url or file.

Тепер розглянемо як дістати код з «Яндекс.Карт»:

• Заходимо на https://yandex.ru/maps/.
• Вбиваємо шуканий адресу контактів.
• У лівому нижньому кутку поряд з інструментами друк і зворотний зв’язок знаходимо кнопку «поділитися» і тиснемо на неї.
• З поля «код вставки на сайт» копіюємо тільки частина URL, який має такий вигляд: https://yandex.ru/map-widget/v1/-/CBQX48GkdD

Тепер ми повинні розтягнути карту на всю ширину екрану. Через динамічну панель реалізувати не вийде, потрібно використовувати другий спосіб:

• У Interactions сторінки вибираємо OnPageLoad.
• У Actions вибираємо Set Size і клікаєм по нашому Inline Frame елементу.
• У Width клікаєм на fx.
• Натискаємо на Insert Variable of Function.
• Зі списку вибираємо Вікно.width і натискаємо «Ок».
• У випадаючого списку Anchor вибираємо Top або Венеції.

Підвал

Елементи в підвалі можна умовно поділити на два блоки – форму підписки і власне додаткову інформацію типову інформацію. Останнім окремо описувати не має сенсу, а от на формі передплати варто зупинитися детальніше, оскільки вона являє собою трохи ускладнений варіант замовлення зворотного дзвінка.

У формі зворотного дзвінка ми вказували, що якщо поле порожнє, воно заповнено невірно. З формою підписки можна вказати наявність символу @.

• Створюємо два блоку з текстом успішної відправки і невдалою. Переводимо в положення Hidden.
• На кнопці — тригері задаємо дію OnClick.
• В самому верху вікна Edit вибираємо Condition.
• У вікні набираємо: text on віджет, віджет поля вводу з e-mail, does not contain, value, @. В полі Description повинно бути написано наступне if text on E-mail does not contain «@». Натискаємо Ok.
• Вибираємо Show. Можна додати анімацію, на прикладі просто fade (поява) за 1 мілісекунду.
• Додаємо Wait в лівому блоці, можна поставити 2 секунди. Використовується для відліку, наприклад, очікування між діями.
• Ставимо Hide і вибираємо віджет з попередженням про те, що треба заповнити дані.
• Додаємо другий кейс (Case).
• Вибираємо Show/Hide.
• Натискаємо на текстовий віджет з успішним оформленням.
• Вибираємо Wait і виставляємо значення в 2 000.
• Через Hide приховуємо повідомлення про успішну відправку.

Висновок

Як вже говорилося на початку, це тільки перша частина. В подальших статтях каталог, картка товару, особистий кабінет та інші дозволи. Також можете залишати в коментарях питання з реалізації елементів – можливо, я про них розповім в наступних статтях.

Як обіцяв, надаю безкоштовні бібліотеки елементів, а також готовий прототип, який ми розглядали в даній статті. Для цього ми використовуємо сервіс, який надасть посилання за расшаріваніє в соцмережі.