Interfaces 101: Tornando as coisas bonitas

Eu fiz alguns jogos que eu realmente lancei na natureza. Há um problema em particular que me deparo repetidamente, e esse é o problema da interface / tema do jogo.

Como você pode tomar decisões consistentes e não arbitrárias sobre a aparência e a interface do seu jogo?

Por exemplo, na versão um do meu jogo baseado em química do Silverlight, tomei uma decisão (ruim?) De usar uma aparência natural e estilo de paisagem, o que resultou nessa interface:

Então, em uma iteração posterior, fiquei mais esperto e segui com uma aparência mais "mecânica" e suja, o que resultou nessa (interface do usuário final):

Definitivamente, direi que meu gosto na interface do usuário melhorou através da iteração. Mas foi o resultado de muitas decisões inicialmente arbitrárias, seguidas de muitos ajustes.

Existe uma maneira melhor de descobrir como tema do seu jogo?

Para dar um paralelo na escrita, quando você está escrevendo um romance de fantasia / ficção científica, há muitos elementos que você precisa descrever. Embora você possa inventar arbitrariamente objetos / criaturas / lugares / etc., Você obtém um mundo muito mais consistente quando se senta por alguns minutos e projeta a área, região, planeta ou universo. Tudo então se encaixa muito bem, e você pode se perguntar "como isso funcionaria neste universo?

Edit: Parece que eu não expliquei isso bem. Deixe-me simplificar a questão ao extremo: quando preciso exibir uma tela de título (com plano de fundo, fontes, botões de pele), como decido como elas devem aparecer? Verde ou azul? Grunge ou não? Arredondado ou plano? Serifa ou sem serifa?

Tome essa pergunta e exploda-a no seu jogo como um todo. Como você descobre como as coisas devem ficar? Que processo você usa para torná-los consistentes e não arbitrários?

Veja as imagens novamente. Eu poderia ter ficado preso à grama / céu / rochas, mas o metal parecia mais adequado à idéia de reações químicas e átomos.

Você parece ter estilos conflitantes.

Veja estas interfaces de usuário de Peggle, Ultima Underworld, Diablo 3, Starcraft 2 e Gran Turismo 5.

Observe como cada interface do usuário é consistente dentro do seu tema .

O Peggle é o pin-ball, como em todos os seus elementos de interface do usuário. Tudo é um metro, uma alavanca, um bico, um trampolim.

Ultima Underworld tem elementos de interface do usuário são ferro / aço, poções, mochilas, mapas. Hora de Aventura.

Semelhante ao submundo Ultima (na verdade, parece ser baseado em UW)

Futurista, elegante, simples, mínimo (protoss)

Interior do carro

Então você vê, seu primeiro design é completamente inconsistente e não temático. O que um campo aberto tem a ver com o seu jogo? O mesmo vale para o fundo de metal. Tente uma bancada de laboratório para o tabuleiro de jogo e um fundo de laboratório de química, com frascos e frascos, luvas de borracha e placas de Petri.

Dr. Mario é basicamente médico, bactérias, vírus, remédios

Além disso, a interface do usuário deve ter gráficos com estilo semelhante aos elementos de jogo . As bolas de símbolos químicos são redondas e classificam com suavidade as cores sólidas. Os fundos / tabuleiro de jogo que você escolheu têm estilos de arte completamente diferentes dos elementos de jogabilidade. O campo é uma fotografia vívida. O metal é muito detalhado, enquanto as esferas químicas são lisas e relativamente detalhadas.

Uma coisa que estou começando a perceber é muito importante: uso adequado do contraste.

Olhe para a primeira foto. É um contraste por todo o lado! O céu está claro, o horizonte está escuro, então a grama distante está clara, então o fundo está escuro. O fundo lado a lado varia muito entre extremamente brilhante e extremamente escuro. Tudo isso é não-informação. Desordem visual. As partes importantes reais - os círculos - são abafadas por todas as mudanças de contraste.

Agora olhe para a segunda foto. O fundo é escuro e relativamente monótono. Há uma borda brilhante em todo o campo de jogo. O fundo lado a lado é principalmente escuro, com finas linhas brancas em locais importantes. De repente, você pode realmente ver o quebra-cabeça, porque é uma das coisas mais contrastantes do mercado.

Pessoalmente, eu ainda o ajustaria um pouco - tornaria o campo de jogo mais sujo também. Essas linhas brancas para mostrar as divisões da grade são importantes, mas o cérebro humano é realmente bom em extrapolar características retas, e essas podem ser muito mais escuras e até fragmentadas.

