Безкоштовно · українською · 8 хв читання
Моушн-дизайн для початківців: принципи руху й перші вправи
Моушн-дизайн з нуля: класичні принципи анімації, тривалість і плавність руху, доступність і три вправи, які можна зробити в будь-якій програмі вже сьогодні.
- Які принципи руху працюють у будь-якій програмі
- Скільки мілісекунд має тривати анімація в інтерфейсі
- Три вправи для старту й де отримати фідбек
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік
Моушн-дизайн з нуля: 5 кроків
- 1
Крок 1
Зрозумійте, навіщо рух дизайнерові
- 2
Крок 2
Вивчіть класичні принципи анімації
- 3
Крок 3
Таймінг: скільки триває рух
- 4
Крок 4
Плавність: криві руху
- 5
Крок 5
Доступність і три перші вправи
- 1504
- учасники спільноти
- 8915
- повідомлень із запитаннями з липня 2024
- 9
- дизайн-ігор з вересня 2024
- 759
- людей писали в чат
Цей гайд для вас, якщо ви
Хочете в моушн, але не знаєте, з чого почати
Бачите десятки програм і курсів і не розумієте, що вчити першим: інструмент чи сам рух.
Робите статичний дизайн
Робите інтерфейси, банери чи логотипи й хочете, щоб вони рухалися осмислено, а не «бо так красиво».
Вже анімуєте, але «щось не те»
Ключові кадри ставити вмієте, а рух усе одно виглядає механічним або надто повільним.
Коротко
- Моушн-дизайн — це не програма, а вміння керувати рухом: що рухається, коли, як довго і з яким характером. Принципи однакові в After Effects, Figma чи Procreate.
- Основа — 12 принципів анімації з книжки Френка Томаса й Оллі Джонстона «The Illusion of Life» (1981). Для дизайнера найкорисніші таймінг, плавність, передчуття руху й дуги.
- В інтерфейсах рух має бути коротким: Nielsen Norman Group радить здебільшого 100–500 мс.
- Рівномірний рух виглядає неприродно. Елемент, що з'являється, має сповільнюватися під кінець (ease-out), а для того, що зникає, часто беруть розгін (ease-in).
- Рух — не для всіх: дайте змогу зупинити автоматичну анімацію, що триває понад 5 секунд, і не робіть більше трьох спалахів за секунду.
Моушн-дизайн з нуля: 5 кроків
- 1
Крок 1
Зрозумійте, навіщо рух дизайнерові
Рух у дизайні має працювати, а не прикрашати. У Apple Human Interface Guidelines перша порада — додавати рух з метою і не анімувати заради анімації: надмірний рух відволікає, а комусь стає фізично некомфортно. Nielsen Norman Group називає основні задачі анімації в інтерфейсі:
- зворотний зв'язок: кнопка відгукнулася на натискання, перемикач пересунувся;
- зміна стану: елемент розгорнувся, завантаження завершилося;
- навігація: користувач бачить, звідки прийшов новий екран і куди зник попередній;
- підказка: рух показує, що з елементом можна взаємодіяти.
💡 Перед кожною анімацією дайте відповідь на одне питання: що людина зрозуміє завдяки цьому руху? Якщо відповіді немає, анімацію можна прибрати.
- 2
Крок 2
Вивчіть класичні принципи анімації
12 принципів анімації описали аніматори Disney Френк Томас і Оллі Джонстон у книжці «The Illusion of Life: Disney Animation» 1981 року. Вони виросли з роботи студії починаючи з 1930-х, але так само працюють і в рекламі, і у вебдизайні. Для старту не треба вчити всі дванадцять одразу. Почніть з тих, що найчастіше знадобляться дизайнерові:
- Таймінг: кількість кадрів або мілісекунд визначає, чи предмет здається легким чи важким;
- Сповільнення на початку й у кінці (slow in and slow out): більше кадрів біля крайніх поз робить рух живим;
- Передчуття (anticipation): невеликий рух у протилежний бік перед головною дією — як замах перед ударом;
- Сплющування й розтягування (squash and stretch): передає вагу й гнучкість, але об'єм предмета має зберігатися;
- Дуги (arcs): у природі майже все рухається по дузі, а не по прямій;
- Інерція і накладання руху (follow through and overlapping action): частини предмета зупиняються не одночасно;
- Постановка (staging): одна чітка дія за раз, щоб погляд знав, куди дивитися.
💡 Повний перелік з поясненнями самих авторів — на сайті Frank & Ollie. Читайте по одному принципу й одразу пробуйте його в простій вправі.
Не вчіться наодинці
У спільноті можна показати першу анімацію, спитати про таймінг чи криві руху й отримати фідбек від інших дизайнерів. Покажіть два варіанти одного руху й спитайте, який читається краще. Це безкоштовно.
Показати анімацію на фідбекБезкоштовно. 1504 дизайнери вже в спільноті.
- 3
Крок 3
Таймінг: скільки триває рух
Найчастіша помилка початківців — надто довгі анімації. Nielsen Norman Group пише, що тривалість більшості анімацій в інтерфейсі має бути в межах 100–500 мс залежно від складності й відстані, яку проходить елемент. Простий відгук, як-от перемикач чи галочка, триває близько 100 мс, поява модального вікна — 200–300 мс, а на 500 мс анімація вже починає дратувати. Material Design 3 пропонує стартові пари для переходів:
- елемент, що з'являється на екрані, — 400 мс (Emphasized decelerate);
- елемент, що назавжди зникає з екрана, — 200 мс (Emphasized accelerate);
- перехід, що починається й закінчується на екрані, — 500 мс (Emphasized) або 300 мс для простих утилітарних елементів (Standard).
💡 Правило з обох джерел: поява довша, зникнення коротше. Нове на екрані потребує уваги, а те, що зникає, — ні. І що більшу відстань проходить елемент, то довше триває рух.
- 4
Крок 4
Плавність: криві руху
Предмети в реальному світі не рушають і не зупиняються миттєво, тому рівномірний (linear) рух виглядає механічно. Характер руху задає крива плавності (easing). Три основні види:
- ease-out — починається швидко й сповільнюється: для появи елементів, погляд встигає побачити, де предмет зупиниться;
- ease-in — починається повільно й розганяється: для елементів, що зникають, ніби відлітають геть;
- ease-in-out — повільний старт, найшвидше в середині й плавна зупинка.
💡 Material Design 3 у версії Expressive переходить з кривих і тривалостей на фізичну систему пружин (springs) з параметрами жорсткості й загасання. Почніть із кривих: вони є в будь-якій програмі, а пружини буде легше зрозуміти, коли відчуєте різницю між ease-in і ease-out.
Рух виглядає «не так», а чому — незрозуміло? Спитайте в спільноті → - 5
Крок 5
Доступність і три перші вправи
Рух може заважати: деяким людям анімація збільшення чи панорамування викликає дискомфорт. Тому на вебі є налаштування prefers-reduced-motion: користувач просить пристрій зменшити необов'язковий рух, а ви в дизайні передбачаєте спокійнішу версію. WCAG 2.2 вимагає давати змогу зупинити або сховати рух, що запускається сам, триває понад 5 секунд і показується поруч з іншим вмістом, а також не допускати більше трьох спалахів за секунду. Тепер практика — у будь-якій програмі, яка у вас є:
- М'ячик, що стрибає: таймінг, сповільнення і сплющування в одній вправі;
- Відгук кнопки: натискання приблизно за 100 мс, без зайвих ефектів;
- Поява й зникнення картки: поява з ease-out довша, зникнення з ease-in коротше.
💡 Порівнюйте варіанти поруч: однаковий рух з різною тривалістю чи кривою. Покажіть обидва в спільноті й спитайте, який читається краще.
Ви не самі з цими питаннями
Ми порахували, про що найчастіше питають у нашій спільноті. Навчання й курси — тема номер один, тож питання «з чого почати новий напрям» тут цілком доречні.
Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.
Практика з дедлайном і живим фідбеком
Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.
Дизайн-гра · січень 2026
Редизайн сайту НАОМА
Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.
AI-челендж · травень 2025
Лендинг, створений AI
Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.
Воркшоп · квітень 2026
Figmosha: AI у Figma
Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.
Безкоштовно. 1504 дизайнери вже в спільноті.
Як приєднатися — 1 хвилина
- 1
Натисніть кнопку
Відкриється Telegram зі спільнотою Spaceberry.
- 2
Приєднайтеся
Це безкоштовно: достатньо акаунта в Telegram.
- 3
Представтеся
Напишіть, з чого починаєте, і поставте перше питання.
Часті питання
Не знайшли відповіді? Поставте питання в спільноті — там відповідають.
У якій програмі вчити моушн-дизайн?
Принципи руху не залежать від програми, тому починайте з тієї, що вже є. Для інтерфейсів підійде прототип у Figma, для анімації логотипів і графіки — After Effects, для покадрової мальованої анімації — Procreate на iPad. Коли відчуєте таймінг і плавність, переходити між програмами буде легко.
Чи треба вміти малювати, щоб займатися моушн-дизайном?
Ні, не обов'язково. Більшість вправ для старту робиться з простими фігурами й текстом: м'ячик, кнопка, картка. Малювання знадобиться, якщо захочете робити покадрову анімацію персонажів. А для моушну в інтерфейсах і рекламі важливіше відчуття таймінгу, плавності й композиції: їх тренують на тих самих простих фігурах, змінюючи лише тривалість і криву руху.
Скільки має тривати анімація в інтерфейсі?
Nielsen Norman Group радить здебільшого 100–500 мс: близько 100 мс для простого відгуку, 200–300 мс для появи модального вікна. Шукайте найкоротшу тривалість, за якої рух ще не здається різким: анімації частіше бувають задовгими, ніж закороткими. Поява елемента зазвичай довша за зникнення, а що більшу відстань проходить предмет, то довше триває рух.
Що таке easing і навіщо він потрібен?
Easing — це крива, яка визначає, як змінюється швидкість руху. Без неї предмет рухається рівномірно й виглядає механічно. Для появи елементів зазвичай беруть ease-out (сповільнення в кінці), для зникнення — ease-in (розгін). Криві плавності є в будь-якій програмі для анімації, тож почніть із них, а складніші фізичні моделі на кшталт пружин освоїте пізніше.
Чи платна спільнота Spaceberry?
Ні. Spaceberry Community безкоштовна: її підтримує громадська організація Spaceberry Foundation, яка працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram. У спільноті 1504 дизайнери: тут питають, з чого почати новий напрям, показують перші анімації на фідбек і беруть участь у дизайн-іграх з однаковим брифом і дедлайном. Порівняти два варіанти руху з іншими — найшвидший спосіб натренувати око.
Покажіть свій перший рух спільноті
Приєднуйтеся до 1504 дизайнерів, які вчаться, діляться роботами й грають у дизайн-ігри. Покажіть свою першу анімацію й отримайте фідбек.
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік
Оновлено · Spaceberry Foundation
Джерела:
- Adobe — 12 Principles of Animation
- Frank & Ollie — Principles of Physical Animation
- Nielsen Norman Group — Executing UX Animations: Duration and Motion Characteristics
- Nielsen Norman Group — The Role of Animation and Motion in UX
- Material Design 3 — Applying easing and duration
- Material Design 3 — Motion physics system: how it works
- Apple Human Interface Guidelines — Motion
- W3C — Understanding SC 2.2.2: Pause, Stop, Hide
- W3C — Understanding SC 2.3.1: Three Flashes or Below Threshold
- MDN — prefers-reduced-motion