Miro Prototypes pomaga zespołom produktowym szybciej przekształcać wczesne pomysły w interaktywne prototypy — przechodząc od koncepcji do wyraźnego kierunku przed fazą projektowania czy kodowania.
Ten przewodnik pokazuje, jak odnoszące sukcesy zespoły myślą i pracują z prototypowaniem wspomaganym przez AI: planuj z kontekstem, generuj celowo, iteruj zespołowo i testuj to, co ważne.
Krok 1: Myśl w kontekście
Najlepsze prompty AI zaczynają się od prawdziwej pracy. Użyj planszy jako podstawy, wybierając karteczki, dokumenty dotyczące wymagań produktu, przepływy użytkowników, zrzuty ekranu lub jakiekolwiek inne artefakty uwieczniające myślenie twojego zespołu.
Zacznij tam, gdzie skończył twój zespół
Wybierz zawartość planszy, która definiuje Twój pomysł. AI wykorzystuje ten kontekst do ukształtowania struktury i logiki. Możesz użyć tego promptu, aby zacząć, wystarczy dostosować zawartość do swoich potrzeb wybierającją.
Przykład promptu:
„Stwórz prototyp mobilny z pięcioma ekranami na podstawie wybranego PRD i mapy możliwości.”
Ponownie użyj istniejących produktów
Dodaj zrzut ekranu produktu. Miro AI przekształci go w edytowalną makietę, dzięki czemu możesz dokonać zmian i ulepszeń bez konieczności zaczynania od zera.
💡 Wybierz zrzut ekranu i użyj polecenia konwertuj obraz na prototyp z menu kontekstowego. Żaden prompt nie jest potrzebny.
Alternatywnie, możesz użyć zrzutu ekranu lub wybranego prototypu jako kontekstu do kolejnej iteracji w czacie AI również.
Przykład promtu:
"Wybrany zrzut ekranu to lista indeksów giełdowych i ich dzisiejszy rozwój cen. Stwórz wersję ekranu z listą podobnego rozwoju cen największych kryptowalut poniżej obecnej listy. Reszta obecnego projektu ekranu powinna pozostać dokładnie taka sama, jak jest na tym ekranie. Proszę pamiętać o rozszerzeniu stopki, aby zrobić miejsce na nowy segment listy. Proszę zmienić tekst wyjściowy na angielski na całym ekranie."
Prototyp stworzony i zmodyfikowany z zrzutu ekranu
Idź dalej
- Zaplanuj kroki: Z grubsza nakreśl podróż za pomocą karteczek lub diagramów i określ, ile ekranów chcesz mieć (np. Rejestracja → Pulpit → Zakup).
- Określ nastrój lub temat: Dodaj zrzut referencyjny lub przewodnik stylistyczny, aby AI dopasowało Twoje pożądane spojrzenie i ton.
- Szczegółowe prompty dają lepsze wyniki: Im bardziej szczegółowy jest Twój prompt, tym bardziej wygenerowany prototyp będzie zgodny z Twoimi oczekiwaniami. Możesz podać nawet konkretne kody HEX dla kolorów różnych elementów.
Przykład promptu:
„Utwórz mobilny prototyp składający się z 5 ekranów, oparty na wybranym PRD i ćwiczeniu mapowania możliwości. Styl i temat projektu powinny dokładnie odpowiadać stylowi wybranego zrzutu ekranu."
Krok 2: Zatrzymaj się przed umieszczeniem
Trudno uzyskać odpowiednie wizualizacje w pierwszym prompcie, więc bądź gotowy do edycji i wielu iteracji. Chociaż nie potrzebujesz dużego promptu, Miro AI generuje ekrany jak najbliżej zadanego polecenia. Pomocne może być precyzyjne określenie struktury, kolorów, hierarchii wizualnej itp., jeśli jest to dla Ciebie ważne.
Iteruj etapami
Obszar roboczy to twój poligon doświadczalny. Zatrzymaj to, co działa, regeneruj to, co nie. Wybierz dowolną ramkę i używaj Miro AI, aby wprowadzić zmiany przed umieszczeniem.
Przykład polecenia:
„Uprość ten układ i wyróżnij główną akcję.”
Porównaj kierunki
- Przełączaj między wersjami: Klikaj przez iteracje, aby wybrać najlepszy kierunek.
- Obok siebie: Możesz skopiować jedną wersję i wkleić ją obok innej, aby porównać wizualnie.
Rozwijaj dalej
- Pracuj w pętlach: Generuj → udoskonalaj → udostępniaj. Nie oczekuj perfekcji za pierwszym razem.
- Dodaj notatki dla kontekstu: Przed umieszczeniem stwórz karteczkę, aby uchwycić, co testowałeś lub eksplorowałeś.
✏️ Iteruj swobodnie z pomocą AI, zanim przedstawisz swoje pomysły zespołowi. Kliknij Zastosuj na planszy, gdy będziesz gotowy, aby wszyscy mogli zobaczyć i edytować.
Krok 3: Iteruj jako zespół
Gdy twój prototyp znajdzie się na tablicy, przeglądajcie, dopracowujcie i rozwijajcie koncepcję razem (z pomocą AI lub ręcznie), aż zgodzicie się, co działa i dlaczego.
Przeanalizujcie to razem
- Połącz ekrany, aby odkryć luki w logice i kolejne kroki.
- Użyj Formatu prototypu i trybu skupienia, aby udostępnić tylko prototyp, bez zakłóceń pełnej tablicy. Przypnij format, aby upewnić się, że otwiera się automatycznie dla innych, gdy otwierają tablicę.
- Przełącz na tryb podglądu podczas prezentacji, aby każdy podążał tym samym przepływem, z pełnym kontekstem dostępnym za jednym kliknięciem.
Komentuj bezpośrednio na ekranach, reaguj naklejkami i uchwycaj, co działa (a co nie). Adnotacje pomagają zapewnić, że cały zespół jest zgodny.
Edytuj ręcznie, gdy to się liczy
Nie każda zmiana wymaga nowego promptu. Czasami szybciej i przejrzyściej jest samodzielnie wprowadzić poprawki. Użyj Biblioteki Prototypowania, aby zamienić komponenty, dostosować odstępy lub przepisać tekst.
Każdy członek zespołu może przejąć kontrolę, dokonać edycji i popchnąć pomysł do przodu.
Idź dalej
- Stylizuj z celem — Uwzględnij kolory swojej marki w promptach. Alternatywnie, prześlij zrzut ekranu swojego produktu, aby AI automatycznie zastosowała styl. To pomaga w tworzeniu autentycznie wyglądających prototypów.
Przykład promptu:
"Użyj naszych wytycznych dotyczących marki: #0052CC dla głównych działań"
💡 Wybierz ekrany i zaimportuj styl z obrazu jednocześnie za pomocą menu kontekstowego. Zastosuj motyw z obrazu.
- Dodaj Talktracki do asynchronicznego feedbacku: Nagraj szybkie przechadzki, aby wyjaśnić swoje myślenie i uzyskać opinię bez spotkań (lub jako przygotowanie przed spotkaniem).
- Zapisz decyzje w komentarzach: Podsumuj kluczowy feedback lub kolejne kroki bezpośrednio na tablicy, aby nic nie zgubiło się w Slacku czy e-mailach.
Krok 4: Testuj i dopracowuj
Przeprowadzaj kontrole, zbieraj obserwacje i stosuj się do uzyskanych nauk.
Pytaj swoich współpracowników AI
Zanim przejdziesz do projektowania lub rozwoju, zweryfikuj swój koncept za pomocą współpracowników AI i szybkich przeglądów zespołowych. Skorzystaj z Współpracownika AI ds. Badań UX lub Współpracownika AI ds. Projektowania Treści do szybkiego przeglądu z innej perspektywy. Traktuj to jako lekkie testy użytkownika.
Przykład polecenia dla Współpracownika AI ds. Badań UX:
"Przeanalizuj wybrany prototyp i stwórz raport z pięcioma najważniejszymi problemami użyteczności oraz jasnymi rekomendacjami, jak je rozwiązać.
Podsumuj proszę 5 rekomendacji w krótkim streszczeniu umieszczonym na początku, z jednym punktem dla każdej rekomendacji"
Wdrażaj nauki
Dopracowuj układy, dopracuj tekst i napraw punktu tarcia, aż historia będzie płynna. Wypróbuj współpracownika AI do projektowania prototypów, aby dokonać iteracji.
Przykład polecenia:
"Utwórz nową wersję wybranego prototypu z wdrożonymi kluczowymi rekomendacjami z wybranego raportu."
Używaj przepływów do utrzymania połączenia pracy
Używaj przepływów AI, aby zautomatyzować powtarzalne zadania, usprawnić procesy i poprawić produktywność bezpośrednio na planszy Miro. Zamień pomysły zespołu na interaktywne wizualizacje, które można przetestować, udostępnić i porównać obok siebie, jak warianty tłumaczeń.
Wypróbuj szablon Localize Prototypes, aby przetestować go samodzielnie.
Krok 5: Udostępnij i powtórz
Przekaż, gdy logika jest solidna
Użyj Miro Prototypes, aby uzgodnić kierunek przed przejściem do narzędzi projektowych przez projektantów lub rozpoczęciem budowy (lub kodowania wstępnego) przez programistów. To zapobiega kosztownemu przetwarzaniu i zapewnia, że wszyscy zgadzają się co do rozwiązania, zanim zainwestujesz godziny w dopracowane wykonanie.
💡 Użyj formatu prototypu oraz trybu skupienia, aby udostępnić tylko prototyp, bez odciągania uwagi przez pełną tablicę.
Podsumowanie
Tworzenie prototypów nie polega na tworzeniu perfekcyjnego projektu. Chodzi o postęp w kierunku użytecznego produktu. Miro Prototypes pomaga zespołom szybko zobaczyć pomysły, szybciej się zgodzić i wspólnie zbudować właściwą rzecz.
Im szybciej Twój zespół zobaczy pomysł, tym szybciej będziecie mogli się dostosować i zbudować właściwe rozwiązanie.