UI-liidese kujundamine animatsiooni ja üleminekuid silmas pidades on suurepärane viis järgmise rakenduse jaoks parema kasutuskogemuse (UX) kavandamiseks. Animeeritud mikrosuhted on ideaalne viis kasutajate kaasamise stimuleerimiseks lühikese tähelepanu all olevas maailmas. Seetõttu tutvustas Airbnb hiljuti Lottie'i - oma 'Uus avatud lähtekoodiga tööriist, mis muudab kohalikele rakendustele animatsiooni lisamise kiireks.'

Sellised projektid nagu Lottie näitavad liikumise lisamise olulisust uue elemendina täiustatud UX-i loomisel nii rakenduste kui ka veebisaitide jaoks.

Selles õpetuses saate teada tõhusalt Tehnilise animatsiooni kasutajaliides kasutades Maci jaoks põhimõtet. Pärast selle juhendi läbimist saate muuta igavad ja staatilised maketid interaktiivseks prototüübiks, et oma tööd paremini näidata. Siit saate õpitut rakendada järgmise kasutajaliidese kõrguse ja Dribbble'i kaadrite parandamiseks.

Alustame.

Laadige need tasuta ressursid alla, et neid jälgida.

Järgmiseks vajate ainult rakendusi Principle ja Sketch. Kui teil neid veel pole, saate alla laadida tasuta prooviversiooni, kasutades allolevaid linke.

• Laadige alla tasuta Principle prooviversioon siin .

  
  
  

• Laadige alla tasuta Sketchi prooviversioon siin .

• Laadige alla tasuta juhendaja lähtefail siin .

  
  
  

Ülevaade põhimõttelisest liidest

Kui olete Mac OS-iga harjunud, näeb Principi liides väga tuttav välja. Sellel on kolm peamist osa: külgriba, kujundusala, kus on näidatud tahvlid, ja eelvaate aken, mille suurust saate muuta ja ringi liikuda.

Põhimõtete mõistmine animatsiooni põhikontseptsioonidest

Põhimõttega on suhteliselt lihtne animeerida. Alustamiseks ei pea teil olema animatsioonitausta. Tegelikult automatiseerib suurema osa raskest tõstmisest Principle ja peate keskenduma ainult sellele, mis animatsiooni käivitab (st nupp, link, kerimisüritus), kuidas animatsioon algab ja kuidas see lõpeb.

Siit leiate lühikese terminite leksikoni, mida näete kogu juhendis.

mis on javas mäluleke

• Komponent: Komponent on mingi grupeerimine, mis aitab sisaldada elemente ja isegi animatsioone. See on samaväärne Photoshopi 'nutika objektiga' või Illustratori 'sümboliga'.
• Käivitaja: Animeerimise alustamise viis - st koputades, kerides, hõljutades jne. Põhimõttes saab päästiku määratleda, valides mis tahes elemendi Principles sees ja klõpsates ikooni, mis ilmub selle parempoolses osas koos välgunoolega.
• Üleminek: Seisundi muutus ühelt tahvlilt teisele, s.t vasakule või paremale libisemine.
• Leevendav efekt: Ülemineku sujuvuse tase animatsiooni alguse ja lõpu põhjal.

A. päästik ja üleminek

Esimene põhimõte põhimõttega animeerimiseks on käivitava elemendi (st animatsiooni käivitava käitumise või toimingu) seadistamine elemendile (st nupp või link) ning selle algse ja / või lõpliku oleku (st asukoha või ulatuse muutmine) animatsiooni algusest lõpuni).

kuidas krüptovaluutat kodeerida

1. Määrake algolek: kuidas teie kasutajaliidese elemendid algavad enne animatsiooni toimumist.
2. Määrake päästik: valides interaktsioonielemendi ja milline toiming aktiveerib animatsiooni.
3. Määrake lõplik olek: kuidas animatsiooni lõpus elemente kuvatakse.

Kui animatsioon on seatud, saate selle eelvaate aknas eelvaadata.

B. Animatsiooni pikkus ja mõju leevendamine

Vaikimisi loob Principle poole sekundi pikkuse animatsiooni. Mõnikord ei piisa üleminekuefekti üksikasjalikuks nägemiseks. Kestust ja „leevendava” efekti saate muuta animatsioonipaneelil, järgides neid kolme sammu.

1. Avage animatsioonipaneel: Valige mustad nooled kahe tahvli vahel ja klõpsake ülemisel ribal asuvat nuppu „Animeeri“.
2. Pikendage animatsiooni pikkust: Liigutage siniste joonte lõpp-punkte.
3. Rakenda leevendamine: Valige kõik teemandikujulised punktid ja üleminekute silumiseks valige rippmenüüst „Ease Both”.

