Zasady projektowania interfejsu aplikacji w akcji: Interfejs tracker’a turniejowego Tima Coreya

Rozpoczynanie projektowania UI

Tim zaczyna od stwierdzenia, że projektowanie interfejsu użytkownika to zabawna część rozwoju aplikacji, ponieważ pozwala nam zobaczyć wstępną wersję tego, jak aplikacja będzie wyglądać. Zauważa, że używa tablicy suchościeralnej lub legal pad do szkicowania formularzy, mimo iż przyznaje, że nie jest artystą. Tim podkreśla, że rysunki nie muszą być doskonałe ani proporcjonalne — wystarczy, aby pokazywały podstawowy pomysł, co formularze mają zawierać i jak mają działać.

Głównym punktem Tima w tym miejscu jest to, że faza projektowania UI dotyczy planowania, a nie piękna. Podkreśla, że celem jest zidentyfikowanie, które formularze/strony są potrzebne i co każdy z nich powinien zawierać. To podejście jest kluczowe dla jasności i pomaga programistom i projektantom pozostawać na tej samej stronie podczas procesu projektowania.

Gdzie zacząć projektować

Tim odnosi się do powszechnego pytania: "Od czego zacząć?" Wyjaśnia, że nie ma znaczenia, od czego zaczniesz. Jeśli nie jesteś pewien jednego obszaru aplikacji, zacznij od tego, co jest dla ciebie jasne. Kiedy dokończysz jasne części, często będziesz miał lepsze pojęcie o niepewnych sekcjach.

Również zauważa, że budowanie momentum pomaga — po zaprojektowaniu kilku formularzy poczujesz pewność i gotowość do kontynuowania. Z tego podejścia Tim decyduje się zacząć od formularza Tournament Viewer.

Ta metoda wspiera dobre przepływy użytkowników, ponieważ zachęca projektantów i deweloperów do skupienia się na tym, jak użytkownicy będą przechodzić z jednego ekranu na drugi.

Dlaczego nie zacząć projektować w Visual Studio?

Tim wyjaśnia, że nie powinno się zaczynać projektowania w kreatorze Windows Form w Visual Studio. Ostrzega, że prowadzi to do dwóch głównych problemów:

1. Marnujesz czas na tuningowanie układu i kontrolki zamiast planować projekt.

2. Skracasz proces projektowania, co oznacza, że możesz pominąć lepsze opcje lub pozostawić ukryte problemy, ponieważ nie chcesz pruć swojej pracy.

Tim mówi, że projektowanie na papierze pozwala wymazywać, próbować nowych pomysłów, a nawet testować "głupie" koncepcje, które mogą stać się świetnymi rozwiązaniami. Jest to kluczowa zasada w projektowaniu UI, ponieważ skupia się na tym, co aplikacja powinna robić, a nie na tym, jak wygląda w pierwszym drafcie.

Formularz Tournament Viewer

Tim ujawnia swój pierwszy wstępny interfejs: formularz Tournament Viewer. Wyjaśnia, że ten formularz wyświetli wszystkie informacje o konkretnym turnieju.

Formularz Create Tournament

Tim przechodzi następnie do formularza Create Tournament, który mówi, że jest prawdopodobnie potrzebny po turnieju.

Utwórz formularz drużyny

Tim następnie projektuje formularz Create Team, który zawiera:

• Nazwa drużyny

• Wybór członków drużyny

• Dodaj nowego członka

Tim podkreśla znaczenie spójności pomiędzy formularzami. Mówi, że układ nazwy drużyny powinien odpowiadać układowi nazwy turnieju, aby stworzyć spójny projekt.

Wyjaśnia również, że ten formularz pozwala użytkownikom dodawać istniejących członków drużyny z listy lub tworzyć nowych członków bezpośrednio w formularzu. Tim mówi, że woli trzymać tworzenie członków drużyny w tym samym formularzu, aby unikać głębokich warstw nawigacji (tj. otwierania wielu formularzy).

Wyjaśnia, że dodanie wielu warstw byłoby mylące i powolne. Dlatego wybiera utrzymanie projektu kompaktowego i przyjaznego dla użytkownika. To wspiera prosty i intuicyjny interfejs aplikacji, który zmniejsza czas potrzebny użytkownikom na wykonanie zadań.

Utwórz formularz nagrody

Formularz Create Prize Tima jest prosty. Zawiera:

• Numer miejsca

• Nazwa miejsca

• Kwota nagrody

• Procent nagrody

Tim zauważa, że tylko jedno z dwóch ostatnich pól powinno być używane jednocześnie (jednorazowo lub procent). Mówi, że formularz będzie wymagał logiki walidacji później, ale dla celów projektowych układ jest prosty. To dobry przykład, jak zasady projektowania pomagają stworzyć dopracowany, funkcjonalny interfejs.

Formularz panelu kontrolnego turnieju

Na koniec Tim omawia formularz Tournament Dashboard, z którego przyznaje się, że nie jest do końca zadowolony. Wyjaśnia wyzwanie: Aplikacje Windows Forms zazwyczaj mają jeden główny formularz, który pozostaje otwarty. Jeśli główny formularz zostanie zamknięty, aplikacja kończy działanie.

To tworzy problem dla śledzenia turniejów, ponieważ użytkownicy mogą chcieć mieć otwarte wiele turniejów jednocześnie. Początkowo Tim rozważał automatyczne otwarcie formularza tworzenia turnieju, jeśli nie istnieją żadne turnieje. Ale zdał sobie sprawę, że zamknięcie formularza tworzenia turnieju zakończyłoby aplikację.

Dlatego Tim projektuje centralny formularz dashboard, który pozostaje zawsze otwarty. Ten dashboard pozwala użytkownikom:

• Zobaczyć istniejące turnieje

• Załadować turniej

• Stworzyć nowy turniej

Tim wyjaśnia, że dashboard pozostanie otwarty nawet jeśli inne formularze zostaną zamknięte. Działa jako centralny punkt nawigacyjny aplikacji. Podczas gdy przyznaje, że może wyglądać "głupio prosto", mówi, że działa, i może później dodać elementy projektowe lub animacje, aby uczynić go bardziej atrakcyjnym wizualnie.

Wnioski

Tim zamyka wideo podkreślając, że celem jest po prostu zidentyfikowanie potrzebnych form i decyzja, co każda forma powinna wyświetlać. Mówi, że gdy interfejs użytkownika jest zaprojektowany, następnym krokiem jest planowanie logiki, gdzie planuje, jak elementy UI łączą się z modelem danych i zapleczem.

Proces projektowania UI Tima pokazuje, że projektowanie interfejsu aplikacji dotyczy planowania, spójności i jasności — nie polega na tworzeniu doskonałych wizualnie form na samym początku. To podejście pomaga deweloperom i projektantom pozostawać na tej samej stronie i zapewnia, że końcowa aplikacja jest łatwa do nawigowania i używania przez użytkowników.