Курс Principle: Анімація інтерфейсів та створення прототипів

Що ви зможете після курсу

• Орієнтуватися в інтерфейсі Principle: артборди, таймлайн, панелі Animate і Drivers, інспектор
• Обирати подію анімації (авто, tap, long tap, touch down і up, drag, hover, scroll) під потрібну взаємодію
• Добирати криві руху: ease in, ease out, spring і лінійну
• Налаштовувати через Drivers анімацію, що залежить від скролу та перетягування, зокрема паралакс і режими page та scroll
• Виокремлювати частини прототипу в компоненти й використовувати їх для масок, меню та рядка, що біжить
• Експортувати готовий прототип як застосунок для Mac і перевіряти його на iPhone через Mirror

Кому підійде курс

Курс не підійде тим, у кого немає комп’ютера Mac: Principle працює лише на ньому. Він не вчить малювати інтерфейси в Sketch чи Figma і не стосується програмування та передавання анімації в розробку.

Як проходить навчання

• Дві теоретичні частини: інтерфейс, події та криві; далі Drivers і компоненти — Спочатку ви отримуєте базову термінологію та інструменти, на які спирається практика.
• Дві практичні частини на одному наскрізному прикладі, музичному плеєрі — Ви бачите, як події, криві, Drivers і компоненти працюють разом в одному проєкті.
• Розбір підготовки макета у Sketch до імпорту — Ви заздалегідь знаєте про різні назви шарів, суфікси та шари, які зливаються в растр, і уникаєте дивних переходів.
• Названо обмеження програми: лише прямокутники й текст, взаємодії не можна групувати, розміри змінюються від верхньої лівої точки — Ви плануєте сценарій заздалегідь і не витрачаєте час на те, чого в Principle зробити не можна.
• Прототип доводиться до експорту та перевірки на телефоні — На виході у вас робочий застосунок для Mac, який можна показати на iPhone.

Що знадобиться

• Комп’ютер Mac із програмою Principle
• Макети у Sketch або Figma для імпорту
• iPhone і Mirror для перевірки прототипу на телефоні

Чому самотужки зазвичай не виходить

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

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

Курс збирає ці правила й обхідні прийоми в одному місці та показує їх на робочому прикладі.

Що зміниться

Як побудовано шлях

1. Інтерфейс, події та криві Знайомство з робочою областю Principle, подіями анімації та кривими швидкості.
2. Drivers і компоненти Анімація, що залежить від скролу та перетягування, і винесення частин прототипу в компоненти.
3. Початок прототипу плеєра Підготовка макета у Sketch, імпорт, вступний екран із логотипом, рядок, що біжить, і картки, що гортаються, з паралаксом.
4. Завершення та перевірка Меню, екран відтворення зі шкалою та звуком, експорт у застосунок для Mac і перевірка через Mirror.

Програма курсу

4 уроки · 1 година 7 хвилин відео · Теорія з інтерфейсу, подій, Drivers і компонентів, далі практика на проєкті музичного плеєра.

• Від інтерфейсу Principle до готового прототипу плеєра на iPhone 4 уроки

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

  • Огляд Principle: інтерфейс, події та криві14:14

    Розбирається призначення Principle, робоча область з артбордами, інспектором і панелями контролів, а також основні події анімації (tap, hover, drag, scroll та інші). Показано криві швидкості ease in, ease out, spring і лінійну та правило, за яким в об’єкта в початковому й кінцевому стані мають збігатися імена.

  • Панель Drivers і компоненти13:07

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

  • Прототип плеєра: імпорт зі Sketch і анімація карток20:21

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

  • Завершення плеєра, експорт і перевірка через Mirror19:19

    Завершується прототип плеєра: меню як компонент, зміна картинок подією drag begins і екран відтворення зі шкалою, що заповнюється, та звуком. Потім прототип експортується в застосунок для Mac і перевіряється на телефоні через Mirror.

Часті запитання

Про цей курс

• Чи потрібен досвід анімації, щоб почати?

  Ні. Поріг входження в Principle низький, а курс починається з інтерфейсу, подій і кривих анімації. Потрібні лише готові макети у Sketch або Figma.

• Чи можна працювати в Principle на Windows?

  Ні, програма працює лише на Mac. Для перевірки прототипу на телефоні знадобляться iPhone і Mirror.

• Чи вчить курс малювати макети інтерфейсів?

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

• Що я збиратиму на практиці?

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

• Як показати готовий прототип клієнту?

  Прототип експортується командою Export як застосунок для Mac і відкривається на iPhone через Mirror. Корисно додати повернення на головний екран за натисканням.

• Чого не можна зробити в Principle?

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

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

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

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

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

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

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

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

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

• Чи є терміни проходження курсу?

  Ні. Ані дедлайнів, ані розкладу, ані доступу, що згорає. Завантажили — дивіться коли зручно, з будь-якими перервами.

• Чи можна поділитися курсом з іншою людиною?

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

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.