Használja a Framer X-t az interaktív prototípusok létrehozásához

Tervezőként mindig van kérdés arról, hogy milyen prototípuskészítő eszközöket kell használni a projekthez. Rengeteg szoftver van olyan feladatokra, mint a drótváz (lásd a tetejét) Huzalframing eszközök és kiváló Website Builders ), prototípus- és komplex kölcsönhatások; Azonban nagyon kevés eszköz képes kezelni mindezeket. A Framer egy olyan eszköz, amely mindezen funkciókkal rendelkezik, és nagymértékben felgyorsítja az apró animációk és kölcsönhatások létrehozásának folyamatát.

A legújabb iteráció, Framer X , most használja a reagálást és a JavaScript helyett a Coffeescript használata a mikro-kölcsönhatások és animáció fejlesztése érdekében. Ez segít gyorsabb terhelési időt és jobb teljesítményt nyújtani. Plusz, a használata reagál komponensek azt jelenti, hogy a felhasználók nagyobb teret adni és kiterjeszteni, beleértve a beágyazott médialejátszók, valós idejű adatok és grafikonok belül prototípusok.

A tesztelés a prototípus építési folyamatának magja, és míg a Framer X nagyszerű az interaktív prototípusok létrehozásában, segítségre van szüksége annak érdekében, hogy milyen jó az alkotásai. Nézd meg Felhasználói tesztelés hozzászólás a legmegfelelőbb eszközökhöz, hogy kiegészítse a keretezőt, és segítsen építeni a valós világ prototípusokat, és győződjön meg róla, hogy a legjobbat használja web hosting szolgáltatás az Ön számára.

Hogyan lehet létrehozni egy alkalmazást a Framer X-vel

Ahhoz, hogy teljes mértékben értékeljük a Framer X hatalmát, létrehozunk egy valós életet: egy egyszerű főző recept alkalmazás bizonyos tartalommal és médiával (olyan eszközök, amelyek megbízhatóan biztonsági másolatot készítenek felhő tároló ). Az első dolog a honlap. A dolgokat egyszerűen tartjuk a következő elemekkel:

• Standard keresősáv, hogy megtalálja a recepteket
• Legutóbbi tevékenység, amely megmutatja a legújabb recepteket
• Recept kártyák, amelyek olyan dolgokat mutatnak, mint a legnépszerűbb receptek
• A recept részletes nézetének létrehozása video- és megosztási lehetőségekkel

Az induláshoz létre kell hoznia egy új keret (egy alkotó), ha a bal oldali navbar a + ikonra kattint. Válasszon bármilyen alkotóstílust a normál iPhone / Android sablonok listájáról a jobb sávon. Most készen állsz menni.

01. Készítsen keresetet

Kezdjük a keresősáv építésével. Ahelyett, hogy téglalapot hozna létre, és olyan keresési ikont hozzáadásához, mint általában, akkor ténylegesen gyors újrafelhasználható összetevőket használhatunk az X keretében, ezeket csomagoknak nevezik. Több ezer csomag található, amelyek megtalálhatók a bal oldali navigációs sávban. Kattintson a Store gombra, keresése Android Kit és Példa Kit, majd telepítse őket.

Ezek a csomagok olyan elemeket tartalmaznak, mint a kártyák, gombok, billentyűzetek, csúszkák, bemenetek és navigációs menüpontok. Miután telepítette ezeket a csomagokat, az elemeket a bal oldali összetevők menüjéből használhatja.

Keresse meg a kívánt elemeket a szűrő keresésével - ebben az esetben egy keresősáv, amely példaként megtalálható. Egyszerűen húzza és dobja le a keretre. Most módosíthatja a tulajdonságokat, mint például a helyőrző szöveget, betűméretet és színt a jobb sáv segítségével.

02. Hozzon létre egy tartalomcsomagot

A legutóbbi tevékenységblokkhoz először adja hozzá a "Legutóbbi tevékenység" szöveget, ami elég egyszerű. Most használhatjuk a Framer X nevű halmok új funkcióját. Ez a + ikonra kattintva történhet, és a Stack S kiválasztása a menüből. Miután kiválasztotta a verem, húzza át egy 600 x 300 területet a munkanapon, hogy létrehozzon egy verem. Ez a köteg kékként jelenik meg.

Most menjünk vissza az összetevők szakaszába és az Android-készlet alatt, keressük meg a Card-5 elemet, és húzd át az éppen létrehozott verembe. Ismertesse ezeket a kártyákat kétszer, és győződjön meg róla, hogy az összes három kártya a veremben van.

