Použijte Framer X pro vytvoření interaktivních prototypů

Sep 13, 2025

jak

(Image Credit: Framer)

Jako designéři je vždy otázka, jaké prototypové nástroje byste měli použít pro váš projekt. Tam je spousta softwaru tam pro úkoly, jako je wireframing (viz náš top Wireframing Tools. a vynikající Stavitelé webových stránek ), prototypování a budování komplexních interakcí; Velmi málo nástrojů je však schopno zvládnout všechny tyto. Framer je jeden nástroj, který má všechny tyto funkce a výrazně urychluje proces vytváření drobných animací a interakcí.

Nejnovější iterace, Framer X. , nyní používá reakci a JavaScript namísto použití Coffeescript pro rozvoj mikro-interakcí a animace. To pomáhá dodávat rychlejší časy zatížení a lepší výkon. Plus, použití reakcí komponent znamená, že uživatelé mají větší prostor pro přidání a rozšíření, včetně vložení mediálních hráčů, dat v reálném čase a grafů uvnitř prototypů.

Testování je základní součástí procesu stavby prototypu a zatímco Framer X je skvělý při vytváření interaktivních prototypů potřebuje pomoc, aby viděl, jak jsou jeho výtvory. Podívejte se na naše. Uživatelské testování Příspěvek pro některé z nejlepších nástrojů pro doplnění frameru a pomáhat budovat reálné prototypy, a ujistěte se, že používáte nejlepší web hosting Servis pro vás.

Jak vytvořit aplikaci s Framerem X

Chcete-li plně ocenit sílu Frameru X, vytvoříme projekt reálného života: jednoduchý proces recept na vaření s nějakým obsahem a médii (aktiva, která jsou zálohována ve spolehlivých cloudové úložiště ). První věc, která je vybudována, je domovská stránka. Udržujeme věci jednoduché s následujícími prvky:

Standardní vyhledávací panel pro nalezení receptů
Nedávná aktivita pro zobrazení nejnovějších receptů
Karty receptů ukazující věci jako nejoblíbenější recepty
Vytvoření podrobného zobrazení receptu s možností videa a sdílení

Chcete-li začít, musíte vytvořit nový rámeček (Artboard) kliknutím na ikonu + na levém Navbar. Vyberte libovolný styl kreslu ze seznamu standardních iPhone / Android šablon na pravém panelu. Nyní jste připraveni jít.

01. Vybudujte vyhledávací panel

Začněme budováním vyhledávacího panelu. Místo vytvoření obdélníku a přidání ikony vyhledávání, jako bychom normálně bychom mohli skutečně použít rychlé opakovaně použitelné komponenty v Frameru X, které se nazývají balíčky. Existují tisíce balíčků, které lze nalézt v levém navigačním panelu pod obchodem. Klikněte na Store, vyhledejte soupravu sady Android a Příklad sady EXPONE a pak je nainstalujte.

Tyto balíčky obsahují prvky jako karty, tlačítka, klávesnice, posuvníky, vstupy a položky navigační nabídky. Jakmile nainstalujete tyto balíčky, můžete použít prvky z nabídky komponenty vlevo.

Najděte prvky, které chcete vyhledávat ve filtru - v tomto případě vyhledávací panel, který je nalezen v příkladu soupravy. Jednoduše přetáhněte a přejděte na rám. Nyní můžete upravit vlastnosti, například zástupný text, velikost písma a barvu pomocí pravého panelu.

02. Vytvořte zásobník obsahu

Pro tento nedávný blok aktivity nejprve přidejte text "nedávná aktivita", která je docela přímočará. Nyní můžeme použít nový prvek Frameru X zvaného hromádek. To lze provést kliknutím na ikonu + a výběrem Stack S z menu. Po výběru zásobníku přetáhněte oblast 600 x 300 na pracovním rámečku a vytvořte zásobník. Tento zásobník bude zobrazen jako modrá.

Pojďme se vrátit do sekce Komponenty a pod sadou Android, hledejte prvek Card-5 a přetáhněte jej do zásobníku, kterou jsme právě vytvořili. Dvakrát duplikujte tyto karty a ujistěte se, že všechny tři karty jsou v zásobníku.

Dokud budou v zásobníku, tyto tři karty mohou být snadno přeskupeny, aniž byste museli starat o rozteč. Pokud chcete zvýšit vzdálenost mezi kartami, můžete zvýšit šířku celého zásobníku. Je to tak jednoduché. Můžete také přizpůsobit tyto karty změnou názvu názvu a pozadí podle vašich představ.

