Sari la conținut
RUROEN
Intră în cont Alege un curs
Design MO—01

Motion pentru interfețe

Animația într-o interfață explică, nu decorează: de unde a apărut ecranul, ce se întâmplă chiar acum și dacă produsul te-a auzit. Analizăm duratele și curbele, tranzițiile și micro-interacțiunile, minimul necesar de After Effects și predarea mișcării către dezvoltare prin valori, nu prin cuvinte.

8 module19 lecții
14 orede video și practică
Necesită bazăcerințe
Pe viațăacces și actualizări
Format
€49 plată unică
Plasează comanda Deschide programa
Plată cu cardul sau prin PayPal
Accesul se deschide imediat după plată
Retur în 14 zile, dacă nu ai început să vizionezi
Rezultat

Ce vei putea face

Să răspunzi la ce folosește fiecare animație înainte de a o face
Să alegi durata și curba după tipul mișcării, nu din ochi
Să construiești tranziția între ecrane printr-un element comun
Să faci butoanele și comutatoarele să răspundă într-un fel care se simte rapid
Să arăți încărcarea și eroarea astfel încât omul să înțeleagă ce se întâmplă
Să faci animația unei iconițe în After Effects și să o corectezi din graficul de viteză
Să livrezi un Lottie care supraviețuiește exportului
Să scrii specificația mișcării: valori, curbe, întârzieri
Programa

8 module, un singur proiect

Apasă pe un modul ca să vezi lecțiile

01 De ce are nevoie interfața de mișcare2 lecții · 1 h 28 minDeschis

Începem cu întrebarea la care răspunde animația. Și imediat cu cazul invers: când mișcarea încurcă și trebuie oprită.

Cele patru sarcini ale animației: legătură, stare, răspuns, explicație
Când animația încurcă: durată, rău de mișcare, reduce motion
02 Durate și curbe3 lecții · 2 h 16 min

Modulul principal al cursului. Cifre în locul senzațiilor: cât durează o mișcare, ce curbă are și de ce un arc este uneori mai onest decât un easing.

Durata: 120, 200, 300 ms și de unde vin aceste cifre
Curbe: de ce linear arată mort
Arc în loc de curbă: rigiditate și amortizare
03 Tranziții între ecrane2 lecții · 1 h 32 min

Un ecran nu trebuie să apară de nicăieri. Legăm ecranele printr-un element comun și stabilim ordinea apariției.

Elementul comun: obiectul nu dispare, se mută
Ierarhia intrării: ce apare primul și de ce
04 Micro-interacțiuni3 lecții · 2 h 14 min

Mărunțișurile care se adună într-o senzație de calitate: un răspuns în o sută de milisecunde, o așteptare onestă și o eroare inteligibilă.

Buton, comutator, checkbox: răspuns în 100 ms
Încărcare: skeleton, progres și așteptare fără minciună
Eroare și succes: cum arăți fără să sperii
05 After Effects, doar ce trebuie3 lecții · 2 h 19 min

Nu un curs despre program, ci minimul din el cu care se face animația de interfață: compoziție, chei, graficul de viteză și formele.

Compoziție, layere, chei: minimul pentru o interfață
Graficul de viteză: corectăm curba manual
Forme și măști: animația unei iconițe
06 Iconițe și Lottie2 lecții · 1 h 31 min

Iconița animată este cea mai frecventă sarcină. O facem din vector și o livrăm într-un format pe care dezvoltatorul îl înțelege.

Iconiță animată dintr-un vector existent
Export în Lottie: ce supraviețuiește exportului și ce nu
07 Predarea către dezvoltare2 lecții · 1 h 29 min

Nu este de ajuns să arăți un clip — mișcarea trebuie descrisă. Analizăm specificația și ce știu browserul și aplicația să facă singure, fără un fișier de animație.

Specificația mișcării: valori în loc de «fă frumos»
Ce face platforma singură: tranziții versus un clip gata făcut
08 Proiectul2 lecții · 1 h 32 min

Lucrarea finală: un clip scurt despre produs și un studiu de caz în care se vede nu doar rezultatul, ci și logica mișcării.

Clip despre produs: scenariu, ritm, sunet
Prezentarea lucrării: preview, GIF, studiu de caz cu parametri
Materiale

Ce primești

19 lecții cu transcriere

Video cu marcaje de timp și variantă scrisă: toate valorile duratelor și curbelor există în text, nu trebuie copiate de pe ecran.

Proiectele After Effects din lecții

Compoziții gata pentru fiecare analiză: le poți deschide, muta cheile și vedea ce schimbă fiecare valoare.

Fișă cu durate și curbe

O fișă de o pagină: tipul mișcării — durata — curba, cu exemple despre unde se potrivește fiecare variantă.

Șablon de specificație pentru dezvoltare

Tabelul de predare a mișcării: element, proprietate, valori, curbă, întârziere — în forma care este acceptată în lucru.

Vladimir Rosca
Autorul cursului

Vladimir Rosca

Predă direcția «Grafică și motion» la Forma. Lista completă a cursurilor este pe pagina autorului.

Toate cursurile autorului

Primul modul este deschis în întregime

Urmărește lecțiile primului modul și prima temă. Dacă formatul nu ți se potrivește, nu ai pierdut nimic.

Cumpără cu €49Vizionează gratuit