Interfejsy 101: Make it Pretty

Stworzyłem kilka gier, które wydałem na wolności. Jest jeden szczególny problem, na który wpadam w kółko, a jest nim kwestia interfejsu / motywu gry.

Jak podejmować arbitralne, spójne decyzje dotyczące wyglądu i interfejsu gry?

Na przykład w pierwszej wersji mojej opartej na chemii gry Silverlight podjąłem (złą?) Decyzję, aby wybrać naturalny wygląd w stylu krajobrazu, co zaowocowało tym interfejsem użytkownika:

Potem, w późniejszej iteracji, stałem się mądrzejszy i zastosowałem bardziej „maszynowy”, grungowy wygląd, który spowodował (końcowy interfejs użytkownika):

Na pewno powiem, że mój gust w interfejsie użytkownika poprawił się poprzez iterację. Ale było to wynikiem wielu początkowo arbitralnych decyzji, a następnie wielu poprawek.

Czy jest lepszy sposób, aby dowiedzieć się, jak stworzyć motyw do swojej gry?

Aby dać analogię do pisania, kiedy piszesz powieść fantasy / science fiction, musisz opisać wiele elementów. Podczas gdy możesz dowolnie wymyślać obiekty / stworzenia / miejsca / itp., Zyskujesz bardziej spójny świat, gdy siadasz przez kilka minut i projektujesz obszar, region, planetę lub wszechświat. Wszystko ładnie do siebie pasuje i możesz zadać sobie pytanie: „jak by to działało w tym wszechświecie?

Edycja: Wygląda na to, że nie wyjaśniłem tego dobrze. Pozwolę sobie maksymalnie uprościć pytanie: kiedy muszę rozłożyć ekran tytułowy (z tłem, czcionkami, skórkami przycisków), jak zdecydować, jak powinny wyglądać? Zielony czy niebieski? Grunge czy nie? Zaokrąglony czy płaski? Szeryfowy czy bezszeryfowy?

Odpowiedz na to pytanie i rozbij je na całą grę. Jak wymyślić, jak powinno wyglądać? Jakiego procesu używasz, aby uczynić je spójnymi i nie arbitralnymi?

Spójrz ponownie na zrzuty ekranu. Mógłbym utknąć w trawie / niebie / skałach, ale metal wydawał się bardziej dopasowany do idei reakcji chemicznych i atomów.

Wygląda na to, że masz sprzeczne style.

Zobacz te interfejsy użytkownika od Peggle, Ultima Underworld, Diablo 3, Starcraft 2 i Gran Turismo 5.

Zwróć uwagę, w jaki sposób każdy interfejs jest spójny w swoim motywie .

Peggle jest pin-ball jak we wszystkich elementach interfejsu użytkownika. Wszystko to metr, dźwignia, dysza, trampolina.

Ultima Underworld ma elementy interfejsu użytkownika to żelazo / stal, mikstury, plecaki, mapy. Czas przygody.

Podobny do podziemnego świata Ultima (w rzeczywistości wydaje się być oparty na UW)

Futurystyczny, elegancki, prosty, minimalny (protossy)

Wnętrze samochodu

Widzisz, twój pierwszy projekt jest całkowicie niespójny i nietrafiony. Co otwarte pole ma wspólnego z twoją grą? To samo dotyczy tła metalowego. Wypróbuj ławkę laboratoryjną na planszy i tło laboratoryjne z kolbami i fiolkami oraz gumowymi rękawiczkami i szalkami Petriego.

Dr Mario jest bardzo medyczny, bakteryjny, wirusowy, o tematyce medycznej

Ponadto interfejs powinien mieć podobną stylistykę do elementów gry . Kulki z symbolami chemicznymi są okrągłymi i delikatnie stopniowanymi jednolitymi kolorami. Wybrane tła / plansza mają style artystyczne zupełnie odmienne od elementów rozgrywki. To żywe zdjęcie. Metal jest bardzo szczegółowy, a kulki chemiczne są gładkie i stosunkowo nieokreślone.

Jedna rzecz, którą zaczynam rozumieć, jest bardzo ważna: prawidłowe użycie kontrastu.

