Użyj obudowy X, aby zbudować interaktywne prototypy

Sep 11, 2025

Jak

(Kredyt obrazu: Framer)

Jako projektanci zawsze istnieje pytanie, jakie narzędzia prototypujące powinieneś używać do projektu. Istnieje wiele oprogramowania do zadań, takich jak Worframing (patrz nasz górny Wireframing narzędzia i doskonały Budowniczowie stron internetowych. ), prototypowanie i budowanie złożonych interakcji; Jednak bardzo niewiele narzędzi jest w stanie obsługiwać wszystkie te. Framer to jedno narzędzie, które ma wszystkie te funkcje i znacznie przyspiesza proces tworzenia małych animacji i interakcji.

Najnowsza iteracja, Flowers X. , teraz używa reakcji i JavaScript zamiast korzystać z CoffeScript do rozwijania mikro-interakcji i animacji. Pomaga to zapewnić szybsze czasy ładowania i lepszą wydajność. Dodatkowo, stosowanie elementów reagujących oznacza, że użytkownicy mają więcej zakresu, aby dodać i rozciągać się, w tym włączenie odtwarzaczy multimedialnych, danych w czasie rzeczywistym i wykresy wewnątrz prototypów.

Testowanie jest podstawową częścią procesu budynku prototypowego i podczas gdy ramka X jest świetna przy tworzeniu interaktywnych prototypów potrzebuje pomocy, aby zobaczyć, jak dobre są twoje kreacje. Sprawdź naszą Testowanie użytkownika Post dla niektórych najlepszych narzędzi do uzupełnienia frontu i pomóż budować prototypów na świecie i upewnij się, że używasz najlepszych hosting usługa dla Ciebie.

Jak utworzyć aplikację z ramą X

Aby w pełni docenić moc framera X, stworzemy real-life projekt: prosta aplikacja do gotowania z niektórymi treściami i mediami (aktywa, które są wspierane w wiarygodności magazyn w chmurze ). Pierwszą rzeczą do budowy jest strona główna. Będziemy proste rzeczy z następującymi elementami:

Standardowy pasek wyszukiwania, aby znaleźć przepisy
Ostatnia aktywność, aby pokazać najnowsze przepisy
Karty receptury pokazujące rzeczy jak najpopularniejsze przepisy
Tworzenie szczegółowego widoku receptury z opcjami wideo i udostępniania

Aby rozpocząć, musisz utworzyć nową ramkę (podręcznik), klikając ikonę + na lewym navbar. Wybierz dowolny styl artystyczny z listy standardowych szablonów iPhone / Android na prawym barze. Teraz jesteś gotowy iść.

01. Zbuduj pasek wyszukiwania

Zacznijmy od budowania paska wyszukiwania. Zamiast tworzyć prostokąt i dodając ikonę wyszukiwania, tak jak normalnie, możemy faktycznie korzystać z szybkich składników wielokrotnego użytku w ramce X, są one nazywane pakietami. Istnieją tysiące pakietów, które można znaleźć w lewym barze nawigacyjnym pod sklepem. Kliknij Sklep, wyszukaj Kit android Kit i Przykładowy zestaw, a następnie zainstaluj je.

Pakiety te zawierają elementy, takie jak karty, przyciski, klawiatury, suwaki, wejścia i elementy menu nawigacyjnego. Po zainstalowaniu tych pakietów możesz użyć elementów z menu komponentów po lewej stronie.

Znajdź elementy, które chcesz, wyszukając w filtrze - w tym przypadku pasek wyszukiwania, który znajduje się w Przykładowym zestawie. Po prostu przeciągnij i upuść go na ramkę. Teraz możesz modyfikować właściwości, takie jak tekst zastępczy, rozmiar czcionki i kolor za pomocą prawego paska.

02. Utwórz stos zawartości

W przypadku tego ostatniego bloku aktywności najpierw dodaj tekst "Ostatnie aktywność", co jest dość proste. Teraz możemy użyć nowej funkcji oprawy X o nazwie Stosów. Można to zrobić, klikając ikonę + i wybierając stos S z menu. Po wybraniu stosu przeciągnij i upuść obszar 600 x 300 na ramce roboczej, aby utworzyć stos. Ten stos zostanie pokazany jako niebieski.

Teraz wróćmy do sekcji komponentów i w Kit Android Wyszukaj element karty-5 i przeciągnij go do stosu, który właśnie stworzyliśmy. Duplikuj te karty dwa razy i upewnij się, że wszystkie trzy karty są w stosie.

Dopóki są w stosie, te trzy karty można łatwo zmienić bez konieczności martwi o odstępy. Jeśli chcesz zwiększyć odstępy między kartami, możesz zwiększyć szerokość całego stosu. To tak proste. Możesz także personalizować te karty, zmieniając nazwę tytułu i tła zgodnie z Twoim upodobaniem.

