Jak wybrać układ ekranu wirtualnego pupila: retro LCD czy nowoczesne połączenie?

Układ retro LCD traktuje ekran jak niewielką scenę. Pupil, kilka symboli stanu i mała liczba elementów sterujących mieszczą się w stałej ramce. Pikselowa grafika, ograniczona paleta barw i celowe ograniczenie widocznych informacji nadają mu wyrazistą tożsamość wizualną. Ten styl sprawdza się, gdy główna pętla rozgrywki jest prosta: zobacz pupila, zrozum jego bieżący stan i wybierz działanie.

Nowoczesne połączenie zachowuje część tej zamkniętej, pikselowej estetyki, ale zapewnia więcej miejsca na informacje pomocnicze. Pupil może pozostać głównym elementem wizualnym, podczas gdy etykiety, menu, ustawienia i szczegóły drugorzędne są prezentowane za pomocą skalowalnego tekstu i typowych elementów sterujących interfejsu. Układ może też zmieniać się wraz z dostępną przestrzenią. Interfejsy responsywne często zmieniają położenie i rozmiar elementów lub układają treści na nowo, dopasowując je do rozmiaru okna, zamiast powiększać wszystkie elementy jednakowo (wskazówki Microsoft dotyczące projektowania responsywnego).

Traktuj „połączenie” jako decyzję projektową, a nie obietnicę, że każda funkcja będzie automatycznie działać na każdym urządzeniu. Układ nadal wymaga konkretnych decyzji: co pozostaje widoczne, co trafia do menu i jak interfejs zachowuje się przy ograniczonej przestrzeni.

Zapisz najczęstsze zadanie gracza jako krótką sekwencję: na przykład zauważenie potrzeby, otwarcie odpowiedniej opcji, wybranie jej i sprawdzenie efektu. Rozrysuj tę sekwencję w ramce ekranu. Jeśli może być widoczna w całości bez drobnych etykiet, nachodzących na siebie symboli ani ciągłego otwierania i zamykania menu, układ retro LCD może wystarczyć.

Następnie wypisz informacje, które trzeba zrozumieć na pierwszy rzut oka, oraz te, które mogą poczekać na widok szczegółów. Poza pupilem na ekranie głównym mogą znaleźć się kilka wyraźnych wskaźników; dłuższe opisy, kolekcje czy opcje konfiguracji lepiej umieścić w dodatkowym panelu nowoczesnego połączenia. To podział wynikający z konkretnego projektu, a nie uniwersalna zasada: właściwe grupowanie zależy od rzeczywistych aktywności i nazewnictwa w grze.

Policz znaczące wybory, a nie ozdobne ikony. Pięć ikon, z których każda otwiera kolejne menu, może wymagać więcej pracy niż trzy opisane działania. Jeśli gracze muszą wielokrotnie przechodzić przez zagnieżdżone menu, by wykonać główne zadanie, zapewnij więcej miejsca albo uprość zadanie, zanim dodasz więcej ozdobników.

Układ retro sprawdza się, gdy pikselowa grafika jest kluczowa dla zamierzonego wyglądu, pupil pozostaje czytelny w małej skali, a typowych działań jest na tyle niewiele, że można je pokazać lub udostępnić bezpośrednio. Ograniczona scena może spójnie łączyć pupila i informacje o jego stanie. Wyznacza też jasną granicę: systemy drugorzędne nie mogą zagracać głównej sceny bez świadomego kompromisu.

Sprawdź, czy kluczowe stany można odróżnić bez polegania na subtelnych zmianach koloru. Używaj rozpoznawalnych kształtów, póz, etykiet lub wzorów, a także kolorów. Przetestuj ekran w skali szarości i w rzeczywistym rozmiarze wyświetlania. Sprite, który wygląda uroczo po powiększeniu na obszarze roboczym, może w gotowym układzie zmienić się w nieczytelne skupisko pikseli.

Ten styl przestaje pasować, gdy każda nowa funkcja dodaje kolejny drobny wskaźnik stanu lub skrót. Jeśli gracze potrzebują legendy, by zrozumieć ekran główny, albo pupil zostaje pomniejszony, by zrobić miejsce na rozrastający się panel, kompaktowa ramka może być przeciążona.

Nowoczesne połączenie sprawdza się, gdy scena z pupilem ma współistnieć z czytelnym tekstem o jego stanie, różnymi aktywnościami lub widokiem szczegółów. Może też lepiej dostosowywać się do różnych rozmiarów okna: wskazówki Microsoft opisują zmianę układu z jednej kolumny na kilka na większym ekranie oraz wyświetlanie mniejszej liczby metadanych w małych oknach. Zastosuj tę zasadę wybiórczo: dodatkowa przestrzeń może ujawnić przydatne szczegóły, ale nie powinna sprawiać, że pupil musi konkurować z kilkoma równie wyrazistymi panelami.

