Interfacce 101: Making Pretty

Ho realizzato alcuni giochi che ho effettivamente rilasciato in libertà. C'è un problema particolare in cui mi imbatto ancora e ancora, ed è il problema dell'interfaccia / tema del gioco.

Come puoi prendere decisioni non arbitrarie e coerenti sull'aspetto e l'interfaccia del tuo gioco?

Ad esempio, nella versione uno del mio gioco basato su chimica Silverlight, ho preso una (cattiva?) Decisione di passare con un aspetto naturale, stile paesaggistico, che ha portato a questa interfaccia utente:

Poi, in una successiva iterazione, sono diventato più intelligente e ho optato per un aspetto più "macchinoso", che ha portato a questo (UI finale):

Dirò sicuramente che i miei gusti nell'interfaccia utente sono migliorati attraverso l'iterazione. Ma è stato il risultato di molte decisioni inizialmente arbitrarie seguite da molte modifiche.

C'è un modo migliore per capire come creare un tema per il tuo gioco?

Per dare un parallelo nella scrittura, quando stai scrivendo un romanzo fantasy / di fantascienza, ci sono molti elementi che devi descrivere. Mentre puoi arbitrariamente inventare oggetti / creature / luoghi / ecc., Ottieni un mondo molto più coerente quando ti siedi per qualche minuto e disegni l'area, la regione, il pianeta o l'universo. Tutto quindi si adatta bene insieme, e si può chiedere se stessi "come sarebbe questo lavoro in questo universo?

Modifica: sembra che non abbia spiegato bene. Consentitemi di semplificare la domanda all'estremo: quando devo disporre una schermata del titolo (con sfondo, caratteri, pulsanti skin) come posso decidere come dovrebbero apparire? Verde o blu? Grunge o no? Arrotondato o piatto? Serif o sans-serif?

Rispondi a questa domanda ed esplodila nel tuo gioco nel suo insieme. Come capisci come dovrebbero apparire le cose? Quale processo usi per renderli coerenti e non arbitrari?

Guarda di nuovo gli screenshot. Avrei potuto rimanere bloccato su erba / cielo / rocce, ma il metallo sembrava più adatto all'idea di reazioni chimiche e atomi.

Sembra che tu abbia stili contrastanti.

Dai un'occhiata a queste UI di Peggle, Ultima Underworld, Diablo 3, Starcraft 2 e Gran Turismo 5.

Nota come è ogni UI coerente nel suo tema .

Peggle è pin-ball come in tutti i suoi elementi dell'interfaccia utente. Tutto è un metro, una leva, un ugello, un trampolino.

Ultima Underworld ha elementi dell'interfaccia utente di ferro / acciaio, pozioni, zaini, mappe. Adventure Time.

Simile al mondo sotterraneo di Ultima (in realtà sembra essere basato su UW)

Futuristico, elegante, semplice, minimale (protoss)

Interni auto

Come vedi, il tuo primo design è completamente incoerente e senza vergogna. Che cosa ha a che fare un campo aperto con il tuo gioco? Lo stesso vale per lo sfondo di metallo. Prova una panca da laboratorio per il tavolo da gioco e uno sfondo da laboratorio chimico, con boccette e fiale, guanti di gomma e capsule di Petri.

Il Dr. Mario è fondamentalmente medico, batteri, virus, a tema medicinale

Inoltre l'interfaccia utente dovrebbe avere una grafica simile agli elementi di gioco . Le palline dei simboli chimici sono tonde e con colori tenui e delicati. Gli sfondi / il tabellone di gioco che hai scelto hanno stili artistici completamente diversi dagli elementi di gioco. Il campo è una fotografia vivida. Il metallo è molto dettagliato, mentre le sfere chimiche sono lisce e relativamente non dettagliate.

Una cosa che sto iniziando a capire è molto importante: l'uso corretto del contrasto.

Guarda quella prima foto. È contrastato dappertutto! Il cielo è luminoso, l'orizzonte è scuro, quindi l'erba lontana è luminosa, quindi il fondo è scuro. Lo sfondo piastrellato varia selvaggiamente tra estremamente chiaro ed estremamente scuro. Tutto ciò è non informativo. Disordine visivo. Le parti importanti effettive - i cerchi - sono annegate da tutti i cambiamenti di contrasto.

Ora guarda la seconda foto. Lo sfondo è scuro e relativamente monotono. C'è un bordo luminoso intorno all'intero campo da gioco. Lo sfondo piastrellato è prevalentemente scuro, con sottili linee bianche in punti importanti. All'improvviso puoi effettivamente vedere il puzzle, perché è una delle cose più contrastanti in circolazione.

Personalmente, lo modificerei ancora un po ': renderei il campo di gioco anche più sporco. Quelle linee bianche per mostrare le divisioni della griglia sono importanti, ma il cervello umano è davvero bravo a estrapolare le caratteristiche dritte, e quelle potrebbero essere molto più scure e persino spezzate un po '.