Teď, když jsme vytvořili zásobník, pojďme to posouvat. Přesuňte ho z rámu / kresby. Klikněte na ikonu + z levého NAV a klepněte na možnost Scroll. Stejně jako jsme vytvořili oblast se zásobníku, vytvořte rolovací plochu na rámu / kreslicí desce, která je stejná velikost jako zásobník.

Nyní změňte vlastnost Scroll v pravém panelu změnou směru šipek, abyste zjistili, že je horizontální svitek. Po vytvoření naší svitkové kontejnerů potřebujeme pro ni obsah, který podává zásobník, který jsme dříve vytvořili. Takže jednoduše připojte nádobu pro posuvníku do zásobníku pomocí výzvy šipky na svitkové nádobě. Pracuje tažením ukazatele myši do zásobníku.

03. Vytvořte vertikální zásobník

Interactive Framer X - 01 — Framer X umožňuje zavést horizontální a vertikální rolovací svazky (Image Credit: VAMSI Batchu)

Pro karty receptů musíte postupovat podle metody podobné kroku 2, ale namísto vytvoření horizontálního svitku karet vytvoříte podobnou vertikální, která je v podstatě seznam nejoblíbenějších receptů s miniaturami. Pro toto cvičení má každá karta pro recept čtyři prvky - miniatura obrazu, hodnocení, název receptu a čas potřebný k přípravě.

Nebojte se o detaily každé karty. Mohou být přizpůsobeny na základě vaší konstrukční chuti. Postupujte podle stejného způsobu použití karty ze součástí, duplikuje je a přidání všech z nich do zásobníku s vertikálním svitkem.

04. Vytvořte novou stránku

Vytvořme nyní novou stránku a přejděte do podrobností konkrétního receptu. Pojďme například vezměme v případě druhé karty: francouzské těstoviny. Chcete-li vytvořit tuto novou stránku, vytvořte nový rámeček / kreslicí a představte prvky, které potřebujeme pro zobrazení více informací o francouzském těstovinovém receptu. Tato nová stránka může být rozdělena do videa, titul, hodnocení, čas potřebný k tomu, aby byl a několik akčních tlačítek, například Uložit do seznamu a sdílení sociálních médií.

Pro přidání videa přejděte do obchodu a nainstalujte balíček YouTube, který vám umožní bez námahy přidat videa do prototypu. Nyní přejděte do panelu součástí a přetáhněte element YouTube ze složky YouTube do rámečku.

Upravte šířku miniatury tak, aby odpovídala šířce rámu. Ve správném podokně vlastností můžete vložit adresu URL videa, který chcete hrát v prototypu. Pokud byste chtěli, je zde také cesta k autoplay videa prostřednictvím zaškrtávacího políčka v panelu Vlastnosti.

Pod tímto videem můžete přidat název, hodnocení a různé ikony. Pro přidání ikon pro náš příklad jsem použil komponentu z obchodu generátoru ikon. Je to snadný proces: jednoduše přetáhněte ikonu základny na rám a pak změňte vlastnost nazvanou ikonu na pravém panelu na "Srdce" a "Sdílet". To změní ikony základny do ikon uložení a sdílení. Jejich barvy lze také snadno změnit pomocí pravého panelu.

Chcete-li dělat věci snadné pro návštěvníky, můžete přidat sekci nazvanou ingredience, která by uvedla všechny ingredience potřebné pro náš recept - v tomto případě francouzské těstoviny.

05. Zavést interakce

Interactive Framer X - 02 — Přidejte interakce na tlačítka a prvky, aby byly více zapojení (Image Credit: VAMSI Batchu)

Nyní pojďme na náš návrh více zapojení přidáním interakcí pro tlačítko. V ideálním případě, když kliknete na ikonu Sdílení, měli byste být vyzváni k obrazovce sdílet recept v různých sociálních médiích kanálech. Pojďme stavět, že pomocí nového rámce.

Ujistěte se, že šířka a výška tohoto rámečku je stejná šířka a výška jako ostatní dva snímky, které jsme vytvořili. Myšlenka je pro tuto novou obrazovku sdílené sdílení pro posunutí a nahrazení této obrazovky, když klikne ikona sdílené položky.

Abychom pomohli, aby se sítko odlišovalo, přidávejme k němu nějakou barvu a vyplňte ji s ikonami sociálních médií, jako je Facebook, Instagram, Whatsapp a e-mail. Tato sdílená obrazovka by měla mít také ikonu X přidána do ní, která při kliknutí by ji vyvolala zpět do původního stavu.

