Stoisz przed wyzwaniem stworzenia atrakcyjnego Prototyping dla Mobility-App. Nie chodzi tylko o projektowanie; chodzi o efektywne kształtowanie doświadczenia użytkownika od samego początku, aby pomóc mu intuicyjnie poruszać się po aplikacji. W tym samouczku będziesz krok po kroku prowadzony przez proces tworzenia prototypu w Sketch. Zaczynajmy tę ekscytującą podróż w świat projektowania!
Najważniejsze spostrzeżenia
- Prototypowanie to kluczowy krok w rozwoju aplikacji.
- W Sketch możesz zacząć od prostych kształtów i wzorów.
- Jasna struktura i prowadzenie użytkownika są niezbędne dla sukcesu twojej aplikacji.
Instrukcja krok po kroku
Zacznij od stworzenia podstawowej struktury swojej aplikacji w Sketch. Możesz użyć narzędzia pędzla, aby narysować swoje pierwsze elementy projektowe. Po prostu wybierz narzędzie pędzla lub naciśnij klawisz „P”, aby je wybrać.
Stwórz prostokąt, który ma reprezentować ekran twojej aplikacji. Przytrzymaj klawisz „Alt”, podczas rysowania prostokąta myszą. Dzięki temu prostokąt pozostanie proporcjonalny. Wygląda to już całkiem dobrze.
Teraz czas na zaprojektowanie pierwszej strony aplikacji. Zacznij od dolnego paska zakładek. Ponownie użyj narzędzia pędzla i narysuj prostą linię przytrzymując klawisz Shift, aby upewnić się, że linia jest prosta.
Po zaprojektowaniu paska zakładek dodaj trzy ikony, które reprezentują główne funkcje aplikacji. Przytrzymując klawisz ALT, możesz łatwo duplikować figury, przesuwając je w odpowiednie miejsce.
Teraz przejdźmy do górnego paska nawigacyjnego. Ponownie przytrzymaj klawisz ALT, podczas rysowania kolejnego prostokątnego obszaru dla paska nawigacyjnego.
Bąble czatu to następna część twojej aplikacji, którą chcemy zaprojektować. Użyj narzędzia pędzla, aby narysować bąbel czatu. To powitanie zostanie natychmiast wyświetlone użytkownikowi. Dodaj krótki tekst, który zwraca się do użytkownika, na przykład: „Cześć i witaj w aplikacji Mobility!”
Aby zapewnić atrakcyjny wygląd, możesz skopiować i dostosować bąble. Wybierz bąble i przesuń je w dół trzymając klawisz ALT, aby dodać kolejny tekst powitalny, taki jak „Zacznij od swojej pierwszej sesji Mobility”.
Następnym krokiem jest dodanie przycisku wideo, za pomocą którego użytkownicy będą mogli odtwarzać swoje lekcje. Narysuj okrągły przycisk za pomocą narzędzia pędzla i połącz go z trójkątem, aby wyraźnie pokazać jego działanie i funkcję.
Teraz skopiuj wszystkie istotne elementy UI – takie jak górny i dolny pasek nawigacyjny – na następną stronę, aby zapewnić spójność w projekcie. Możesz łatwo zrobić zrzut ekranu, przytrzymując klawisz ALT, aby skopiować elementy na następną stronę.
Na nowym ekranie, który stworzyłeś, zaprojektuj opcje kursów. Powinieneś stworzyć prosty przegląd dostępnych kursów, które użytkownik może wybrać.
W widoku profilu możesz stworzyć miejsce na zdjęcie profilowe, nazwisko użytkownika i liczbę ukończonych godzin kursu. Ważne jest, aby informacje były przedstawione w sposób jasny i wyraźny.
Kończąc projektowanie wyboru kursów i lekcji, stwórz przeglądlekcji i dodaj przycisk zamknięcia, aby użytkownik mógł zamknąć wybór w dowolnym momencie.
Oto podstawowy prototyp twojej aplikacji Mobility. Teraz masz atrakcyjny projekt, który jasno strukturyzuje prowadzenie użytkownika i jednocześnie pomaga tobie jako projektantowi lepiej zobrazować wizję aplikacji.
Podsumowanie – Prototypowanie aplikacji Mobility w Sketch
Podczas tego samouczka nauczyłeś się krok po kroku, jak prototypować aplikację Mobility w Sketch. Od pierwszego pomysłu po ostatnie elementy projektowe zdołałeś poszerzyć swoją wiedzę i stworzyć przydatne narzędzie do dalszego rozwoju swojej aplikacji.
Często zadawane pytania
Jak zacząć projektować w Sketch?Wybierz narzędzie pędzla (P) i zacznij tworzyć pierwsze elementy.
Jak mogę efektywnie duplikować elementy?Przytrzymaj klawisz ALT, podczas przesuwania elementu myszą.
Co zrobić, jeśli nie jestem zadowolony z projektu?Możesz w każdej chwili dostosować lub przeprojektować istniejące elementy, aby uzyskać pożądany efekt.
Jak upewnić się, że prowadzenie użytkownika jest jasne?Zadbaj o to, aby wszystkie funkcje były logicznie ułożone i aby użytkownik mógł intuicyjnie nawigować.
Czy mogę projektować w Sketch także na urządzenia mobilne?Tak, możesz dopasować rodzaj i rozmiar elementów w zależności od rozmiaru ekranu urządzeń mobilnych.
