<
  • Главная
Статьи

Покрокове керівництво по анімації інтерфейсу в Principle і Sketch

  1. Огляд інтерфейсу Principle
  2. Розуміння базових принципів анімації в Principle
  3. A. Тригер і перехід
  4. В. Тривалість анімації і пом'якшувальний ефект
  5. Що вийде?
  6. Переходимо з Sketch-файлу в Principle
  7. Видалення шапок екранів для безшовного скролінгу
  8. Створення анімації завантаження - текст
  9. Створення parallax-ефекту Сторінки вітання
  10. Створення parallax-ефекту - сторінка About
  11. Створення Parallax-ефекту - Сторінка Colors
  12. Перегортання убік - сторінка вибору кольору
  13. Анімація іконки меню
  14. Створення ефекту перегортання меню
  15. Зрушення сторінки контактів
  16. І, нарешті, сторінка Thank You
  17. Простота додавання анімацій в Principle

Дизайн користувальницького інтерфейсу з анімацією і переходами - це відмінний спосіб
поліпшити досвід взаємодії користувача з продуктом (UX). Анімовані мікропереходи допомагають стимулювати користувача до дій, в епоху дуже
короткої стійкості уваги людей. Тому Airbnb недавно представив Lottie
- новий open-source інструмент для простого додавання анімації в рідні
додатки.

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

Скачайте ці безкоштовні ресурси, щоб рухатися далі. Вам знадобляться тільки додатки Principle і Sketch. Якщо у вас їх ще немає, скачайте і встановіть безкоштовні тріал-версії за цим посиланням:

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

Якщо ви працюєте в Mac OS, інтерфейс Principle буде вам дуже знаком. У ньому три
основні розділи: бічна панель, область дизайну з артбордамі і вікно превью,
яке можна рухати і ресайз.

Розуміння базових принципів анімації в Principle

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

Щоб допомогти вам, я зібрав невеликий лексикон термінів, використаних в цьому уроці:

  • Компонент: це вид угруповання, який допомагає контейніровать елементи і навіть анімації. Це аналог смарт-об'єкта в Photoshop або символу в Illustrator.
  • Тригер: спосіб початку анімації - тобто дотик, скролл, ховер і т.д .. У Principle
    тригер можна задати, виділивши будь-який елемент всередині Principle і клікнувши на
    іконку у вигляді спалаху блискавки, яка з'являється справа.
  • Швидкий перехід: зміна стану з одного артборда на інше, тобто слайд-ефект вліво або
    вправо.
  • Пом'якшувальний ефект: ступінь м'якості переходу на основі того, як анімація починається і закінчується.

A. Тригер і перехід

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

  1. Задайте початковий стан: як ваші елементи UI виглядають на початку перед тим, як
    стартує анімація.
  2. Задайте тригер: виберіть елемент взаємодії, а також дію, яка запускає
    анімацію.
  3. Визначте кінцевий стан: як елементи відображаються в кінці анімації.

Як тільки ви налаштували анімацію, можете переглянути її у вікні превью.

В. Тривалість анімації і пом'якшувальний ефект

За замовчуванням Principle створює напівсекундного анімації. Іноді цього недостатньо, щоб в деталях побачити ефект переходу. Ви можете змінити тривалість і "пом'якшувальний" ефект в панелі анімації, слідуючи цим крокам:

  1. Відкрийте панель анімації: виділіть чорні стрілки між двома артбордамі, і натисніть кнопку "Animate" у верхній панелі.
  2. Збільште тривалість анімації: пересуньте кінці синіх ліній.
  3. Застосуйте пом'якшення: виділіть всі крапки в формі ромбів і виберіть "Ease Both" зі списку, щоб пом'якшити переходи.

Що вийде?

Це відео показує, що ви зможете робити після освоєння уроку. Демо-додаток демонструє колірну палітру Google Material Design, і надає деталі по кожному кольору, коли ви оберете якийсь відтінок. Ви зможете створювати анімацію завантаження, переходи між сторінками з плавним parallax-ефектом, а також слайдер меню.

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

Переходимо з Sketch-файлу в Principle

  1. Наведіть артборди в порядку переходів між ними. Наприклад, при листанню екрану праворуч наступний екран повинен стосуватися правого краю попереднього екрана, який він замінить після анімації.
  2. Коли ви все налаштували в Sketch-файлі, перейдіть в Principle, створіть порожній документ розміром 360 × 640 і натисніть кнопку Import.

Видалення шапок екранів для безшовного скролінгу

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

Створення анімації завантаження - фігури

  1. Виділіть групу фігур завантаження, і натисніть на "Create Component", що містить фігури і текст завантаження. Створіть компонент для тексту з першим символом; ми проаніміруем текст окремо.
  2. Виділіть згруповані фігури. Виберіть тригер "Tap" і перетягніть його поверх того ж артборда, щоб створити дублікат.
  3. Другий артборд представляє кінцевий стан анімації, і ви можете повернути групу, використовуючи параметр кута. Задайте інші значення кута для заливки і контуру, щоб створити більш цікавий ефект.
  4. На завершення, виділіть стрілки між артбордамі, клікніть "Animate", щоб відкрити панель анімації, і змініть тривалість до 1.00 секунди.

Створення анімації завантаження - текст

  1. Спочатку створіть slide-up анімацію. Виділіть фігуру кнопки, і застосуєте тригер "Tap". У новому артборде посуньте все екрани вгору на 640px (саме така зараз висота артборда).
  2. Тепер створимо паралакс-ефект. Перейдіть на попередній артборд, або на вітальний екран, посуньте геометричні фігури і текст вниз на різні значення Y.
  3. Нарешті, всередині панелі анімації, збільште тривалість, скажімо, до 1 с. Застосуйте ефект "Ease Both" до тимчасової прямий (попередньо перевірте, що всі крапки в формі ромба виділені, і клікніть на будь-яку синю лінію, щоб застосувати ефект до всіх).
  4. Перегляньте анімацію і посуньте фігури так, щоб паралакс-ефект виглядав добре.

