Interfaces 101: Schön machen

23

Ich habe ein paar Spiele gemacht, die ich tatsächlich veröffentlicht habe. Es gibt ein bestimmtes Problem, auf das ich immer wieder stoße, und das ist das Thema der Benutzeroberfläche / des Themas des Spiels.

Wie können Sie nicht willkürliche, konsistente Entscheidungen über das Erscheinungsbild und die Benutzeroberfläche Ihres Spiels treffen?

In Version 1 meines auf Silverlight-Chemie basierenden Spiels habe ich beispielsweise die (schlechte?) Entscheidung getroffen, ein natürliches, landschaftliches Erscheinungsbild zu verwenden, was zu folgender Benutzeroberfläche führte:

Wertigkeit 0.1, reich an Gras, Steinen und Himmel.

Dann, in einer späteren Iteration, wurde ich schlauer und ging mit einem "maschinelleren", grungigen Look-and-Feel um, was zu folgendem Ergebnis führte (endgültige Benutzeroberfläche):

Die endgültige Version von Valence wirkt eher maschinenhaft und schmuddelig

Ich werde definitiv sagen, dass sich mein Geschmack in der Benutzeroberfläche durch Iteration verbessert hat. Aber es war das Ergebnis vieler anfänglich willkürlicher Entscheidungen, gefolgt von vielen Optimierungen.

Gibt es einen besseren Weg, um herauszufinden, wie Sie Ihr Spiel thematisieren können?


Um beim Schreiben eine Parallele zu geben: Wenn Sie einen Fantasy- / Science-Fiction-Roman schreiben, müssen Sie viele Elemente beschreiben. Während Sie Objekte / Kreaturen / Orte / etc. Beliebig erfinden können, erhalten Sie eine viel einheitlichere Welt, wenn Sie sich für ein paar Minuten hinsetzen und den Bereich, die Region, den Planeten oder das Universum entwerfen. Dann passt alles gut zusammen und man kann sich fragen, "wie würde das in diesem Universum funktionieren?

Edit: Es scheint, als hätte ich das nicht gut erklärt. Lassen Sie mich die Frage im Extrem vereinfachen: Wenn ich einen Titelbildschirm (mit Hintergrund, Schriftarten, Schaltflächen mit Skin) auslegen muss, wie entscheide ich, wie sie aussehen sollen? Grün oder blau? Grunge oder nicht? Abgerundet oder flach? Serife oder serifenlose?

Nehmen Sie diese Frage und bringen Sie sie in Ihr Spiel als Ganzes ein. Wie findest du heraus, wie die Dinge aussehen sollten? Welchen Prozess verwenden Sie, um sie konsistent und nicht willkürlich zu machen?

Schauen Sie sich die Screenshots noch einmal an. Ich hätte an Gras / Himmel / Felsen kleben können, aber Metall schien besser zu der Idee von chemischen Reaktionen und Atomen zu passen.

ashes999
quelle
Ich möchte klarstellen, dass diese Frage nicht spezifisch für ein Format, ein Spiel oder eine Plattform ist (mit Ausnahme von 2D-Spielen). Es ist generisch für alle Spiele, die Sie erstellen.
Ashes999
8
Zuerst geschah deine Bearbeitung drei Minuten nach meinem Kommentar. Zweitens fragen Sie immer noch: "Wie pflege ich einen guten Sinn für Design?" Es gibt viele Bücher, ganze Studiengänge und sogar ux.stackexchange.com , die Ihnen dabei helfen können - aber selbst ein Dutzend Absätze der Antwort hier bringen Sie nicht einmal zum Einstieg.
1
"In diesem Modus! In diesem Modus haben Sie ..."
Daniel Pendergast
1
@Nevermind: Außer, dass es bereits ein ganzes UXSE gibt, das sich solchen Dingen widmet.
5
UI! = Grafikdesign. Beide obigen Beispiele haben dieselbe Benutzeroberfläche mit unterschiedlichen grafischen Themen.
DampeS8N

Antworten:

15

Sie scheinen widersprüchliche Stile zu haben.

Schauen Sie sich diese Benutzeroberflächen von Peggle, Ultima Underworld, Diablo 3, Starcraft 2 und Gran Turismo 5 an.

