Proveďte prototyp hi-fidelity v atomové

Sep 11, 2025
jak

Je snadné se chytit ve snaze rozvíjet myšlenku v rámci statického maketa nebo plochého nástroje pro kreslení souborů, ale prototyp stojí za tisíc setkání. Proč byste se spokojili s čímkoliv méně než zkoumání vašich myšlenek interaktivním způsobem?

Možná máte nápad na to, jak by se přechod mohl chovat, ale nejsi si zcela jistý, jestli by se cítila právo uživateli. Rychle prototyping přechod a interakce s ním přímo vám dává mnohem realističtější zkušenost z toho, jak by finální produkt mohl pracovat v reálném světě.

Viděli jsme nástroje, které přinášejí prototypování do designového prostoru, ale nic takového Atomový . Teď je tu způsob, jak budovat plně interaktivní prototypy hi-fidelity, které vypadají a chovají se jako skutečná věc.

Prototypování v atomech je neuvěřitelně rychlé: můžete vytvořit krásné, pokročilé maketa v minutách, aniž byste psali libovolný kód, instalovat jakýkoliv software nebo pití příliš mnoho kávy. Budete moci zobrazit náhled s prototypem přímo na vašem mobilním zařízení nebo jej sdílet s spoluhráčem pro zpětnou vazbu. Také jsme předem provedli všechny aktivy, které potřebujete začít, takže nebudete muset importovat věc (ale můžete importovat z náčrtu a Photoshop CC. také).

V tomto tutoriálu prozkoumáme jednoduchý přechod swipe uvnitř počasí aplikace, kterou vytvoříme v atomech. Budeme procházet jednoduchými kroky pro převodovky a pokud budete potřebovat výzvu, budu také pokrýt další pokročilejší prototypové funkce pro vás prozkoumat.

01. Zaregistrujte se

Začněme! Pokud ještě nemáte účet, otevřete Google Chrome, navštivte atomic.io. a zaregistrujte se zdarma zkušební verzi. To trvá 30 dní, což by mělo být dostatek času pro vás prozkoumat atomovou a učinit svůj první prototyp.

02. Podívejte se kolem

The Sample Project contains sample files to help you get familiar with Atomic

Ukázkový projekt obsahuje ukázkové soubory, které vám pomohou seznámit se s atomem

Nyní jste přihlášeni k vašemu účtu, je to skvělý čas prozkoumat. Všimněte si ukázkový projekt byl pro vás nastaven. To má některé úvodní ukázkové soubory, s nimiž se můžete hrát, když se seznámíte s atomovou. Případně můžete navštívit naše Vitrína , který má sbírku prototypů postavených ostatními. Pokud se uvíznete, nejlepší místo pro hledání řešení je naše Centrum nápovědy .

03. Nový projekt

Vytvořit nový projekt klepnutím na tlačítko "Nový projekt" a pojmenujte jej "Recept App". Stisknutím klávesy Enter otevřete složku projektu. Zde si můžete prohlédnout všechny návrhy v tomto konkrétním projektu. Protože se jedná o nový projekt, je prázdný. Nicméně, návrhy se zde zaplní časem při vytváření.

04. Uchopte vzorek

There's a ready-made sample file for this project

Pro tento projekt je připravený vzorový soubor

Místo toho, aby vytvořil nový prázdný design, hlavu . Tím se otevře ukázkový soubor, který jsme vytvořili, který vám pomůže začít.

V pravém dolním rohu naleznete v pravém dolním rohu "Kopírovat a upravit"? Klikněte na to a přidejte jej do projektu App Recept. Klikněte na 'Upravit nyní'. Stejně tak, že kopie našeho vzorového souboru je nyní uvnitř vašeho projektu připraven pro úpravu.

05. Prozkoumejte editor

Vítejte v editoru! Pokud jste v minulosti použili návrhový nástroj, atomová se pravděpodobně cítí seznámit. Podívejme se kolem. Vlevo najdete přístup k nástrojům výkresu, rozložení a prototypování, stejně jako dvě záložky, které umožňují přepínat mezi panely stránek a vrstev. V pravé straně si všimnete panelu Vlastnosti, který umožňuje změnit velikost stránky, stejně jako přijímání nastavení stylů a přechodů.

06. Podívejte se na prvky

In the sample file's Assets page you’ll find the elements you need

Ve stránce aktiv Sample Soubor najdete prvky, které potřebujete

Na stránce Aktiva ukázkového souboru uvidíte, že jsme vytvořili všechny prvky použité v tomto prototypu pro vás. Přepněte na panel Vrstvy a klepněte na některé z prvků na plátně. Prvky, které vyberete, budou automaticky zvýrazněny v panelu Vrstvy. Zrychlete svůj pracovní postup stisknutím tlačítka "?" Chcete-li zobrazit rozsah klávesových zkratek, můžete použít.

07. Náhled

