Un ghid pas cu pas pentru animația UI cu principiu și schiță

Proiectarea unei interfețe UI având în vedere animația și tranzițiile este o modalitate excelentă de a planifica o experiență de utilizator (UX) mai bună pentru următoarea ta aplicație. Micro-interacțiunile animate sunt modalitatea perfectă de a stimula implicarea utilizatorilor, într-o lume cu intervale de atenție scurte. Acesta este motivul pentru care Airbnb a introdus recent Lottie – „noul său instrument open-source care face ca adăugarea de animație la aplicațiile native să fie foarte rapidă”.

Proiecte precum Lottie arată importanța din ce în ce mai mare a adăugării mișcării ca element nou pentru crearea UX îmbunătățită atât pentru aplicații, cât și pentru site-uri web.

În acest tutorial, veți învăța tehnici eficiente de animație UI folosind Principle pentru Mac. După ce veți parcurge acest ghid, veți putea transforma machetele plictisitoare și statice în prototip interactiv pentru a vă prezenta mai bine munca. Puteți aplica ceea ce veți învăța aici pentru a vă îmbunătăți următorul pitch UI și loviturile Dribbble.

Să începem.

Descărcați aceste resurse gratuite pe care să le urmăriți.

Veți avea nevoie doar de aplicațiile Principle și Sketch pentru a urma. Dacă nu le aveți deja, puteți descărca o versiune de încercare gratuită folosind linkurile de mai jos.

• Descărcați o versiune de încercare gratuită a Principle de aici.

• Descărcați o versiune de încercare gratuită a Sketch de aici.

• Descărcați fișierul sursă gratuit al tutorialului aici.

O privire de ansamblu asupra interfeței principale

Dacă sunteți obișnuit cu Mac OS, atunci interfața lui Principle vă va părea foarte familiară. Are trei secțiuni principale: o bară laterală, o zonă de design care arată panourile de artă și fereastra de previzualizare pe care o puteți redimensiona și muta.

Înțelegerea conceptelor de bază de animație în principiu

Este relativ simplu de animat cu Principle. Nu trebuie să aveți un fundal de animație pentru a începe. De fapt, majoritatea sarcinilor grele sunt automatizate de Principle și trebuie să vă concentrați doar pe ceea ce începe o animație (adică un buton, un link, un eveniment de defilare), cum începe animația și cum se termină.

Pentru a vă ajuta să urmați mai bine, iată un scurt lexic cu termeni pe care îl veți vedea pe parcursul ghidului.

• Componentă: O componentă este un fel de grupare care ajută la includerea elementelor și chiar a animațiilor. Este echivalentul unui „obiect inteligent” în Photoshop sau al unui „simbol” în Illustrator.
• Declanșator: O modalitate de a începe o animație - adică prin atingerea, derularea, trecerea cu mouse-ul, etc. În Principle, un declanșator poate fi definit selectând orice element din Principle și făcând clic pe pictograma care apare în partea dreaptă cu o pictogramă fulger.
• Tranziție: o schimbare de stare de la o panou de artă la alta, adică alunecare la stânga sau la dreapta.
• Efect de ușurare: nivelul de netezime al unei tranziții bazat pe modul în care începe și se termină animația.

A. Declanșare și tranziție

Primul pas pentru a anima cu Principle este să setați un declanșator (comportamentul sau acțiunea care pornește animația) pe un element (adică un buton sau o legătură) și să îi modificați starea inițială și/sau finală (adică poziția sau scara acestuia). de la începutul până la sfârșitul animației).

1. Definiți o stare inițială: cum arată elementele dvs. UI la început înainte ca animația să aibă loc.
2. Definiți declanșatorul: selectând elementul de interacțiune și care acțiune activează animația.
3. Definiți starea finală: modul în care sunt afișate elementele la sfârșitul animației.

Odată ce ați setat animația, o puteți previzualiza în fereastra de previzualizare.

B. Lungimea animației și efectul de relaxare

În mod implicit, Principle creează o animație de jumătate de secundă. Uneori, asta nu este suficient pentru a vedea efectul de tranziție în detaliu. Puteți modifica durata și efectul de „ușurare” din panoul de animație urmând acești trei pași.

1. Deschideți panoul de animație: selectați săgețile negre dintre două tablouri de desen și faceți clic pe butonul „Animați” situat în bara de sus.
2. Extindeți durata animației: mutați punctele de capăt ale liniilor albastre.
3. Aplicați ușurarea: selectați toate punctele în formă de diamante și alegeți „Ușurează ambele” din meniul drop-down pentru a netezi tranzițiile.