Beachten Sie, wie jede Benutzeroberfläche innerhalb ihres Themas konsistent ist .

Peggle

Peggle ist in all seinen UI-Elementen wie ein Flipper. Alles ist ein Meter, ein Hebel, eine Düse, ein Sprungbrett.

Ultima Unterwelt

Ultima Underworld enthält UI-Elemente wie Eisen / Stahl, Tränke, Rucksäcke und Karten. Abenteuer-Zeit.

Diablo III

Ähnlich wie Ultima Unterwelt (in der Tat scheint auf UW basieren)

Starcraft 2

Futuristisch, schlank, einfach, minimal (protoss)

Gran Turismo 5

Autoinnenraum

Wie Sie sehen, ist Ihr erstes Design völlig inkonsistent und unbeachtet. Was hat ein offenes Feld mit deinem Spiel zu tun? Gleiches gilt für den Metallhintergrund. Probieren Sie eine Laborbank für das Spielbrett und einen Chemielaborhintergrund mit Flaschen und Fläschchen sowie Gummihandschuhen und Petrischalen.

Dr. Mario

Dr. Mario ist im Grunde genommen medizinisch, bakteriell, virus- und medikamentös

Außerdem sollte die Benutzeroberfläche ähnlich gestaltete Grafiken wie die Spielelemente haben . Die chemischen Symbolkugeln sind runde und gleichmäßig abgestufte Farben. Die von Ihnen gewählten Hintergründe / Spielbretter haben einen anderen Stil als die Spielelemente. Das Feld ist eine lebendige Fotografie. Das Metall ist sehr detailliert, während die chemischen Kugeln glatt und relativ unvollständig sind.

Bobobobo
quelle
8

Eine Sache, die mir langsam klar wird, ist sehr wichtig: den richtigen Umgang mit Kontrast.

Schau dir das erste Bild an. Es ist überall kontrastreich! Der Himmel ist hell, der Horizont ist dunkel, dann ist das ferne Gras hell, dann ist der Grund dunkel. Der gekachelte Hintergrund variiert wild zwischen extrem hell und extrem dunkel. All dies ist keine Information. Visuelle Unordnung. Die eigentlichen wichtigen Teile - die Kreise - werden von allen Kontraständerungen überstrahlt.

Schauen Sie sich jetzt das zweite Bild an. Der Hintergrund ist dunkel und relativ monoton. Das gesamte Spielfeld ist hell umrandet. Der gekachelte Hintergrund ist größtenteils dunkel und weist an wichtigen Stellen dünne weiße Linien auf. Plötzlich kann man das Puzzle tatsächlich sehen, weil es eines der kontrastreichsten Dinge ist, die es gibt.

Persönlich würde ich es immer noch ein bisschen optimieren - ich würde das Spielfeld auch grungiger aussehen lassen. Diese weißen Linien zur Darstellung der Gitterteilung sind wichtig, aber das menschliche Gehirn ist wirklich gut darin, gerade Merkmale zu extrapolieren, und diese können viel dunkler und sogar ein wenig aufgebrochen sein.

Die große Sache, die mich aus dieser Benutzeroberfläche rauswirft, ist die untere Leiste. Es ist hell, es ist in deinem Gesicht und es ist schwer, den Text zu lesen. Das letzte bisschen ist wichtig - der Grund, warum es schwierig ist, den Text zu lesen, ist wiederum der Kontrast. Wir lesen den Text teilweise, indem wir nach dem Rand der Buchstaben suchen, aber die Buchstaben passen leider gut zu Teilen der unteren Leiste.

Was ich tun würde: Den unteren Balken neu ausrichten, damit er in Bezug auf den Kontrast gut zum Haupthintergrund passt. Machen Sie eine hellere Grenze zwischen dem Hintergrund und dem Haupthintergrund, um die Tatsache zu verdeutlichen, dass es separat ist. Dann werde den größten Teil des Textes los. "Diamant" kann ein echter Diamant werden. "Atoms left" kann zu einer bildlichen Darstellung einiger Atome werden. "Verbleibende Zeit" kann eine Sanduhr oder eine Armbanduhr oder eine Taschenuhr werden. "Weiter" kann ganz verschwinden - Sie sagen, "Sie müssen durchspielen, um zu sehen, welche Atome Sie bekommen", aber das ist eine nervige Spielmechanik. Verwandle es in einen Atomstapel auf der rechten Seite, sitzend auf einem zerfetzten Förderband, mit einem kleinen visuellen Maschinenhinweis, für den der nächste in der Reihe steht. Tada! Puzzle verbessert, Interface verbessert, alles sieht weniger überladen aus.

