Jak tworzyć szkielety dla aplikacji mobilnej – przewodnik krok po kroku

Modele szkieletowe odgrywają istotną rolę niezależnie od projektu, zwłaszcza w projekcie projektowania aplikacji mobilnych. Modele szkieletowe są jak środek między pierwszymi interaktywnymi prototypami a szkicami o niskiej wierności. W przypadku urządzeń mobilnych rzeczywisty proces tworzenia szkieletów różni się drastycznie.

Różni projektanci wykonują wireframing, a jego tłumaczenie na różne sposoby dociera do projektowania hi-fi. Jednocześnie niektóre marki wolą kodować bezpośrednio ze szkiców. Typowy proces projektowania obejmuje następujące kroki:

Szkic (poziom koncepcji) → Model szkieletowy (poziom komponentu) → Makieta/Prototyp (poziom stylów/poziom interakcji) → Kod

Powinniśmy śledzić, że projektowanie produktu jest procesem wieloetapowym, dlatego powinniśmy unikać tworzenia szkieletów na pierwszym etapie procesu. Zanim utworzysz makiety, musisz poświęcić wystarczająco dużo czasu na badania użytkowników. Podczas wireframingu jako punkt odniesienia posłużą dane z badań ilościowych i jakościowych.

Tak więc, jeśli chcesz lepiej zrozumieć makiety, w jaki sposób przystosowują się do procesu projektowania i jak je tworzyć, przygotowaliśmy dla Ciebie przewodnik. Tutaj poznasz instrukcje krok po kroku, które pomogą Ci zacząć. Co więcej, ułatwi szybkie tworzenie koncepcji projektowych.

Kroki tworzenia szkieletu aplikacji mobilnej

Zacznijmy teraz od kroków tworzenia szkieletów pomysłów na aplikacje mobilne. Kroki podzielimy na dwa: przed tworzeniem makiet i makietowanie.

Przed utworzeniem szkieletów

1. Zaplanuj docelowy przepływ użytkownika

Zanim zaczniesz wireframing, powinieneś wiedzieć, ile ekranów musisz zaprojektować i w jaki sposób użytkownicy będą z nimi wchodzić w interakcje. Namacalny przepływ użytkowników ułatwi Ci zrozumienie tego.

Przepływ użytkownika Jest to sekwencja kroków, które użytkownicy wykonują, aby osiągnąć określony cel. Cel użytkownika jest podstawą przepływu użytkowników. Aby osiągnąć określony cel, użytkownik może wypróbować kilka różnych ścieżek. Dlatego przepływy użytkowników mogą nie być proste. Przepływy użytkowników pomogą ci zrozumieć, jakie modele szkieletowe będziesz musiał stworzyć i jak powinny być połączone.

Używając podstawowych obiektów, takich jak strzałki i pola, możesz wizualizować przepływy. Możesz tworzyć przepływy użytkownika w narzędziu cyfrowym lub na papierze.

2. Naszkicuj podstawową część przepływu użytkownika

Następnie, po zdefiniowaniu przepływu użytkownika, musisz go zwizualizować. W tym celu łatwo byłoby użyć narzędzia do cyfrowego prototypowania, ale nie jest to dobre. Głównym celem tego kroku jest umożliwienie zbadania wielu kierunków projektowania. W wielu przypadkach szkicowanie wykonuje się lepiej za pomocą cyfrowego narzędzia do szkicowania lub lepiej wykonuje się na papierze.

Szkice pozwalają tworzyć szybkie koncepcje, którymi można się dzielić z innymi, uzyskiwać opinie i je iterować. Podczas szkicowania należy myśleć z perspektywy użytkownika i myśleć o celu użytkownika. Dla każdego projektowanego ekranu powinieneś zapytać:

• Jaki jest cel każdej strony?
• W jaki sposób każda strona pomaga firmie/użytkownikowi osiągnąć swoje cele?

Co to jest szkieletowanie?

Tworzone szkice staną się podstawą dla twoich makiety. Jeśli chodzi o tworzenie szkieletów, spróbuj stworzyć szkielety o średniej wierności. Takie makiety są funkcjonalne podczas dyskusji z innymi projektantami i programistami.

1. Ustaw mobilną ramkę

Kiedy używasz prostego prostokąta do obramowania swojego projektu mobilnego, lepiej wybrać ramkę o wymiarach rzeczywistego urządzenia, dla którego projektujesz.

Po pierwsze, ramka będzie wyglądać jak naturalne ograniczenie, które uniemożliwi umieszczenie wielu elementów na ekranie.
Po drugie, rama stworzy iluzję na rzeczywistym projekcie.

Będziesz miał szeroką gamę urządzeń, dla których chciałbyś zaprojektować wireframing. Jednak zaleca się, aby zacząć od urządzenia o średnim rozmiarze ekranu.

2. Określ układ za pomocą pudełek

Na początkowych etapach tworzenia szkieletu cel powinien stworzyć przejrzystą hierarchię wizualną, ustawić układ i strukturę. Na tym etapie nie musisz kierować treści. Powinieneś pomyśleć o tym, jak to zaprezentować. Powinieneś więc zaplanować układ, w którym chcesz, aby Twoi użytkownicy przetwarzali informacje i zaczęli rysować pola na płótnie.

Twoim głównym celem powinno być ustalenie kolejności informacji, które musisz przedstawić swoim użytkownikom. Nie zapominaj, że użytkownicy skanują ekrany telefonów i strony internetowe od góry do dołu i od lewej do prawej (wzór w kształcie litery F najlepiej sprawdza się na ekranach telefonów komórkowych i komputerów stacjonarnych).

3. Użyj wzorców projektowych

Jedną z podstawowych właściwości dobrego projektowania UX jest znajomość. Kiedy ludzie są świadkami znanych elementów interfejsu użytkownika w nowym produkcie, mogą polegać na swoich wcześniejszych doświadczeniach z tym produktem.

Zarówno Android, jak i iOS mają natywne wzorce projektowe, które ułatwiają tworzenie znajomego środowiska dla projektantów. Wzorce projektowe działają jak bloki zawartości wielokrotnego użytku, których można używać do rozwiązywania typowych problemów, takich jak nawigacja globalna. Używana jest głównie nawigacja mobilna najwyższego poziomu, pływający przycisk akcji (FAB), boczna szuflada i dolny pasek kart. Jeśli potrzebujesz zaprojektować proste ścieżki nawigacji, możesz użyć tych wzorców w swojej aplikacji mobilnej e-commerce.

Przeczytaj także: Wybierz stos technologiczny do tworzenia aplikacji