Najpierw określ układ dla wąskiego ekranu. Pozostaw dostęp do pupila, najważniejszej informacji o jego stanie i głównego działania; informacje drugorzędne przenieś do panelu lub menu o jasnej nazwie. Na szerszych ekranach pokaż dodatkowe szczegóły albo umieść listę obok sceny. Zachowaj kolejność i nazwy działań, aby zmiana układu nie sprawiała, że to samo zadanie przypomina korzystanie z innego systemu.

Nie powiększaj całej kompozycji retro, aż wypełni duży ekran. Może to pozostawić niezręcznie dużo pustego miejsca albo nadmiernie rozsunąć elementy sterujące. Zamiast tego zdecyduj, które elementy powinny rosnąć, które mają pozostać w ograniczonej scenie, a które dodatkowe informacje faktycznie się przydadzą. Wytyczne Material Design dotyczące układu również opisują dostosowywanie interfejsów do metod wprowadzania danych, urządzeń i elementów ekranu, z użyciem responsywnych marginesów, kolumn i obszarów (Zrozumieć układ).

Oceń każde stwierdzenie jako „tak”, „częściowo” lub „nie” w odniesieniu do aktualnego projektu. To praktyczna lista kontrolna, a nie zweryfikowane narzędzie oceny.

• Główne zadanie związane z pupilem można wykonać, korzystając z niewielkiego zestawu widocznych opcji.
• Pupil i najważniejsze informacje o jego stanie pozostają czytelne przy najmniejszym planowanym rozmiarze ekranu.
• Większość informacji pomocniczych nie jest potrzebna podczas głównej interakcji.
• Interfejs musi pokazywać wyraźnie różną ilość informacji na ekranach o różnych rozmiarach.
• Gracze potrzebują etykiet lub opisów, które nie zmieściłyby się w ramce retro.
• Scena z pupilem powinna wyraźnie różnić się od menu i szczegółów dotyczących jego stanu.

Przewaga odpowiedzi „tak” w pierwszych trzech punktach przemawia za układem, w którym podstawą jest retro. „Tak” przy potrzebie zmiennej ilości informacji lub czytelnych etykiet przemawia za nowoczesnym połączeniem. Jeśli odpowiedzi są podzielone, przygotuj prototyp nowoczesnego połączenia ze stałym oknem z pikselowym pupilem oraz oddzielnym, prostszym obszarem stanu i działań. Dzięki temu scena zachowa swój charakter, a interfejs pomocniczy będzie mógł się dostosowywać.

Przygotuj po jednym reprezentatywnym ekranie dla każdej poważnie rozważanej opcji, używając tego samego pupila, stanu i zadania. Uwzględnij typowy stan z największą ilością informacji, a nie tylko najczystszy ekran bezczynności. Poproś kilka osób, które nie znają szkicu, by określiły bieżący stan pupila i wykonały główne zadanie. Zwróć uwagę, gdzie się wahają, błędnie odczytują symbol lub nie zauważają działania; wprowadzaj zmiany na podstawie zaobserwowanych problemów, zamiast zakładać, że sam styl je rozwiąże.

Przetestuj interfejs przy najmniejszym docelowym rozmiarze, przy większym rozmiarze i z powiększonym tekstem, jeśli jest obsługiwany. Jeśli z interfejsu korzysta się za pomocą klawiatury, sprawdź widoczność zaznaczenia fokusu i upewnij się, że pozostaje widoczne podczas przechodzenia między elementami sterującymi. W internetowych interfejsach obsługiwanych wskaźnikiem WCAG 2.2 określa dla kryterium poziomu AA minimalny rozmiar celu wynoszący 24 na 24 piksele CSS, z wyszczególnionymi wyjątkami; w kryterium AAA dotyczącym wyglądu fokusu określa również współczynnik kontrastu 3:1 i minimalny obszar wskaźników fokusu (omówienie WCAG 2.2 przez W3C). Te kryteria są przydatne do sprawdzania interfejsu, ale nie rozstrzygają, który styl wizualny pasuje do gry.

Na koniec sprawdź, czy tekst pozostaje czytelny na tle sceny, zaznaczone i nieaktywne elementy sterujące wyglądają inaczej oraz czy hierarchia ekranu jest zrozumiała także bez kolorów. Jeśli prototyp retro przechodzi te testy i pozwala bezpośrednio wykonać powtarzane zadanie, zachowaj jego ograniczenia. Jeśli regularnie wymusza ciasne etykiety lub ukryte działania, zastosuj nowoczesne połączenie i zachowaj styl retro tam, gdzie wnosi najwięcej: w scenie z pupilem, jej ramce lub kilku znanych wskazówkach wizualnych.

• Co nowego w WCAG 2.2 — Inicjatywa na rzecz dostępności sieci W3C
• Techniki projektowania responsywnego — Microsoft Learn
• Zrozumieć układ — Material Design