Interfaces 101: le rendre joli

J'ai créé quelques jeux que j'ai en fait sortis dans la nature. Il y a un problème particulier que je rencontre encore et encore, et c'est le problème de l'interface / du thème du jeu.

Comment pouvez-vous prendre des décisions cohérentes et non arbitraires concernant l'apparence et l'interface de votre jeu?

Par exemple, dans la version un de mon jeu basé sur la chimie Silverlight, j'ai pris une (mauvaise?) Décision d'aller avec une apparence naturelle de style paysage, ce qui a abouti à cette interface utilisateur:

Ensuite, dans une itération ultérieure, je suis devenu plus intelligent et j'ai opté pour une apparence plus "machiniste" et grungy, ce qui a abouti à ceci (interface utilisateur finale):

Je dirai certainement que mon goût dans l'interface utilisateur s'est amélioré grâce à l'itération. Mais c'était le résultat de nombreuses décisions arbitraires initialement suivies de nombreux ajustements.

Y a-t-il une meilleure façon de comprendre comment thématiser votre jeu?

Pour donner un parallèle par écrit, lorsque vous écrivez un roman fantastique / science-fiction, il y a beaucoup d'éléments que vous devez décrire. Bien que vous puissiez inventer arbitrairement des objets / créatures / lieux / etc., vous obtenez un monde beaucoup plus cohérent lorsque vous vous asseyez pendant quelques minutes et concevez la zone, la région, la planète ou l'univers. Tout s'accorde alors parfaitement, et vous pouvez vous demander "comment cela fonctionnerait-il dans cet univers?

Edit: Il semble que je n'ai pas bien expliqué cela. Permettez-moi de simplifier la question à l'extrême: quand j'ai besoin de disposer un écran de titre (avec arrière-plan, polices, boutons skinnés) comment puis-je décider à quoi ils doivent ressembler? Vert ou bleu? Grunge ou pas? Arrondi ou plat? Serif ou sans-serif?

Prenez cette question et explosez-la dans votre jeu dans son ensemble. Comment voyez-vous comment les choses devraient ressembler? Quel processus utilisez-vous pour les rendre cohérentes et non arbitraires?

Regardez à nouveau les captures d'écran. J'aurais pu m'en tenir à l'herbe / le ciel / les rochers, mais le métal semblait plus adapté à l'idée de réactions chimiques et d'atomes.

Vous semblez avoir des styles contradictoires.

Jetez un œil à ces interfaces utilisateur de Peggle, Ultima Underworld, Diablo 3, Starcraft 2 et Gran Turismo 5.

Remarquez comment chaque interface utilisateur est cohérente dans son thème .

Peggle est un jeu de flipper comme dans tous ses éléments d'interface utilisateur. Tout est un mètre, un levier, une buse, un tremplin.

Ultima Underworld a des éléments d'interface utilisateur: fer / acier, potions, sacs à dos, cartes. Temps de l'aventure.

Semblable à Ultima Underworld (en fait, semble être basé sur UW)

Futuriste, élégant, simple, minimal (protoss)

Intérieur de voiture

Donc, vous voyez, votre premier design est complètement incohérent et sans thème. Qu'est-ce qu'un champ ouvert a à voir avec votre jeu? Il en va de même pour le fond métallique. Essayez un banc de laboratoire pour le plateau de jeu et un fond de laboratoire de chimie, avec des flacons et des flacons et des gants en caoutchouc et des boîtes de Pétri.

Le Dr Mario est fondamentalement médical, sur les bactéries, les virus et les médicaments.

De plus, l'interface utilisateur devrait avoir des graphiques de style similaire aux éléments de jeu . Les boules de symboles chimiques sont des couleurs solides rondes et légèrement dégradées. Les arrière-plans / plateau de jeu que vous avez choisis ont des styles artistiques qui sont complètement différents des éléments de gameplay. Le champ est une photographie vivante. Le métal est très détaillé, tandis que les billes chimiques sont lisses et relativement non détaillées.