A grande coisa que me tira dessa interface é a barra inferior. É brilhante, está na sua cara e é difícil ler o texto. Essa última parte é importante - a razão pela qual é difícil ler o texto é, novamente, por causa do contraste. Lemos o texto parcialmente procurando a borda das letras, mas infelizmente as letras se combinam bem com partes da barra inferior.

O que eu faria: Reajuste a barra inferior para se ajustar bem ao plano de fundo principal, em termos de contraste. Faça uma borda mais clara entre ele e o plano de fundo principal para entender o fato de que é separado. Então, livre-se da maior parte do texto. "Diamante" pode se tornar um diamante real. "Átomos restantes" podem se tornar uma visão pictórica de alguns átomos. O "tempo restante" pode se tornar uma ampulheta, um relógio de pulso ou um relógio de bolso. "Next" pode desaparecer completamente - você diz "você tem que jogar para ver quais átomos obtém", mas essa é uma mecânica de jogo irritante. Transforme-o em uma pilha de átomos à direita, sentado em uma correia transportadora surrada, com uma pequena pista de maquinário visual para a qual é a próxima na fila. Tada! Quebra-cabeça melhorada, interface melhorada, tudo parece menos confuso.

Se você não precisa usar texto, há duas maneiras de contraste garantia. Primeiro, coloque seu texto em algo com baixo contraste. Se tiver um fundo escuro, use texto claro. Se tiver um fundo claro, use texto escuro. Se você não pode fazer isso (e às vezes não consegue), não hesite em usar o efeito de brilho externo. É uma ótima maneira de fornecer o contraste da borda direita, independentemente do seu texto.

Quando estiver jogando com interfaces, abra um editor de imagens, troque-o para monocromático e tente duas coisas: desfoque e detecção de borda. Quando sua interface do usuário está monocromática borrada, sua visão deve gravitar automaticamente nas áreas importantes. Quando estiver na detecção de borda, as áreas importantes devem ser destacadas. Exemplos:

Compare esses dois. O primeiro é quase ilegível - com certeza, algumas das jóias são visíveis, mas muitas delas não são. No segundo, a grade se destaca instantaneamente, assim como a caixa de diálogo. Embora exista apenas uma jóia no tabuleiro, você pode ver instantaneamente onde ela está.

O primeiro enfatiza massivamente as arestas da grade. Algumas das gemas são quase invisíveis. O segundo enfatiza aqueles ainda (e mais do que eu pessoalmente faria), mas também enfatiza muito fortemente a borda do quebra-cabeça, e a gema é significativamente mais (embora ainda não perfeitamente) visível.

Este método não é uma panacéia de forma alguma, mas pode ajudá-lo a rastrear as coisas que devem ser corrigidas. Lembre-se de que a visão humana se baseia em bordas e contraste e projete sua interface do usuário para ser legível por humanos.

(Vou abordar isso da perspectiva da teoria das cores)

Acho que sua pergunta não é sobre como criar uma interface gráfica atraente, acho que você está realmente apontando para "Como escolho a experiência que quero oferecer aos meus jogadores?"

E isso é principalmente uma resposta psicológica. Você menciona escolher azul, verde ou vermelho, e não se trata realmente das cores, mas das emoções que as cores fazem quando você as vê.

Se você tem um jogo vermelho (o fundo é vermelho, o jogador está vestindo vermelho ou usa uma peça vermelha, todas as fontes são de um tom legível de vermelho) como você acha que se sentiria se jogasse esse jogo? jogos? E nem importa qual é o jogo.

Você sentiria como se o jogo estivesse com muita raiva ou algum tipo de jogo do dia dos namorados.

É aí que entra o processo de tomada de decisão. Se você deseja que seu jogador sinta que está conduzindo um experimento científico no seu jogo de farmácia, talvez esteja deixando tudo limpo e simples. Talvez algo que enfatize a cor branca.

Se você deseja que o seu player sinta que está realizando algum tipo de trabalho de fabricação, onde parece que está ficando deprimido com a ciência, talvez sua segunda foto, ou enfatizando as cores amarelo e preto juntas.

Se você quer que seu jogador se sinta como se estivesse em harmonia com a química, como se fosse uma extensão de si e de todos os seres vivos, sua primeira imagem pode ser um bom começo. Ênfase em azuis claros, verdes claros e tons naturais como marrom.

Realmente se resume à emoção crua que você espera que seu jogador sinta.

Resposta curta: Não há resposta curta.

