Zrób prototyp Hi-Fidelity w atomowym

Sep 16, 2025
Jak

Łatwo jest złapać w próbę opracowania pomysłu w statycznym makiecie lub narzędzia do rysowania plików, ale a prototyp jest wart tysiąca spotkań. Dlaczego miałbyś zadowolić się cokolwiek mniej niż eksplorowanie pomysłów w interaktywny sposób?

Być może masz pomysł, jak można zachowywać przejście, ale nie jesteśmy do końca pewny, czy poczucie się do użytkownika. Szybko prototypowanie przejścia i interakcji bezpośrednio bezpośrednio daje o wiele bardziej realistyczne doświadczenie, w jaki sposób produkt końcowy mógł pracować w świecie rzeczywistym.

Widzieliśmy narzędzia przynieść prototypowanie do przestrzeni projektowej, ale nikt nie Atomowy . Teraz jest sposób na zbudowanie w pełni interaktywnych prototypów Hi-Fidelity, które wyglądają i zachowują się jak prawdziwa rzecz.

Prototypowanie w atomowej jest niezwykle szybkie: można tworzyć piękne, zaawansowane makiety w ciągu kilku minut, bez pisania dowolnego kodu, instalowania dowolnego oprogramowania lub picia za dużo kawy. Będziesz mógł podgląd z prototypem bezpośrednio na urządzeniu mobilnym lub udostępnić ją z kolegą z drużyny do informacji zwrotnej. Wstępnie przygotowaliśmy wszystkie aktywa, które musisz zacząć, więc nie będziesz musiał importować rzeczy (ale możesz importować z szkicu i Photoshop CC. zbyt).

W tym samouczku zbadamy proste przejście do przesuwania wewnątrz aplikacji pogodowej, którą stworzymy w atomowym. Przechodzimy przez łatwe kroki w celu robienia przejść, a jeśli potrzebujesz wyzwania, obejmuję również bardziej zaawansowane funkcje prototypowania do zbadania.

01. Zarejestruj się

Zacznijmy! Jeśli jeszcze nie masz konta, otwórz Google Chrome, odwiedź Atomic.io. i zapisz się na bezpłatną próbę. Tę trwa 30 dni, co powinno być mnóstwo czasu, aby zbadać atomowe i dokonać pierwszego prototypu.

02. Rozglądaj się

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

Przykładowy projekt zawiera przykładowe pliki, które pomogą Ci zapoznać się z atomem

Teraz jesteś zalogowany na swoje konto, to świetny czas na zwiedzanie. Zauważysz, że zostanie utworzony dla Ciebie przykładowy projekt. Ma to pewne wprowadzające przykładowe pliki, z którymi możesz grać podczas gdy znasz atomową. Alternatywnie możesz odwiedzić naszą Gablota , który ma zbiór prototypów zbudowanych przez innych. Jeśli utkniesz, najlepszym miejscem na szukanie rozwiązania jest nasz Centrum pomocy. .

03. Nowy projekt.

Utwórz nowy projekt, klikając "Nowy projekt" i nazwij swoją aplikację "Receptury". Naciśnięcie Enter otworzy folder projektu. Tutaj możesz zobaczyć wszystkie projekty w tym konkretnym projekcie. Ponieważ jest to nowy projekt, jest pusty. Jednak projekty wypełni się tutaj z czasem podczas ich utworzenia.

04. Chwyć próbkę

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

Do tego projektu jest gotowy przykładowy plik

Zamiast tworzyć nowy pusty projekt, Głowa tutaj . Spowoduje to otwarcie przykładowego pliku, który stworzyliśmy, aby pomóc Ci zacząć.

Zobacz przycisk "Kopiuj i Edytuj" w prawym dolnym rogu? Kliknij to i dodaj go do projektu aplikacji receptury. Kliknij "Edytuj teraz". Tak samo, kopia naszego przykładowego pliku jest teraz w swoim projekcie gotowy do edycji.

05. Poznaj edytor

Witamy w edytorze! Jeśli korzystałeś z narzędzia do projektowania w przeszłości, Atomic prawdopodobnie poczuje znajomy. Rozejrzyjmy się. Po lewej znajdziesz dostęp do narzędzi do rysowania, układu i prototypowania, a także dwie zakładki, które umożliwiają przełączenie między paneli stron i warstw. Po prawej stronie zauważysz panel Właściwości, który pozwala zmienić rozmiar strony, a także wprowadzać ustawienia dla stylów i przejść.

06. Sprawdź elementy

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

Na stronie aktywów przykładowych plików znajdziesz potrzebne elementy

Na stronie aktywa pliku przykładowego zobaczysz, utworzono wszystkie elementy używane w tym prototypie dla Ciebie. Przełącz się na panel warstwy, a następnie kliknij niektóre elementy na płótnie. Elementy wybrane zostaną automatycznie podświetlone w panelu Warstwy. Przyspiesz swój przepływ pracy, naciskając "?" Aby zobaczyć zakres skrótów klawiaturowych, których możesz użyć.

07. Podgląd