Mida saate

See video näitab teile, mida saate selle õpetuse läbimisel luua. Demorakendus tutvustab Google'i materjalidisaini värvipaletti ja annab teile üksikasjalikuma teabe, kui olete värvi valinud. Loote laadimisanimatsiooni, mõned sujuva parallaksi efektiga leheülekanded ja menüü liuguri.

Veenduge, et laadisite alla tasuta juhendaja lähtekoodifaili siin .

Alustame.

Visandifailist printsiibi juurde liikumine

1. Liigutage tahvleid, et valmistuda nende vahel loomulikeks üleminekuteks. Näiteks peaks paremalt libisev ekraan puudutama ekraani paremat serva, mida see animatsiooni kohal asendab.
2. Kui teie Sketch-fail on kõik valmis, minge Principle'i, looge 360x640 suhtega vastav tühi dokument ja klõpsake nuppu 'Import'.

Ekraanide päiste eemaldamine sujuva kerimise jaoks

Lehtede vahel sujuva ülemineku loomiseks võite eemaldada kõik päised, välja arvatud esimene. Esialgu lisati päised lihtsalt rakenduse väljanägemise tutvustamiseks. Hoidke päist ainult ekraanil „Welcome“ ja see on menüü ja rakenduse pealkirjaga kleepuv riba.

Laadiva animatsiooni loomine - kujundid

1. Valige kujundite laadimise rühm ja klõpsake nuppu „Loo komponent“, mis sisaldab kujundeid ja teksti. Looge esimese sümboli tekstile komponent; animeerime teksti kohe pärast seda eraldi.
2. Valige rühmitatud kujundid. Valige päästik „Puudutage” ja lohistage duplikaadi loomiseks sama suurt tahvli kohale.
3. Teine tahvel tähistab animatsiooni lõplikku olekut ja rühma saate pöörata nurga atribuudi abil. Pange „täitmisele“ ja „kontuurile“ erinevad nurga väärtused, et luua huvitavam efekt.
4. Lõpetamiseks valige suurtabelite vahel olevad nooled, klõpsake „animatsioonipaneeli” avamiseks nuppu „Animeeri” ja muutke kestust, libistades lõpp-punktid umbes 1,00 sekundiks.

Laadiva animatsiooni loomine - tekst

1. Kõigepealt looge slaidi üles animatsioon. Valige nupu kuju ja rakendage päästiku sündmus „Puuduta”. Uues tahvlis liigutage kõiki ekraane 640 pikslit ülespoole (võrdne praeguse pardal oleva kõrgusega).
2. Nüüd loome parallaksi. Minge eelmisele tahvlile, tervituskuval liigutage geomeetrilisi kujundeid ja teksti erinevate Y-väärtuste korral alla.
3. Lõpuks pikendage animatsioonipaneeli sees ajaskaala, ütleme 1s. Rakendage ajaskaalale efekt „Mõlemad on lihtsad” (veenduge, et olete valinud kõik teemandikujulised punktid, ja klõpsake efekti rakendamiseks mis tahes sinisel joonel).
4. Vaadake oma animatsiooni eelvaadet ja liigutage kujundeid ringi, kuni parallaksi efekt tundub teile hea.

Parallaksi efekti loomine - tervitusleht

1. Valige laadimiskomponent ja rakendage päästik „Puudutus”, lohistades sellest noolt suvalisele tahvlile.
2. Valige kõik ekraanid (peagrupist) ja liigutage seda 640 pikslit ülespoole. See samm avab vaate Tervitusekraan.
3. Minge tagasi eelmisele tahvlile ja liigutage kujundeid ekraanil „Welcome“ allapoole. See loob asünkroonse libiseva efekti, mida nimetatakse parallaksiks.
4. Korrigeerige animatsiooni, lisades animatsioonipaneeli sisemisele üleminekule aega: valige nool suurtapilt ja lohistage siis sinistel joontel olevaid lõpp-punkte umbes 1 sekundini.

Parallaksi efekti loomine - teave lehe kohta

1. Valige allanoolenupp (veenduge, et valisite kogu grupi) ja rakendage päästikut „Puudutage”, lohistades noolt sellest suvalisele tahvlile.
2. Valige kõik ekraanid (peagrupist) ja liigutage kõike 640 pikslit ülespoole. See samm avab vaate ekraanil Teave.
3. Minge tagasi eelmisele tahvlile ja liikuge ekraanil „Teave” olevad kujundid allapoole. See loob asünkroonse libiseva efekti, mida nimetatakse parallaksiks.

Parallaksi efekti loomine - värvid