Spójrz na to pierwsze zdjęcie. Wszędzie jest kontrastowo! Niebo jest jasne, horyzont jest ciemny, potem trawa daleko jest jasna, a dno ciemne. Tło kafelkowe zmienia się niezwykle od bardzo jasnego do bardzo ciemnego. Wszystko to nie ma charakteru informacyjnego. Wizualny bałagan. Właściwe ważne części - koła - zagłuszają wszystkie zmiany kontrastu.

Teraz spójrz na drugie zdjęcie. Tło jest ciemne i stosunkowo monotonne. Wokół całego pola gry jest jasna ramka. Kafelkowe tło jest w większości ciemne, a cienkie białe linie w ważnych miejscach. Nagle można zobaczyć układankę, ponieważ jest to jedna z najbardziej kontrastowych rzeczy na świecie.

Osobiście wciąż go trochę poprawiałem - sprawiłbym, że boisko wyglądało na bardziej grube. Białe linie pokazujące podziały siatki są ważne, ale ludzki mózg jest naprawdę dobry w ekstrapolacji prostych cech, a te mogą być o wiele ciemniejsze, a nawet nieco rozbite.

Najważniejszą rzeczą, która wyciąga mnie z tego interfejsu jest dolny pasek. Jest jasny, jest na twojej twarzy i trudno jest odczytać tekst. Ta ostatnia kwestia jest ważna - powód, dla którego trudno jest odczytać tekst, jest znowu z powodu kontrastu. Czytamy tekst częściowo, szukając krawędzi liter, ale niestety dobrze komponują się one z częściami dolnego paska.

Co bym zrobił: Przesunąć dolny pasek, aby dobrze pasował do głównego tła pod względem kontrastu. Wykonaj jaśniejszą granicę między nim a głównym tłem, aby przejść przez fakt, że jest on oddzielny. Następnie pozbądź się większości tekstu. „Diament” może stać się prawdziwym diamentem. „Pozostawione atomy” mogą stać się obrazowym widokiem kilku atomów. „Pozostały czas” może stać się klepsydrą, zegarkiem na rękę lub kieszonkowym. „Dalej” może zniknąć całkowicie - mówisz „musisz przejść, aby zobaczyć, które atomy dostajesz”, ale to irytująca mechanika gry. Zamień go w stos atomów po prawej stronie, siedzący na zniszczonym przenośniku taśmowym, z małą wizualną wskazówką maszynową, dla której jest następny w linii. Tada! Ulepszone puzzle, ulepszony interfejs, wszystko wygląda mniej zagracone.

Jeśli nie trzeba używać tekstu, nie dwa sposoby, aby zagwarantować kontrastu. Po pierwsze, umieść tekst na czymś, co samo w sobie ma niski kontrast. Jeśli ma ciemne tło, użyj jasnego tekstu. Jeśli ma jasne tło, użyj ciemnego tekstu. Jeśli nie możesz tego zrobić (a czasem po prostu nie możesz), nie wahaj się użyć efektu zewnętrznego blasku. To świetny sposób na zapewnienie odpowiedniego kontrastu ramek bez względu na tekst.

Podczas zabawy z interfejsami otwórz edytor obrazów, zamień go na monochromatyczny i wypróbuj dwie rzeczy: rozmycie i wykrywanie krawędzi. Kiedy twój interfejs użytkownika jest rozmazany monochromatycznie, twoja wizja powinna automatycznie grawitować w ważnych obszarach. W trybie wykrywania krawędzi należy wyróżnić ważne obszary. Przykłady:

Porównaj te dwa. Pierwszy jest prawie nieczytelny - oczywiście niektóre klejnoty są widoczne, ale wiele z nich nie. W drugim siatka wyróżnia się natychmiast, podobnie jak okno dialogowe. Chociaż na planszy jest tylko jeden klejnot, możesz od razu zobaczyć, gdzie on jest.

