Projekt jako narzędzie do dopracowania aplikacji: Tutorial krok po kroku

Projektowanie interfejsu użytkownika może zrobić różnicę między dobrą a wspaniałą aplikacją. W tym tutorialuskupimy się na tym, jak możesz wykorzystać projektowaniejako narzędzie, aby uczynić swoją aplikację bardziej atrakcyjną. Zajmiemy się nowym ekranem, który wyróżnia się wizualnie na tle istniejących elementów i przyciąga użytkownika swoim atrakcyjnym wyglądem. Zaczynajmy.

Najważniejsze wnioski

• Różne kolory i kontrasty zwiększają atrakcyjność wizualną.
• Jasne struktury układu pomagają użytkownikom lepiej się orientować.
• Jednolite rozmiary czcionek i projekty sprzyjają przyjemnemu doświadczeniu użytkownika.

Instrukcja krok po kroku

Dodaj nowy kontroler

Aby stworzyć nowy ekran, zaczynamy od dodania nowego kontrolera. Przejdź do swojego kreatora interfejsu, kliknij „Dodaj kontroler” i umieść go tak, aby dopasował się pod istniejącymi ekranami.

Ustawienia kontrolera

Nazwij swój nowy kontroler „Kontroler kursu”, aby ułatwić przyszłe przyporządkowanie. Upewnij się, że przestarzała nazwa „iPhone 8 copy” została zastąpiona przez „Kontroler profilu”.

Dopasowanie koloru tła

Dlawizualnej atrakcyjności aplikacji ważne jest wybranie dominującego koloru tła. Wybierz intensywną zieleń, która już jest używana w innych miejscach twojej aplikacji. Ta strategia wzmacnia kontrast z białymi elementami i dodaje więcej dynamiki.

Skonfiguruj pasek statusu

Ustaw pasek statusu na „Ciemny”, aby tekst był dobrze widoczny na zielonym tle. Sprawdź pozycję i upewnij się, że jest idealnie dopasowany.

Stwórz etykietę

Stwórz nową etykietę dla wyświetlania kursu. Zacznij od nagłówka, który rozciąga się na całą szerokość kontrolera. Wybierz czcionkę H4 i pokoloruj tekst na biało.

Dodaj dodatkowe etykiety

Dodaj kolejną etykietę dla tytułu kursu. Użyj rozmiaru czcionki 40 pikseli i upewnij się, że jest poprawnie umiejscowiona – nie powinna mieć odstępu od poprzedniej etykiety.

Wyświetl dodatkowe informacje

Aby zapewnić użytkownikom więcej informacji, dodaj trzecią etykietę. Użyj mniejszej czcionki o rozmiarze 17 pikseli, aby tekst nie był zbyt wyraźny, dopóki nie będzie potrzebny.

Stwórz tabelę

Na koniec dodaj tabelę, aby przejrzyście wyświetlić lekcje. Zacznij od prostokąta, który zajmuje całą szerokość i nadaj mu ciemniejsze tło, aby móc pracować z białym tekstem.

Lekcje jako komórki

Utwórz komórkę dla pierwszej lekcji zatytułowanej „Podstawy Część 1”. Zwróć uwagę na odpowiednie odstępy i wyrównanie.

Wstaw separator

Aby stworzyć wyraźne oddzielenie między lekcjami, dodaj separator (cienką linię). Linia ta powinna być umieszczona między komórkami, aby osiągnąć wizualne rozdzielenie.

Stwórz przycisk anulowania

Aby umożliwić użytkownikom opuszczenie tego widoku, dodaj przycisk anulowania w postaci „X”. Upewnij się, że jest dobrze widoczny na środku ekranu.

Przegląd kolejnych kroków

Po pomyślnym utworzeniu nowego kontrolera kursu, następnym krokiembędzie integracja logowania. Umożliwi to użytkownikom zapisywanie postępów w aplikacji.

Podsumowanie – projektowanie jako narzędzie do precyzowania aplikacji

W tym tutorialu nauczyłeś się, jak poprzez skuteczne projektowanie swojej aplikacji stworzyć lepsze doświadczenia użytkownika. Od dodania nowego kontrolera, przez wybór odpowiednich kolorów, aż po zaangażowanie komórek i przycisków – przeszedłeś przez wszystkie kroki, aby wizualnie uczynić swoją aplikację atrakcyjną.