Możesz podgląd i interakcji z prototypem, gdy chcesz kliknąć "podgląd" w prawym dolnym rogu edytora. Wykorzystamy to później, aby sprawdzić, jak wygląda nasze przejścia. Wybieranie "podglądu" teraz pokaże zasoby w trybie pełnoekranowym, ale jeśli przejdziesz do strony 2 za pomocą strzałek, zobaczysz przykład odniesienia pierwszego stanu naszego prototypu. Spróbuj interaktować z przykładem odniesienia, klikając przycisk "Zapisane receptury" w nagłówku, aby podgląd, co zamierzamy stworzyć.

08. Zacznij

Teraz znasz prototyp, który budujemy, nadszedł czas, aby zacząć! Wybierz "Edytuj", aby wrócić do edytora, a następnie na stronie aktywów wybierz wszystkie elementy i skopiuj je do schowka. Przejdź do strony 1 i wklej elementy na stronę.

09. Ułóż swoje aktywa

Bez wybranych elementów ustawić tło wypełnienie płótna na # F6F7F8 (spójrz na panelu właściwości prawej). Umieść nagłówek na płótnie, góry i centrum.

Będziesz chciał zmienić aktywa, więc pierwsze państwo (wszystkie receptury) jest umieszczone na płótnie, a aktywa dla wkrótce do bycia stworzonym drugim stanem (zapisane receptury) są poza płótnem w prawo. Oto, dlaczego: Gdy ten sam obiekt istnieje na stronie 1 i strona 2, Atomic będzie animować zmiany między nimi automatycznie.

10. Stóż karty

Po początkowym podglądu prototypu, mógłbyś zauważyć wiadomości Przepisy na stronie "Reference - Wszystkie Przepisy" jest przewoływanie pionowo. Aby dodać ten efekt, zorganizuj karty receptur na pionowym stosie, w tym tekst "Wróć jutro", który należy umieścić ostatni, na dole.

11. Utwórz przewijany pojemnik

Wybierz tekst receptury i "Wróć tekst jutro" i wybierz narzędzie pojemnika, które pojawi się w górnym środku płótna. Wybierz "Utwórz przewijany pojemnik". Zawartość zostanie następnie pogrupowana i umieszczona w środku, co nazywamy pojemnikiem przewijania, z domyślnie włączony przewijanie pionowe. Upewnij się, że definiujesz granice kontenera, przeciągając dolną granicę, aby maskować elementy i spełnić płótno.

12. Umieść swoje elementy

W tym konkretnym przejściu, chcemy, aby "zapisane przepisy" siatki wchodzą z prawej strony, a tekst "dodaj więcej" z dołu. Aby upewnić się, że tak się stanie, umieść każdy element w odpowiedniej pozycji wyjściowej. Na przykład, "Zapisane receptury" należy umieścić na stronie 1, z płótna i w prawo; Podczas gdy tekst "Dodaj więcej" należy umieścić na stronie 1, z płótna i poniżej.

13. Dotknij przejścia

Jak tworzymy przejście Dotknij, gdzie chcemy elementy na naszej następnej stronie, aby się wsunąć, ważne są, one również istnieją na stronie 1, z powodu płótna, aby zdefiniować ich pozycję wyjściową. W dowolnym momencie można odnieść się do strony "Odniesienia - wszystkie przepisy", aby zobaczyć, jak ta strona powinna być zorganizowana.

14. Duplikacja

For our transition, duplicate page 1

Dla naszego przejścia, duplikat strony 1

Teraz skonfigurowaliśmy pierwszą stronę, nadszedł czas, aby utworzyć drugi stan przejścia, który zrobimy na nowej stronie. Upewnij się, że wybrany jest panel strony, a następnie najedź na stronie 1, aby wyświetlić menu hamburgera w prawym dolnym rogu karty strony. Kliknij menu i wybierz "Duplikat".

15. Zapisane przepisy

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

Atomic będzie animować wszelkie zmiany, które wykonujesz między stroną 1 a nową stroną 2

Przejdź do nowo powielonej strony, aby utworzyć drugi stan: Twoje zapisane przepisy. Ważne jest, aby nie usunąć żadnych elementów na stronie, ponieważ złamie to przejście. Ponieważ powielaliśmy stronę, Atomic wie, że elementy na obu stronach są tymi samymi podłączonymi elementami. Dlatego wie, że ożywia wszelkie zmiany, które wprowadzamy do właściwości elementów na stronie 2 (rozmiar, pozycja, obrót, nieprzezroczystość, kolor i tak dalej).

16. Więcej przejść

Najpierw przesuń grupę przewijaną "Wszystkie" wszystkie przepisy "w lewo, z płótna, a element" zapisanych receptur "i" dodają więcej "tekstu do ich nowych pozycji: w organizmie (zamiast grupy" Wszystkie przepisy ") Dolna połowa płótna, odpowiednio w centrum. Jedynym elementem, którego nie poruszamy się w tym przejściu, jest nagłówkiem. Dzieje się tak, ponieważ nagłówek pozostaje na ekranie i tylko zmienia się subtelnie - dostaniemy się do tego wkrótce.