Ujistěte se, že všechny ikony jsou uspořádány uvnitř zásobníku. Jakmile je zahrnuta ikona X, dalším krokem je propojení tohoto rámečku tak, že se zobrazí při klepnutí na ikonu sdílené položky.

Chcete-li to provést, vyberte rámeček, který obsahuje ikonu Sdílení. V pravém panelu je zde vlastnost s názvem Link. Jakmile kliknete na to, že aplikační rozhraní vám poskytne šipku, kterou můžete přetáhnout na nový rámec sdílení, který jsme vytvořili. To vytvoří odkaz v pozadí.

Nyní, když vyberete ikonu Sdílení, budete pozorovat nové vlastnosti v pravém panelu pod odkazem, který je cíl, přechod a směr. Každá z těchto vlastností umožňuje změnit prvky, jako je typ přechodů a směr, ve kterém by se obrazovka měla vyskočit atd.

Můžete otestovat, zda prototyp pracuje nebo ne kliknutím na ikonu přehrávání nalezené v pravém horním rohu rozhraní. Podobně je třeba propojit obrazovku sdílené obrazovky na obrazovku videa tak, že když uživatel klikne na ikonu X, vrátí se na předchozí obrazovku.

Toho lze dosáhnout použitím podobného propojení vlastnosti propojení a přidání cíle jako obrazovka videa. Chcete-li mít jít na přidání trochu variace, můžete změnit směr vlevo místo nahoře a poté pomocí příkazu Přehrát chcete testovat, zda interakce pracuje nebo ne.

06. Přidat tlačítko Uložit

Nyní přidejte překrytí interakci na ikonu Uložit. Naším cílem je, že vždy, když návštěvník klikne na ikonu ve tvaru srdce, mělo by se objevit vyskakovací okno, které se zobrazí, zda chcete uložit recept na vlastní seznam na zakázku.

Začněme vytvořením nového snímku zvaného uložených seznamů. Stejně jako jste to udělali s předchozím, ujistěte se, že tento rámeček má stejnou šířku, ale tentokrát musíte snížit jeho výšku, protože se zobrazí jako překrytí při kliknutí. Pro styly uložených seznamů rámeček přidejte záhlaví, zadání textu zadat název seznamu a tlačítko, které je CTA pro uložení.

Chcete-li odkaz, vyberte ikonu ve tvaru srdce na snímku videa a přidejte odkaz na uložené seznamy. Namísto transformačního vlastnictví je push, proveďte to překrytí. Upravte jej na 80% a potom jej otestujte pomocí tlačítka PLAY. Upravte, dokud nebudete spokojeni s překrytím. Propojte ikonu X na ikonu Uložené seznamy Zpět na stránku videa.

To je, jak používat Framer X snadno vytvořit akční interaktivní prototypy. K dispozici jsou také pokročilé nástroje, které můžete použít, stejně jako přidání reagovat kódování úryvků na prvky rámců. Také nejlepší část Frameru X je, že ho někdo může zvládnout tím, že se snaží o několik prototypů.

Tento článek byl původně publikován v čísle 325 sítě, nejprodávanějšího časopisu na světě pro webové designéry a vývojáře. Prodám vydání 325. nebo předplatit k internetu.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Naučte se, jak budovat lepší JavaScript na GenerateJs (Image Credit: Budoucnost / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Připojte se k nám v dubnu 2020 s naším sestavy Superstars JavaScript na Generatejs - konference vám pomůže vybudovat lepší JavaScript. Kniha nyní generateconf.com.

Přečtěte si více:

Jak vyniknout a získat najat jako UX Návrhář
20 UX tipů, které potřebujete vědět
22 Nejlepší UI Design Tools

Použijte Framer X pro vytvoření interaktivních prototypů

Jak vytvořit aplikaci s Framerem X

01. Vybudujte vyhledávací panel

02. Vytvořte zásobník obsahu

03. Vytvořte vertikální zásobník

04. Vytvořte novou stránku

05. Zavést interakce

06. Přidat tlačítko Uložit

jak - Nejoblíbenější články

Jak upravit video na Tiktok

Prozkoumejte vizualizaci dat s p5.js

Animace vozidel s Iclone 7

Master velkoplošné prostředí v 3ds max

Anatomy MasterClass: Perfektní vaše čísla

Generování nekonečných barevných paletů s Khroma

Sestavte aplikace, které pracují offline

Zlepšit tahy štětce v oleji

Kategorie