La cosa più grande che mi fa uscire dall'interfaccia utente è la barra in basso. È luminoso, è in faccia ed è difficile leggere il testo. Quest'ultimo bit è importante - il motivo per cui è difficile leggere il testo è, ancora una volta, a causa del contrasto. Leggiamo parzialmente il testo cercando il bordo delle lettere, ma purtroppo le lettere si fondono bene con parti della barra in basso.

Cosa farei: riavvia la barra inferiore per adattarla bene allo sfondo principale, in termini di contrasto. Crea un bordo più chiaro tra esso e lo sfondo principale per superare il fatto che è separato. Quindi sbarazzati della maggior parte del testo. "Diamante" può diventare un vero diamante. "Atomi lasciati" può diventare una visione pittorica di alcuni atomi. "Tempo rimasto" può diventare una clessidra o un orologio da polso o un orologio da tasca. "Successivo" può sparire del tutto - dici "devi giocare per vedere quali atomi ottieni", ma questa è una fastidiosa meccanica di gioco. Trasformalo in una pila di atomi sulla destra, seduto su un nastro trasportatore malconcio, con un piccolo indizio di macchinari visivi per il quale è il prossimo della linea. Tada! Puzzle migliorato, interfaccia migliorata, tutto sembra meno disordinato.

Se lo fai c'è bisogno di utilizzare il testo, ci sono due modi per contrasto garanzia. Innanzitutto, metti il ​​tuo testo su qualcosa che è, di per sé, a basso contrasto. Se ha uno sfondo scuro, usa un testo chiaro. Se ha uno sfondo chiaro, usa il testo scuro. Se non riesci a farlo (e talvolta non riesci proprio a farlo), non esitare a usare l'effetto bagliore esterno. È un ottimo modo per fornire il giusto contrasto dei bordi, indipendentemente dal testo.

Quando giochi con le interfacce, apri un editor di immagini, scambialo in bianco e nero e prova due cose: sfocatura e rilevamento dei bordi. Quando l'interfaccia utente è sfocata in bianco e nero, la visione dovrebbe gravitare automaticamente sulle aree importanti. Quando è su edge-detect, le aree importanti dovrebbero essere evidenziate. Esempi:

Confronta questi due. Il primo è quasi illeggibile - certo, alcune delle gemme sono visibili, ma molte non lo sono. Nel secondo, la griglia si distingue all'istante, così come la finestra di dialogo. Mentre c'è solo un gioiello sul tabellone, puoi immediatamente vedere dove si trova.

Il primo enfatizza in modo massiccio i bordi della griglia. Alcune delle gemme sono quasi invisibili. Il secondo enfatizza quelli ancora (e più di quanto farei personalmente), ma enfatizza anche molto fortemente il bordo del puzzle, e la gemma è significativamente più (sebbene non ancora perfettamente) visibile.

Questo metodo non è assolutamente una panacea, ma può aiutarti a rintracciare le cose che dovrebbero essere riparate. Tieni a mente che la visione umana si basa su bordi e contrasto e progetta la tua UI in modo che sia leggibile dagli umani.

(Verrò da questo dal punto di vista della teoria del colore)

Penso che la tua domanda non sia su come realizzare un'interfaccia grafica accattivante, penso che tu stia davvero indicando: "Come faccio a scegliere l'esperienza che voglio offrire ai miei giocatori?"

E questa è principalmente una risposta psicologica. Hai detto di scegliere il blu o il verde o il rosso, e non si tratta davvero dei colori, ma delle emozioni che i colori ti fanno provare quando li vedi.

Se hai una partita che è rossa (lo sfondo è un colore rosso, il giocatore indossa il rosso o usa un pezzo di gioco rosso, i caratteri sono tutti una sfumatura di rosso leggibile) come pensi che ti sentiresti se giocassi a questo gioco? E non importa nemmeno quale sia il gioco.

Ti sentiresti come se il gioco fosse molto arrabbiato o una specie di gioco di San Valentino.

È qui che entra in gioco il processo decisionale. Se vuoi che il tuo giocatore si senta come se stesse conducendo un esperimento scientifico nel tuo gioco di chimica, forse rendendo tutto pulito e semplice. Forse qualcosa che enfatizza il colore bianco.

Se vuoi che il tuo giocatore si senta come se stesse svolgendo una sorta di lavoro di produzione, in cui si sente che si sta sporcando e sporcando con la scienza, allora forse la tua seconda foto, o sottolineando i colori giallo e nero insieme.

Se vuoi che i tuoi giocatori si sentano come se fossero un tutt'uno con la chimica, come se fosse un'estensione di se stessi e di tutti gli esseri viventi, allora la tua prima immagine potrebbe essere un buon inizio. Un'enfasi su blu chiaro e verdi chiari e toni naturali come il marrone.

Dipende davvero dall'emozione pura che ti aspetti dal tuo giocatore.

Risposta breve: non c'è risposta breve.

