Az alábbiakban bemutatjuk, hogyan használhatjuk az animációt, és hogyan alakíthatjuk papírra.
Tartalomjegyzék
● Mi az a konceptuális animációtervezés?
● A konceptuális animáció jelentősége UI tervezés
● 5 példa a felhasználói felület animációs fogalmaira
● UI animációs koncepciók valósághű felületeken
Értelmes koncepció nélkül nincs valóság. A tervezés és az animáció területén külsődleges szükség van a tervrajzokra, amelyek révén a kettő együtt működik.
A konceptuális animációs tervezés lehetővé teszi az animátorok, fejlesztők és grafikusok számára, hogy a semmiből alkossanak, és értékeljék a koncepcióművészeket, ha a nulláról kezdik. Olvasson tovább, hogy megértse, hogyan használják ezeket a tervezési és animációs terveket az animációtervezésben.
Mi az a konceptuális animációs tervezés?
Bármi, ami a képernyőn mozog, az animáció. Az animáció helyes definíciója az, amikor a képsorok különböző sorozatokban mozgókép illúzióját keltik. Másrészt a fogalmi fogalmak olyan dolgokra utalnak, amelyek elképzeléseken vagy elveken alapulnak.
Az animáció ötletekben és elvekben rejlik. Amikor ezek az ötletek életbe lépnek, azt konceptuális animációnak nevezik. A konceptuális animáció megmutatja, hogyan mozog valami a képernyőn. Elvisz az első lépéstől az utolsóig. Elmondja, hogyan születik egy ötlet a semmiből. Egyfajta animáció, amely az ABC-től indul és Z-ig visz.
A konceptuális animációs tervezés a koncepcióművészet egyik formája. A konceptművészet vizuális művészet
egy jótékony ötlet bemutatása filmekben, videojátékokban, animációkban, képregényekben vagy más multimédiás médiában, mielőtt a végtermékbe beépítené. Megmutatja a végső kimenet fejlesztésének szakaszait.
Nézze meg ezt a képet az egyértelmű tisztázás érdekében. Kérjük, nagyítsa ki az olvasáshoz.
Néhány lépés hátra mozgás a képernyőn. Ezek a lépések mozgatják a karaktert a képernyőn. A konceptuális animációs tervezés határozza meg ezeket a lépéseket. Elmondja, hogyan fogja hasznosítani minden erejét, mozdulatait, kellékeit, tulajdonságait és mozgásait.
A konceptuális animációs tervezés a felhasználói felület animációjának területén is segít az újoncoknak. Átvezeti őket a tervezés csatornáin a címkézésen, kategorizáláson, ábrázoláson, vázlatkészítésen, elnevezésen és szekvenáláson keresztül.
Röviden, ez a híd a valóság és a végtermék között. Tartalmazza a felhasználói élmény kialakítását, a felhasználói felület animációját, a felhasználói felület koncepcióit és az animációs tervezést. Ez az útiterv azoknak az animátoroknak, akik UI-koncepciókkal kívánnak animációt tervezni.
A konceptuális animáció jelentősége in UI tervezés
Az animáció tervezése minden animátor számára összetett feladat. Sok animátor napokat, heteket vagy hónapokat tölt együtt, hogy a koncepciókat valósággá alakítsa. Olyan UI-koncepciókat keresnek, amelyek segíthetik őket az animációs világban.
Ilyen esetekben a fogalmi animáció lényegessé válik. Feleslegesnek, középkorinak, valószerűtlennek, szükségtelennek vagy lehetetlennek tűnik. De ez különbözik a kész megoldásoktól és a jól ellenőrzött megközelítésektől. Túllép a meghatározott szabályokon, korlátokon és határokon.
A legtöbb animáció klónnak tűnik, de a koncepcionális animáció statikus tervezésből és felhasználói felület animációból áll. Számos lehetőséget kínál az animátoroknak, mielőtt más megoldásokat próbálnának ki a végtermék eléréséhez.
Ez a koncepcionális animáció, amely létrehozza vagy megszakítja a tervezési animációt. A felhasználói felület animációja csak akkor lehet sikeres, ha a koncepció valósággá válik.
A konceptuális animáció egyensúlyt teremt az animáció és a koncepcióművészet között. Ezért a koncepcióművészet alkalmazása megoldást jelent a briliáns felhasználói felület animáció és felhasználói élmény kialakítására.
5 példa a UI-animációs koncepciókra a valóságból
1. Normál: Oldalsó menü megnyitása
A koncepcionális animációs kialakítás életet ad az alapvető műveleteknek, mint például a nyitó oldalmenü. Az animációs tervező az objektumok fokozatos megjelenítését vagy felsorolását használta. Így az emberi szem számára elegánsnak és érthetőnek tűnik.
2. Normál: Görgetés a listán
Az elemek listájának görgetése egy újabb példa a fogalmi animációra. Miért? Mert az első lista először mozog. A második lista enyhe visszafogással utánozza az elsőt
A visszatartás valósághű érzetet ad. Vizuális illúziót hoz létre a listaelemek között több helyről.
Több levegő illúzióját kelti az interfész kialakításában.
3. Standard: Váltás listáról elemre.
Az elemek listájából a fogalmi animáció részletes információkat kínál az elemekről. Két átmenet történik egyszerre.
A bal oldali átmenet a menüből egy adott elemre való átlépés szokásos módja. A megfelelő átmenet a dinamikus módja annak, hogy egy listából részleteset nyisson meg.
4. Öntözés nyomkövető alkalmazás
Az élő nyomkövető hiteles élményt nyújt a felhasználónak a növények öntözéséről. Két képernyő van interakciókkal.
Az első képernyő emlékezteti a felhasználót, hogy mikor kell öntözni a növényeket.
A második képernyő a növények öntözési állapotát követi nyomon. A felhasználói felület kialakítása informatív, stílusos, színekben összehangolt és interaktív.
5. Otthonos alkalmazás
A Homey alkalmazás felhasználói felületének animációja lehetővé teszi a felhasználók számára, hogy az okosotthonok funkcióit alkalmazzák a házukban. A kiemelt képernyőn bármely felhasználó kiválaszthatja azt a helyiséget, ahol módosítania kell a beállításokat.
A felhasználó a hőmérséklet, a páratartalom és az energiafogyasztás közül bármelyik opciót választhatja. Az animáció agilis, interaktív és színes. A sötét háttér jót tesz a szemnek.
UI animációs koncepciók valósághű felületeken
A koncepció innovatív kezdete mögött meghúzódó alkotás és kutatás lehetővé teszi, hogy a felhasználói felület animációja minden területen kiemelkedjen, legyen az kreatív vagy ipari.
Ha megnézzük, hogyan fejlődött az autóipar, az építészet és a filmipar az évek során az ősi történelmükből, gyönyörű, hihető és korszerűsödő területté vált.
Mindez a mögötte álló kreatív elméknek köszönhető. De bármennyire is önti az izzadságot és a vért egy kreatív koncepcióművész a UI-koncepciókra, a felhasználói élmény teszi vagy töri meg. Végső soron tudnunk kell, hogy a felhasználói élmény számít.
A felhasználói felület animációs koncepciói két ellentétes választ kapnak:
● Pusztán fantázia alapján. Ennek semmi köze a valós élethez.
● Miért nem? Miért ne történhetne meg velem?
A konceptuális animáció a felhasználói felület kialakítása alá tartozik. Ez ugyanennek a kreatív szakasza. Mielőtt megnéznénk a példákat, beszéljünk a mozgásgrafikus és az animátor közötti különbségről.
A mozgógrafikus tervező mozgást ad a képhez, míg egy animátor létrehozza az egész mozgó történetet.
A mozgógrafikus tervező a statikus képet mobilvá varázsolja. Az animátor a mozgás teljes narratíváját hozza létre.
A mozgógrafikus tervező különféle lehetőségeket kínálhat az ügyfelekkel és a fejlesztőkkel való megbeszéléshez.
A legjobb felhasználói felület animációs koncepciói a valósághű felületeken a következők:
1. Pénzügyi költségvetési kérelem
Az alkalmazásban használt színek és animáció módszeresebbé és érthetőbbé teszik az alkalmazást. A kördiagram személy szerint azonosítható.
Ha rákattint a torta egy részére, az oszlopdiagrammá vált. Az oszlopdiagram kördiagramként a szén-másolat színeit tartalmazza. Információkat nyújt az egyes személyek költségeiről.
2. Dribble alkalmazás
A Dribble egy népszerű kreatív alkalmazás. Különféle alkotásokat mutat be folyékony legördülő animációval.
A felhasználói felület elgondolkodtató, élénk és valósághű. A folyékony legördülő animáció a különféle alkotások oldalának frissítésére szolgál.
3. Kriptovaluta tranzakció megerősítése
A fizetés megerősítésének folyamatát mutatja. A felhasználó vár, és a folyamatsáv megtelik. Az animált körök egy aktív folyamat érzetét keltik, miközben a fizetés feldolgozásra kerül. Az ehhez hasonló interaktív kialakítások ragyogó élményt nyújtanak a felhasználóknak. Megválaszolja a legjobb példákat a UI animációs koncepciókra a valósághű felületekhez.
A végén
Az animációtervezés számos probléma megoldása a felhasználói felület tervezésében. A jól kidolgozott mozgáselemek egyszerűvé teszik a navigációt és felhasználóbarát interakciót.
A legtöbb animátor tele van kreatív ötletekkel, és nem érdemelnek konnotációt. Irreális ötleteik fejlesztők, mozgástervezők, grafikusok vagy UI-animátorok által szívesen megvalósíthatók.
Kulcs elvitelek
● A konceptuális animációs tervezés ötleteket ad a fejlesztőknek, animátoroknak és a felhasználói felület tervezőinek, és interaktív munkamenetet hoz létre a felhasználókkal.
● A konceptuális animációs tervezés a látványos és elbűvölő rajzfilmfigurák, animációs filmek, vizuális történetek, interaktív alkalmazások, felhasználóbarát grafikai tervek és fülbemászó mozgógrafikák létrehozásának terve.
● Az animátornak alkotásán keresztül kell kifejeznie érzelmeit. De a konceptuális animáció segítheti őt abban, hogy jobban alkosson, többet értsen meg és értékelje alkotásait.
● A konceptuális animáció egy másik módja annak, hogy megmutassák a fejlesztőknek és az animátoroknak, hogy mi lehet, mi lehetett, mit kellett volna, és mi lehet.
GYIK
1. Mi az interakciós tervezési animáció?
Az animáció elvezeti a felhasználókat a navigációs kontextusok között, elmagyarázza az elemek képernyőn való elrendezésében bekövetkező változásokat, és megerősíti a felhasználói felület elemeinek hierarchiáját. Az animált effektusok az interakciótervezés lényeges részét képezik.
Másrészt az interakciós tervezés az információs architektúra, a látványtervezés, a tartalom, az építészet, az ipari formatervezés, az emberi tényezők, a hangtervezés és az ember-számítógép interakció csúcspontja.
2. Mi az animáció tizenkét alapelve?
● Kövesse át és átfedő műveleteket.
● Időzítés és térköz
● Squash és nyújtás
● Előrelátás
● Könnyű be- és kihúzás
● Túlzás
● Tömör rajz
● Ívek
● Fellebbezés
● Egyenesen előre cselekvés és póz a pózhoz
● Másodlagos művelet
● Színreállítás
3. Melyik a legfontosabb elv az animációban?
Az animáció tizenkét alapelve közül a legfontosabb a squash és stretch elv. Megválaszolja a felhasználó kérdését a látott animációs karakterek gravitációjával, rugalmasságával, tömegével és súlyával kapcsolatban.
4. Mitől jó egy animáció?
A jó animáció az, amikor egy koncepció valóban valósággá vált. Ez az, amikor a felhasználó hisz az ötleteidben. Érzékelhetőnek, természetesnek és hihetőnek kell lennie a felhasználó szemében.
Egyik sem jelentheti azt, hogy hamis. Például egy lengő zászlónak be kell tartania a szél irányának szabályait. A leeső labdának követnie kell a gravitáció törvényét.
5. Mi az öt különböző típusú animáció?
● Mozgó grafika
● Állítsa le a mozgást
● Kézzel rajzolt
● Vektor
● 3D