Interfejsy 101: Make it Pretty


23

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:

Wartościowość 0,1, pełna trawy, skał i nieba.

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):

Ostateczna wersja Valence wygląda bardziej jak maszyna i nieczysty

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.


Chcę wyjaśnić, że to pytanie nie jest specyficzne dla formatu, gry lub platformy (z wyjątkiem może gier 2D); jest ogólny dla każdej gry, którą możesz zbudować.
ashes999

8
Po pierwsze, Twoja edycja miała miejsce trzy minuty po moim komentarzu. Po drugie, wciąż pytasz: „Jak pielęgnować dobre wyczucie projektu?” Istnieje wiele książek, programów studiów i tak, nawet ux.stackexchange.com, które mogą ci w tym pomóc - ale nawet kilkanaście akapitów odpowiedzi tutaj nawet nie pomoże.

1
„W tym trybie! W tym trybie masz ...”
Daniel Pendergast

1
@Nevermind: Tyle że cały UXSE jest już poświęcony takim rzeczom.

5
UI! = Projekt graficzny. Oba powyższe przykłady mają ten sam interfejs użytkownika z różnymi motywami graficznymi.
DampeS8N

Odpowiedzi:


15

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

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

Świat podziemny Ultima

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

Diablo III

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

StarCraft 2

Futurystyczny, elegancki, prosty, minimalny (protossy)

Gran Turismo 5

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

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.


8

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:

Po pierwsze, niewyraźne Po drugie, niewyraźne

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.

Po pierwsze, przewaga Po drugie, krawędź

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.


1
Niezły przykład. Kontrast to jedna kwestia, ostrość inna. Jeszcze jedno, co często widzę, to nasycenie - elementy tła są desaturowane w stosunku do elementów pierwszego planu (tak jak w prawdziwym życiu, z powodu efektów atmosferycznych), a to pomaga skupić uwagę na tym, co jest istotne.
Kylotan

Chciałbym dać temu więcej niż +1. Nie tylko skala szarości z tymi filtrami powoduje problemy, które przeciętny użytkownik może mieć od razu bardziej oczywisty, ale może także ułatwić dostrzeżenie problemów osobom z zaburzeniami widzenia lub ślepotą na kolor - zawsze dobrze jest sprawdzić, czy można odczytać interfejs użytkownika skala szarości jako czerwony kafelek obok zielonego kafelka może wydawać się oczywiste dla ciebie lub dla mnie, ale jeśli byłyby takie same w skali szarości, mogą łączyć się razem dla naszych duochromatycznych przyjaciół.
theheadofabroom

6

(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.


5

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.


+1 za nie mieszanie stylów. W rzeczywistości brałem udział w kursach projektowania w ramach mojej podwójnej specjalizacji, ale to wciąż nie pomaga mi wybrać, dlaczego niebieski kontra zielony kontra czerwony kontra ...
ashes999

Odpowiedź DeM0nFiRe ma dobrą robotę, obejmując sposób wyboru motywu. Tymczasem motyw jest ważny dla ogólnego projektu i pomoże ci zdecydować, dlaczego niebieski vs. zielony vs. czerwony vs. jasny różowy. Warto sprawdzić artykuły / książki na temat teorii kolorów, reguł itp. Oto artykuł na temat reguł kolorów znalezionych przez google: writedesignonline.com/resources/design/rules/color.html
thedaian

1
Ogólnie rzecz biorąc, wybór kolorów (i wszystko inne związane z projektowaniem) wymaga praktyki i czasu. Pomaga również w uzyskaniu informacji od innych osób, ponieważ zwykle mogą powiedzieć, czy dana kombinacja działa, czy nie (chociaż tylko ktoś mający wyczucie w projektowaniu będzie w stanie powiedzieć ci dlaczego )
thedaian

Tak, myślę, że zdecydowanie ważne jest, aby podkreślić, że nagle nie obudzisz się i nie nauczysz projektowania. Jest to coś, czego uczysz się poprzez doświadczenie.
DeM0nFiRe

„niektórzy ludzie po prostu… nie są w tym zbyt dobrzy” .. To bardzo prawda. Uważam się za wyjątkowo dobrego programistę, ale naprawdę nie udaje mi się projektować i chociaż stopniowo robię się coraz lepszy, postęp jest bardzo powolny. To zawsze mnie bardzo martwiło, ponieważ nie pozwala mi być „niezależnym”, z wyjątkiem takich rzeczy, jak tworzenie serwerów (co w rzeczywistości jest moim ulubionym obszarem, ale dygresję).
Thomas Bonini,

2

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.


Naprawdę nie odpowiada na moje pytanie. Nie mam problemu z zaprojektowaniem gry, mechaniki, fabuły, tła itp., Ale mniejsze problemy, takie jak motyw, wybór schematu kolorów, czcionek, stylu itp. (Nawet po podwójnym specjalizacji w CS i projektowaniu). Naprawdę nie mam żadnych wskazówek „dlaczego X, a nie Y” pod względem ogólnego wyglądu. Właśnie o to mi chodzi. Zredagowałem swoje pytanie, aby je wyjaśnić i uprościć.
ashes999

Ok, przepisałem odpowiednio swój post
DeM0nFiRe

Świetna odpowiedź, ale nie odpowiada na moje pytanie - jak ujednolicić motyw i dowiedzieć się, co zrobić z drobnymi szczegółami, takimi jak wiedza, którego tła użyć. Gra chemiczna była tylko przykładem.
ashes999

2
Odpowiedź nadal obowiązuje. Pierwszą rzeczą, którą musisz zrobić, to zdecydować, co chcesz przedstawić. Dlaczego X, a nie Y, ponieważ X jest lepszy w prezentacji Z. Musisz zdecydować, co to jest Z, to możesz dowiedzieć się, dlaczego X pasuje lepiej niż Y. Pytasz nas o decydowanie o poszczególnych częściach. Nie możesz decydować o poszczególnych częściach, dopóki nie zdecydujesz o całości.
DeM0nFiRe

to powinna być twoja odpowiedź :)
ashes999

1

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.


Zobacz moje zmiany dotyczące wybierania koloru niebieskiego zamiast zielonego. To nie tylko temat, mogę sobie poradzić z tematem; podejmują mnie arbitralne decyzje, takie jak kolorystyka.
ashes999

4
Myślę, że szukasz odpowiedzi w stylu programisty na pytania w stylu artysty. :) Nie sądzę, że przy wyborze schematu kolorów będą myśleć na tak niskim poziomie, jak „niebieski kontra zielony”. Zamiast tego wybiorą cały schemat uzupełniających się kolorów, oparty częściowo na osobistych preferencjach i być może na zgodności z motywem gry, jeśli motyw ten z natury sugeruje schemat kolorów.
Kylotan,

Nie dbam o niebieski kontra zielony.
Zależy

1
Chodzi mi o to, że nie decydują między niebieskim a zielonym. Zwykle pracują na wyższym poziomie, wybierając całe schematy w oparciu o estetykę, zamiast podejmować indywidualne decyzje dotyczące szczegółów. W każdym razie takie jest moje doświadczenie artystów.
Kylotan

1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.