Wenn Sie Sie Text verwenden müssen, gibt es zwei Möglichkeiten , um Garantie Kontrast. Stellen Sie Ihren Text zunächst auf etwas, das selbst kontrastarm ist. Wenn der Hintergrund dunkel ist, verwenden Sie hellen Text. Wenn der Hintergrund hell ist, verwenden Sie dunklen Text. Wenn Sie das nicht können (und manchmal auch nicht), zögern Sie nicht, den äußeren Glüheffekt zu verwenden. Es ist eine großartige Möglichkeit, den richtigen Randkontrast zu erzielen, unabhängig davon, auf welchem ​​Text sich Ihr Text befindet.

Wenn Sie mit Oberflächen spielen, öffnen Sie einen Bildeditor, tauschen Sie ihn gegen Schwarzweiß aus und versuchen Sie zwei Dinge: Unschärfe und Kantenerkennung. Wenn Ihre Benutzeroberfläche monchrom verschwommen ist, sollte sich Ihre Sicht automatisch auf die wichtigen Bereiche konzentrieren. Wenn die Kantenerkennung aktiviert ist, sollten die wichtigen Bereiche hervorgehoben werden. Beispiele:

Erstens verschwommen Zweitens verschwommen

Vergleichen Sie diese beiden. Der erste ist fast unlesbar - sicher, einige der Edelsteine ​​sind sichtbar, aber viele von ihnen sind es nicht. Auf der zweiten Ebene fällt das Raster sofort auf, ebenso wie das Dialogfeld. Während es nur einen Edelstein auf dem Brett gibt, können Sie sofort sehen, wo es ist.

Erstens Rand Zweitens Rand

Der erste betont massiv die Gitterkanten. Einige der Edelsteine ​​sind fast unsichtbar. Die zweite betont die noch (und mehr als ich persönlich würde), aber es betont auch den Rand des Puzzles sehr stark, und der Edelstein ist deutlich mehr (wenn auch immer noch nicht perfekt) sichtbar.

Diese Methode ist keineswegs ein Allheilmittel, aber sie kann Ihnen helfen, Dinge zu finden, die behoben werden sollten. Denken Sie daran, dass das menschliche Sehen auf Kanten und Kontrasten basiert, und gestalten Sie Ihre Benutzeroberfläche so, dass sie von Menschen gelesen werden kann.

ZorbaTHut
quelle
1
Nettes Beispiel. Kontrast ist eine Überlegung, Schärfe eine andere. Eine weitere Tatsache, die ich sehr oft sehe, ist die Sättigung. Hintergrundelemente sind häufig im Vergleich zu Vordergrundelementen entsättigt (wie im wirklichen Leben aufgrund von atmosphärischen Effekten), und dies hilft, das Auge auf das Wesentliche zu fokussieren.
Kylotan
Ich wünschte, ich könnte diesem mehr als +1 geben. Graustufen mit diesen Filtern führen nicht nur zu Problemen, die ein durchschnittlicher Benutzer möglicherweise sofort bemerkt, sondern sie können auch dazu beitragen, dass Probleme für Benutzer mit Sehstörungen oder Farbenblindheit leichter erkennbar sind. Es ist immer gut, zu überprüfen, ob die Benutzeroberfläche eingelesen werden kann Graustufen als rote Kachel neben einer grünen Kachel sehen für Sie oder mich sofort offensichtlich aus, aber wenn sie in Graustufen identisch wären, könnten sie für unsere duochromatischen Freunde zusammengeführt werden.
theheadofabroom
6

(Ich werde dies aus einer farbtheoretischen Perspektive kommen)

Ihrer Meinung nach geht es bei Ihrer Frage nicht darum, wie man eine attraktive Benutzeroberfläche erstellt, sondern es geht um die Frage: "Wie wähle ich die Erfahrung aus, die ich meinen Spielern bieten möchte?"