Můžete si prohlédnout a komunikovat s prototypem, kdykoli chcete kliknutím na "Náhled" v pravém dolním rohu editoru. Toto později použijeme, abychom testovali, jak se cítí naše přechody. Volba 'Náhled' nyní vám zobrazí aktiva v režimu celé obrazovky, ale pokud přejdete na stránku 2 pomocí šipek, uvidíte referenční příklad prvního stavu našeho prototypu. Vyzkoušejte interakci s referenčním příkladem kliknutím na tlačítko "Uložené recepty" v záhlaví pro náhled toho, co budeme vytvářet.

08. ZAČÁTEK.

Nyní jste obeznámeni s prototypem, které budujeme, je čas začít! Vyberte 'Edit', abyste se vrátili do editoru a pak na stránce aktiv vyberte všechny prvky a zkopírujte je do schránky. Přejděte na stranu 1 a vložte prvky na stránku.

09. Zajistěte aktiva

Bez vybraných prvků nastavte výplň na pozadí plátno na # F6F7F8 (podívejte se do panelu vlastností pravé ruky). Umístěte záhlaví na plátno, top a střed.

Budete chtít změnit aktiva, takže váš první stav (všechny recepty) je umístěn na plátně a aktiva pro váš druhý stav vytvořený druhý (uložený recepty) jsou mimo plátno vpravo. Zde je důvod, proč: Když stejný objekt existuje na straně 1 a Page 2, Atomic bude animovat všechny změny mezi nimi automaticky.

10. Stohněte si karty

Když jste zpočátku zobrazili prototyp, možná jste si všimli novinářů receptů na "reference - všechny recepty" je vertikálně rolovatelná. Chcete-li tento efekt přidat, uspořádejte karty receptů ve vertikálním zásobníku, včetně textu "Vraťte zítra", který by měl být umístěn naposledy, v dolní části.

11. Vytvořte rolovací kontejner

Vyberte karty receptů a 'Vraťte zítra zítra' a vyberte nástroj kontejneru, který se zobrazí v horním centru plátna. Zvolte 'Vytvořit rolovací kontejner'. Obsah bude seskupen a umístěn uvnitř toho, co nazýváme rolovací kontejner, ve výchozím nastavení je povoleno svislé posouvání. Ujistěte se, že definujete hranice kontejneru přetažením spodní hranice nahoru, abyste maskuli prvky a setkat se s plátnem.

12. Umístěte své prvky

Pro tento konkrétní přechod chceme, že "uložená recepty" přichází zprava zprava a "Přidat další" text přichází zdola nahoru. Aby se ujistil, že se stane, umístěte každý prvek do příslušné výchozí polohy. Například, "uložené recepty" by mělo být umístěno na straně 1, mimo plátno a doprava; Zatímco text "Přidat více" by měl být umístěn na straně 1, mimo plátno a níže.

13. Poklepejte na přechod

Když vytváříme přechod kohoutku, kde chceme, aby prvky na naší další stránce posouvali, je důležité, že existují také na straně 1, mimo plátno, definovat jejich výchozí pozici. Kdykoliv můžete odkazovat na stránku "Reference - všechny recepty", abyste zjistili, jak by měla být tato stránka uspořádána.

14. Duplikace

For our transition, duplicate page 1

Pro náš přechod, duplicitní stránka 1

Nyní jsme nastavili první stránku, je čas vytvořit druhý stav pro přechod, který budeme dělat na nové stránce. Ujistěte se, že je vybrán panel stránek, poté přesuňte přes Page 1 pro vyvolání menu Hamburger v pravém dolním rohu stránky karty. Klepněte na nabídku a vyberte možnost Duplikovat ".

15. Uložené recepty

Atomic will animate any changes you make between Page 1 and your new Page 2

Atomic bude oživit všechny změny, které provádíte mezi stránkami 1 a vaše nová stránka 2

Přejděte na nově duplikovanou stránku a vytvořte druhý stav: uložené recepty. Je důležité, abychom odstranili žádné prvky na stránce, protože to bude přerušit přechod. Protože jsme duplikovali stránku, atomic ví, že prvky na obou stranách jsou stejné připojené prvky. Proto ví, aby animoval všechny změny, které provádíme vlastnosti prvků na straně 2 (velikost, poloha, otáčení, opacity, barva a tak dále).

16. více přechodů

Nejprve přesuňte rolovací skupinu všech receptů doleva, mimo plátno, a prvek "Uložené recepty" a "přidat více" text do jejich nových pozic: v těle (místo "všech receptů") spodní polovina plátna a v centru. Jediný prvek, který se v tomto přechodu nepohybujeme, je záhlaví. Je to proto, že záhlaví zůstane na obrazovce a pouze se změní - dostaneme se k tomu brzy.

17. Další animace

Pro záhlaví chceme, aby modré pozadí vysílaly na druhém stavu. Zatímco na stránce 2, s otevřenou panelem vrstev, rozbalte skupinu s názvem 'záhlaví' a vyberte modrý obdélník. Pak to přesuňte doprava, takže je umístěno za "uložené recepty". Pěkný!

