UI Artist — interfejsy gier
Kompendium zawodu — pojęcia i zwroty
Pojęcia w pracy
- HUD
- Elementy informacji widoczne podczas rozgrywki.
- Stan komponentu
- Wariant wizualny wynikający z sytuacji, np. aktywny albo wyłączony.
- Bezpieczny obszar
- Część ekranu, w której element ma pozostać czytelny w przyjętych warunkach.
- Zasób graficzny
- Plik używany w interfejsie zgodnie z wymaganiami silnika.
- Fokus
- Wskazanie elementu, który zareaguje na wejście z klawiatury lub kontrolera.
Zwroty w typowych sytuacjach
- „Sprawdźmy, czy ważny stan jest czytelny także bez koloru.”
- Chronisz informację w różnych warunkach.
- „Potrzebuję najdłuższej przewidzianej wersji tekstu do tego ekranu.”
- Sprawdzasz układ w lokalizacji.
- „Przekażę zasoby wraz z listą stanów i zachowaniem fokusu.”
- Ułatwiasz wdrożenie w silniku.
Podstawy · Lekcja 1 z 6
HUD, menu i potrzeba gracza
Wskaż informację potrzebną do bieżącego działania. Rozdziel sygnały ciągłe od informacji dostępnej w menu. Oceniaj je podczas rozgrywki.
- Nazwij decyzję
- Oceń moment
- Ustal hierarchię
Przykład z pracy
Ekran pokazuje stan zadania stale, a szczegóły przedmiotów w osobnym widoku.
Ćwiczenie praktyczne
Podziel informacje na potrzebne podczas akcji i do spokojnego przeglądu.
Sprawdź się — opcjonalne pytanie
Co decyduje o umieszczeniu informacji w HUD?
- Rozmiar zasobu graficznego
- Potrzeba odczytania jej w trakcie działania
- Kolejność narysowania ikon
Pokaż odpowiedź i wyjaśnienie
Potrzeba odczytania jej w trakcie działania. HUD służy decyzjom podejmowanym podczas rozgrywki.
Podstawy · Lekcja 2 z 6
Hierarchia i czytelność na tle gry
Sprawdź kontrast oraz wielkość w docelowym ujęciu. Używaj kształtu i tekstu do wzmocnienia ważnego stanu. Ogranicz elementy konkurujące o uwagę.
- Porównaj tła
- Wyróżnij sygnał
- Sprawdź w ruchu
Przykład z pracy
Powiadomienie jest czytelne na ciemnym tle, lecz znika przy jasnej scenie.
Ćwiczenie praktyczne
Zaproponuj zmianę hierarchii i sprawdzenie na dwóch tłach.
Wyraźne podświetlenie znika przy kontrolerze
Menu dobrze działa z myszą. Na kontrolerze gracz nie wie, który przycisk uruchomi, a obok widnieje stan wyłączony w podobnej barwie.
Pokaż przykładową reakcję
Projektuję odrębny fokus, sprawdzam kolejność i odróżniam go od stanu wyłączonego. Gracz może przewidzieć reakcję, niezależnie od sposobu sterowania.
Sprawdź się — opcjonalne pytanie
Co chroni informację przy zmiennym tle?
- Ocena tylko na jednolitym tle
- Dodanie trzech równorzędnych ikon
- Czytelna obwódka lub warstwa oraz spójna hierarchia
Pokaż odpowiedź i wyjaśnienie
Czytelna obwódka lub warstwa oraz spójna hierarchia. Czytelność zależy od warunków użycia w grze.
Praktyka · Lekcja 3 z 6
Stany przycisku i fokus
Zaprojektuj osobno stan podstawowy, wyłączony, aktywny i fokus. Odbierz działanie na docelowym sposobie sterowania. Nie uzależniaj rozpoznania wyłącznie od barwy.
- Nazwij stany
- Zaprojektuj wyróżnienie
- Przejdź kolejność
Przykład z pracy
Kontroler wyróżnia przycisk ramką, a opcja niedostępna ma odrębne oznaczenie.
Ćwiczenie praktyczne
Rozpisz stany przycisku i wybór po przejściu w bok.
Sprawdź się — opcjonalne pytanie
Który stan pokazuje, gdzie zadziała wejście z kontrolera?
- Fokus
- Podświetlenie kursora poza przyciskiem
- Stan wyłączony
Pokaż odpowiedź i wyjaśnienie
Fokus. Fokus opisuje element przyjmujący aktualne wejście.
Praktyka · Lekcja 4 z 6
Układ przy innych językach
Sprawdź zawijanie, położenie ikon i minimalne odstępy. Uwzględnij rozmiary ekranu i najdłuższe etykiety. Odbieraj działanie na prawdziwych wersjach językowych, gdy są dostępne.
- Wybierz języki
- Sprawdź układ
- Potwierdź odczyt
Przykład z pracy
Niemiecka etykieta zajmuje dwa wiersze i zasłania ikonę w wąskim układzie.
Ćwiczenie praktyczne
Narysuj wariant zawijania i ustal warunek akceptacji.
Sprawdź się — opcjonalne pytanie
Co pomaga zapobiec ucięciu nazwy?
- Stała szerokość obliczona dla jednego języka
- Elastyczny układ z miejscem na dłuższą etykietę
- Usunięcie fokusu
Pokaż odpowiedź i wyjaśnienie
Elastyczny układ z miejscem na dłuższą etykietę. Tekst może zmieniać rozmiar bez utraty funkcji przycisku.
Specjalizacja · Lekcja 5 z 6
Przekazanie zasobów
Uzgodnij format, nazwy, liczbę wersji i sposób skalowania. Dołącz reguły stanów oraz właściciela zmiany. Zapisz, gdzie element może być użyty ponownie.
- Uzgodnij format
- Oznacz stany
- Przekaż z opisem
Przykład z pracy
Ikona ma wspólny zasób, a odrębne stany korzystają z reguł koloru i obwódki.
Ćwiczenie praktyczne
Przygotuj kartę przekazania przycisku i ikony.
Sprawdź się — opcjonalne pytanie
Co zmniejsza ryzyko rozbieżnego wdrożenia?
- Zrzut ekranu bez warunków
- Losowe nazwy plików
- Wersjonowane pliki, lista stanów i reguły użycia
Pokaż odpowiedź i wyjaśnienie
Wersjonowane pliki, lista stanów i reguły użycia. Dokumentacja pozwala powiązać zasób z zachowaniem w grze.
Specjalizacja · Lekcja 6 z 6
Odbiór w silniku i poprawka
Oceń zachowanie podczas rozgrywki, zmianę urządzenia i animacje. Rozróżnij błąd zasobu od błędu logiki wyświetlania. Zapisz warunki odtworzenia i kryterium zakończenia.
- Odtwórz w silniku
- Wskaż stan
- Potwierdź działanie
Przykład z pracy
Stan fokusu jest widoczny na zrzucie, lecz znika po powrocie do ekranu z innego menu.
Ćwiczenie praktyczne
Napisz zgłoszenie z oczekiwanym zachowaniem i warunkami odtworzenia.
Sprawdź się — opcjonalne pytanie
Co potwierdza poprawkę fokusu?
- Widoczny fokus po powrocie na ekran i prawidłowa reakcja na wejście
- Zmiana opisu pliku
- Tylko ocena w edytorze grafiki
Pokaż odpowiedź i wyjaśnienie
Widoczny fokus po powrocie na ekran i prawidłowa reakcja na wejście. Poprawka musi być widoczna w sytuacji, w której gracz napotkał błąd.