Une chose que je commence à réaliser est très importante: une bonne utilisation du contraste.

Regardez cette première photo. C'est contrasté partout! Le ciel est lumineux, l'horizon est sombre, puis l'herbe lointaine est lumineuse, puis le fond est sombre. Le fond carrelé varie énormément entre extrêmement lumineux et extrêmement sombre. Tout cela n'est pas de l'information. Désordre visuel. Les parties réellement importantes - les cercles - sont noyées par tous les changements de contraste.

Regardez maintenant la deuxième image. Le fond est sombre et relativement monotone. Il y a une bordure lumineuse autour de tout le terrain de jeu. Le fond carrelé est principalement sombre, avec de fines lignes blanches à des endroits importants. Soudain, vous pouvez réellement voir le puzzle, car c'est l'une des choses les plus contrastées.

Personnellement, je le modifierais encore un peu - je rendrais le terrain de jeu plus grungel aussi. Ces lignes blanches pour montrer les divisions de la grille sont importantes, mais le cerveau humain est vraiment bon pour extrapoler des traits droits, et ceux-ci pourraient être beaucoup plus sombres et même un peu brisés.

La grande chose qui me fait sortir de cette interface utilisateur est la barre inférieure. C'est brillant, c'est dans votre visage et c'est difficile de lire le texte. Ce dernier morceau est important - la raison pour laquelle il est difficile de lire le texte est, encore une fois, à cause du contraste. Nous lisons le texte partiellement en recherchant le bord des lettres, mais les lettres se fondent malheureusement bien avec des parties de la barre inférieure.

Ce que je ferais: réajuster la barre du bas pour qu'elle s'adapte bien à l'arrière-plan principal, en termes de contraste. Faites une bordure plus claire entre celui-ci et l'arrière-plan principal pour faire ressortir le fait qu'il est séparé. Débarrassez-vous ensuite de la plupart du texte. Le «diamant» peut devenir un véritable diamant. "Atomes laissés" peut devenir une vue picturale de quelques atomes. Le "temps restant" peut devenir un sablier ou une montre-bracelet ou une montre de poche. "Suivant" peut disparaître complètement - vous dites "vous devez jouer pour voir quels atomes vous obtenez", mais c'est un mécanisme de jeu ennuyeux. Transformez-le en un tas d'atomes sur la droite, assis sur un tapis roulant battu, avec un petit indice de machinerie visuelle pour lequel le prochain de la ligne est. Tada! Puzzle amélioré, interface améliorée, tout semble moins encombré.

Si vous ne devez utiliser du texte, il y a deux façons de contraste de garantie. Tout d'abord, placez votre texte sur quelque chose qui est lui-même à faible contraste. Si le fond est sombre, utilisez du texte clair. Si le fond est clair, utilisez du texte sombre. Si vous ne pouvez pas faire cela (et parfois vous ne pouvez tout simplement pas), n'hésitez pas à utiliser l'effet de lueur extérieure. C'est un excellent moyen de fournir le bon contraste de bordure, quel que soit le texte sur lequel vous vous trouvez.

Lorsque vous jouez avec des interfaces, ouvrez un éditeur d'images, échangez-le en monochrome et essayez deux choses: le flou et la détection des contours. Lorsque votre interface utilisateur est floue monchrome, votre vision devrait automatiquement graviter vers les zones importantes. Lorsqu'il est en détection de bord, les zones importantes doivent être mises en évidence. Exemples:

Comparez ces deux. La première est presque illisible - bien sûr, certaines des gemmes sont visibles, mais beaucoup ne le sont pas. Sur le second, la grille se détache instantanément, tout comme la boîte de dialogue. Bien qu'il n'y ait qu'un seul joyau sur le plateau, vous pouvez instantanément voir où il se trouve.