18. Zábavná část

Add an interaction hotspot over the area you want users to interact with

Přidání interakce hotspot nad oblastí, kterou chcete, aby uživatelé mohli spolupracovat

Nyní přichází zábavná část vytváření přechodu. Na stránce 1 budeme nakreslit hotspot přes text "Uložené recepty" v záhlaví, protože to je oblast, kterou chceme, aby náš uživatel komunikoval. Vyberte nástroj Hotspot Interakce z panelu Nástroje na levé straně editoru (nebo stiskněte tlačítko H). Můžete kreslit hotspoty pomocí stejného metody, které byste použili k nakreslení obdélníku na plátně: stačí kliknout a přetáhnout.

19. Nastavení přechodu

Customise your transition, including the trigger gesture and motion type

Přizpůsobte svůj přechod, včetně spouštěcího gesta a typu pohybu

Jakmile nakreslete svůj hotspot, s stále vybráním, uvidíte část interakcí v panelu Vlastnosti vpravo. To je místo, kde můžete určit gesto spoušť, cílovou stránku, typ pohybu a trvání přechodu. Pro tento přechod uveďte následující nastavení: gesto: Klikněte nebo klepněte na tlačítko ; Jít do: Stránka 2. ; Pohyb: E. výdej ; Doba trvání: 250. .

20. tam a zpět

Chceme být schopni přepínat mezi oběma přechody, takže nyní musíme také umístit hotspot na straně 2, abyste se vrátili zpět na stranu 1. Zkopírujte Hotspot ze stránky 1 pomocí klávesových zkratek a pasty Na straně 2 přes text "Všechny recepty" v "záhlaví". Nezapomeňte aktualizovat nastavení cílové stránky nového hotspotu na stránku 1.

21. Náhled

Click the Preview button to see your transition in action

Kliknutím na tlačítko Náhled zobrazíte svůj přechod v akci

Je čas na náhled přechodu! Přejděte na stránku 1 na panelu stránek a klepněte na tlačítko Náhled v pravém dolním rohu editoru (zástupce) CMD + ENTER. ). Klikněte nebo klepněte na 'Uložené recepty na prototypu a přejděte na stránku 2. Poté vyberte prototyp "Všechny recepty", které mají být přijaty zpět na stranu 1.

22. Všechno udělal!

Teď jsi pro! Zvolte 'Edit' pro návrat do editoru, poté, pokud odstraníte aktiva a dva referenční stránky (výběrem nabídky Hamburger stránek a potom "Smazat stránku"), prototyp, který jste právě provedli, je připraven ke sdílení. Můžete snadno vytvořit odkaz sdílení stisknutím tlačítka "Sdílet" v pravém dolním rohu editoru.

Tento článek se původně objevil Čistý časopis Vydání 283; koupit to tady Dokázal se!

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

Master Směšovací kartáč ve Photoshopu

jak Sep 11, 2025

Digitální malířské nástroje v posledních letech vážně pokročily. Umělci mohou používat tablety produkovat uměleck�..

Jak používat textury ve Photoshopu

jak Sep 11, 2025

Textura je často to, co rozplyne čáry mezi tradičními a digitálními kresbami. Často je snadné říci rozdílu mezi oběma, pokud vaše digitální umělecká díla nemá žádné pl�..

Jak opravit chybnou kompozici

jak Sep 11, 2025

V loňském roce jsem v loňském roce stvořil svou originální malbu, když jsem byl inspirován obrovským fantazií krajiny umělci jako Dongbiao Lu a Ruxing Gao. Bylo to moje první sty..

Jak vytvořit ovládací prvky vlastního soutěže v Maya

jak Sep 11, 2025

Tento Maya tutorial. Ukáže vám, jak vytvořit vlastní soupravy. Nejlepší soupravy jsou ty, které jsou intui..

12 Tipy pro realistické 3D osvětlení

jak Sep 11, 2025

Osvětlení je zásadní 3D umění Projekt pracujete. Na nejzákladnější úrovni je to způsob, jak vytvořit ..

Jak vytvořit 3D nápisy v Illustrator

jak Sep 11, 2025

Minulý týden Adobe vydal další videa do svého užitečného učinit to nyní playlist, dávat kreativy šanci vyzvednout řadu praktických dovedností za pouhých 60 sekund nebo méně...

Udělejte plakát z šablony ve Photoshopu

jak Sep 11, 2025

Společnost Adobe spustí novou sérii video tutoriálů dnes nazvaný, aby to bylo nyní, což je zaměřeno na obrys jak vytvořit konkrétní projekty projektů pomocí různých ..

Zrychlení pracovního postupu textury

jak Sep 11, 2025

Válečník je osobní projekt, který jsem měl radost o pojetí a navrhování. Chtěl jsem vytvořit postavu, která ztělesň..

Kategorie