Izbrani projekti
Animacijski sistem CryptoNow
Motion design in animacija vmesnika za CryptoNow, pripravljena v sodelovanju s Trampolinom na podlagi prejetih zasnov produkta.
Animacija vmesnika
Kako se vmesnik odziva.
Wheels je pripravil primere animacije za spremembe stanj widgetov, navigacije in modalnih oken CryptoNow. Posnetki prikazujejo motion design in animacijo v kontekstu, ne delujoče programske implementacije.
Animacija različnih sprememb stanja.
-
01Okoliški vmesnik ostane viden.
Spustni meni se odpre, nadzorna plošča pa ostane na mestu. Tako je povezava med upravljalnikom in vsebino vidna.
-
02Povezava korakov v modalnem oknu.
Naložbeno zaporedje prehaja med vnosom, potrditvijo in odzivom v istem modalnem oknu.
Animacijski sistem
Od animacijskih preizkusov do pravil za implementacijo
Po preizkusu več načinov delovanja pojavnih oken ob referenci Uber smo izbrano smer razvili še za navigacijo, spustne menije, spremembe cen ter stanja modalnih oken na računalniku in telefonu. Končna predaja je animacijo prevedla v natančne čase, zamike in kubične Bézierjeve krivulje za implementacijo.
Mobilna navigacija med različnimi ravnmi
Prehod med ravnmi
Odločna S-krivulja vodi okno med ravnmi. Ob izhodu se smer obrne, zato navigacija ohrani prostorski odnos med stanji.
- Trajanje
- 500 ms
- Krivulja
- cubic-bezier(0.79, 0.00, 0.21, 1.00)
Vstop namiznega modalnega in spustnega okna
Umiritev modalnega okna
Vidnost nastopi hitro, medtem ko se merilo dalj časa umirja z 85 % na 100 %. Vmesnik se odzove takoj, ne da bi se okno sunkovito ustavilo.
- Trajanje
- 1000 ms
- Krivulja
- cubic-bezier(0.02, 0.93, 0.01, 1.00)
Vstop mobilnega modalnega okna
Dvig na mobilnem vmesniku
Modalno okno na telefonu ohrani enako hierarhijo, spremeni pa smer gibanja. Namesto povečanja se plošča dvigne od spodaj in se umiri v končnem položaju.
- Trajanje
- 1000 ms
- Krivulja
- cubic-bezier(0.01, 0.88, 0.00, 0.98)
Maskiran navpični prehod
Sprememba cene
Prehod vrednosti uporablja maskirano navpično gibanje, smer pa sledi spremembi cene in ne splošnemu prelivanju.
- Trajanje
- 500 ms
- Krivulja
- cubic-bezier(0.80, 0.00, 0.20, 1.00)
Ponavljajoča se pravila animacije naredijo spremembe stanj prepoznavne: znani prehodi pomagajo slediti hierarhiji, kontekstu in spremembam vrednosti, ne da bi se bilo treba vsakokrat učiti novega vedenja.
Navigacija na telefonu.
Mobilni posnetek prikazuje prehode med razdelki znotraj razpoložljivega prostora zaslona. Dopolnjuje namizne primere in ohrani animacijo v kontekstu vmesnika.
Avtorji projekta
- Naročnik
- CryptoNow
- Agencija / produktni partner
- Trampolin d.o.o.
- Izhodišče
- Produktni vmesnik in UI-gradivo, ki ju je Wheelsu zagotovil Trampolin d.o.o.
- Wheels Studio
- Motion design, animacija vmesnika in animacijske reference