Le premier accentue massivement les bords de la grille. Certaines pierres précieuses sont presque invisibles. La seconde met l'accent sur ceux qui sont toujours (et plus que je ne le ferais personnellement), mais elle souligne également très fortement la bordure du puzzle, et la gemme est nettement plus (mais toujours pas parfaitement) visible.

Cette méthode n'est en aucun cas une panacée, mais elle peut vous aider à retrouver les choses qui devraient être corrigées. Gardez à l'esprit que la vision humaine est basée sur les bords et le contraste, et concevez votre interface utilisateur pour qu'elle soit lisible par les humains.

(Je vais y arriver du point de vue de la théorie des couleurs)

Je pense que votre question n'est pas de savoir comment créer une interface graphique attrayante, je pense que vous pointez vraiment sur "Comment puis-je choisir l'expérience que je veux offrir à mes joueurs?"

Et c'est surtout une réponse psychologique. Vous mentionnez le choix du bleu, du vert ou du rouge, et ce n'est pas vraiment les couleurs, c'est les émotions que les couleurs vous font ressentir quand vous les voyez.

Si vous avez un jeu rouge (l'arrière-plan est une nuance de rouge, le joueur porte du rouge ou utilise une pièce de jeu rouge, les polices sont toutes une nuance de rouge lisible) comment pensez-vous que vous vous sentiriez si vous jouiez à cela Jeu? Et peu importe le jeu.

On aurait l' impression que le jeu était soit très en colère, soit une sorte de jeu de la Saint Valentin.

C'est là qu'intervient le processus de prise de décision. Si vous voulez que votre joueur ait l'impression de mener une expérience scientifique dans votre jeu de chimie, peut-être pour que tout soit propre et simple. Peut-être quelque chose qui met l'accent sur la couleur blanche.

Si vous voulez que votre joueur se sente comme s'il faisait une sorte de travail de fabrication, où il a l'impression d'être en panne et sale avec la science, alors peut-être votre deuxième image, ou en soulignant les couleurs jaune et noir ensemble.

Si vous voulez que votre joueur se sente en harmonie avec la chimie, comme si c'était une extension d'eux-mêmes et de tous les êtres vivants, votre première photo pourrait être un bon début. Un accent sur les bleus clairs et les verts clairs et les tons naturels comme le brun.

Cela se résume vraiment à l'émotion brute que vous attendez de votre joueur.

Réponse courte: Il n'y a pas de réponse courte.

Le design est un domaine immense, avec des tonnes de livres, d'articles et, comme mentionné, des bibliothèques qui couvrent cette question. Schéma de couleurs, polices, styles, mise en page, utilisation des espaces blancs, des espaces négatifs, des textures, des couleurs et de leur signification dans différentes cultures, pourquoi la bande dessinée sans est mauvaise et ne doit jamais être utilisée. Il y a des cours, des livres, des blogs, des articles de recherche et des sites Web dédiés à ce genre de choses. Il n'y aura pas de réponse simple à cela, car la question en demande beaucoup.

Cela dit: Franchement, votre meilleure option est d'embaucher un designer pour vous aider. Si cela ne fait pas partie de votre budget, faites-vous des amis avec un designer pour vous aider. Si ce n'est pas possible, vous devrez peut-être faire cavalier seul pendant un certain temps.

Donc, quelques conseils. Pour les jeux de couleurs, utilisez quelque chose comme un concepteur de jeux de couleurs . Passez un peu de temps à apprendre comment les couleurs fonctionnent ensemble, et généralement, essayez de ne choisir que quelques couleurs, n'allez pas trop loin. La limite doit être d'environ 3 couleurs.

Pour les polices, eh bien, il y a des articles entiers et des articles de recherche (en voici un sur serif vs sans serif ). Encore une fois, la règle générale est de choisir au plus deux polices. Un bon choix est de choisir une police qui n'est pas celle par défaut, mais qui a quand même l'air bien. Si c'est une option, Helvetica est plutôt sympa, mais il y en a plein d'autres bons.

Pour le style et / ou le thème, celui-ci est encore plus difficile à répondre. Je pense que le plus gros conseil ici est d' être cohérent avec votre style . N'essayez pas de mélanger la nature avec la scifi ou les dessins au trait fragmentaires avec ses modèles poly 3D res. Cela signifie principalement trouver un artiste pour faire TOUT l'art, ou le faire vous-même (dans le cas des grandes entreprises, c'est pourquoi il y a une piste artistique). Le thème est quelque chose avec lequel vous devrez jouer, sauf si vous avez un thème défini à l'esprit avant de commencer. Honnêtement, cela pourrait changer au fil du temps et vous aurez plus de jeu. Il y a de fortes chances que ce thème change au cours du développement, en fait.