Teraz, gdy stworzyliśmy stos, uczynićmy to przewijane. Przenieś go z ramki / art. Kliknij ikonę + z lewej nawigacji i kliknij opcję przewijania. Tak jak stworzyliśmy obszar ze stosem, utwórz przewijalną powierzchnię na ramce / arce tablicy, która jest taka sama jak stos.

Teraz zmień właściwość przewijania w prawym pasku, zmieniając strzałki kierunku, aby uczynić go poziomym przewijaniem. Po utworzeniu naszego kontenera przewijania potrzebujemy dla niego treści, który jest obsługiwany przez stos, który wcześniej utworzyliśmy. Po prostu podłącz kontener przewijania do stosu za pomocą monitu strzałki na pojemniku przewijania. Działa, przeciągając wskaźnik myszy do stosu.

03. Utwórz pionowy stos

Interactive Framer X - 01 — Framer X pozwala przedstawić poziome i pionowe przewijalne stosy (Kredyt obrazu: Vamsi Batchu)

W przypadku kart receptur trzeba stosować metodę podobną do kroku 2, ale zamiast tworzyć poziomą przewijanie kart, stworzysz podobną pionową, która jest zasadniczo lista najpopularniejszych przepisów z miniaturami. W tym ćwiczeniu każda karta na receptura ma cztery elementy - miniaturka obrazu, ocena, nazwa receptury i czasu potrzebnego do przygotowania go.

Nie martw się o szczegóły każdej karty. Mogą być spersonalizowane oparte na swoim smaku projektu. Postępuj zgodnie z tą samą metodą korzystania z karty z elementów, powielanie ich i dodanie ich do stosu z pionowym przewijaniem.

04. Utwórz nową stronę

Utwórzmy teraz nową stronę, aby przejść do szczegółów konkretnej receptury. Na przykład, weźmy tutaj przypadek drugiej karty: makaron francuski. Aby utworzyć tę nową stronę, utwórz nową ramkę / podwórkę i wprowadzić elementy, których potrzebujemy, aby pokazać więcej szczegółów na temat francuskiego przepisu makaronu. Ta nowa strona może zostać podzielona na wideo, tytuł, ocenę, czas potrzebny do zrobienia i kilku przycisków akcji, takich jak Zapisz do listy i podziel się na media społecznościowe.

Aby dodać wideo, przejdź do sklepu i zainstalować pakiet YouTube, który umożliwia łatwe dodawanie filmów do prototypu. Teraz przejdź do panelu komponentów i przeciągnij i upuść element YouTube z komponentu YouTube do ramy.

Dostosuj szerokość miniatur, dzięki czemu pasuje do szerokości ramy. W prawym panelu Właściwości można wstawić adres URL wideo, który chcesz odtworzyć w prototypie. Jeśli chcesz, istnieje również sposób na filmy autoodtwarzania przez pole wyboru w panelu Właściwości.

Poniżej tego filmu można dodać tytuł, ocena i różne ikony. Aby dodać ikony dla naszego przykładu, korzystałem ze składnika z sklepie Generator Icon. Jest to łatwy proces: wystarczy przeciągnij i upuść ikonę podstawy na ramkę, a następnie zmienić właściwość octwę o nazwie ikona po prawej stronie panelu do "serca" i "Share". Spowoduje to odpowiednio zmienić ikony podstawy do ikon zapisywania i udostępniania. Ich kolory można również łatwo zmienić za pomocą odpowiedniego panelu.

Aby uzyskać łatwe dla odwiedzających, możesz dodać sekcję o nazwie Składniki, które wymienią wszystkie składniki potrzebne do naszego przepisu - w tym przypadku makaron francuski.

05. Wprowadź interakcje

Interactive Framer X - 02 — Dodaj interakcje do przycisków i elementów, aby uczynić je bardziej angażującymi (Kredyt obrazu: Vamsi Batchu)

Teraz sprawimy, że nasz projekt będzie bardziej angażować, dodając interakcje dla przycisku. Idealnie, gdy klikniesz na ikonę udziału, należy monitować z ekranem, aby udostępnić receptę w różnych kanałach mediów społecznościowych. Zbudujmy to za pomocą nowej ramki.

Upewnij się, że szerokość i wysokość tej ramki jest taka sama szerokość i wysokość, co utworzono pozostałe dwie ramki. Pomysł polega na tym nowym ekranie akcji, aby przesunąć się i zastąpić niniejszy ekran, gdy ikona akcji zostanie kliknięta.

Aby pomóc na wyróżnieniu ekranu, dodajmy trochę koloru i wypełnij go ikonami mediów społecznościowych, takich jak Facebook, Instagram, Whatsapp i E-mail. Ten ekran akcji powinien również dodać ikonę X, która po kliknięciu przyniosłaby ją z powrotem do stanu pierwotnego.