Mindaddig, amíg a veremben vannak, ezek a három kártya könnyen átrendezhető anélkül, hogy aggódnia kellene a távolság miatt. Ha meg szeretné növelni a kártyák közötti távolságot, növelheti az egész köteg szélességét. Ilyen egyszerű. Ezeket a kártyákat is személyre szabhatja a cím és a háttér nevének megváltoztatásával.

Most, hogy létrehoztunk egy köteget, hogy görgethessünk. Mozgassa ki a keretből / alkotóból. Kattintson a + ikonra a bal oldali NAV-ről, és kattintson a Scroll opcióra. Ahogy létrehoztunk egy területet a köteggel, hozzon létre egy görgethető területet a kereten / műteremen, amely ugyanolyan méretű, mint a verem.

Módosítsa a jobb oldali görgetés tulajdonságát a jobb oldali nyilak megváltoztatásával, hogy vízszintes görgetés legyen. Miután létrehoztuk a görgető tartályunkat, tartalmat kell tartani, amelyet a korábban létrehozott verem szolgál. Tehát egyszerűen csatlakoztassa a görgető tartályt a kötegre a görgető tartály nyíllal. Úgy működik, hogy az egérmutatót a veremre húzza.

03. Hozzon létre egy függőleges verem

A recept kártyát, akkor kell, hogy kövesse hasonló eljárás 2. lépése, de ahelyett, hogy egy vízszintes görgetősáv a kártyát, akkor hozzon létre egy hasonló vertikális, hogy lényegében egy listát a legnépszerűbb receptek miniatűrök. Ehhez a gyakorlathoz minden egyes recept kártya négy elemet tartalmaz - egy kép bélyegkép, minősítés, a recept neve és az elkészítéshez szükséges idő.

Ne aggódj az egyes kártyák részleteitől. Személyre szabható a tervezés ízlése alapján. Kövesse ugyanazt a módszert az összetevők kártyájának használatának módjára, másolva az őket, és mindegyiket függőleges görgetéssel hozzáadja.

04. Hozzon létre egy új oldalt

Most hozzunk létre egy új oldalt, hogy menjen be egy adott recept adataiba. Például vigyük a második kártyát itt: francia tészta. Az új oldal létrehozásához hozzon létre egy új keret / alkotót, és vezessen be olyan elemeket, amelyekre szükségünk van, hogy további részleteket jelenítsünk meg a francia tészta receptről. Ez az új oldal lehet bontani egy videót, egy címet, a minősítés, a szükséges időt, és néhány akció gombokat, például mentés listát és megosztás szociális média.

Videó hozzáadásához menjen a boltba, és telepítse a YouTube-csomagot, amely lehetővé teszi, hogy könnyedén videókat adjon hozzá a prototípushoz. Most menjen az alkatrészek paneljébe, és húzza meg a YouTube elemet a YouTube-összetevő alatt a keretbe.

Állítsa be a bélyegkép szélességét úgy, hogy megfeleljen a keret szélességének. A megfelelő tulajdonságok ablaktábláján beillesztheti a prototípusban játszani kívánt videó URL-jét. Ha szeretné, akkor is van egy módja annak, hogy az Automatikus videókat a Tulajdonságok panelen található jelölőnégyzeten keresztül.

A videó alatt hozzáadhatja a címet, minősítést és különböző ikonokat. Ikonok hozzáadásához példánkra, az alkatrészt az ikon generátorboltból használtam. Ez egy egyszerű folyamat: egyszerűen húzza át az alap ikont a keretre, majd változtassa meg a jobb oldali panel nevű ingatlant a "szív" és a "Share" -hoz. Ez megváltoztatja az alapikonokat a mentési és megosztási ikonokba. A színek könnyen megváltoztathatók a jobb oldali panel segítségével is.

Ahhoz, hogy a dolgok könnyedén legyenek a látogatók számára, hozzáadhatsz egy olyan összetevőt, amely felsorolja a receptünkhöz szükséges összes összetevőt - ebben az esetben a francia tészta.

05. Interakciók bevezetése

Most tegyük meg a tervezésünket egy gombhoz való kölcsönhatás hozzáadásával. Ideális esetben, ha rákattint a megosztási ikonra, akkor egy képernyőre kell kérnie, hogy megoszthassa a receptet különböző szociális média csatornákon keresztül. Építjük, hogy új keret segítségével.