O design é um campo enorme, com toneladas de livros, artigos e, como mencionado, bibliotecas que cobrem essa questão. Esquema de cores, fontes, estilos, layout, uso de espaço em branco, espaços negativos, texturas, cores e seus significados em diferentes culturas, por que os quadrinhos sans são maus e nunca devem ser usados. Existem cursos, livros, blogs, trabalhos de pesquisa e sites dedicados a esse tipo de coisa. Não haverá uma resposta simples para isso, já que a pergunta é muito solicitada.

Dito isto: Francamente, sua melhor opção é contratar um designer para ajudá-lo. Se isso estiver fora do seu orçamento, faça amizade com um designer para ajudá-lo. Se isso não for possível, talvez você precise fazer isso sozinho por um tempo.

Então, algumas dicas. Para esquemas de cores, use algo como um Designer de esquemas de cores . Passe algum tempo aprendendo sobre como as cores funcionam juntas e, geralmente, tente escolher apenas algumas cores, não exagere. O limite deve ser de cerca de 3 cores.

Para fontes, bem, há artigos e documentos de pesquisa completos (aqui está um sobre serif vs sans serif ). Novamente, a regra geral é escolher, no máximo, duas fontes. Uma boa opção é escolher uma fonte que não seja o padrão, mas ainda tenha uma boa aparência. Se for uma opção, o Helvetica é muito bom, mas há muitos outros bons por aí.

Para estilo e / ou tema, este é ainda mais difícil de responder. Eu acho que a maior dica aqui é ser consistente com o seu estilo . Não tente misturar a natureza com a ficção científica ou a arte de linhas incompletas com seus modelos de poli 3d. Isso significa principalmente encontrar um artista para fazer TODAS as obras de arte ou fazer você mesmo (no caso de grandes empresas, é por isso que existe um líder de arte). Tema é algo com o qual você terá que brincar, a menos que tenha um tema definido antes de começar. Honestamente, isso pode mudar com o passar do tempo e você tem mais do jogo pronto. As chances são muito boas de que o tema mude ao longo do desenvolvimento, de fato.

No geral, embora o design possa ser ensinado, algumas pessoas simplesmente ... não são boas nisso (muito parecido com a programação). É aqui que ter um amigo de design para ajudar é útil.

EDITADO:

Ok, eu reescrevi isso, agora que entendi melhor a pergunta.

A razão pela qual fiquei confuso é porque você tentou dar um paralelo por escrito, mas o exemplo que você tem não é paralelo. O design de uma interface do usuário é uma questão de apresentação. O conteúdo de um livro é sobre a substância real.

Portanto, olhando para o design da interface do usuário como uma questão de apresentação, você deve pensar no que deseja apresentar. Quero dizer, é claro que você está tentando apresentar seu jogo, mas o que mais? Deseja que pareça profissional? Diversão? Sombrio? Luz?

Como exemplo, examinarei as duas imagens que você postou e as impressões que recebo delas.

O primeiro, há alguns aspectos óbvios que podemos observar. É mais claro que a segunda imagem, é claro. Adicione isso ao fato de você ter escolhido uma imagem de um campo com profundidade (à medida que o campo se inclina para longe do visualizador) e a sensação é muito mais ampla. Parece mais livre, mais alegre.

Quando você olha para a segunda imagem, é claro que é muito mais escura. Ele também possui um plano de fundo que é uma imagem plana perpindicular à linha de visão do espectador, eliminando a sensação de profundidade contínua da primeira imagem. Acrescente que as únicas pistas de profundidade reais vêm do sombreamento no revestimento de diamante e aproximam muito a imagem de fundo da câmera. Tudo isso se soma para dar uma sensação muito mais sombria e claustrofóbica.

Então agora, o que você pode fazer com os dois temas? Bem, o primeiro tema é algo que poderia ser bom se o que você quer fazer é parecer mais casual. Dá uma sensação de que o que o jogador está fazendo agora com as peças do jogo não é tudo o que está acontecendo no mundo. A segunda imagem dá mais um senso de urgência. O "mundo conhecido" do jogo é muito menor e coloca mais ênfase no que o jogador está fazendo.

Isso é realmente sobre 'torná-lo bonito'? Isso é subjetivo, e acho que a primeira captura de tela parece melhor que a segunda.

Escolher um tema não é realmente ciência do foguete - você conhece o conteúdo ou o objetivo principal do seu jogo e pode mantê-lo na sua mente ao escolher todos os outros aspectos que o acompanham.

Uma coisa que ninguém mais parece ter mencionado até agora: pergunte a algumas das pessoas que vão jogar o jogo para obter feedback. Os designers de interface do usuário passam muito tempo exibindo designs para os usuários e descobrindo o que é certo ou errado com eles, estejam eles criando um jogo, um processador de texto ou uma cabine de comando.