Upewnij się, że wszystkie ikony są ułożone wewnątrz stosu. Gdy tylko ikona X jest zawarta, następnym krokiem jest łączenie tej ramki, dzięki czemu pojawia się po kliknięciu ikony Udostępnij.

Aby to zrobić, wybierz ramkę zawierającą ikonę udziału. W prawym panelu znajduje się obiekt zwany linkiem. Po tym, że klikniesz, interfejs aplikacji zapewni strzałę, którą możesz przeciągnąć do nowej ramy udziału, którą stworzyliśmy. Spowoduje to utworzenie linku w tle.

Teraz, gdy wybierzesz ikonę udziału obserwować nowe właściwości w panelu prawym bocznym podłączem, które są celami, przejściem i kierunkiem. Każda z tych właściwości umożliwia zmianę elementów, takich jak typ przejścia i kierunek, w którym ekran powinien pojawić się itp.

Możesz przetestować, czy prototyp działa lub nie klikając ikonę odtwarzania znajdującym się w prawym górnym rogu interfejsu. Podobnie, musisz połączyć ekran akcji na ekranie wideo, aby kiedy użytkownik kliknie na ikonę X, powraca do poprzedniego ekranu.

Można to osiągnąć za pomocą podobnej właściwości łącza i dodawanie celu jako ekran wideo. Jeśli chcesz przejść do dodania odrobiny odmiany, możesz dokonać kierunku pozostawionego zamiast góry, a następnie użyć polecenia odtwarzania, aby sprawdzić, czy interakcja działa lub nie.

06. Dodaj przycisk Zapisz

Teraz dodajmy interakcję nakładki do ikony Zapisz. Tutaj, naszym celem jest to, kiedy użytkownik kliknie ikonę w kształcie serca, pojawi się okno wyskakujące, które pyta, jeśli chcesz zapisać recepturę do wykonanej listy niestandardowej.

Zacznijmy od tworzenia nowej ramki zwanej zapisanymi listami. Tak jak z poprzedniego, upewnij się, że ramka ma tę samą szerokość, ale tym razem musisz zmniejszyć jego wysokość, ponieważ pojawi się jako nakładka po kliknięciu. Dla stylizacji zapisanych listy, dodaj nagłówek, wejście tekstowe, aby wprowadzić nazwę listy i przycisku, który jest CTA do zapisania go.

Aby połączyć, wybierz ikonę w kształcie serca na ramce wideo i dodaj link do ramki zapisanej listy. Teraz zamiast właściwości przejściowej jest pchnięciem, uczynić go nakładką. Dostosuj go do 80%, a następnie przetestuj go za pomocą przycisku odtwarzania. Modyfikuj, aż będziesz zadowolony z nakładki. Połącz ikonę X na ikonie zapisanego listy z powrotem do strony wideo.

W ten sposób korzystać z Framer X, aby łatwo tworzyć działające interaktywne prototypy. Istnieją również zaawansowane narzędzia, których można użyć, a także dodawanie fragmentów kodowania reagowania do elementów ramek. Ponadto najlepszą częścią framera X jest to, że każdy może opanować go, próbując go na kilku prototypach.

Ten artykuł został pierwotnie opublikowany w wydaniu 325 netto, najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 325. lub Subskrybuj do sieci.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Dowiedz się, jak zbudować lepiej JavaScript w Generracce (Kredyt obrazu: Future / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Nieodpłatne)

Dołącz do nas w kwietniu 2020 r. Z naszym składem Superstars JavaScript w GenerractJs - konferencja pomaga zbudować lepiej JavaScript. Zarezerwuj teraz generatEConf.com.

Czytaj więcej:

Jak się wyróżnić i zatrudnić jako projektant UX
20 wskazówek UX musisz wiedzieć
22 najlepsze narzędzia do projektowania interfejsu użytkownika

Użyj obudowy X, aby zbudować interaktywne prototypy

Jak utworzyć aplikację z ramą X

01. Zbuduj pasek wyszukiwania

02. Utwórz stos zawartości

03. Utwórz pionowy stos

04. Utwórz nową stronę

05. Wprowadź interakcje

06. Dodaj przycisk Zapisz

Jak - Najpopularniejsze artykuły

Jak utworzyć komiksową stronę

Wszystko, co musisz wiedzieć o Kod JavaScript

Użyj negatywnej przestrzeni, aby narysować lepsze ręce

Użyj paska narzędzi Marmoset, aby zaprezentować modele w VR

Jak narysować nos

Dodaj efekt usterki na swoją stronę

Malowane i gładkie uderzenia z szkicowemu

Zrób animowany GIF w Photoshopie

Kategorie