Győződjön meg róla, hogy a keret szélessége és magassága azonos szélességű és magassága, mint a másik két kép. Az ötlet az, hogy ez az új megosztási képernyő csúszsa fel és cserélje ki a jelen képernyőt, amikor a megosztási ikon kattint.

Annak érdekében, hogy a képernyő megkülönböztessen, adjunk hozzá néhány színt, és töltse ki a szociális média ikonokkal, például a Facebookon, Instagram, WhatsApp és e-mailben. Ez a részvény képernyőnek van egy X ikont is hozzá, amely rákattintott, ha visszahozná az eredeti állapotba.

Győződjön meg róla, hogy az összes ikon egy veremen belül van elrendezve. Amint az X ikont tartalmazza, a következő lépés az, hogy összekapcsolja ezt a keretet úgy, hogy megjelenjen a megosztási ikonra kattintva.

Ennek érdekében válassza ki a megosztási ikont tartalmazó keretet. A jobb oldali panelen egy linknek nevezik. Miután rákattintasz, az alkalmazás felület biztosítja Önt egy nyíllal, amelyet az új megosztott kerethez húzhat. Ez létrehoz egy linket a háttérben.

Most, amikor kiválasztja a megosztás ikont, akkor megfigyelhetjük, új tulajdonságok a jobb oldali panel alatt egy linket, amelyek Target, átmeneti és irány. Mindegyik tulajdonság lehetővé teszi az elemek megváltoztatását, például az átmenet típusát és az irányt, amelyben a képernyő felugrik, stb.

Megpróbálhatja tesztelni, ha a prototípus működik, vagy nem kattintva az interfész jobb felső sarkában található lejátszási ikonra kattintva. Hasonlóképpen, meg kell kapcsolni a részvény képernyőn a videó képernyő, hogy amikor a felhasználó rákattint az X ikonra, akkor visszatér az előző képernyőre.

Ez egy hasonló összekötő tulajdonsággal érhető el, és a cél hozzáadása videóként. Ha szeretné, hogy menjen hozzá egy kis változat hozzáadásához, akkor az irányt a tetejére hagyja, majd a lejátszási parancsot tesztelje, ha az interakció működik, vagy sem.

06. Mentés gomb hozzáadása

Most adjunk hozzá egy átfedési interakciót a mentési ikonra. Itt célunk, hogy amikor egy látogató rákattint a szív alakú ikonra, akkor megjelenik egy előugró ablak, amely megkérdezi, hogy szeretné-e menteni a receptet egy egyedi készítésű listára.

Kezdjük egy új keret létrehozásával, amelyet mentett listáknak neveznek. Ahogy az előzővel végeztél, győződjön meg róla, hogy ez a keret ugyanolyan szélességű, de ezúttal csökkenteni kell a magasságát, mert a kattintáskor átfedésként jelenik meg. A mentett listák keretének kialakításához adjunk hozzá egy fejlécet, egy szövegbevitelt, hogy adja meg a lista nevét és egy gombot, amely egy CTA megtakarításához.

A linkhez válassza ki a Video Frame szív alakú ikont, és adjon hozzá egy linket a mentett listák keretéhez. Most, ahelyett, hogy az átmeneti tulajdonság nyomja, tegye át egy átfedést. Állítsa be 80% -ra, majd tesztelje a lejátszás gomb segítségével. Módosítsa, amíg elégedett az átfedéssel. Link az X ikont a mentett listák ikonján Vissza a videó oldalra.

Ez hogyan kell használni Framer X könnyen teremt támadható interaktív prototípusok. Vannak olyan fejlett eszközök is, amelyeket használhat, valamint a REACT CODING CLEXETS hozzáadása a keretek elemeihez. A Framer X legjobb része is, hogy bárki elsajátíthatja azt, hogy néhány prototípuson próbálja ki.

Ez a cikk eredetileg megjelent a szóban forgó 325 nettó, a világ legkelendőbb magazin a webes tervezők és fejlesztők számára. Vásároljon ki kérdez 325 vagy Iratkozz fel nettó.

Csatlakozz hozzánk 2020 áprilisában a JavaScript szupersztárok felállításával a Generatejs-ban - a konferencia segít abban, hogy jobb JavaScript-et építsen. Foglaljon most generateconf.com

Olvass tovább:

• Hogyan kell kiemelkedni, és UX tervezőként bérelhetők
• A 20 UX tipp, amit tudnia kell
• 22 legjobb UI tervezési eszközök