Przykłady zaawansowanego prototypowania
Jeśli używasz interfejsu UI3, nowego projektu firmy Figma, niektóre części tego artykułu mogą nie odpowiadać temu, co widzisz obecnie w produkcie. Dziękujemy za cierpliwość podczas wprowadzania aktualizacji. Dowiedz się więcej o nowym projekcie aplikacji Figma →
Zaawansowane funkcje prototypowania (takie jak zmienne, warunki i wyrażenia) pozwalają na dodanie wyższego poziomu wierności do prototypów, przy jednoczesnym zmniejszeniu liczby potrzebnych do tego klatek i interakcji.
Skorzystaj z poniższych przykładów, aby zainspirować się do wykorzystania zaawansowanych funkcji prototypowania w swoich projektach.
Utwórz wymaganą interakcję z polem wyboru
W tym prototypie utwórz przycisk z wymaganą interakcją pola wyboru.
Ta interakcja jest powszechna w formularzach online. Może być na przykład konieczne zaakceptowanie regulaminu witryny poprzez zaznaczenie pola wyboru przed kliknięciem przycisku Continue (Kontynuuj).
- Utwórz zestaw komponentów interaktywnych z dwoma wariantami do reprezentacji pola wyboru.
- Nadaj właściwości komponentu nazwę
isChecked
, z wariantami „true” (prawda) i „false” (fałsz). - Dodaj operację prototypu Change to (Zmień na) pomiędzy obydwoma wariantami — tak aby po kliknięciu fałszywego wariantu zmienił się on na prawdziwy wariant i odwrotnie.
- Nadaj właściwości komponentu nazwę
- Utwórz kolejny zestaw komponentów dla przycisku kontynuowania. Jeden wariant powinien reprezentować stan nieaktywny, a drugi stan aktywny.
- Nadaj właściwości komponentu nazwę
hasAcceptedTerms
z wartościami „true” (prawda) i „false” (fałsz). Wariant „true” oznacza aktywny stan przycisku, a wariant „false” oznacza nieaktywny stan przycisku.
- Nadaj właściwości komponentu nazwę
- Utwórz zmienną logiczną o nazwie „hasAcceptedTerms” i wartości „false” (fałsz).
-
Dodaj instancje swoich komponentów do swojego projektu.
- Dodaj instancję wariantu przycisku „fałszywego” kontynuowania.
- Dodaj instancję wariantu pola wyboru „false”.
- Przypisz zmienną logiczną
hasAcceptedTerms
do obu instancji.- Kliknij instancję pola wyboru, aby ją zaznaczyć.
- Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk Assign variable (Przypisz zmienną).
- Wybierz zmienną
hasAcceptedTerms
, aby powiązać ją z właściwością. - Powtórz kroki od A do C dla instancji przycisku kontynuowania.
Wskazówka:
Możesz powiązać zmienną z właściwością wariantu, o ile wartości się zgadzają. Ponieważ zmienna logiczna ma wartości
true
ifalse
, a właściwości wariantowe mają wartościtrue
ifalse
, możesz je ze sobą powiązać.Teraz, gdy zmienna zmienia się na wartość true, instancje również zmieniają się na swój prawdziwy wariant.
- Wróć do zestawu komponentów przycisku kontynuowania i dodaj operację do aktywnego wariantu przycisku. Możesz na przykład dodać interakcję On click (Po kliknięciu), która przenosi do następnej ramki.
- Odtwórz swój prototyp, aby go przetestować.
Dodaj komunikat o błędzie dla pustych stanów zaznaczenia
W tym prototypie możesz utworzyć formularz, który wyświetli błąd, jeśli użytkownicy spróbują go przesłać bez odpowiedzi na wszystkie pytania.
- W tym przykładzie każde pytanie ma dwa przyciski radiowe, za pomocą których użytkownik może wybrać odpowiedź. Utwórzmy zestaw komponentów interaktywnych reprezentujący każdy możliwy stan odpowiedzi: nic nie wybrano, wybrano odpowiedź 1 lub wybrano odpowiedź 2.
- Niech trzy warianty reprezentują każdy stan.
- Nadaj właściwości komponentu nazwę
selectedState
, z wariantami „choice1” (wybór 1), „choice2” (wybór 2) i „none” (brak wyboru). - Dodaj operację Change to (Zmień na) do prototypu pomiędzy każdym wariantem — za każdym razem, gdy klikniesz obiekt „Choice 1”, wariant zmieni się na choice1, a gdy klikniesz obiekt „Choice 2”, wariant zmieni się na choice2.
- Ponieważ nasz formularz będzie miał dwa pytania, utwórzmy dwie zmienne ciągów. Te zmienne pozwolą nam sprawdzić, czy formularz jest kompletny, gdy użytkownik go prześle.
- Nazwij pierwszą zmienną tekstową „question1response” (odpowiedź na pytanie 1) i przypisz jej wartość „none” (brak).
- Nazwij drugą zmienną tekstową „question2response” (odpowiedź na pytanie 2) i przypisz jej wartość „none” (brak).
- Teraz złóżmy nasz prototyp. Dodaj ramkę, aby przedstawić projekt swojego formularza. Uwzględnij dwie instancje wariantu przycisku radiowego „none” (brak) oraz przycisk Submit (Prześlij).
- Przypisz zmienne do instancji przycisków radiowych.
- Kliknij instancję pierwszego przycisku radiowego, aby ją zaznaczyć.
- Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk Assign variable (Przypisz zmienną).
- Wybierz zmienną
question1response
, aby powiązać ją z właściwością. - Powtórz kroki od A do C dla drugiej instancji przycisku opcji, tym razem wybierając zmienną
question2response
.
- Dodaj jeszcze dwie ramki: jedną do przedstawienia nakładki komunikatu o błędzie i jedną do przedstawienia komunikatu o powodzeniu.
- Dodaj interakcję prototypu On tap (Po dotknięciu) do przycisku Submit (Prześlij). Użyj operacji Conditional (Warunkowo):
- Jeśli
question1response
== “none” lubquestion2response
== „none”, otwórz ramkę komunikatu o błędzie jako nakładkę. - W przeciwnym razie przejdź do ramki z komunikatem o powodzeniu.
- Jeśli
- Odtwórz swój prototyp, aby go przetestować.
Pokaż liczbę wybranych elementów
W tym prototypie będziemy zwiększać licznik za każdym razem, gdy użytkownik dokona wyboru.
Ten rodzaj interakcji ma wiele zastosowań. Możesz na przykład zobaczyć całkowitą liczbę produktów dodanych do koszyka w witrynie e-commerce, liczbę zdjęć lub wiadomości wybranych w aplikacji do obsługi wiadomości lub mediów społecznościowych, a nawet liczbę szklanek wody wypitych w aplikacji do śledzenia nawyków.
- Utwórz zestaw komponentów interaktywnych z dwoma wariantami: ze stanem zaznaczenia i ze stanem niezaznaczenia.
- Dodaj operację prototypu Change to (Zmień na) pomiędzy obydwoma wariantami — tak aby po kliknięciu niewybranego wariantu zmienił się on na prawdziwy wariant i odwrotnie.
- Dodaj wiele instancji niewybranego wariantu do swojego projektu.
- Dodaj do swojego projektu warstwę tekstu, która przedstawia liczbę wybranych elementów.
W naszym projekcie dodaliśmy dwie warstwy tekstu w jednej ramce. Jedna warstwa tekstu zawiera napis „Items selected:” (Wybrane elementy:), a druga warstwa tekstu zawiera „0”.
- Utwórz zmienną liczbową o nazwie „itemsSelected” o wartości 0. Będziemy używać tej zmiennej do przechowywania liczby wybranych elementów.
- Przypisz zmienną
itemsSelected
do warstwy tekstu.- Kliknij na warstwę tekstu „0”, aby ją wybrać.
- W sekcji Text (Tekst) na pasku bocznym po prawej stronie kliknij przycisk Assign variable (Przypisz zmienną).
- Wybierz zmienną
itemsSelected
, aby powiązać ją z warstwą tekstu.
- Wróć do zestawu komponentów i dodaj do każdego wariantu dodatkową akcję prototypową, która oblicza liczbę wybranych elementów.
- W wariancie fałszywym dodaj operację Set variable (Ustaw zmienną), która ustawia wartość zmiennej
itemsSelected
naitemsSelected + 1
. - W wariancie prawdziwym dodaj operację Set variable (Ustaw zmienną), która ustawia wartość zmiennej
itemsSelected
naitemsSelected - 1
.
- W wariancie fałszywym dodaj operację Set variable (Ustaw zmienną), która ustawia wartość zmiennej
- Odtwórz swój prototyp, aby go przetestować.
Utwórz licznik kliknięć
W tym prototypie utwórz licznik kliknięć. Gdy użytkownik kliknie obiekt lub obiekty wymaganą liczbę razy, interakcja zakończy się powodzeniem.
Tego typu interakcję można zaobserwować w świecie rzeczywistym, gdy użytkownicy muszą wybrać określoną liczbę elementów, aby kontynuować. Użytkownicy mogą na przykład musieć wybrać określoną liczbę interesujących ich tematów podczas procesu wdrażania, aby dostosować swój profil, lub mogą musieć wybrać określoną liczbę dodatków, aby dodać je do posiłku w aplikacji do zamawiania jedzenia.
- Dodaj dwie zmienne:
- Zmienna liczbowa o nazwie
clickCount
o wartości początkowej0
- Zmienna logiczna o nazwie
clickComplete
o wartości początkowejfalse
(fałsz) - Dodaj obiekt prostokąta do ramki.
- Na obiekcie prostokąta dodaj interakcję prototypu z wyzwalaczem On click / On tap (Po kliknięciu/dotknięciu). Dodaj dwie operacje w następującej kolejności:
-
Ustaw zmienną:
clickCount
naclickCount + 1
-
Warunkowo: Jeśli
clickCount == 5
, ustaw zmiennąclickComplete
natrue
- Dodaj dwie warstwy tekstu do ramki:
- Pierwsza warstwa tekstu powinna zawierać proste instrukcje („Naciśnij kwadrat 5 razy”.).
- Druga warstwa tekstu powinna być komunikatem o powodzeniu („Brawo!”).
- Zastosuj zmienną
clickComplete
do widoczności drugiej warstwy tekstu: - Wybierz warstwę tekstu.
- Przejdź do sekcji Layer (Warstwa) na prawym pasku bocznym i kliknij prawym przyciskiem myszy ikonę widoczności.
- Kliknij zmienną
clickComplete
na panelu wyboru zmiennych. Teraz warstwa będzie widoczna tylko wtedy, gdy wartość zmiennejclickComplete
jest prawdziwa. - Odtwórz swój prototyp, aby przetestować interakcję.
Utwórz pasek sterowania głośnością
W tym przykładzie użyjemy zmiennych do utworzenia paska regulacji głośności.
Na początek skonfiguruj ramkę z kilkoma podstawowymi kształtami reprezentującymi pasek głośności i elementy sterujące:
- Dodaj jeden prostokąt reprezentujący kontener objętości — nasz ma szerokość 260 i wysokość 100.
- Dodaj drugi prostokąt, aby przedstawić poziom głośności. Ten prostokąt należy umieścić na górze pierwszego, a następnie wyrównać je do lewej strony. Szerokość drugiego prostokąta powinna być mniejsza niż pierwszego — na początku nasz ma wysokość 100 i szerokość 14.
- Za pomocą linii utwórz obiekty reprezentujące znak plusa i znak minusa, a następnie umieść je pod kontenerem głośności.
Następnie musimy utworzyć zmienną. W nowym zbiorze utwórz zmienną typu liczbowego. Nadaj jej nazwę volumeLevel
i ustaw wartość początkową na 14.
Teraz powiążmy zmienną volumeLevel
z wartością szerokości prostokąta, który reprezentuje poziom głośności.
- Kliknij mniejszy prostokąt, aby go zaznaczyć.
- Na karcie Design (Projekt) na prawym pasku bocznym odszukaj wartość szerokości.
- Ustaw kursor na polu tekstowym i kliknij opcję Apply variable (Zastosuj zmienną).
- Z panelu wyboru zmiennych wybierz zmienną
volumeLevel
.
Teraz, gdy mamy już skonfigurowaną ramkę i zmienne, możemy utworzyć prototypy interakcji.
- Kliknij obiekt ze znakiem plusa w ramce.
- Na karcie Prototype (Prototyp) na pasku bocznym po prawej stronie kliknij ikonę plusa , aby dodać nową interakcję.
- Ustaw wyzwalacz na On tap/On click(Po dotknięciu/kliknięciu) i ustaw operację na Set variable(Ustaw zmienną). Wybierz zmienną
volumeLevel
. - Ustaw nową wartość za pomocą wyrażenia. Chcemy, aby szerokość poziomu głośności zwiększała się o 5 za każdym razem, gdy użytkownik naciśnie ikonę plusa, więc użyjemy następującego wyrażenia:
volumeLevel + 5
- Powtórz kroki 1–4 dla ikony minusa, tym razem ustawiając nową wartość zmiennej za pomocą następującego wyrażenia:
volumeLevel - 5
Odtwórz swój prototyp, aby przetestować interakcje.