Створення parallax-ефекту Сторінки вітання

  1. Виділіть компонент завантаження і застосуєте тригер "Tap", потягнувши стрілку від нього в будь-яке місце артборда.
  2. Виділіть всі екрани (з основної групи) і посуньте їх вгору на 640px.
  3. Поверніться на попередній артборд, посуньте фігури на вітальному екрані вниз. Це створить асинхронний ефект перегортання (це і є паралакс).
  4. Налаштуйте анімацію додаванням часу на перехід в панелі анімації: виділіть стрілку між артбордамі, пересуньте точки синіх ліній на 1с.

Створення parallax-ефекту - сторінка About

  1. Виділіть кнопку у вигляді стрілки вниз (переконайтеся, що виділяєте всю групу) і застосуєте тригер "Tap", потягнувши стрілку від нього на будь-яке місце артборда.
  2. Виділіть всі екрани (з основної групи) і пересуньте їх на 640px.
  3. Поверніться на попередній артборд, посуньте фігури на екрані "About" вниз. Це створить асинхронний ефект перегортання, тобто паралакс.

Створення Parallax-ефекту - Сторінка Colors

  1. Застосуйте тригер "Tap" до кнопки у вигляді стрілки вниз (вся група повинна бути виділена), це створить новий артборд.
  2. На новому артборде виділіть всі екрани і посуньте їх вгору на 640 px.
  3. На попередньому артборде посуньте кольору і текст вниз. Пам'ятайте: чим нижче ви рухаєте об'єкт, тим довше доведеться рухатися вгору, так що використовуйте різне розташування об'єктів для створення більш динамічного ефекту.
  4. Відкрийте меню анімації, застосуєте ефект "ease both" на всі сині тимчасові смуги всередині панелі анімації.

Перегортання убік - сторінка вибору кольору

  1. Застосуйте тригер "Tap" на кнопку "Load More" на екрані "Colours".
  2. На новому артборде посуньте контент "Colours" і "Selection" на 360px вліво (ширина артборда).
  3. Поверніться на попередній артборд і посуньте контент екрану в зворотному напрямку - вправо.
  4. Пам'ятайте, що ви також можете анімувати непрозорість екрану, від 0 до 100%.
  5. Експериментуйте з тривалістю анімації і ефектом пом'якшення для досягнення потрібного переходу.

Анімація іконки меню

  1. Будь-шар або фігура, в якому були ефекти в исходнике Sketch (наприклад, тіні) імпортуються в Principle як зображення. Якщо потрібно редагувати фігури всередині Principle, спробуйте не додавати ніяких спецефектів до імпорту.
  2. Використовуючи існуючу іконку як орієнтир, намалюйте три тонких прямокутника, і згрупуйте їх для створення іконки гамбургер-меню. Ви можете видалити або приховати попередню іконку меню.
  3. Виділіть нову іконку і застосуєте до неї тригер "tap".
  4. У новому артборде поверніть верхній і нижній прямокутник іконки меню, вони повинні бути вирівняні по центру, і задайте 0% непрозорості середньому.
  5. Щоб побачити тільки що створену анімацію, з'єднайте змінену іконку меню з артбордом превью через тригер "Tap" і протестуйте.

Створення ефекту перегортання меню

  1. На артборде кінцевого стану пересуньте всі екрани вправо, поки посилання меню не будуть вирівняні по лівому краю закриває іконки меню.
  2. Виділіть все всередині папки "Colors", крім вмісту меню, і світло-сірий фон, зменшите непрозорість до 25%. Анімація буде затінювати контент сторінки, фокусуючи користувача на меню.
  3. Збільште тривалість анімації, перейдіть на попередній артборд, щоб трохи пересунути контент меню для створення плавного ефекту.

Зрушення сторінки контактів

  1. У відкритому меню застосуєте тригер "Tap" на кнопку "Contact Us".
  2. На щойно створеному артборде посуньте все екрани вгору на 640 px.
  3. Поверніться назад на артборд превью і посуньте елементи з сторінки "Form" вниз.
  4. Наведіть елементи на різні значення Y, щоб створити паралакс-ефект.
  5. Нарешті, виділіть стрілки між артбордамі, збільште довжину анімації та застосуєте ефект "Ease Both" до синіх тимчасовим смужках.

І, нарешті, сторінка Thank You

  1. Застосуйте тригер "Tap" до кнопки "send message".
  2. На новому артборде посуньте все екрани вгору на 640 px.
  3. Перейдіть на попередній артборд і посуньте елементи з сторінки "Confirmation" вниз.
  4. Пограйте з настройками масштабу і повороту для кольорової іконки, щоб створити більш динамічний ефект.
  5. Не забудьте збільшити тривалість анімації для кращого сприйняття ефекту переходу.

Простота додавання анімацій в Principle

Principle - це фантастичний інструмент для реалізації ваших ідей по анімації призначених для користувача інтерфейсів.

Його інтерфейс повністю в стилі Mac, і він був створений для ідеальної сумісності з Sketch-файлами.

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

Як ваші враження від уроку і самої програми? Діліться фідбек в
коментарях.

Читайте також:

Principle для професіоналів, повне керівництво

Що вийде?
Як ваші враження від уроку і самої програми?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью