Interfaces 101: Schön machen

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:

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

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.

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 ist in all seinen UI-Elementen wie ein Flipper. Alles ist ein Meter, ein Hebel, eine Düse, ein Sprungbrett.

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

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

Futuristisch, schlank, einfach, minimal (protoss)

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

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:

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.

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.

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

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.

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.

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.

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.