Przykłady zaawansowanego prototypowania

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).

1. Utwórz zestaw komponentów interaktywnych z dwoma wariantami do reprezentacji pola wyboru.
   1. Nadaj właściwości komponentu nazwę isChecked, z wariantami „true” (prawda) i „false” (fałsz).
   2. 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.
   
2. Utwórz kolejny zestaw komponentów dla przycisku kontynuowania. Jeden wariant powinien reprezentować stan nieaktywny, a drugi stan aktywny.
   1. 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.
3. Utwórz zmienną logiczną o nazwie „hasAcceptedTerms” i wartości „false” (fałsz). 
4. Dodaj instancje swoich komponentów do swojego projektu.
   1. Dodaj instancję wariantu przycisku „fałszywego” kontynuowania.
   2. Dodaj instancję wariantu pola wyboru „false”.
5. Przypisz zmienną logiczną hasAcceptedTerms do obu instancji.
   1. Kliknij instancję pola wyboru, aby ją zaznaczyć.
   2. Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk   Assign variable (Przypisz zmienną).
   3. Wybierz zmienną hasAcceptedTerms, aby powiązać ją z właściwością.
   4. 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 i false, a właściwości wariantowe mają wartości true i false, 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.

6. 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.
7. Odtwórz swój prototyp, aby go przetestować.

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.

1. 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.
   1. Niech trzy warianty reprezentują każdy stan.
   2. Nadaj właściwości komponentu nazwę selectedState, z wariantami „choice1” (wybór 1), „choice2” (wybór 2) i „none” (brak wyboru).
   3. 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.
2. 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.
   1. Nazwij pierwszą zmienną tekstową „question1response” (odpowiedź na pytanie 1) i przypisz jej wartość „none” (brak).
   2. Nazwij drugą zmienną tekstową „question2response” (odpowiedź na pytanie 2) i przypisz jej wartość „none” (brak).
3. 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).
4. Przypisz zmienne do instancji przycisków radiowych.
   1. Kliknij instancję pierwszego przycisku radiowego, aby ją zaznaczyć.
   2. Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk   Assign variable (Przypisz zmienną).
   3. Wybierz zmienną question1response, aby powiązać ją z właściwością.
   4. Powtórz kroki od A do C dla drugiej instancji przycisku opcji, tym razem wybierając zmienną question2response.
5. Dodaj jeszcze dwie ramki: jedną do przedstawienia nakładki komunikatu o błędzie i jedną do przedstawienia komunikatu o powodzeniu.
6. Dodaj interakcję prototypu On tap (Po dotknięciu) do przycisku Submit (Prześlij). Użyj operacji Conditional (Warunkowo):
   1. Jeśli question1response == “none” lub question2response == „none”, otwórz ramkę komunikatu o błędzie jako nakładkę.
   2. W przeciwnym razie przejdź do ramki z komunikatem o powodzeniu.
7. Odtwórz swój prototyp, aby go przetestować.

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.

1. Utwórz zestaw komponentów interaktywnych z dwoma wariantami: ze stanem zaznaczenia i ze stanem niezaznaczenia.
   1. 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.
   
2. Dodaj wiele instancji niewybranego wariantu do swojego projektu.
3. 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”.

   
4. Utwórz zmienną liczbową o nazwie „itemsSelected” o wartości 0. Będziemy używać tej zmiennej do przechowywania liczby wybranych elementów.
5. Przypisz zmienną itemsSelected do warstwy tekstu.
   1. Kliknij na warstwę tekstu „0”, aby ją wybrać.
   2. W sekcji Text (Tekst) na pasku bocznym po prawej stronie kliknij przycisk  Assign variable (Przypisz zmienną).
   3. Wybierz zmienną itemsSelected, aby powiązać ją z warstwą tekstu.
   
6. Wróć do zestawu komponentów i dodaj do każdego wariantu dodatkową akcję prototypową, która oblicza liczbę wybranych elementów.
   1. W wariancie fałszywym dodaj operację Set variable (Ustaw zmienną), która ustawia wartość zmiennej itemsSelected na itemsSelected + 1.
   2. W wariancie prawdziwym dodaj operację Set variable (Ustaw zmienną), która ustawia wartość zmiennej itemsSelected na itemsSelected - 1.
   
7. Odtwórz swój prototyp, aby go przetestować.

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.

1. Dodaj dwie zmienne:
• Zmienna liczbowa o nazwie clickCount o wartości początkowej 0
• Zmienna logiczna o nazwie clickComplete o wartości początkowej false (fałsz)
2. Dodaj obiekt prostokąta do ramki.
3. 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:
1. Ustaw zmienną: clickCount na clickCount + 1
2. Warunkowo: Jeśli clickCount == 5, ustaw zmienną clickComplete na true
4. Dodaj dwie warstwy tekstu do ramki:
1. Pierwsza warstwa tekstu powinna zawierać proste instrukcje („Naciśnij kwadrat 5 razy”.).
2. Druga warstwa tekstu powinna być komunikatem o powodzeniu („Brawo!”).
5. Zastosuj zmienną clickComplete do widoczności drugiej warstwy tekstu:
1. Wybierz warstwę tekstu.
2. Przejdź do sekcji Layer (Warstwa) na prawym pasku bocznym i kliknij prawym przyciskiem myszy ikonę widoczności.
3. Kliknij zmienną clickComplete na panelu wyboru zmiennych. Teraz warstwa będzie widoczna tylko wtedy, gdy wartość zmiennej clickComplete jest prawdziwa.
6. Odtwórz swój prototyp, aby przetestować interakcję.

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.

1. Kliknij mniejszy prostokąt, aby go zaznaczyć.
2. Na karcie Design (Projekt) na prawym pasku bocznym odszukaj wartość szerokości.
3. Ustaw kursor na polu tekstowym i kliknij opcję Apply variable (Zastosuj zmienną).
4. Z panelu wyboru zmiennych wybierz zmienną volumeLevel.

Teraz, gdy mamy już skonfigurowaną ramkę i zmienne, możemy utworzyć prototypy interakcji.

1. Kliknij obiekt ze znakiem plusa w ramce.
2. Na karcie Prototype (Prototyp) na pasku bocznym po prawej stronie kliknij ikonę plusa , aby dodać nową interakcję.
3. Ustaw wyzwalacz na On tap/On click(Po dotknięciu/kliknięciu) i ustaw operację na Set variable(Ustaw zmienną). Wybierz zmienną volumeLevel.
4. 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
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.