Dans l'ensemble, bien que le design puisse être enseigné, certaines personnes ne sont tout simplement pas si douées dans ce domaine (un peu comme la programmation). C'est là qu'avoir un ami du design pour vous aider est utile.

ÉDITÉ:

Ok, j'ai réécrit ceci, maintenant que je comprends mieux la question.

La raison pour laquelle je me suis trompé est que vous avez essayé de donner un parallèle par écrit, mais l'exemple que vous avez n'est pas du tout parallèle. La conception d'une interface utilisateur est une question de présentation. Le contenu d'un livre concerne la substance réelle.

Donc, en regardant la conception de l'interface utilisateur comme une question de présentation, vous devez penser à ce que vous voulez présenter. Je veux dire, bien sûr, vous essayez de présenter votre jeu, mais quoi d'autre? Voulez-vous qu'il paraisse professionnel? Amusement? Sombre? Lumière?

À titre d'exemple, je vais regarder les deux images que vous avez publiées et vous dire les impressions que j'en retire.

Le premier, il y a certains aspects évidents que nous pouvons examiner. C'est plus clair que la deuxième image, bien sûr. Ajoutez cela au fait que vous avez choisi une image d'un champ avec de la profondeur (car le champ s'incline loin du spectateur) et la sensation est beaucoup plus expansive. Il se sent plus libre, il se sent plus léger.

Lorsque vous regardez la deuxième image, elle est bien sûr beaucoup plus sombre. Il a également un arrière-plan qui est une image plate perpendiculaire à la ligne de visée du spectateur, supprimant ce sentiment de profondeur continue que la première image avait. Ajoutez que les seuls indices de profondeur réels proviennent de l'ombrage sur le placage au diamant, et cela rapproche cette image d'arrière-plan très près de la caméra. Tous ces éléments s'ajoutent pour lui donner une sensation beaucoup plus sombre et plus claustrophobe.

Alors maintenant, que pouvez-vous faire avec les deux thèmes? Eh bien, le premier thème est quelque chose qui pourrait être bon si ce que vous voulez faire est de le rendre plus décontracté. Cela donne une sorte de sens comme ce que le joueur fait en ce moment avec les pièces de jeu n'est pas tout ce qui se passe dans le monde. La deuxième image lui donne plus un sentiment d'urgence. Le «monde connu» du jeu est beaucoup plus petit et met davantage l'accent sur ce que fait le joueur.

S'agit-il vraiment de «faire joli»? C'est une chose subjective, et je pense que la première capture d'écran est meilleure que la seconde.

Choisir un thème n'est pas vraiment sorcier - vous connaissez le contenu clé ou le but de votre jeu, et vous pouvez le garder à l'esprit lorsque vous choisissez tous les autres aspects qui vont avec.

Une chose que personne d'autre ne semble avoir mentionnée jusqu'à présent: demandez à certaines des personnes qui vont jouer au jeu leurs commentaires. Les concepteurs d'interface utilisateur passent beaucoup de temps à montrer des conceptions aux utilisateurs et à découvrir ce qui est bien ou mal avec eux, qu'ils conçoivent un jeu, un traitement de texte ou un poste de pilotage.