Dolna zakładka, boczna szuflada i pływający przycisk akcji (FAB) są najczęściej używanymi wzorcami dla nawigacji mobilnej najwyższego poziomu. Jeśli chcesz zaprojektować przejrzyste i proste ścieżki nawigacyjne, użyj jednego z tych wzorców w swojej aplikacji.
Bring in Actual Copy
Po tym jak jesteś zadowolony ze swojej hierarchii wizualnej, zacznij zastępować placeholdery i dummy text prawdziwą treścią (actual copy lub taką, która jest istotna dla użytkownika). Istnieje ważny powód, dla którego powinniśmy unikać tekstu zastępczego na tym etapie – Lorem Ipsum nie komunikuje, w jaki sposób strona wspiera użytkowników w osiąganiu ich celów. Ponadto, wiele elementów wizualnych, które tworzymy, opiera się na treści, którą mamy w naszych produktach. Kiedy zaczniesz dodawać rzeczywistą treść, zdasz sobie sprawę, że niektóre elementy UI (lub nawet sekcje UI) nie są konieczne dla twojego produktu.
Czasami, kiedy wypełniasz swoje makiety prawdziwymi szczegółami, możesz zauważyć, że układ, który posiadasz nie działa dobrze. W tym przypadku, ważne jest, aby iterować i znaleźć lepszy sposób reprezentowania informacji, które próbujesz przekazać.
Po wypełnieniu strony rzeczywistą kopią, przetestuj, czy strona płynie dla użytkownika. Niektóre treści na Twojej stronie mogą być nieuporządkowane. Jest to idealny moment na reorganizację treści na stronie i poprawę kompozycji.
Poniżej znajduje się przykład naszego szkieletu dla ekranu głównego, który zawiera rzeczywiste dane. Różne rozmiary czcionek są używane do nadawania priorytetów niektórym blokom UI (takim jak kategorie żywności).
Ensure Your Content Scales Well
Jeśli Twój projekt wygląda świetnie na średniej wielkości ekranie telefonu, takim jak iPhone XS, nie oznacza to, że użytkownicy iPhone’a 5 i iPhone’a XS Max będą mieli takie samo wspaniałe doświadczenie. Podczas gdy absolutnie dobrze jest zacząć od średniej wielkości ekranu podczas wireframingu, ważne jest również, aby sprawdzić, jak treść wygląda na różnych rozmiarach ekranu (zarówno na mniejszych, jak i większych ekranach) i dostosować ją w razie potrzeby.
Połącz strony razem, aby stworzyć przepływ
Choć możliwe jest wysłanie projektu jako zbioru pojedynczych ekranów, lepiej jest stworzyć z nich przepływ. Przepływy UX ułatwiają zespołowi zrozumienie szczegółów scenariuszy interakcji – komunikują, w jaki sposób ludzie mają wchodzić w interakcję z produktem.
Przepływy UX ułatwią Ci również myślenie o funkcjonalności aplikacji jako całości. Na przykład, po zwizualizowaniu przepływu UX, możesz zauważyć, że musisz wprowadzić dodatkowy stan pomiędzy ekranem głównym a stroną z wynikami wyszukiwania (ponieważ backend Twojego systemu będzie potrzebował kilku sekund na zwrócenie wyników).
Dobrym pomysłem jest również nadanie każdemu ekranowi numeru referencyjnego. Numery referencyjne znacznie ułatwią Ci życie podczas omawiania projektu z innymi członkami zespołu lub interesariuszami.
Testuj swoje decyzje projektowe
Testowanie jest ostatnim (i jednym z najważniejszych) kroków w tworzeniu makiet. Testowanie zakłada interakcje z użytkownikiem, dlatego termin ten jest często używany w kontekście prototypów. Możliwe jest jednak przeprowadzenie prostych testów dla przepływu stworzonego na podstawie wireframes. Używając Balsamiq można stworzyć proste, klikalne prototypy, łącząc ze sobą makiety. Celem takich testów jest sprawdzenie, czy ekrany działają razem.
Podsumowanie
Najważniejszym celem tworzenia makiet jest określenie zarysu treści i stworzenie solidnej podstawy dla przyszłych kroków procesu projektowania. Dobrze zaprojektowane makiety znacznie ułatwiają projektowanie wizualne i interakcji.
Jak w przypadku każdej działalności projektowej, poświęć wystarczająco dużo czasu na eksperymentowanie z różnymi narzędziami i procesami, a znajdziesz swój własny styl tworzenia makiet. Praktyka czyni mistrza.
Słowa Nicka Babicha
Oryginalnie opublikowane na stronie Balsamiq’s UI Education Site
.