Pierwszy mocno podkreśla krawędzie siatki. Niektóre klejnoty są prawie niewidoczne. Drugi podkreśla te nadal (i bardziej niż osobiście bym to zrobił), ale także bardzo mocno podkreśla granicę układanki, a klejnot jest znacznie bardziej (choć wciąż nie idealnie) widoczny.

Ta metoda w żadnym wypadku nie jest panaceum, ale może pomóc w znalezieniu rzeczy, które powinny zostać naprawione. Pamiętaj tylko, że wizja człowieka opiera się na krawędziach i kontraście, i zaprojektuj swój interfejs, aby był czytelny dla ludzi.

(Przyjdę do tego z perspektywy teorii kolorów)

Myślę, że twoje pytanie nie dotyczy tego, jak stworzyć atrakcyjny GUI, myślę, że naprawdę wskazujesz na: „Jak wybrać doświadczenie, które chcę dać moim graczom?”

I to jest głównie odpowiedź psychologiczna. Wspominasz o wyborze niebieskiego, zielonego lub czerwonego, i tak naprawdę nie chodzi o kolory, chodzi o emocje, które odczuwasz, gdy je widzisz.

Jeśli masz grę w kolorze czerwonym (tło jest odcieniem czerwieni, gracz ma na sobie kolor czerwony lub używa czerwonego fragmentu gry, wszystkie czcionki mają czytelny odcień czerwieni), jak byś się czuł, gdybyś w nią zagrał gra? I nie ma nawet znaczenia, co to za gra.

Czujesz, że gra była albo bardzo zła, albo gra w Walentynki.

W tym momencie pojawia się proces decyzyjny. Jeśli chcesz, aby Twój gracz czuł się, jakby przeprowadzał eksperyment naukowy w Twojej chemicznej grze, być może sprawiając, że wszystko będzie czyste i proste. Może coś, co podkreśla kolor biały.

Jeśli chcesz, aby Twój odtwarzacz czuł się, jakby wykonywał jakąś pracę produkcyjną, w której czuje się, jakby zaczynał się brudzić nauką, to może twoje drugie zdjęcie lub podkreślając kolory razem żółty i czarny.

Jeśli chcesz, aby Twój gracz czuł się tak, jakby łączył go chemia, jakby był przedłużeniem siebie i wszystkich żywych stworzeń, wtedy Twoje pierwsze zdjęcie może być dobrym początkiem. Nacisk na jasne niebieskie i jasne zielenie oraz naturalne odcienie, takie jak brązowy.

To naprawdę sprowadza się do surowych emocji, których oczekuje się od gracza.

Krótka odpowiedź: nie ma krótkiej odpowiedzi.

Projektowanie to ogromne pole, z mnóstwem książek, artykułów i, jak wspomniano, bibliotek, które obejmują to pytanie. Kolorystyka, czcionki, style, układ, użycie białych znaków, negatywne spacje, tekstury, kolory i ich znaczenie w różnych kulturach, dlaczego komiks sans jest zły i nigdy nie powinien być używany. Istnieją kursy, książki, blogi, artykuły badawcze i strony internetowe poświęcone tego rodzaju rzeczom. Nie będzie prostej odpowiedzi na to pytanie, ponieważ pytanie często nasuwa.

To powiedziawszy: Szczerze mówiąc, najlepszą opcją jest zatrudnienie projektanta, który ci pomoże. Jeśli to nie w twoim budżecie, zaprzyjaźnij się z projektantem, aby pomóc. Jeśli to nie jest możliwe, być może będziesz musiał to zrobić samotnie.

Kilka wskazówek. W przypadku schematów kolorów użyj czegoś takiego jak Projektant schematów kolorów . Poświęć trochę czasu na naukę współpracy kolorów i ogólnie staraj się wybrać tylko kilka kolorów, nie przesadzaj. Limit powinien wynosić około 3 kolorów.

W przypadku czcionek są całe artykuły i artykuły badawcze (tutaj o serif kontra sans serif ). Ponownie, ogólną zasadą jest wybranie najwyżej dwóch czcionek. Dobrym wyborem jest wybranie czcionki, która nie jest domyślną, ale nadal ładnie wygląda. Jeśli jest to opcja, Helvetica jest całkiem fajna, ale istnieje wiele innych dobrych.