Il design è un campo enorme, con tonnellate di libri, articoli e, come detto, biblioteche che trattano questa domanda. Combinazioni di colori, caratteri, stili, layout, uso di spazi bianchi, spazi negativi, trame, colori e loro significato in diverse culture, perché il fumetto sans è malvagio e non dovrebbe mai essere usato. Ci sono corsi, libri, blog, articoli di ricerca e siti Web dedicati a questo tipo di cose. Non ci sarà una risposta semplice a questo, poiché la domanda è molto impegnativa.

Detto questo: Francamente, la tua migliore opzione è assumere un designer per aiutarti. Se questo è fuori dal tuo budget, fai amicizia con un designer per aiutarti. Se ciò non è possibile, potresti doverlo fare da solo per un po '.

Quindi alcuni consigli. Per le combinazioni di colori, utilizzare qualcosa di simile a un Color Scheme Designer . Dedica un po 'di tempo a imparare come funzionano i colori insieme e, in generale, prova a sceglierne solo alcuni colori, non esagerare. Il limite dovrebbe essere di circa 3 colori.

Per i font, beh, ci sono interi articoli e documenti di ricerca (eccone uno su serif vs sans serif ). Ancora una volta, la regola generale è quella di scegliere, al massimo, due caratteri. Una buona scelta è quella di scegliere un carattere che non sia quello predefinito, ma che sia comunque bello. Se è un'opzione, Helvetica è piuttosto carina, ma ce ne sono molte altre buone là fuori.

Per stile e / o tema, questo è ancora più difficile rispondere. Penso che il consiglio più grande qui sia quello di essere coerenti con il tuo stile . Non tentare di fondere la natura con scifi, o disegni al tratto abbozzato con i suoi modelli poli 3d res. Questo significa soprattutto trovare un artista per fare TUTTA l'arte o farlo da soli (nel caso di grandi aziende, ecco perché c'è un vantaggio artistico). Il tema è qualcosa con cui dovrai giocare, a meno che tu non abbia in mente un tema prefissato prima di iniziare. Onestamente, potrebbe cambiare col passare del tempo e hai fatto più del gioco. È molto probabile che il tema cambierà nel corso dello sviluppo, in effetti.

Nel complesso, mentre il design può essere insegnato, alcune persone ... non sono così brave a farlo (proprio come la programmazione). Qui è utile avere un amico del design per aiutare.

MODIFICATO:

Ok, l'ho riscritto, ora che capisco meglio la domanda.

Il motivo per cui mi sono confuso è perché hai provato a scrivere un parallelo per iscritto, ma l'esempio che hai non è affatto parallelo. Il design di un'interfaccia utente è una questione di presentazione. Il contenuto di un libro riguarda la sostanza reale.

Quindi, guardando il design dell'interfaccia utente come una questione di presentazione, devi pensare a ciò che vuoi presentare. Voglio dire, ovviamente stai cercando di presentare il tuo gioco, ma cos'altro? Vuoi che appaia professionale? Divertimento? Buio? Leggero?

Ad esempio, guarderò le due immagini che hai pubblicato e ti dirò le impressioni che ottengo da esse.

Il primo, ci sono alcuni aspetti ovvi che possiamo esaminare. È più chiaro della seconda immagine, ovviamente. Aggiungilo al fatto che hai scelto un'immagine di un campo con profondità (mentre il campo si inclina lontano dallo spettatore) e la sensazione è quella che è molto più ampia. Sembra più libero, più leggero.

Quando guardi la seconda immagine, ovviamente, è molto più scura. Ha anche uno sfondo che è un'immagine piatta perpendicolare alla linea di vista dello spettatore, togliendo quel senso di profondità continua che aveva la prima immagine. Aggiungi che gli unici veri spunti di profondità provengono dall'ombreggiatura sulla placcatura a diamante e porta l'immagine di sfondo molto vicino alla fotocamera. Tutti questi si sommano per dargli un aspetto molto più scuro, più claustrofobico.

Quindi ora, cosa puoi fare con i due temi? Bene, il primo tema è qualcosa che potrebbe essere buono se quello che vuoi fare è renderlo più casual. Dà una sorta di senso come quello che il giocatore sta facendo in questo momento con i pezzi del gioco non è tutto ciò che sta accadendo nel mondo. La seconda immagine dà più senso di urgenza. Il "mondo conosciuto" del gioco è molto più piccolo e pone maggiormente l'accento su ciò che il giocatore sta facendo.

Si tratta davvero di "renderlo carino"? È una cosa soggettiva, e mi capita di pensare che il primo screenshot sia migliore del secondo.

Scegliere un tema non è davvero scienza missilistica: conosci il contenuto chiave o lo scopo del tuo gioco e puoi tenerlo in mente quando scegli ogni altro aspetto da seguire.

Una cosa che nessun altro sembra aver menzionato finora: chiedi ad alcune persone che stanno per giocare per il loro feedback. I progettisti dell'interfaccia utente impiegano molto tempo a mostrare progetti agli utenti e scoprire cosa è giusto o sbagliato con loro, sia che stiano progettando un gioco, un elaboratore di testi o un deck di volo.