17. Dalsza animacja

Na nagłówek chcemy, aby niebieskie tło przesuwało się w drugim stanie. Podczas gdy na stronie 2, z otwartym panelem warstw, rozwiń grupę zatytułowaną "Nagłówek" i wybierz niebieski prostokąt. Następnie przesuń to w prawo, więc umieszcza się za "zapisanymi przepisami". Miły!

18. Zabawna część

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

Dodaj hotspot interakcji na tym obszarze, z którym użytkownicy mają interakcje

Teraz pojawia się zabawna część tworzenia przejścia. Na stronie 1 będziemy narysować hotspot na tekście "zapisane receptury" w nagłówku, ponieważ jest to obszar, z którym chcemy, aby nasz użytkownik w interakcji. Wybierz narzędzie Hotspot InteractSpot z panelu Narzędzia w odległym lewo od edytora (lub po prostu naciśnij H). Możesz rysować hotspoty za pomocą tej samej metody, której używasz, aby narysować prostokąt na płótnie: po prostu kliknij i przeciągnij.

19. Ustawienia przejścia.

Customise your transition, including the trigger gesture and motion type

Dostosuj swoje przejście, w tym gest wyzwalacza i typ ruchu

Po wyciągnięciu hotspota, z nim wciąż wybrisz sekcję interakcji pojawi się w panelu Właściwości po prawej stronie. W tym miejscu można określić gest wyzwalacza, strona docelowa, typ ruchu i czas trwania przejścia. W tym przejściu określa następujące ustawienia: Gest: Kliknij lub dotknij ; Iść do: Strona 2 ; Motion: E. ASE In-Out ; Trwanie: 250. .

20. Back and fort

Chcemy być w stanie przełączać się tam iz powrotem między dwoma przejściami, więc teraz będziemy musieli umieścić hotspot na stronie 2, aby odebrać nas z powrotem do strony 1. Skopiuj hotspot z Page 1 Korzystanie z skrótów klawiaturowych i wklej na stronie 2 na tekstie "wszystkie receptury" w "nagłówku". Pamiętaj, aby zaktualizować ustawienie strony docelowej nowego hotspot do strony 1.

21. Podgląd

Click the Preview button to see your transition in action

Kliknij przycisk Podgląd, aby zobaczyć swoje przejście w akcji

Nadszedł czas, aby wyświetlić podgląd Twojego przejścia! Przejdź do Page 1 W panelu Strony i kliknij Podgląd w prawym dolnym rogu edytora (skrót cmd + enter. ). Kliknij lub stuknij na "Zapisane przepisy" na prototypie, aby przejść do strony 2. Następnie wybierz opcję Prototyp "Wszystkie wszystkie przepisy", aby otrzymać z powrotem do strony 1.

22. Wszystko zrobione!

Teraz jesteś pro! Wybierz "Edytuj", aby powrócić do edytora, a następnie, jeśli usuniesz aktywa i dwie strony odniesienia (wybierając menu hamburgera strony, a następnie "Usuń stronę"), właśnie wykonany prototyp jest gotowy do udostępniania. Możesz łatwo utworzyć link do udostępniania, naciskając "Udostępnij" w prawym dolnym rogu edytora.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 283; Kupuj tutaj !

Jak - Najpopularniejsze artykuły

Google Slajdy: Jak zaprojektować dokument

Jak Sep 16, 2025

(Kredyt obrazu: Google) Google Slajdy staje się coraz bardziej popularne. Gdy świat odbywa się z dala od biura i o..

Zrozumienie przetwarzania języka naturalnego

Jak Sep 16, 2025

Strony internetowe i aplikacje mogą mieć różne ruchome części, w tym frontowe przetwarzanie, przetwarzanie po stronie serwe..

Perfect prototypes i konstrukcje odręczne z marvel

Jak Sep 16, 2025

Dzięki krótszej krzywej szkoleniowej niż aplikacja Invision i nowa narzędzia do przenoszenia projektowania dla zespołów Ent..

Jak wyrzucić przekonujące oczy w Zbrush

Jak Sep 16, 2025

Kiedy rzeźbienie realistyczne 3D ludzkie oko, aby dodać do swojej biblioteki gotowych do użycia aktywów, pamiętaj, że nie m..

Utwórz interaktywne wizualizacje 3D z trzema.js

Jak Sep 16, 2025

Ten samouczek Webgl pokazuje, jak utworzyć symulację środowiska 3D, która pokazuje, co dzieje się ze światem jako poziom po..

Jak zrobić własne płyty na płótnie

Jak Sep 16, 2025

Dokonywanie własnych płyt płótno jest zabawny, szybki i może zaoszczędzić pieniądze. Daje również najwyższy produkt i ..

Pan młody nieodparcie futrzanego stworzenia

Jak Sep 16, 2025

Strona 1 z 3: Strona 1 Strona 1 Strona 2..

Jak narysować Harley Quinn

Jak Sep 16, 2025

Dla mnie, apelacja cyfrowego Techniki malowania są proste. W przeciwieństwie do tradycyjnych mediów, mogę stwo..

Kategorie