W przypadku stylu i / lub motywu odpowiedź na ten jest jeszcze trudniejsza. Myślę, że największą wskazówką tutaj jest zachowanie stylu . Nie próbuj łączyć natury z scifi ani szkicowych grafik z jego modelami 3D res res. Oznacza to przede wszystkim znalezienie jednego artysty, który wykonałby CAŁĄ sztukę, lub zrobiłby to sam (w przypadku dużych firm, właśnie dlatego istnieje lider artystyczny). Motyw jest czymś, z czym musisz się pobawić, chyba że masz przed sobą ustawiony motyw. Szczerze mówiąc, może się to zmieniać w miarę upływu czasu i masz więcej do zrobienia. Są całkiem spore szanse, że temat zmieni się w trakcie rozwoju.

Ogólnie rzecz biorąc, podczas gdy można uczyć projektowania, niektórzy ludzie po prostu ... nie są w tym tak dobrzy (podobnie jak programowanie). Tutaj przydaje się pomoc projektanta.

EDYTOWANE:

Ok, przepisałem to teraz, kiedy lepiej rozumiem pytanie.

Powodem, dla którego się pomyliłem, jest to, że próbowałeś podać analogię na piśmie, ale twój przykład wcale nie jest równoległy. Projekt interfejsu użytkownika jest kwestią prezentacji. Treść książki dotyczy samej substancji.

Tak więc, patrząc na projekt interfejsu użytkownika jako kwestię prezentacji, musisz pomyśleć o tym, co chcesz przedstawić. Oczywiście próbujesz przedstawić swoją grę, ale co jeszcze? Czy chcesz, aby wyglądał profesjonalnie? Zabawa? Ciemny? Lekki?

Jako przykład przyjrzę się dwóm opublikowanym przez Ciebie obrazom i przedstawię wrażenia, które z nich uzyskam.

Po pierwsze, jest kilka oczywistych aspektów, na które możemy spojrzeć. Oczywiście jest jaśniejszy niż drugi obraz. Dodaj to do faktu, że wybrałeś obraz pola z głębią (gdy pole odchyla się od widza), a to uczucie jest znacznie bardziej ekspansywne. Czuje się bardziej wolny, bardziej beztroski.

Gdy spojrzysz na drugi obraz, jest on oczywiście znacznie ciemniejszy. Ma również tło, które jest płaskim obrazem prostopadłym do linii wzroku widza, odsuwając poczucie kontynuacji głębi, jakie miał pierwszy obraz. Dodaj, że jedyne prawdziwe wskazówki dotyczące głębi pochodzą z zacienienia na blaszce diamentowej i zbliżają obraz tła bardzo blisko aparatu. Wszystkie te elementy składają się na siebie, aby nadać mu bardziej mroczny, bardziej klaustrofobiczny charakter.

Co teraz możesz zrobić z tymi dwoma tematami? Cóż, pierwszy motyw jest czymś, co może być dobre, jeśli chcesz, aby było bardziej swobodnie. Daje to pewien sens, jak to, co gracz robi teraz z elementami gry, to nie wszystko, co dzieje się na świecie. Drugi obraz daje poczucie pilności. „Znany świat” gry jest znacznie mniejszy i kładzie większy nacisk na to, co robi gracz.

Czy to naprawdę chodzi o „upiększanie”? To subiektywna sprawa i zdarza mi się, że pierwszy zrzut ekranu wygląda lepiej niż drugi.

Wybór motywu nie jest tak naprawdę nauką rakietową - znasz kluczową treść lub cel swojej gry i możesz o tym pamiętać, wybierając każdy inny aspekt.

Jedna rzecz, o której jak dotąd nikt nie wspominał: zapytaj ludzi, którzy będą grać w tę grę, o opinie. Projektanci interfejsu użytkownika spędzają dużo czasu, pokazując projekty użytkownikom i sprawdzając, co jest z nimi dobre, a co złe, bez względu na to, czy projektują grę, edytor tekstu czy pokład lotniczy.