Und das ist meistens eine psychologische Antwort. Sie erwähnen die Wahl zwischen Blau, Grün oder Rot, und es geht nicht wirklich um die Farben, es geht um die Emotionen, die die Farben hervorrufen, wenn Sie sie sehen.

Wenn Sie ein Spiel haben, das rot ist (der Hintergrund ist eine rote Farbe, der Spieler trägt rot oder verwendet eine rote Spielfigur, die Schriftarten sind alle in einer lesbaren roten Farbe), wie würden Sie sich fühlen, wenn Sie dies spielen? Spiel? Und es ist egal, was das Spiel ist.

Sie würden denken, dass das Spiel entweder sehr wütend war oder eine Art Valentinstagspiel.

Hier kommt der Entscheidungsprozess ins Spiel. Wenn Sie möchten, dass Ihr Spieler das Gefühl hat, ein wissenschaftliches Experiment in Ihrem Chemie-Spiel durchzuführen, machen Sie vielleicht alles klar und einfach. Vielleicht etwas, das die Farbe Weiß betont.

Wenn Sie möchten, dass Ihr Spieler das Gefühl hat, eine Art Fertigungsarbeit zu verrichten, bei der er das Gefühl hat, mit der Wissenschaft in Konflikt zu geraten, dann vielleicht Ihr zweites Bild oder das Hervorheben der Farben Gelb und Schwarz zusammen.

Wenn Sie möchten, dass sich Ihr Spieler mit der Chemie eins fühlt, als wäre es eine Erweiterung seiner selbst und aller Lebewesen, dann könnte Ihr erstes Bild ein guter Anfang sein. Eine Betonung auf hellem Blau und hellem Grün und natürlichen Brauntönen.

Es kommt wirklich auf die rohe Emotion an, die Sie von Ihrem Spieler erwarten.

OghmaOsiris
quelle
5

Kurze Antwort: Es gibt keine kurze Antwort.

Design ist ein riesiges Feld mit Tonnen von Büchern, Artikeln und, wie bereits erwähnt, Bibliotheken , die sich mit dieser Frage befassen. Farbschema, Schriftarten, Stile, Layout, Verwendung von Leerzeichen, negative Leerzeichen, Texturen, Farben und deren Bedeutungen in verschiedenen Kulturen, warum Comic Sans böse ist und niemals verwendet werden sollte. Es gibt Kurse, Bücher, Blogs, Forschungsberichte und Websites, die sich dieser Art von Dingen widmen. Es wird keine einfache Antwort darauf geben, da die Frage viel verlangt.

Das heißt: Ehrlich gesagt, ist Ihre beste Option, einen Designer zu engagieren, der Ihnen hilft. Wenn das aus Ihrem Budget heraus ist, schließen Sie Freunde mit einem Designer, um zu helfen. Wenn das nicht möglich ist, müssen Sie es möglicherweise für eine Weile alleine machen.

Also ein paar Tipps. Verwenden Sie für Farbschemata so etwas wie einen Farbschema- Designer . Verbringen Sie einige Zeit damit, zu lernen, wie Farben zusammenarbeiten, und versuchen Sie im Allgemeinen, nur ein paar Farben auszuwählen, und gehen Sie nicht über Bord. Die Grenze sollte ungefähr 3 Farben sein.

Nun, für Schriften gibt es ganze Artikel und Forschungsarbeiten (hier geht es um Serif vs. Sans Serif ). Auch hier gilt die allgemeine Regel, höchstens zwei Schriftarten auszuwählen. Eine gute Wahl ist es, eine Schriftart auszuwählen, die nicht die Standardeinstellung ist, aber trotzdem gut aussieht. Wenn es eine Option ist, ist Helvetica ziemlich nett, aber es gibt viele andere gute da draußen.

Für Stil und / oder Thema ist dieses noch schwieriger zu beantworten. Ich denke, der größte Tipp hier ist, Ihrem Stil zu entsprechen . Versuchen Sie nicht, mit seinen 3D-Poly-Modellen die Natur mit Scifi oder skizzenhaften Strichzeichnungen zu verschmelzen. Dies bedeutet meistens, einen Künstler zu finden, der ALLE Kunstwerke macht, oder es selbst zu tun (bei großen Unternehmen gibt es deshalb einen künstlerischen Leiter). Das Thema ist etwas, mit dem Sie spielen müssen, es sei denn, Sie haben ein festgelegtes Thema im Auge, bevor Sie beginnen. Ehrlich gesagt, es könnte sich im Laufe der Zeit ändern und Sie haben mehr von dem Spiel getan. Die Chancen stehen gut, dass sich das Thema im Laufe der Entwicklung ändert.