1. Rakendage allapoole suunatud noolenupule päästik „Koputage” (veenduge, et valisite kogu grupi) ja see loob uue tahvli.
2. Valige uuel tahvlil kõik ekraanid ja liigutage neid 640 pikslit ülespoole.
3. Liigutage eelmisel tahvlil värve ja teksti allapoole. Pange tähele, et mida madalamal objekti liigutate, seda kauem tagasi üles libistamiseks kulub, nii et dünaamilisema efekti loomiseks kasutage kindlasti erinevat paigutust.
4. Lõpuks, pikendades animatsiooni ja rakendades animatsioonipaneeli kõikidele sinistele ajajoontele “hõlbusta mõlemat”.

Lehe libistamine küljelt - värvivaliku leht

1. Rakendage ekraanil „Värvid” nupul „Laadi rohkem” nuppu „Puuduta”.
2. Uues tahvlil liigutage sisu „Värvid” ja „Valik” 360 pikslit vasakule (tahvli laius)
3. Minge tagasi eelmisele tahvlile ja liigutage ekraani sisu vastassuunas - paremale.
4. Pange tähele, et saate animeerida ka ekraani läbipaistmatust, mis libiseb nullist 100 protsendini.
5. Üleminekuefekti muutmiseks mängige animatsiooni kestuse ja leevendava efektiga.

Menüüikooni animeerimine

1. Pange tähele, et mis tahes kiht ja kuju, millel oli Sketchi algfaili mõju (näiteks varjud), imporditakse printsiibina pildina. Kui peate printsiibis kujundeid muutma, proovige enne impordi lõppu lisada eriefekte.
2. Nagu öeldud, joonistades olemasoleva ikooni juhendina kolm õhukest ristkülikut ja rühmitage need hamburgeri menüüikooni loomiseks. Nüüd saate eelmise menüüikooni kustutada või peita.
3. Valige äsjaloodud ikoon ja rakendage sellele päästikut.
4. Pöörake uuel tahvlil menüüikooni ülemist ja alumist ristkülikut, veenduge, et need oleksid keskele joondatud, ja andke keskmisele nullprotsendiline läbipaistmatus.
5. Äsja loodud animatsiooni nägemiseks linkige muudetud menüüikoon eelvaate tahvlile päästiku „Puuduta” abil ja testige seda.

Menüü liuguri efekti loomine

1. Lõppseisundi tahvlil liigutage ekraane paremale, kuni menüü lingid on joondatud sulgemismenüü ikoonist vasakule.
2. Valige kausta „Värvid” kõik, välja arvatud menüü sisu ja helehall taust, ning vähendage läbipaistmatust 25 protsendini. Menüüle keskendumiseks kaob animatsioon lehe sisu.
3. Pikendage animatsiooni kestust ja minge eelmisele tahvlile, et sujuva efekti loomiseks menüü sisu veidi liigutada.

Kontaktiekraanile liikumine

1. Rakendage avatud menüüs nupul „Võtke meiega ühendust” päästik „Koputage”.
2. Vastloodud tahvlil liigutage kõiki ekraane 640 pikslit ülespoole.
3. Seejärel minge tagasi eelvaadete tahvlile ja teisaldage elemendid lehelt „Vorm” alla.
4. Parallaksi efekti loomiseks liigutage elemente erinevate Y väärtustega.
5. Lõpuks valige nooled tahvlite vahel, pikendage animatsiooni pikkust ja rakendage sinistele ajajoontele „Ease Both“.

Tänu-lehega lõpetamine

1. Rakendage nupul „Saada sõnum” päästik „Puuduta”.
2. Uuel tahvlil liigutage kõiki ekraane 640 pikslit ülespoole.
3. Seejärel minge tagasi eelvaadete tahvlile ja liigutage elemendid lehelt „Kinnitus” alla.
4. Dünaamilisema efekti loomiseks mängige värvilise ikooni skaala ja pööramisega.
5. Üleminekuefekti paremaks tajumiseks lisage kindlasti animatsiooni pikkus.

---

Animatsioonide põhimõttelise lisamise lihtsus.

Põhimõte on suurepärane vahend kasutajaliidese suhtlemisideede elluviimiseks.

Liides on Mac-sõbralik ja ehitatud Sketch-failidega sujuvalt töötama.

Põhimõte automatiseerib teie jaoks suurema osa animatsiooni- ja üleminekuefektidest. Kõik, mida peate tegema, on rakendama ühele tahvlile kujundile päästikut ja muutma nende elementide mis tahes atribuute, mida soovite viimasel tahvlil animeerida.

Palun jätke küsimused allpool toodud kommentaaridesse. Mul on hea meel neile vastata.