Cele mai bune 20 de freebies pentru aspiranții de proiectanți UX Motion
Designerii de interfețe sunt interesați mai mult de designul UX cu machete animate care imită acțiunile utilizatorilor. Aceste machete UX se bazează pe mișcare cu efecte animate de definit modul în care o interfață ar trebui să răspundă la intrarea utilizatorului.
Cei mai mulți designeri UX învață să folosească software-ul pentru a crea aceste animații. Cele două opțiuni cele mai populare sunt Adobe After Effects and Principle (numai după OS X). Poti machete de interfață de proiectare într-un program precum Photoshop și mutați interfețele utilizatorilor în aceste programe pentru animație.
Dacă sunteți interesat să înveți animație UX, atunci freebies va fi un avantaj extraordinar. Puteți studia munca altora și puteți juca cu desenele lor pentru a vedea cum funcționează toate acestea.
Mai jos veți găsi cele mai bune freebies pentru utilizatorii Principiului și AE doar intrarea în designul de mișcare UX. Cu siguranță vă vor ajuta să înțelegeți cum funcționează animația UX, și cum să vă construiți propriul.
1. Ștergeți acțiunea
Glisarea este o acțiune foarte comună în aplicațiile mobile în diverse scopuri. Acțiunea prestabilită pentru iOS este folosită la afișați opțiuni alternative pentru editarea / ștergerea elementelor, și asta este exact ceea ce obțineți în acest freebie creat de Ramil Derogongun.
Puteți descărca fișierul AEP gratuit pentru After Effects și încercați singur. UI urmează a schema de bază a scheletului de bază cu intrarea utilizatorului afișată sub formă de punct albastru. Aceste tipuri de comportamente ale utilizatorilor sunt cele mai bune pentru a fi afișate prin animație deoarece oferă dezvoltatorilor șansa de a vedea cum ar trebui să funcționeze interfața.
2. Widget Glisați
Iată o altă momeală animată care se focalizează pe elementele de coș într-o prezentare de diapozitive. Proiectat de Leon Wu, această animație gratuită are un fișier PRD care este creat pentru principiul.
Animația este extrem de simplă și demonstrează modul în care elementele ar trebui să se deplaseze pe ecran când se aplică presiunea. De asemenea, aveți o simțire pentru efectul de relaxare ori de câte ori acțiunea de împingere este eliberată.
3. Dualshock UI
Iată un efect de animație incredibil de dinamic, împărțit de Alexander Boychenko. Acest mockup se bazează pe PlayStation Controller pentru un UI de aplicații mobile. Acesta include un fișier Sketch and Principle pe care îl puteți descărca gratuit.
Acest ajutor arată cum să creați tranziții glisați între ecrane. Dar, de asemenea, veți vedea cum elementele de pagină animă în jurul ecranului în diferite direcții.
4. Animația meniului hamburger
Icoanele din hamburger sunt totuși toate furia în interfețele mobile. Această pictogramă de meniu freebie demonstrează cum să animați pictograma cu trei bare într-o pictogramă "X".
E o repetarea animației, astfel încât "X", de asemenea, animates înapoi într-o pictogramă meniu hamburger. Acesta este un mare freebie pentru a afla despre vector manipulare pentru elementele UI.
5. Snapster
Acest mockup gratuit este pentru o aplicație mobilă numită Snapster. Se concentrează pe ecranul de bun venit / onboarding unde utilizatorii pot vedea demo-urile aplicației și pot învăța cum funcționează.
Este un fișier PRD și, din nefericire, acest lucru nu se potrivește frumos cu After Effects, astfel încât numai utilizatorii Principiului pot beneficia de acest.
6. Încărcarea rotoarelor
Iată un joc gratuit pentru AEP After Effects încărcătoare mobile de încărcare. Aceste tipuri de GIF-uri animate au devenit foarte populare când Ajax și-a făcut drumul în dezvoltarea web-ului principal.
Acum, aceste încărcătoare mobile sunt un dime o duzină, și ele pot fi chiar puternic personalizate pentru a se potrivi anumitor interfețe. Acest freebie vine cu un fișier AEP și un fișier Sketch pentru a edita vectorii dacă doriți să le modificați.
7. Redați / întrerupeți tranziția
Efecte de tranziție de multe ori par foarte simplu, dar de fapt necesită o cantitate bună de muncă. Această animație de redare / pauză creată de Alex Pronsky este un exemplu excelent.
Cu acest freebie puteți să examinați cum să animați diferite pictograme subțiri în forme și simboluri. Odată ce ați învățat programul, devine mult mai ușor să faceți acest tip de lucruri, așa că vă ajută să aveți gratuit la dispoziție pentru cercetare.
8. Mockup pentru iPhone
În timp ce acest freebie nu conține în mod direct animație, este destinat să fie folosit pentru munca de producție pe aplicațiile iPhone. Este un fișier gratuit iPhone 5S AEP pentru utilizare în After Effects ca un șablon pentru iPhone.
Pur și simplu importați macheta de interfață și creați animațiile în After Effects. Apoi, puteți să-l conectați la acest mockup iPhone pentru a le împărtăși echipei.
9. Template pentru iPhone
Acesta este altul personalizat șablon After Effects cu design mai modern pentru iPhone. Freebie este disponibil de pe această pagină la UX in Motion.
Totul în șablon este super ușor de personalizat. Pe pagina de descărcare, veți găsi, de asemenea, o secțiune numită "Instrucțiuni video", unde puteți afla cum să animați aplicația.
10. Micro Animație
Chiar și cele mai mici animații ale aplicațiilor pot avea un impact mare asupra experienței utilizatorilor. Acest serviciu gratuit afișează a "Ca" micro animație ori de câte ori un utilizator "îi place" un post.
Pictograma inimii are animație proprie cu fotografia de profil a utilizatorului adăugată în teancul de aprecieri. Acest serviciu gratuit este doar pentru Principiu și de asemenea, aveți un .mov fișier pentru a descărca, dacă doriți.
11. App Wallet
Portofelele digitale devin din ce în ce mai populare, iar acest freebie facilitează proiectarea unui. Obțineți un fișier Sketch cu toate elementele vectoriale brute, plus un fișier PRD gratuit pentru animația Principiu.
Această interdicție a fost proiectată de Sergey Bykov ca un proiect lateral distractiv. Dar poate fi foarte educativ dacă îl despărțiți și lucrați pas cu pas cu animația.
12. Comutator iOS
Cu iOS 7 de la Apple, lumea a primit un comutator proaspăt proiectat pentru etichete on / off. Acest lucru a dus la multe efecte diferite, inclusiv o animație gratuită care imită comutatorul de pornire / oprire nativ.
În acest fișier, veți obține un efect de animație foarte simplu, cu o relaxare de bază. Comutatorul se mișcă și fundalul devine verde, apoi se întoarce înapoi când întrerupătorul este oprit.
13. Ritter App
Iată un alt mare iubit eliberat de Sergey Bykov pentru ceea ce el numește App Ritter. Acesta include un fișier Sketch gratuit pentru interfața vectorială, împreună cu un fișier PRD gratuit pentru animația Principiu.
Vei primi o mulțime de animații diferite în acest ajutor, așa că cred că ar fi mai util pentru un designer intermediar-avansat. Începătorii pot învăța foarte mult de la ea, dar pot avea o curbă abruptă de învățare.
14. Invită-ți prietenii
Cu toții cunoaștem și iubim meniul derulant al pictogramei plus de la Google. Ei bine, Jardson Almeida a creat un meniu Invitație de prieteni bazat pe un concept simplu Material Design.
Totul a fost proiectat în Sketch și a fost importat la Principiu pentru animație. Obțineți ambele fișiere ca freebies pentru a descărca și jucați în jur cu.
15. Îndepărtați cardul
Iată o altă aplicație generală gratuită realizată numai pentru utilizatorii Principiului. Acesta este un carte de interfață create pentru slideshow-uri de uz general sau UI-uri de aplicații native.
Cred că aceasta este cea mai bună idee pentru un începător care tocmai a intrat în principiu. Nu este atât de complicat încât vă veți simți pierdut, dar nu este atât de simplu încât să vă simțiți trivializați.
16. Chat pe hartă
Mulți designeri folosesc încă Photoshop pentru interfețe, și este, de asemenea, adevărat despre acest chat chat freebie. Puteți descărca un fișier PSD pentru interfață și un fișier PRD pentru animația Principiu.
Este o animație surprinzător de drăguță pentru stil, dar arată încă minunat și funcționează exact așa cum v-ați aștepta într-o aplicație simplă pentru hărți / geolocație.
17. Încărcarea aplicației
Aplicațiile mobile utilizează adesea ecrane de încărcare pentru a spune vizitatorilor că ceva se întâmplă în backend. Unul dintre dragostea mea preferată din această colecție este animația de încărcare creată de Roman Wagner.
Încarcă elemente individuale unul dupa altul după terminarea ecranului de încărcare. Această animație este foarte lină și complet credibilă în domeniul designului de aplicații mobile.
18. Onboarding Cards
Utilizator la bord este un pas crucial pentru fiecare aplicație mobilă nouă. Este întotdeauna plăcut să includeți câteva animații în acest stadiu, de aceea aceste animații de pe placă pot fi foarte utile pentru designerii de aplicații.
Acesta a fost creat de Austin Baird și a fost lansat gratuit pentru a fi utilizat pe orice proiect UI / UX.
19. Principii demonstrative
Pe măsură ce avansați în Principiu, veți învăța o mulțime de tehnici de lucru avansate. Unul dintre cele mai bune freebies pentru a merge mai departe este acesta creat pentru echipa de creație Yalantis.
Aceasta este o resursă complet gratuită pentru utilizatorii principiului de a descărca și de a juca cu. Acesta acoperă câteva trucuri care arată cum să devii pro animație Princip.
20. Meniu derulant
Dropdownurile de meniuri folosesc adesea animații nebunești pentru a ne atrage atenția. Acest After Effects freebie folosește a dropdown scări animație pe meniu pentru elemente individuale pentru a le face să cadă ca scările.
Acest lucru poate să nu fie util pentru toată lumea, dar este cu siguranță o modalitate foarte bună de a afla despre animația de interfață After Effects.
Cuvintele finale
Toate aceste resurse sunt complet gratuite pentru descărcare și jucărie cu propriile dvs. proiecte. Dacă sunteți nou în animație UX, vă garantez că veți învăța multe prin studierea acestor freebies. Dacă știți orice alte resurse mari, nu ezitați să renunțați la linkuri în comentarii.
