- Strona główna
- Gry i twórcy
- UI do gier
UI do gier: projekt HUD, menu, ekwipunku i ikon gotowych do silnika gry
Projektujemy interfejs gry: HUD, menu, ekwipunek, sklep, dialogi i ikony, czytelne na monitorze, telewizorze i ekranie telefonu. Elementy oddajemy pocięte do 9-slice i złożone w atlasy, gotowe do Unity, Unreala albo Godota. HUD i menu kosztują od 2 400 zł netto.
- Cena
- od 2 400 zł
- Termin
- 2-3 tygodnie
- Prawa autorskie
- Pełne
Ile kosztuje projekt UI do gry?
HUD i podstawowe menu kosztują od 2 400 zł netto, kompletny interfejs do 10 ekranów od 5 400 zł, a rozbudowane UI z zestawem do 60 ikon od 9 600 zł. Nie, projektujemy i przygotowujemy pliki. Elementy pocięte do 9-slice, atlasy i opis zachowań przekazujemy programiście, który wdraża je w Unity, Unrealu albo Godocie.
- Cena
- od 2 400 zł
- Termin
- 2-3 tygodnie
Co dostajesz w projekcie UI gry
Każdy ekran pokazujemy na zrzucie z gry, w docelowej rozdzielczości, zanim przygotujemy eksport.
HUD
Paski zasobów, wskaźniki, minimapa, powiadomienia i podpowiedzi, ułożone tak, żeby nie zasłaniały akcji.
Ekrany menu
Menu główne, pauza, ustawienia, ekwipunek, sklep, dialogi i ekrany wyników.
Komponenty
Przyciski, zakładki, suwaki, pola i okna w stanach: zwykły, najechany, wciśnięty, wybrany i nieaktywny.
Ikony
Ikony przedmiotów, umiejętności i statusów w jednym stylu i jednej siatce rozmiarów.
Pliki do silnika
Panele pocięte do 9-slice, atlasy, PNG w kilku skalach i opis marginesów.
Projekt w Figmie
Biblioteka komponentów i wszystkie ekrany, z opisem zachowań i animacji.
Interfejs, którego gracz nie zauważa, bo po prostu działa
Dobry interfejs gry jest jednocześnie widoczny i niewidoczny. Gracz w ułamku sekundy odczytuje stan zdrowia, amunicję albo cooldown umiejętności, a przy tym interfejs nie zasłania akcji i nie wybija z klimatu świata. Zły interfejs gracz zauważa od razu: gdy szuka opcji w menu, myli ikony albo nie widzi paska życia na jasnym tle.
Projektujemy UI gry od informacji, a nie od ozdobników. Najpierw ustalamy, co gracz musi wiedzieć w każdej chwili, co tylko czasem, a co może być ukryte w menu. Dopiero potem dobieramy styl ramek, kroje i ikony, które pasują do świata gry.
Interfejs gry jest też projektem technicznym. Panele muszą się skalować do różnych rozdzielczości bez rozciągania rogów, ikony muszą być czytelne w kilku rozmiarach, a przyciski potrzebują stanów dla myszy, pada i dotyku. Oddajemy pliki przygotowane tak, żeby programista nie musiał ich ciąć ani poprawiać.
Projekt powstaje w Figmie jako biblioteka komponentów i ekranów, a do silnika trafiają wyeksportowane grafiki. Jeśli gra ma pixel art albo rysowany styl, interfejs projektujemy w tym samym języku, razem z resztą grafiki.
Słowniczek UI gier
9-slice
Panel pocięty na dziewięć części, w którym rogi zostają bez zmian, a boki i środek się rozciągają. Dzięki temu jedna grafika obsługuje okna różnej wielkości.
Atlas
Jeden plik z wieloma elementami interfejsu, z którego silnik wycina potrzebne fragmenty. Zmniejsza liczbę wywołań rysowania.
Safe area
Obszar ekranu, w którym interfejs jest bezpieczny od wycięć w telefonach i krawędzi telewizorów.
Podpowiedzi przycisków
Ikony klawiszy i przycisków pada, które zmieniają się zależnie od tego, czym gracz steruje.
Diegetyczny interfejs
Informacje pokazane w świecie gry, na przykład licznik amunicji na broni, zamiast na nakładce ekranu.
Pakiety i ceny
Ceny netto. Zakres ponad pakiet wyceniamy przed startem.
HUD i menu
Interfejs podstawowy: HUD i najważniejsze ekrany menu w stylu Twojej gry.
od2 400 zł
2-3 tygodnie
- HUD z paskami zasobów i wskaźnikami
- Menu główne, pauza i ustawienia, do 4 ekranów
- Przyciski i panele we wszystkich stanach
- Eksport do 9-slice i atlas
- Projekt w Figmie
Najczęściej wybierany
UI gry
Kompletny interfejs gry z ekwipunkiem, sklepem i dialogami, gotowy do wdrożenia.
od5 400 zł
4-5 tygodni
- Do 10 ekranów: HUD, menu, ekwipunek, sklep, dialogi i wyniki
- Biblioteka komponentów w Figmie
- Do 20 ikon
- Podpowiedzi przycisków dla klawiatury i pada
- Eksport do 9-slice, atlasy i opis zachowań
UI z zestawem ikon
Rozbudowany interfejs z pełnym zestawem ikon i przewodnikiem stylu UI dla zespołu.
od9 600 zł
6-8 tygodni
- Do 16 ekranów
- Do 60 ikon przedmiotów, umiejętności i statusów
- Przewodnik stylu UI z zasadami i przykładami
- Wersje dla monitora i ekranu dotykowego
- Prototyp przejść między ekranami w Figmie
- Eksport do silnika i pliki źródłowe
Ceny netto w złotych, od podanej kwoty przy opisanym zakresie. Na poprawki rezerwujemy około 15% czasu projektu, więc większy projekt ma proporcjonalnie więcej czasu na zmiany. Zakres ponad pakiet wyceniamy indywidualnie przed startem.
Porównanie pakietów
| Zakres | HUD i menu | UI gry | UI z zestawem ikon |
|---|---|---|---|
| Ekrany | do 4 i HUD | do 10 | do 16 |
| Ikony | brak | do 20 | do 60 |
| Biblioteka komponentów | podstawowa | tak | tak |
| Podpowiedzi dla pada | brak | tak | tak |
| Przewodnik stylu UI | brak | brak | tak |
| Termin | 2-3 tygodnie | 4-5 tygodni | 6-8 tygodni |
Jak projektujemy UI gry
Brief1-2 dni
Gatunek, platformy, sterowanie, rozdzielczości i lista ekranów.
1Architektura2-4 dni
Mapa ekranów i hierarchia informacji: co widać zawsze, a co w menu.
2Makiety3-5 dni
Szare układy ekranów na zrzutach z gry, bez stylu.
3Styl1-3 tygodnie
Ramki, kroje, kolory i ikony na wszystkich ekranach.
4Eksport2-4 dni
Pocięcie do 9-slice, atlasy, skale i opis dla programisty.
5
Na poprawki rezerwujemy około 15% czasu projektu. Najwięcej zmian wychodzi przy makietach, dlatego styl dodajemy dopiero wtedy, gdy układ ekranów jest zaakceptowany.
Od czego zależy cena UI gry
Cena zależy głównie od liczby ekranów i ikon oraz od liczby platform.
- 1
Liczba ekranów
Każdy ekran to osobny układ, stany i eksport.
- 2
Ikony
Ikony rysowane od zera w jednym stylu to znacząca część pracy przy grach z ekwipunkiem.
- 3
Platformy i sterowanie
Wersje dla dotyku, pada i monitora wymagają osobnych układów kluczowych ekranów.
- 4
Animacje
Opis i przygotowanie animacji przejść i stanów dodaje czas projektu.
Jak nie przepłacić
- Przygotuj listę ekranów z priorytetami
- Zacznij od HUD i menu, resztę dołóż później
- Udostępnij build z tymczasowym UI
- Zamów UI razem z grafiką gry
Dla kogo projektujemy UI do gier
Studia indie
Gdy interfejs złożony z prostokątów czeka na projekt, a premiera się zbliża.
Gry mobilne
Gdy interfejs musi działać na dotyku i na ekranach o różnych proporcjach.
Gry z rozbudowanym ekwipunkiem
Gdy RPG albo gra strategiczna ma dużo informacji do pokazania bez przytłaczania.
Gry na konsolę i Steam Decka
Gdy interfejs ma działać padem i na ekranie oglądanym z odległości.
Studia przed testami
Gdy chcesz sprawdzić czytelność interfejsu na graczach przed premierą.
Co przygotować przed projektem UI gry
Najbardziej pomaga build albo nagranie z obecnym interfejsem, nawet tymczasowym.
0 / 6 gotowe
- Lista ekranów i informacji, które gra pokazuje
- Platformy, sterowanie i docelowe rozdzielczości
- Build, nagranie albo zrzuty z obecnym interfejsem
- Silnik i sposób obsługi UI, na przykład UI Toolkit, UMG albo Control w Godocie
- Grafika gry i logo, żeby dopasować styl
- Gry, których interfejs lubisz, i dlaczego
Elementy interfejsu gry
| Element | Zadanie | Na co uważamy |
|---|---|---|
| HUD | stan gracza w każdej chwili | czytelność na każdym tle, brak zasłaniania akcji |
| Menu główne | pierwsze wrażenie i start gry | nastrój świata, szybka droga do gry |
| Ekwipunek | zarządzanie przedmiotami | siatka, porównanie przedmiotów, obsługa padem |
| Dialogi | rozmowy i wybory | długie teksty i tłumaczenia na inne języki |
| Ustawienia | grafika, dźwięk, sterowanie, dostępność | czytelne opcje, wielkość napisów |
| Ikony | szybka informacja bez tekstu | rozróżnialność kształtem, nie tylko kolorem |
UI gry czytelne na każdym ekranie
Hierarchia informacji przed stylem
Projekt interfejsu zaczynamy od listy informacji, które gra pokazuje graczowi, i od pytania, jak często każda z nich jest potrzebna. Zdrowie w grze akcji musi być widoczne zawsze, mapa tylko czasem, a statystyki postaci dopiero w menu. Z tej hierarchii wynika układ HUD i ekranów.
Makiety ekranów robimy najpierw na szaro, na zrzutach z gry. Dzięki temu oceniasz układ, a nie kolory, i łatwiej zauważyć, że jakiś element zasłania akcję albo ginie na tle poziomu.
Monitor, telewizor i telefon
Ten sam interfejs wygląda inaczej na monitorze z bliska, na telewizorze oglądanym z kanapy i na ekranie telefonu trzymanym w dłoni. Na telewizorze napisy muszą być większe, a na telefonie przyciski muszą mieć rozmiar palca i nie mogą leżeć pod wycięciem ekranu.
Dlatego na początku pytamy, na jakich platformach wyjdzie gra, i projektujemy elementy, które da się przeskalować. W największym pakiecie przygotowujemy osobne wersje kluczowych ekranów dla monitora i ekranu dotykowego.
Dostępność w interfejsie
Część graczy nie rozróżnia niektórych kolorów, część potrzebuje większych napisów, a część gra wyłącznie padem. Interfejs, który przekazuje informację tylko kolorem, na przykład czerwony i zielony wskaźnik bez różnicy kształtu, dla części graczy po prostu nie działa.
Przy projektowaniu korzystamy z ogólnodostępnych wytycznych dostępności gier, takich jak Game Accessibility Guidelines i Xbox Accessibility Guidelines. W praktyce oznacza to ikony rozróżnialne kształtem, możliwość powiększenia napisów i menu, które da się obsłużyć bez myszy.
Ruch i reakcje interfejsu
Interfejs gry reaguje na gracza: przycisk podświetla się po najechaniu, okno ekwipunku wysuwa się płynnie, a zdobyty przedmiot błyska w siatce. Te drobne animacje mówią graczowi, że jego akcja zadziałała, i sprawiają, że gra wydaje się dopracowana.
Animacje opisujemy w projekcie: co się rusza, jak długo i z jaką krzywą, a w największym pakiecie pokazujemy je w prototypie w Figmie. Programista dostaje gotową specyfikację zamiast domysłów, a Ty widzisz efekt przed wdrożeniem.
Pliki, które programista wstawia bez cięcia
Interfejs kończy się w silniku, nie w Figmie. Panele tniemy do 9-slice i opisujemy marginesy, ikony eksportujemy w siatce rozmiarów, a elementy łączymy w atlasy. Do tego dostajesz opis zachowań: co dzieje się po najechaniu, kliknięciu i wyborze padem.
Unity, Unreal i Godot obsługują rozciąganie paneli na swój sposób, więc przed eksportem prosimy o informację, w czym powstaje gra. Dzięki temu marginesy i nazwy plików od razu pasują do Twojego projektu.
Zacznijmy od rozmowy o Twoim projekcie
Bezpłatna konsultacja online albo wycena w kalkulatorze.