Interfaces 101: le rendre joli


23

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:

Valence 0,1, remplie d'herbe, de rochers et de ciel.

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

La version finale de Valence ressemble plus à une machine et grungy

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.


Je tiens à préciser que cette question n'est pas spécifique à un format ou un jeu ou une plate-forme (sauf peut-être des jeux 2D); il est générique pour tous les jeux que vous pouvez créer.
ashes999

8
Tout d'abord, votre montage a eu lieu trois minutes après mon commentaire. Deuxièmement, vous demandez toujours "Comment cultiver un bon sens du design?" Il existe de nombreux livres, des programmes d'études complets, et oui, même ux.stackexchange.com qui peuvent vous aider à le faire - mais même une douzaine de paragraphes de réponse ici ne vous permettront même pas de démarrer.

1
"Dans ce mode! Dans ce mode, vous avez ..."
Daniel Pendergast

1
@Nevermind: Sauf qu'il y a déjà un UXSE entier consacré à de telles choses.

5
UI! = Design graphique. Les deux exemples ci-dessus ont la même interface utilisateur avec différents thèmes graphiques.
DampeS8N

Réponses:


15

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

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

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

Diablo III

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

Starcraft 2

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

Gran Turismo 5

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.

Dr Mario

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.


8

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:

Tout d'abord, floue Deuxièmement, floue

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.

D'abord, bord Deuxièmement, bord

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.


1
Bel exemple. Le contraste est une considération, la netteté une autre. Une autre chose que je vois beaucoup est la saturation - il est courant que les éléments d'arrière-plan soient désaturés par rapport aux éléments de premier plan (tout comme dans la vie réelle, en raison des effets atmosphériques), et cela aide à concentrer l'œil sur ce qui est pertinent.
Kylotan

J'aimerais pouvoir donner à celui-ci plus d'un +1. Non seulement les niveaux de gris avec ces filtres rendent les problèmes qu'un utilisateur moyen peut avoir instantanément plus évidents, mais peuvent également faciliter la détection des problèmes pour ceux qui ont une vision réduite ou un daltonisme - il est toujours bon de vérifier que votre interface utilisateur peut être lue en niveaux de gris comme une tuile rouge à côté d'une tuile verte peut sembler immédiatement évident pour vous ou moi, mais s'ils étaient les mêmes en niveaux de gris, ils peuvent fusionner pour nos amis duochromes.
theheadofabroom

6

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


5

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.


+1 pour ne pas mélanger les styles. En fait, j'ai suivi des cours de design dans le cadre de ma double majeure, mais cela ne m'aide toujours pas à choisir pourquoi le bleu contre le vert contre le rouge contre ...
ashes999

La réponse de DeM0nFiRe fait un bon travail en couvrant la façon de sélectionner un thème. Le thème, quant à lui, est important pour la conception globale et vous aidera à décider pourquoi le bleu contre le vert contre le rouge contre le rose vif. Cela vaut la peine de consulter des articles / livres sur la théorie des couleurs, les règles, etc. Voici un article sur les règles de couleur trouvé via google: writedesignonline.com/resources/design/rules/color.html
thedaian

1
En général, le choix des couleurs (et tout ce qui concerne le design) demande de la pratique et du temps. Il est également utile d'avoir l'avis d'autres personnes, car elles peuvent généralement vous dire si une combinaison fonctionne ou non (bien que seule une personne
soucieuse

Oui, je pense qu'il est vraiment important de souligner que vous ne vous réveillerez pas soudainement un jour pour apprendre le design. C'est quelque chose que vous apprenez par l'expérience.
DeM0nFiRe

"certaines personnes ... ne sont pas si douées que ça" ... C'est très vrai. Je me considère comme un programmeur exceptionnellement bon, mais je ne parviens vraiment pas à concevoir et même si je m'améliore progressivement, les progrès sont extrêmement lents. Cela m'a toujours beaucoup dérangé car cela ne me permet pas d'être "indépendant", sauf pour des choses comme le développement de serveurs (qui est en fait mon domaine préféré, mais je m'égare).
Thomas Bonini

2

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


Ne répond pas vraiment à ma question. Je n'ai aucun problème à concevoir le jeu, la mécanique, l'histoire, l'arrière-plan, etc., mais des problèmes plus petits comme le thème, le choix des couleurs, des polices, du style, etc. (même après une double spécialisation en CS et en design). Je n'ai vraiment aucune directive sur "pourquoi X et non Y" en termes de look et de toucher. Voilà ce que je recherche. J'ai édité ma question pour clarifier et simplifier.
ashes999

Ok, j'ai réécrit mon message en conséquence
DeM0nFiRe

Excellente réponse, mais ne répond pas à ma question - comment unifier le thème et savoir quoi faire pour les petits détails comme savoir quel arrière-plan utiliser. Le jeu de chimie n'était qu'un exemple.
ashes999

2
La réponse est toujours valable. La première chose que vous devez faire est de décider ce que vous essayez de présenter. Pourquoi X et non Y est parce que X est meilleur pour présenter Z. Vous devez décider ce qu'est Z, alors vous pouvez apprendre pourquoi X correspond mieux que Y. Vous nous demandez comment décider des parties individuelles. Vous ne pouvez pas décider de parties individuelles avant d'avoir décidé de l'ensemble.
DeM0nFiRe

cela devrait être votre réponse :)
ashes999

1

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.


Voir mes modifications concernant le choix du bleu contre le vert. Ce n'est pas seulement le thème, je peux gérer le thème; ce sont les décisions arbitraires qui m'arrivent, comme la palette de couleurs.
ashes999

4
Je pense que vous cherchez des réponses de style programmeur à des questions de style artiste. :) Je ne pense pas qu'ils penseront à un niveau aussi bas que "bleu contre vert" lorsqu'ils choisiront un jeu de couleurs. Au lieu de cela, ils choisiront tout un schéma de couleurs complémentaires, basé en partie sur leurs préférences personnelles et peut-être sur l'adhésion au thème du jeu, si ce thème suggère intrinsèquement un schéma de couleurs.
Kylotan

Je ne me soucie pas du bleu contre le vert. Je me soucie de "Voici comment vous décidez du bleu contre le vert: ..."
ashes999

1
Et mon point est qu'ils ne décident pas entre le bleu ou le vert. Ils travaillent généralement à un niveau supérieur à celui-ci, choisissant des schémas entiers basés sur une esthétique, plutôt que de prendre des décisions individuelles sur les détails. C'est mon expérience des artistes, de toute façon.
Kylotan

1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.