Atomic gyorsteszt

A finom mikrointerakciók nagyban hozzájárulnak a „wow faktor” eléréséhez, egy applikáció megértéséhez, visszacsatolást adnak, lélegzőbbé, emberközelibbé téve a kapcsolatot ember és gép között. Persze ne felejtsük el, hogy mindenekelőtt a logikusan átgondolt felhasználói felület az alapja egy jól kezelhető alkalmazásnak.

Mac-en jobbnál jobb eszközök állnak rendelkezésre, kezdve a Framer X-től a Principle-ön át a Flintóig, csak hogy párat említsek. Ellenben Windows-on sajnos más a helyzet, nem igen vannak, illetve csak butított funkcionalitású progik, például a Figmának a saját eszközei nem az igaziak, egy egyszerű screen flow-ra tökéletesek, de ha már összetettebb animációkat szeretnék interakcióra megjeleníteni, nos, ott elvérzik. A napokban akadtam rá az Atomic nevű böngészőben futó prototipizáló programra, ami talán mentsvárként szolgálhat nekünk, Windows usereknek. Igyekeztem célirányosan az animációs, interakciós lehetőségeit vizsgálni, tesztelni.

Design, nem csak animáció

Bizony, alap shape-ket, szövegeket, bizonyos kiterjesztésű raszteres képeket, sőt még SVG file-okat is kezel az Atomic. Ezeknek manipulálhatod a tulajdonságait, például drop shadow, fill, csupa basic tulajdonság, amik Figmából vagy Sketch-ből ismerősek lehetnek. Tulajdonképpen tervezhetsz is benne minimal appokat, landingeket, bár én speciel jobban szeretem ezeket összerakni Figmában, majd kiexportálom elemenként és behívom őket Atomicba. Belefutottam olyan bugokba, hogy ha pl. egy maszkolt elemet akarsz kimenteni SVG-be, szétesik. Ezeket érdemes inkább PNG-ként exportálni, vagy ha egyszerűbb dologról van szó, újraépíteni Atomicban.

Transition fajták

Az Atomicban 3 főbb transition fajtát különböztetünk meg. Az úgynevezett click through azaz, amikor egyszerű hotspotokkal kötögeted össze az egyes képernyőket, semmi sallang, felhasználói útvonal tervezésre ideális lehet. A második egy kicsit finomabb megoldás, amikor a page transition típusú áttünést választod, több fajta mozgást állíthatsz be, ilyen pl: Slide Right, Slide Up, Push Left, hogy néhányat említsek. Ami külön plusz pont az Atomicnak, hogy van Easing opció is, kicsit dinamikusabbá téve a mozgásokat.
A harmadik és talán legérdekesebb animációs típus a Custom Transition. Lényegében ezek szolgálnak a mikrointerakciók kidolgozására. Remekül alkalmazhatod egy toggle switch mozgás animálására. De akár, ha egyidőben szeretnél megmozgatni több elemet, akkor is ez a technika lesz a nyerő.

Idővonal

Ez az a feature, amire felkaptam a fejem, sem Figmában, sem Invisionben, és azt hiszem Axure-ben sincs idővonal, ha csak a Windows-os eszközöknél maradunk. Sokat vártam ettől a funkciótól, de sajnos nem azt kaptam, amire számítottam. Elég döcögös a használata, az Ease-In effektnek koránt sincs olyan kinézete, mint After Effectsben. Igen, elismerem, az After Effects az animációkészítés Ferrarija, felesleges is összehasonlítani őket. Felmerül a kérdés, valóban indokolt olyan sok effortot belerakni egy prototípusba? Sokszor célravezetőbb, ha csak mutatunk egy hasonló áttünést az ügyfélnek egy másik appból, és fejlesztés során készül a tényleges animáció.

Page Actions

Hasznos funkció, egyik gyakorlati felhasználása például preloader animációnál alkalmazható. Beállíthatunk egy számlálót, hogy meddig tartozkodjon a prototípus egy adott képernyőn, majd milyen tranzícióval menjen tovább egy általunk meghatározható nézetre. Vegyünk egy login folyamatot. Beírjuk a belépési adatainkat, rákattintunk a „Belépés” CTA-ra, utána továbbküldjük a prototípust a következő képernyőre ahol 2000 ms-ig várakozik, közben egy ismétlődő anim gif pörög, szemléltetve a kamu töltést. 2000 ms után tovább megy a következő képernyőre (mondjuk egy dashboard-ra) akár valamilyen page transition-nel, vagy egy saját custom transition-nel. Ezt a pici kis animációt Atomicban készítettem.

Összegzés, személyes benyomások

Bő két napot töltöttem az Atomic társaságában, kifejezetten az animációs, illetve prototype lehetőségeit kutatva. Nyilván idővel az ember megtanul együttélni a hiányosságaival, gyorsabban kezeli a programot, rájön apró fortélyokra. Megszereti. Talán túl sokat vártam tőle, annyira az Invision Studio és a Framer lebegett a szemem előtt, hogy majd talán most megtalálom a Windows alternatíváját. Nem, nem találtam meg, de találtam helyette egy egész jó progit, amiben van potenciál, viszont még csiszolni kell. Annál is inkább, mert jön a Phase, illetve talán egyszer befut az Invision Studio Windows változata is.