Projektowanie ekranu domowego z użyciem Sketch – instrukcja krok po kroku

W tym przewodniku krok po kroku nauczysz się, jak zaprojektować Ekran Główny dla aplikacji w Sketch. Skupimy się na podstawach oraz kilku sprawdzonych zasadach projektowania, aby stworzyć atrakcyjną interfejs użytkownika. Zobaczysz, że proces jest prosty i zrozumiały, i już wkrótce będziesz mógł stworzyć własne projekty.

Najważniejsze wnioski

• Używanie Sketch do tworzenia układów ekranów głównych
• Ważne zasady projektowania dla atrakcyjnych interfejsów użytkownika
• Użycie kodów kolorów i ikon w celu uproszczenia procesu projektowania

Przewodnik krok po kroku

Aby rozpocząć projektowanie, otwórz Sketch i stwórz nowy dokument dla swojego Ekranu Głównego.

Na początek wybierz iPhone 8 jako swój ramka projektu. Rozpoczęcie od mniejszego ekranu ma sens, ponieważ ułatwia dostosowanie do większych wyświetlaczy.

Teraz otwórz oryginalną aplikację lub projekt, który chcesz użyć jako szablon. Dodamy nawigację, która wspiera strukturę Twojej aplikacji. Zacznij od wyboru elementów nawigacyjnych.

Kliknij na obszar roboczy i nazwij planszę „Kolor Tła Ekranu Głównego”. Aby upewnić się, że tło nie będzie przezroczyste, ustaw prosty kolor tła, na początek biały.

W kolejnym kroku skoncentrujesz się na stworzeniu elementu kursu. W tym celu kliknij na obszar i zacznij projektować kartę kursu. Stworzysz kartę w czystym, prostym projekcie, który przestrzega zasad projektowania Flat Design.

Dla projektu karty ważny jest kolor tła. Możesz użyć prostego niebieskiego, aby osiągnąć natychmiastowe wizualne oddzielenie. Alternatywnie możesz eksperymentować z gradientami kolorów, aby dodać głębi i wymiaru.

Teraz wstaw tekst dla kursu. Możesz dostosować pole tekstowe, aby upewnić się, że tekst jest wyśrodkowany i dobrze czytelny. Odległości wokół tekstu są kluczowe. Upewnij się, że trzymasz około 16 pikseli odstępu od boków, aby uzyskać harmonijną kompozycję.

Gdy już uporządkujesz odległości i pole tekstowe, stwórz opis dla kursu. Ważne jest, aby również zwrócić uwagę na rozmiar etykiety opisu. Wartość około 14 punktów czcionki zapewni dobrą czytelność.

Po wdrożeniu podstawowych elementów, możesz stworzyć dodatkowe symbole. Będą one pomocne, jeśli chcesz użyć podobnych elementów wielokrotnie w swoim projekcie. Stwórz symbol dla karty kursu, aby móc go ponownie wykorzystać w innych częściach swojej aplikacji.

Po utworzeniu symbolu, zmiany zostaną automatycznie dostosowane we wszystkich instancjach. Teraz możesz dostosować tytuł i opis swojego kursu, nie musząc ręcznie zmieniać wszystkiego. Użyj prostych oznaczeń tekstowych, aby zapewnić jasną strukturę.

Aby twoje karty wyglądały wizualnie atrakcyjnie, dodaj cień. Upewnij się, że jest on subtelny, aby nie przytłaczać projektu. Lekki cień sprawi, że elementy będą się wyróżniać i lepiej wkomponują się w całość.

Użyj zaokrąglonych rogów dla swoich kart, aby zwiększyć atrakcyjność wizualną. Promień rogu 8 zapewnia nowoczesny, czysty wygląd, który jest zgodny z wytycznymi projektowymi Apple.

Teraz stwórz wyraźny tytuł nad kartą kursu, aby poprawić nawigację użytkownika i lepiej uporządkować zawartość. Upewnij się, że wysokość i odstęp do poprzedniego elementu są spójne.

Na koniec ważne jest, aby pamiętać o spójności w projekcie. Utrzymuj jednolite odstępy między wszystkimi elementami i brzegami, aby stworzyć harmonijny obraz całkowity.

Podsumowanie - Zaprojektuj atrakcyjny Ekran Główny w Sketch

Dzisiejsze kroki pokazały Ci, jak zaprojektować funkcjonalny i atrakcyjny Ekran Główny za pomocą Sketch. Stosując proste zasady projektowania i nawigacji użytkownika, możesz stworzyć aplikację, która jest zarówno wizualnie atrakcyjna, jak i dobrze funkcjonuje.