Покрокове керівництво по анімації інтерфейсу в Principle і Sketch
- Огляд інтерфейсу Principle
- Розуміння базових принципів анімації в Principle
- A. Тригер і перехід
- В. Тривалість анімації і пом'якшувальний ефект
- Що вийде?
- Переходимо з Sketch-файлу в Principle
- Видалення шапок екранів для безшовного скролінгу
- Створення анімації завантаження - текст
- Створення parallax-ефекту Сторінки вітання
- Створення parallax-ефекту - сторінка About
- Створення Parallax-ефекту - Сторінка Colors
- Перегортання убік - сторінка вибору кольору
- Анімація іконки меню
- Створення ефекту перегортання меню
- Зрушення сторінки контактів
- І, нарешті, сторінка Thank You
- Простота додавання анімацій в Principle
Дизайн користувальницького інтерфейсу з анімацією і переходами - це відмінний спосіб
поліпшити досвід взаємодії користувача з продуктом (UX). Анімовані мікропереходи допомагають стимулювати користувача до дій, в епоху дуже
короткої стійкості уваги людей. Тому Airbnb недавно представив Lottie
- новий open-source інструмент для простого додавання анімації в рідні
додатки.
того, як ви пройдете це керівництво, ви зможете перетворити нудні статичні
макети в інтерактивний прототип, за допомогою якого ви зможете вдаліше презентувати свою роботу клієнтам і майбутнім користувачам. Ви можете застосовувати отримані знання для вдосконалення своїх майбутніх інтерфейсів. Приступимо.
Скачайте ці безкоштовні ресурси, щоб рухатися далі. Вам знадобляться тільки додатки Principle і Sketch. Якщо у вас їх ще немає, скачайте і встановіть безкоштовні тріал-версії за цим посиланням:
Огляд інтерфейсу Principle
Якщо ви працюєте в Mac OS, інтерфейс Principle буде вам дуже знаком. У ньому три
основні розділи: бічна панель, область дизайну з артбордамі і вікно превью,
яке можна рухати і ресайз.
Розуміння базових принципів анімації в Principle
У Principle щодо просто анімувати. Вам не потрібна велика база знань для старту. Велика частина важкої роботи автоматизована, так що вам залишається просто сфокусуватися на тому, з чого починається анімація (наприклад, кнопка, посилання, подія скролла), як вона починається, і чим вона закінчується.
Щоб допомогти вам, я зібрав невеликий лексикон термінів, використаних в цьому уроці:
- Компонент: це вид угруповання, який допомагає контейніровать елементи і навіть анімації. Це аналог смарт-об'єкта в Photoshop або символу в Illustrator.
- Тригер: спосіб початку анімації - тобто дотик, скролл, ховер і т.д .. У Principle
тригер можна задати, виділивши будь-який елемент всередині Principle і клікнувши на
іконку у вигляді спалаху блискавки, яка з'являється справа. - Швидкий перехід: зміна стану з одного артборда на інше, тобто слайд-ефект вліво або
вправо. - Пом'якшувальний ефект: ступінь м'якості переходу на основі того, як анімація починається і закінчується.
A. Тригер і перехід
Перший крок в анімації з Principle полягає в налагодженні тригера (поведінку або дію, з якого починається анімація) на елементі (кнопка, посилання, наприклад), або в зміні його початкового і / або кінцевого стану (тобто його положення або масштаб від початку і до кінця анімації).
- Задайте початковий стан: як ваші елементи UI виглядають на початку перед тим, як
стартує анімація. - Задайте тригер: виберіть елемент взаємодії, а також дію, яка запускає
анімацію. - Визначте кінцевий стан: як елементи відображаються в кінці анімації.
Як тільки ви налаштували анімацію, можете переглянути її у вікні превью.
В. Тривалість анімації і пом'якшувальний ефект
За замовчуванням Principle створює напівсекундного анімації. Іноді цього недостатньо, щоб в деталях побачити ефект переходу. Ви можете змінити тривалість і "пом'якшувальний" ефект в панелі анімації, слідуючи цим крокам:
- Відкрийте панель анімації: виділіть чорні стрілки між двома артбордамі, і натисніть кнопку "Animate" у верхній панелі.
- Збільште тривалість анімації: пересуньте кінці синіх ліній.
- Застосуйте пом'якшення: виділіть всі крапки в формі ромбів і виберіть "Ease Both" зі списку, щоб пом'якшити переходи.
Що вийде?
Це відео показує, що ви зможете робити після освоєння уроку. Демо-додаток демонструє колірну палітру Google Material Design, і надає деталі по кожному кольору, коли ви оберете якийсь відтінок. Ви зможете створювати анімацію завантаження, переходи між сторінками з плавним parallax-ефектом, а також слайдер меню.
скачайте безкоштовний файл-початківець для уроку тут. Почнемо.
Переходимо з Sketch-файлу в Principle
- Наведіть артборди в порядку переходів між ними. Наприклад, при листанню екрану праворуч наступний екран повинен стосуватися правого краю попереднього екрана, який він замінить після анімації.
- Коли ви все налаштували в Sketch-файлі, перейдіть в Principle, створіть порожній документ розміром 360 × 640 і натисніть кнопку Import.
Видалення шапок екранів для безшовного скролінгу
Щоб створити безшовний перехід між сторінками, ви можете видалити шапку кожної сторінки крім першої. Шапки спочатку додавалися, щоб користувач завжди розумів, в якому додатку він знаходиться. Ви можете залишити тільки шапку привітального екрану, і приклеїти її до смуги меню і заголовку програми.
Створення анімації завантаження - фігури
- Виділіть групу фігур завантаження, і натисніть на "Create Component", що містить фігури і текст завантаження. Створіть компонент для тексту з першим символом; ми проаніміруем текст окремо.
- Виділіть згруповані фігури. Виберіть тригер "Tap" і перетягніть його поверх того ж артборда, щоб створити дублікат.
- Другий артборд представляє кінцевий стан анімації, і ви можете повернути групу, використовуючи параметр кута. Задайте інші значення кута для заливки і контуру, щоб створити більш цікавий ефект.
- На завершення, виділіть стрілки між артбордамі, клікніть "Animate", щоб відкрити панель анімації, і змініть тривалість до 1.00 секунди.
Створення анімації завантаження - текст
- Спочатку створіть slide-up анімацію. Виділіть фігуру кнопки, і застосуєте тригер "Tap". У новому артборде посуньте все екрани вгору на 640px (саме така зараз висота артборда).
- Тепер створимо паралакс-ефект. Перейдіть на попередній артборд, або на вітальний екран, посуньте геометричні фігури і текст вниз на різні значення Y.
- Нарешті, всередині панелі анімації, збільште тривалість, скажімо, до 1 с. Застосуйте ефект "Ease Both" до тимчасової прямий (попередньо перевірте, що всі крапки в формі ромба виділені, і клікніть на будь-яку синю лінію, щоб застосувати ефект до всіх).
- Перегляньте анімацію і посуньте фігури так, щоб паралакс-ефект виглядав добре.
Створення parallax-ефекту Сторінки вітання
- Виділіть компонент завантаження і застосуєте тригер "Tap", потягнувши стрілку від нього в будь-яке місце артборда.
- Виділіть всі екрани (з основної групи) і посуньте їх вгору на 640px.
- Поверніться на попередній артборд, посуньте фігури на вітальному екрані вниз. Це створить асинхронний ефект перегортання (це і є паралакс).
- Налаштуйте анімацію додаванням часу на перехід в панелі анімації: виділіть стрілку між артбордамі, пересуньте точки синіх ліній на 1с.
Створення parallax-ефекту - сторінка About
- Виділіть кнопку у вигляді стрілки вниз (переконайтеся, що виділяєте всю групу) і застосуєте тригер "Tap", потягнувши стрілку від нього на будь-яке місце артборда.
- Виділіть всі екрани (з основної групи) і пересуньте їх на 640px.
- Поверніться на попередній артборд, посуньте фігури на екрані "About" вниз. Це створить асинхронний ефект перегортання, тобто паралакс.
Створення Parallax-ефекту - Сторінка Colors
- Застосуйте тригер "Tap" до кнопки у вигляді стрілки вниз (вся група повинна бути виділена), це створить новий артборд.
- На новому артборде виділіть всі екрани і посуньте їх вгору на 640 px.
- На попередньому артборде посуньте кольору і текст вниз. Пам'ятайте: чим нижче ви рухаєте об'єкт, тим довше доведеться рухатися вгору, так що використовуйте різне розташування об'єктів для створення більш динамічного ефекту.
- Відкрийте меню анімації, застосуєте ефект "ease both" на всі сині тимчасові смуги всередині панелі анімації.
Перегортання убік - сторінка вибору кольору
- Застосуйте тригер "Tap" на кнопку "Load More" на екрані "Colours".
- На новому артборде посуньте контент "Colours" і "Selection" на 360px вліво (ширина артборда).
- Поверніться на попередній артборд і посуньте контент екрану в зворотному напрямку - вправо.
- Пам'ятайте, що ви також можете анімувати непрозорість екрану, від 0 до 100%.
- Експериментуйте з тривалістю анімації і ефектом пом'якшення для досягнення потрібного переходу.
Анімація іконки меню
- Будь-шар або фігура, в якому були ефекти в исходнике Sketch (наприклад, тіні) імпортуються в Principle як зображення. Якщо потрібно редагувати фігури всередині Principle, спробуйте не додавати ніяких спецефектів до імпорту.
- Використовуючи існуючу іконку як орієнтир, намалюйте три тонких прямокутника, і згрупуйте їх для створення іконки гамбургер-меню. Ви можете видалити або приховати попередню іконку меню.
- Виділіть нову іконку і застосуєте до неї тригер "tap".
- У новому артборде поверніть верхній і нижній прямокутник іконки меню, вони повинні бути вирівняні по центру, і задайте 0% непрозорості середньому.
- Щоб побачити тільки що створену анімацію, з'єднайте змінену іконку меню з артбордом превью через тригер "Tap" і протестуйте.
Створення ефекту перегортання меню
- На артборде кінцевого стану пересуньте всі екрани вправо, поки посилання меню не будуть вирівняні по лівому краю закриває іконки меню.
- Виділіть все всередині папки "Colors", крім вмісту меню, і світло-сірий фон, зменшите непрозорість до 25%. Анімація буде затінювати контент сторінки, фокусуючи користувача на меню.
- Збільште тривалість анімації, перейдіть на попередній артборд, щоб трохи пересунути контент меню для створення плавного ефекту.
Зрушення сторінки контактів
- У відкритому меню застосуєте тригер "Tap" на кнопку "Contact Us".
- На щойно створеному артборде посуньте все екрани вгору на 640 px.
- Поверніться назад на артборд превью і посуньте елементи з сторінки "Form" вниз.
- Наведіть елементи на різні значення Y, щоб створити паралакс-ефект.
- Нарешті, виділіть стрілки між артбордамі, збільште довжину анімації та застосуєте ефект "Ease Both" до синіх тимчасовим смужках.
І, нарешті, сторінка Thank You
- Застосуйте тригер "Tap" до кнопки "send message".
- На новому артборде посуньте все екрани вгору на 640 px.
- Перейдіть на попередній артборд і посуньте елементи з сторінки "Confirmation" вниз.
- Пограйте з настройками масштабу і повороту для кольорової іконки, щоб створити більш динамічний ефект.
- Не забудьте збільшити тривалість анімації для кращого сприйняття ефекту переходу.
Простота додавання анімацій в Principle
Principle - це фантастичний інструмент для реалізації ваших ідей по анімації призначених для користувача інтерфейсів.
Його інтерфейс повністю в стилі Mac, і він був створений для ідеальної сумісності з Sketch-файлами.
Principle автоматизує більшу частину ефектів анімації і переходів. Все, що вам потрібно, це застосувати тригер до фігури на артборде, змінити параметри для елементів, які ви хочете анімувати в кінцевому артборде.
Як ваші враження від уроку і самої програми? Діліться фідбек в
коментарях.
Читайте також:
Principle для професіоналів, повне керівництво
Що вийде?Як ваші враження від уроку і самої програми?