Obwohl Design gelehrt werden kann, sind einige Leute einfach ... nicht so gut darin (ähnlich wie beim Programmieren). Hier hilft Ihnen ein Design-Freund.

thedaian
quelle
+1, wenn Stile nicht gemischt werden. Eigentlich habe ich
Designkurse
Die Antwort von DeM0nFiRe leistet gute Arbeit bei der Auswahl eines Themas. Das Thema ist für das Gesamtdesign wichtig und hilft Ihnen bei der Entscheidung, warum Blau gegen Grün gegen Rot gegen Hellrosa. Es lohnt sich, Artikel / Bücher über Farbtheorie, Regeln usw. zu lesen
thedaian
1
Im Allgemeinen erfordert die Farbauswahl (und alles, was mit Design zusammenhängt) Übung und Zeit. Es ist auch hilfreich, wenn Sie Beiträge von anderen Personen erhalten, da diese Ihnen normalerweise mitteilen können, ob eine Kombination funktioniert oder nicht (obwohl nur jemand, der ein Auge für Design hat, Ihnen sagen kann, warum )
Thedaian
Ja, ich denke es ist definitiv wichtig zu betonen, dass man eines Tages nicht plötzlich aufwacht und Design lernt. Es ist etwas, was man durch Erfahrung lernt.
DeM0nFiRe
"Manche Leute sind einfach ... nicht so gut darin" .. Das ist sehr wahr. Ich betrachte mich als einen außergewöhnlich guten Programmierer, aber ich kann wirklich nicht entwerfen und obwohl ich allmählich besser werde, geht der Fortschritt extrem langsam voran. Das hat mich immer sehr gestört, weil es mich nicht "unabhängig" macht, abgesehen von Dingen wie der Serverentwicklung (die eigentlich mein Lieblingsgebiet ist, aber ich schweife ab).
Thomas Bonini
2

BEARBEITET:

Ok, ich habe das umgeschrieben, jetzt wo ich die Frage besser verstehe.

Der Grund, warum ich verwirrt war, ist, dass Sie versucht haben, eine Parallele schriftlich anzugeben, aber das Beispiel, das Sie haben, ist überhaupt nicht parallel. Das Design einer Benutzeroberfläche ist eine Frage der Präsentation. Der Inhalt eines Buches handelt von der eigentlichen Substanz.

Wenn Sie das Design der Benutzeroberfläche als eine Frage der Präsentation betrachten, müssen Sie überlegen, was Sie präsentieren möchten. Ich meine, du versuchst natürlich, dein Spiel zu präsentieren, aber was noch? Möchten Sie, dass es professionell aussieht? Spaß? Dunkel? Licht?

Als Beispiel schaue ich mir die beiden Bilder an, die Sie gepostet haben, und erzähle Ihnen die Eindrücke, die ich von ihnen bekomme.

Zum einen gibt es einige offensichtliche Aspekte, die wir uns ansehen können. Es ist natürlich heller als das zweite Bild. Fügen Sie dies der Tatsache hinzu, dass Sie ein Bild eines Feldes mit Tiefenwirkung gewählt haben (da sich das Feld vom Betrachter weg neigt), und dass das Gefühl sehr viel größer ist. Es fühlt sich freier an, es fühlt sich unbeschwerter an.

Wenn Sie sich das zweite Bild ansehen, ist es natürlich viel dunkler. Es hat auch einen Hintergrund, der ein flaches Bild ist, das senkrecht zur Sichtlinie des Betrachters steht und das Gefühl der anhaltenden Tiefe des ersten Bildes aufhebt. Fügen Sie hinzu, dass die einzigen wirklichen Tiefenmarkierungen von der Schattierung der Diamantbeschichtung herrühren und das Hintergrundbild sehr nahe an die Kamera heranreicht. All dies zusammen ergibt ein viel dunkleres, klaustrophobischeres Gefühl.