Ce vei primi

Acest videoclip vă arată ceea ce veți putea crea după ce parcurgeți acest tutorial. Aplicația demonstrativă prezintă paleta de culori Google Material Design și vă oferă mai multe detalii odată ce selectați o culoare. Veți crea o animație de încărcare, unele tranziții de pagină cu un efect de paralaxă lină și un glisor de meniu.

Asigurați-vă că ați descărcat fișierul sursă gratuit al tutorialului de aici.

Să începem.

Trecerea de la un fișier schiță la principiu

1. Mutați planurile de artă pentru a se pregăti pentru tranziții naturale între ele: de exemplu, un ecran care alunecă din dreapta ar trebui să atingă marginea dreaptă a ecranului pe care îl înlocuiește peste animație.
2. Odată ce fișierul dvs. Sketch este setat, accesați Principiul, creați un document gol care se potrivește cu raportul de 360x640 și faceți clic pe butonul „Import”.

Eliminarea antetelor ecranelor pentru derulare fără întreruperi

Pentru a crea o tranziție fără întreruperi între pagini, puteți elimina fiecare antet, cu excepția primului. Anteturile au fost adăugate inițial doar pentru a prezenta aspectul aplicației. Veți păstra doar antetul pe ecranul „Bun venit” și va servi ca o bară lipicioasă cu meniul și titlul aplicației.

Crearea animației de încărcare - Formele

1. Selectați grupul de forme de încărcare și faceți clic pe „Creare componentă” care conține formele de încărcare și textul. Creați o componentă pentru textul din primul simbol; vom anima textul separat imediat după.
2. Selectați formele grupate. Alegeți declanșatorul „Atingeți” și trageți și plasați deasupra aceleiași planșe pentru a crea o copie.
3. A doua planșă de desen reprezintă starea finală a animației și puteți roti grupul folosind proprietatea unghi. Dați diferite valori de unghi „umplere” și „contur” pentru a crea un efect mai interesant.
4. Pentru a finaliza, selectați săgețile dintre tablourile de desen, faceți clic pe „Animați” pentru a deschide „panoul de animație” și modificați durata prin glisarea punctelor finale la aproximativ 1,00 s.

Crearea animației de încărcare - textul

1. Mai întâi, creați animația slide-up. Selectați forma butonului și aplicați evenimentul de declanșare „Atingeți”. În noua planșă de desen, mutați toate ecranele în sus cu 640px (egal cu înălțimea actuală a planului de lucru).
2. Acum, să creăm paralaxa. Mergeți la tabloul de desen anterior, pe ecranul de bun venit, mutați formele geometrice și textul în jos la diferite valori Y.
3. În cele din urmă, în interiorul panoului de animație, extindeți cronologia, să spunem la 1s. Aplicați un efect „Ușurează ambele” liniei temporale (asigurați-vă că ați selectat toate punctele în formă de romb și faceți clic pe orice linie albastră pentru a aplica efectul tuturor).
4. Previzualizați animația și mutați formele până când efectul de paralaxă vă arată bine.

Crearea efectului Parallax - Pagina de bun venit

1. Selectați componenta de încărcare și aplicați declanșatorul „Atingeți” trăgând o săgeată de pe aceasta oriunde în tabloul de desen.
2. Selectați toate ecranele (din grupul principal) și mutați-l în sus cu 640px. Acest pas afișează ecranul de bun venit.
3. Reveniți la tabloul de desen anterior și mutați în jos formele de pe ecranul „Bun venit”. Acest lucru creează efectul de alunecare asincron numit paralaxă.
4. Ajustați animația adăugând timp la tranziția în interiorul panoului de animație: selectați săgeata dintre tabloul de desen, apoi trageți punctele finale de pe liniile albastre la aproximativ 1s.

Crearea efectului de paralaxă - Pagina Despre

1. Selectați butonul săgeată în jos (asigurați-vă că selectați întregul grup) și aplicați declanșatorul „Atingeți” trăgând o săgeată de pe acesta oriunde în tabloul de desen.
2. Selectați toate ecranele (din grupul principal) și mutați totul în sus cu 640px. Acest pas afișează ecranul Despre.
3. Reveniți la tabloul de desen anterior și mutați în jos formele de pe ecranul „Despre”. Acest lucru creează efectul de alunecare asincron numit paralaxă.

Crearea efectului de paralaxă - Pagina de culori

