--- title: "Motion guidelines: co to są? Słownik pojęć" description: "Motion guidelines to zasady ruchu marki: tempo, krzywe przyspieszania i hamowania, wejścia i przejścia, animacja logo i zakazy." url: https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/ --- [Animacja i wideo](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=animacja) # Motion guidelines Inaczej zasady animacji marki, motion system Motion guidelines to zasady ruchu marki: tempo, krzywe przyspieszania i hamowania, wejścia i przejścia, animacja logo i zakazy. Dzięki nim spot, post i aplikacja ruszają się tak samo. ## Usługi - [Motion design](https://fluostudio.pl/uslugi/projektowanie-graficzne/motion-design/) - [Brandbook](https://fluostudio.pl/uslugi/branding/brandbook/) Spot na YouTube robi jedno studio, posty drugie, a aplikację zespół programistów. Każdy animuje po swojemu. W spocie logo rozsypuje się w cząsteczki, w poście wjeżdża z boku, w aplikacji przyciski sprężynują przy każdym dotknięciu. Kolory i kroje się zgadzają, a marka i tak wygląda jak trzy różne firmy. Motion guidelines robią dla ruchu to, co [księga znaku](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-znaku/) robi dla logo. Zapisują decyzje, które inaczej każdy animator podejmuje sam. ## Co zawierają - **Charakter ruchu**: dwa, trzy słowa, które go opisują, i przykłady. - **Tempo**: czasy trwania krótkich, średnich i długich ruchów, w milisekundach dla interfejsu i w klatkach dla filmu. - **Krzywe**: [easing](https://fluostudio.pl/baza-wiedzy/slownik/easing/) zapisany liczbami, które animator i programista wpiszą u siebie. - **Wejścia, wyjścia i przejścia**: jak pojawiają się tekst, zdjęcia, wykresy i ikony. - **[Animacja logo](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/)**: wersje i miejsca użycia. - **Zakazy**: czego marka nie robi, np. nie obraca logo i nie sięga po efekty z szablonów. - **Pliki**: szablony do programów do animacji, gotowe animacje w [Lottie](https://fluostudio.pl/baza-wiedzy/slownik/lottie/) i przykładowe filmy. Zwykle są rozdziałem brandbooka albo osobnym dokumentem. W firmach, które mają [design system](https://fluostudio.pl/baza-wiedzy/slownik/design-system/), czasy i krzywe trafiają do niego jako zmienne w kodzie. Zmiana tempa w jednym miejscu zmienia je wtedy w całej aplikacji. ## Ruch a dostępność Zasady ruchu muszą uwzględniać osoby, którym animacje przeszkadzają, np. przy zaburzeniach błędnika. Strona i aplikacja reagują na systemowe ustawienie ograniczenia ruchu, a nic nie miga częściej niż trzy razy na sekundę. Ten drugi limit wynika wprost ze standardu WCAG, czyli zasad [dostępności cyfrowej](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/). ## Kto ich potrzebuje Firma, która robi jeden film rocznie, nie potrzebuje osobnego dokumentu. Wystarczy animacja logo i kilka zasad w brandbooku. Osobne motion guidelines mają sens, gdy ruch robi kilka zespołów naraz: agencja, studio wideo i programiści aplikacji. ## Zobacz też - [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/) - [Animacja i wideo Easing Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot.](https://fluostudio.pl/baza-wiedzy/slownik/easing/) - [Animacja i wideo Animacja logo Animacja logo to krótki, zwykle kilkusekundowy ruch, w którym znak marki pojawia się, składa albo zmienia. Otwiera i zamyka filmy, spoty, prezentacje i posty.](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/) - [Identyfikacja wizualna Brandbook Brandbook to dokument, który opisuje całą markę: jej strategię, osobowość, sposób mówienia i identyfikację wizualną z zasadami użycia. Obejmuje więcej niż księga znaku czy księga identyfikacji wizualnej.](https://fluostudio.pl/baza-wiedzy/slownik/brandbook/) - [Identyfikacja wizualna Design system Design system to uporządkowany zbiór komponentów, zasad i plików źródłowych, z których zespół składa kolejne ekrany albo materiały marki. Zamiast projektować każdy element od nowa, korzysta się z gotowych, sprawdzonych części.](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Identyfikacja wizualna Księga identyfikacji wizualnej Księga identyfikacji wizualnej to dokument z zasadami całego systemu wizualnego marki: logo, kolorów, typografii, ikon, zdjęć, siatek i wzorów materiałów. Pokazuje, jak z tych elementów składać nowe rzeczy.](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-identyfikacji-wizualnej/) - [Animacja i wideo Lottie Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects. Na stronach i w aplikacjach zwykle waży mniej niż film i jest ostry w każdym rozmiarze.](https://fluostudio.pl/baza-wiedzy/slownik/lottie/) - [Strony www Dostępność cyfrowa Dostępność cyfrowa to projektowanie stron i aplikacji tak, żeby mogły z nich korzystać także osoby z niepełnosprawnościami, np. niewidome, słabowidzące, niesłyszące albo obsługujące komputer tylko klawiaturą.](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) Hasło pojawia się też w: [Mikrointerakcja](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/), [Typografia kinetyczna](https://fluostudio.pl/baza-wiedzy/slownik/typografia-kinetyczna/) ## Potrzebujesz ruchu, który pasuje do marki? Pokażemy, jak to robimy. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)