Was können Sie nun mit den beiden Themen tun? Nun, das erste Thema ist etwas, das gut sein könnte, wenn Sie es sich lässiger anfühlen lassen möchten. Es gibt eine Art Sinn, als ob das, was der Spieler gerade mit den Spielfiguren tut, nicht alles ist, was in der Welt vor sich geht. Das zweite Bild vermittelt ein Gefühl der Dringlichkeit. Die "bekannte Welt" des Spiels ist viel kleiner und es wird mehr Wert darauf gelegt, was der Spieler tut.

DeM0nFiRe
quelle
Beantwortet meine Frage nicht wirklich. Ich habe keine Probleme beim Entwerfen des Spiels, der Mechanik, der Geschichte, des Hintergrunds usw., aber kleinere Probleme wie das Thema, die Wahl des Farbschemas, der Schriftarten, des Stils usw. (auch nach Doppelmajor in CS und Design). Ich habe wirklich keine Richtlinien für "Warum X und nicht Y" in Bezug auf das allgemeine Erscheinungsbild. Das ist, wonach ich bin. Ich habe meine Frage bearbeitet, um sie zu klären und zu vereinfachen.
Asche999
Ok, ich habe meinen Beitrag entsprechend umgeschrieben
DeM0nFiRe
Gute Antwort, aber meine Frage nicht beantwortet - wie man ein Thema vereinheitlicht und herausfindet, was zu tun ist, wenn man kleine Details wie den zu verwendenden Hintergrund kennt. Chemie-Spiel war nur ein Beispiel.
Asche999
2
Die Antwort gilt immer noch. Zunächst müssen Sie entscheiden, was Sie präsentieren möchten. Warum X und nicht Y ist, weil X Z besser darstellen kann. Sie müssen sich entscheiden, was Z ist. Dann können Sie herausfinden, warum X besser passt als Y. Sie fragen uns, ob Sie die einzelnen Teile bestimmen möchten. Sie können nicht einzelne Teile entscheiden, bis Sie das Ganze entschieden haben.
DeM0nFiRe
Das sollte deine Antwort sein :)
ashes999
1

Geht es wirklich darum, es hübsch zu machen? Das ist eine subjektive Sache, und ich denke, der erste Screenshot sieht besser aus als der zweite.

Das Auswählen eines Themas ist keine Raketenwissenschaft - Sie kennen den Hauptinhalt oder den Zweck Ihres Spiels und behalten dies im Hinterkopf, wenn Sie jeden anderen Aspekt auswählen, der dazugehört.

Kylotan
quelle
Siehe meine Änderungen zum Auswählen von Blau im Vergleich zu Grün. Es ist nicht nur das Thema, ich kann mit dem Thema umgehen; Es sind die willkürlichen Entscheidungen, die mich bewegen, wie das Farbschema.
Asche999
4
Ich denke, Sie suchen nach programmiererartigen Antworten auf künstlerische Fragen. :) Ich glaube nicht, dass sie bei der Auswahl eines Farbschemas auf einem so niedrigen Niveau wie "Blau gegen Grün" denken werden. Stattdessen wählen sie ein komplementäres Farbschema aus, das teilweise auf persönlichen Vorlieben und möglicherweise auf der Einhaltung des Spielthemas beruht, wenn dieses Thema an sich ein Farbschema nahelegt.
Kylotan
Ich interessiere mich nicht für Blau gegen Grün. Ich interessiere mich für "So entscheidest du dich für Blau gegen Grün: ..."
ashes999 07.10.11
1
Mein Punkt ist, dass sie sich nicht zwischen Blau oder Grün entscheiden. Normalerweise arbeiten sie auf einer höheren Ebene, indem sie ganze Entwürfe auf der Grundlage einer Ästhetik auswählen, anstatt einzelne Entscheidungen im Detail zu treffen. Das ist sowieso meine Erfahrung mit Künstlern.
Kylotan
1

Eine Sache scheint noch niemand erwähnt zu haben: Fragen Sie einige der Leute, die das Spiel spielen werden, nach ihrem Feedback. UI-Designer verbringen viel Zeit damit, den Benutzern Designs zu zeigen und herauszufinden, was mit ihnen richtig oder falsch ist, ob sie ein Spiel, ein Textverarbeitungsprogramm oder ein Flight Deck entwerfen.

calum_b
quelle