1. Aplicați declanșatorul „Atingeți” la butonul săgeată în jos (asigurați-vă că selectați întregul grup) și asta va crea o nouă planșă.
2. Pe noua planșă, selectați toate ecranele și mutați-le în sus cu 640 px.
3. Pe tabloul de desen anterior, mutați culorile și textul în jos. Rețineți că, cu cât mișcați mai jos un obiect, cu atât este nevoie de mai mult pentru alunecarea înapoi în sus, așa că asigurați-vă că utilizați o plasare diferită pentru a crea un efect mai dinamic.
4. În cele din urmă, extindeți animația și aplicați un „ease both” pe toate liniile temporale albastre din panoul de animație.

Glisarea unei pagini din lateral - Pagina de selecție a culorilor

1. Aplicați un declanșator „Atingeți” butonul „Încărcați mai multe” de pe ecranul „Culori”.
2. În noua planșă de desen, mutați conținutul „Culori” și „Selectare” la stânga cu 360 px (lățimea plansei de desen)
3. Reveniți la tabloul de desen anterior și mutați conținutul ecranului în direcția opusă - dreapta.
4. Rețineți că puteți, de asemenea, să animați opacitatea ecranului alunecând de la zero la sută la 100 la sută.
5. Joacă-te cu durata animației și efectul de relaxare pentru a modifica efectul de tranziție.

Animarea pictogramei Meniu

1. Rețineți că orice strat și formă care a avut un efect (cum ar fi umbrele) din fișierul original Sketch este importat în Principle ca imagine. Dacă trebuie să editați forme în Principle, încercați să nu adăugați niciun efect special decât după import.
2. Acestea fiind spuse, folosind pictograma existentă ca ghid, desenați trei dreptunghiuri subțiri și grupați-le pentru a crea pictograma meniului hamburger. Acum, puteți șterge sau ascunde pictograma meniului precedent.
3. Selectați pictograma nou creată și aplicați-i un declanșator „atingere”.
4. În noua planșă, rotiți dreptunghiul de sus și de jos pe pictograma meniului, asigurați-vă că sunt aliniate în centru și acordați opacitate zero la sută celui din mijloc.
5. Pentru a vedea animația pe care tocmai ați creat-o, conectați înapoi pictograma meniului modificat la panoul de desen de previzualizare cu un declanșator „Atingeți” și testați-o.

Crearea efectului de glisor de meniu

1. Pe panoul de grafic al stării finale, mutați ecranele la dreapta până când legăturile meniului sunt aliniate la stânga pictogramei meniului de închidere.
2. Selectați totul din dosarul „Culori”, cu excepția conținutului meniului și a fundalului gri deschis și reduceți opacitatea la 25 la sută. Animația va elimina conținutul paginii pentru a se concentra pe meniu.
3. Extindeți durata animației și mergeți la tabloul de desen anterior pentru a muta ușor conținutul meniului pentru a crea un efect neted.

Trecerea la ecranul de contact

1. În meniul deschis, aplicați un declanșator „Atingeți” pe butonul „Contactați-ne”.
2. Pe tabloul de desen nou creat, mutați toate ecranele în sus cu 640 px.
3. Apoi reveniți la tabloul de desen pentru previzualizări și mutați elementele din pagina „Formular” în jos.
4. Mutați elementele la diferite valori Y pentru a crea efectul de paralaxă.
5. În cele din urmă, selectați săgețile dintre tablourile de desen, extindeți durata animației și aplicați „Ease Both” la cronologia albastră.

Se termină cu pagina de mulțumire

1. Aplicați un declanșator „Atingeți” pe butonul „Trimiteți mesaj”.
2. Pe noua planșă de desen, mutați toate ecranele în sus cu 640 px.
3. Apoi reveniți la panoul de grafic pentru previzualizări și mutați elementele din pagina „Confirmare” în jos.
4. Joacă cu scara și rotația pentru pictograma colorată pentru a crea un efect mai dinamic.
5. Asigurați-vă că adăugați la lungimea animației pentru a percepe mai bine efectul de tranziție.

Simplitatea adăugării de animații cu principiul.

Principle este un instrument fantastic pentru a face ca ideile tale de interacțiune cu IU să prindă viață.

Interfața este prietenoasă cu Mac și a fost creată pentru a funcționa perfect cu fișierele Sketch.

Principle automatizează majoritatea efectului de animație și tranziție pentru tine. Tot ce trebuie să faceți este să aplicați un declanșator unei forme pe o panou de desen și să schimbați orice proprietate pentru elementele pe care doriți să le animați pe tabloul de desen final.

Vă rugăm să lăsați orice întrebări în comentariile de mai jos. Sunt bucuros să le răspund.