Scegli uno stile artistico

Scegliere uno stile artistico è il processo di pianificazione di una direzione estetica per i tuoi elementi UI. È importante iniziare il tuo processo di design con uno stile artistico perché gli stili artistici forniscono regole visive di base a cui puoi fare riferimento per garantire che la tua UI fornisca intuitivamente ai giocatori informazioni su cosa possono fare nel tuo gioco.

Utilizzando il gioco di laser tag campione file .rbxl come riferimento, questa sezione del curriculum dell'interfaccia utente ti mostra come prendere decisioni significative su come progettare i tuoi elementi UI in base al genere del tuo gioco, inclusa la guida su:

• Identificare gli elementi UI necessari in base a ciò che vuoi comunicare ai giocatori durante il tuo gioco.
• Selezionare un tema di colori che rinforzi le convenzioni di colore specifiche del genere che sono intuitive per il tuo pubblico.
• Delineare icone semplici che siano facili da decifrare su qualsiasi dimensione dello schermo.
• Stabilire un ordine dei pulsanti che corrisponda alla probabilità di diversi flussi di lavoro dei giocatori.
• Determinare un sistema di testo che garantisca leggibilità sui dispositivi target.

Dopo aver completato questa sezione, imparerai come progettare la struttura e il flusso delle informazioni che desideri comunicare ai giocatori attraverso l'UI all'interno del tuo gioco.

Identifica i tuoi elementi UI

Il primo passo per scegliere uno stile artistico per la tua UI è identificare quali elementi UI ti servono per i vari tipi di informazioni che vuoi comunicare al tuo pubblico. Fare questo lavoro all'inizio del tuo processo di design è cruciale perché ti consente di categorizzare gli elementi UI in base al loro scopo funzionale, prendere decisioni semantiche in base a dove e quando i giocatori interagiranno con ciascun elemento UI e pianificare dove puoi riutilizzare gli elementi UI nel tuo gioco.

Ci sono molti modi diversi per fare brainstorming su quali elementi UI siano necessari per i requisiti di gioco, ma è consigliabile iniziare immaginando cosa un giocatore deve sapere non appena entra nel tuo gioco. Ad esempio, quando un giocatore apre il gioco di laser tag campione, potrebbe porsi le seguenti domande:

• Qual è l'obiettivo del gioco?
• Come faccio a sapere chi è nella mia squadra?
• Come tengo traccia dei punti della mia squadra?
• Come seleziono un blaster?
• Come faccio a sapere dove il blaster spara un laser?
• Se sono su un dispositivo mobile, come faccio a sparare con il mio blaster?
• Dopo aver sparato un laser, quando posso sparare di nuovo?
• Come faccio a sapere quando inizio il round?
• Come faccio a sapere quando ho taggato con successo qualcuno con il mio blaster?
• Come faccio a sapere quando la squadra nemica mi ha taggato con successo?

Utilizzando queste domande per comprendere quali informazioni sono imperative per i giocatori per avere successo, puoi ordinare le esigenze UI del gioco di laser tag campione in tre categorie:

1. Informazioni sull'obiettivo del gioco.
2. Informazioni sul blaster.
3. Informazioni sullo stato del giocatore.

Ordinare le esigenze UI del tuo gioco in categorie è utile perché puoi formulare il tuo stile artistico attorno a ciascun raggruppamento per rinforzare quali informazioni ciascuna categoria deve insegnare ai giocatori. Ad esempio, se desideri che la tua UI dica ai giocatori quali azioni possono intraprendere riguardo allo stato di salute del loro personaggio, potresti scegliere uno stile artistico con elementi UI che privilegiano il colore verde e/o icone più per far sì che i giocatori possano riconoscerne rapidamente la funzione.

Dopo aver ordinato le esigenze UI del tuo gioco in categorie, puoi creare un elenco degli elementi UI necessari per soddisfare i requisiti di ciascuna categoria. Per dimostrare, il gioco di laser tag campione utilizza la seguente tabella di elementi UI per affrontare l'elenco precedente di potenziali domande dei giocatori. Mentre lavori attraverso questo tutorial, il curriculum UI continuerà a fare riferimento a questo elenco e a evidenziare le principali decisioni di design che si riferiscono a ciascuna categoria di elementi UI.

Ora che hai un elenco di elementi UI per il tuo gioco, è tempo di iniziare a prendere decisioni stilistiche e semantiche per ciascun raggruppamento di elementi UI, iniziando con un tema di colori.

Seleziona un tema di colori

Un tema di colori, o palette di colori, è una selezione di colori che comunicano ciascuno un messaggio attraverso un'applicazione coerente all'interno del tuo gioco, come l'uso di un colore brillante per indicare quando qualcosa è selezionabile. Applicare un tema di colori ai tuoi elementi UI è importante, specialmente quando ti affidi a convenzioni di colore all'interno del genere del tuo gioco, perché consente ai giocatori di comprendere rapidamente la tua UI con il minimo sforzo.

Nel Curriculum di Arte Ambientale, ciascuna metà dell'ambiente di laser tag è codificata a colori da una vista dall'alto per differenziare quale area della mappa è vicina alla rispettiva zona di spawn di ciascuna squadra: menta per la squadra che si riunisce sul lato sinistro della mappa, e rosa carne per la squadra che si riunisce sul lato destro della mappa. Questi colori specifici sono utili perché sono complementari, il che significa che contrastano bene tra loro, e consentono ai giocatori di scansionare facilmente i loro dintorni e orientarsi indipendentemente dalla direzione in cui si trovano nell'edificio.

Il gioco di laser tag campione utilizza questo stesso tema di colori nella sua UI per evidenziare informazioni che riguardano ciascuna squadra, come l'indicatore della squadra di ciascun giocatore all'interno dello spazio 3D, o il tracker dei punti della squadra che sovrappone lo schermo. Questa coerenza aiuta i giocatori a comprendere rapidamente le informazioni sull'obiettivo del gioco durante il gameplay frenetico di un gioco sparatutto in prima persona, specialmente mentre i giocatori devono prendere decisioni rapide mentre attraversano l'ambiente.

Quando selezioni un tema di colori per il tuo gioco, considera quanto segue:

• La forza di un tema di colori si basa sull'aiutare i giocatori a fare rapide associazioni mentali tra ciascun colore e la loro funzione. Per questo motivo, limita il tuo tema di colori per evidenziare solo le informazioni chiave che vuoi che i giocatori associno ai tuoi elementi UI.
• Per garantire che i giocatori con daltonismo possano comprendere il messaggio del tuo tema di colori, non fare sempre affidamento solo sul colore per distinguere tra gli elementi UI. Invece, combina colori con icone, forme e/o animazioni per garantire che la tua UI comunichi efficacemente con ogni giocatore.
• È più importante che la tua UI sia leggibile piuttosto che esteticamente gradevole. Per questo motivo, priorizza una UI semplice con colori che rimangono leggibili su elementi sia chiari che scuri nel mondo 3D.

Per evidenziare la guida nel punto precedente, il gioco di laser tag campione utilizza i colori neutri del nero e del bianco per quasi ogni altro elemento UI che sovrappone lo schermo 2D. Il nero e il bianco contrastano bene tra loro e sono facili da leggere mentre il resto dello schermo mostra un ambiente 3D altrimenti colorato.

Delinea icone semplici

Un icona è un simbolo che rappresenta un'azione, un oggetto o un concetto in un gioco. Delineare icone che siano semplici e intuitive è importante perché il risultato finale consente ai giocatori di riconoscere facilmente cosa possono fare e cosa vuoi comunicare loro attraverso la tua UI senza utilizzare testo, che può ingombrare lo schermo e distogliere l'attenzione dai contenuti che contano. Questo processo è ancora più cruciale se il tuo pubblico accede al tuo gioco utilizzando uno schermo piccolo su dispositivi mobili.

Le icone semplici idealmente hanno uno stile distinto dai tuoi elementi 3D pur mantenendo un aspetto coerente con il mondo complessivo del tuo gioco. Ad esempio, nell'ambiente finale del Curriculum di Arte Ambientale, sia gli asset 3D modulari che quelli di prop hanno uno stile artistico pulito e high-tech che utilizza forme rettangolari con angoli morbidi e arrotondati. Dai pannelli smussati lungo il pavimento alle finestre quasi circolari nel soffitto, nulla include un bordo affilato.

Per completare questo stile artistico pur rimanendo unico, tutti gli elementi UI che imparerai a creare più avanti in questo tutorial includono un'estetica futuristica e angoli arrotondati senza corrispondere al linguaggio delle forme degli asset 3D nell'ambiente. Questo mantiene il significato di ciascuna icona distinto da altre informazioni sia nello spazio 2D che 3D.

Per dimostrare questo concetto, guarda le seguenti due immagini dal gioco di laser tag campione del mirino che dice ai giocatori dove il loro blaster spara sullo schermo, e il pulsante che consente ai giocatori di sparare con il loro blaster su dispositivi mobili. Entrambe le icone includono angoli morbidi per essere coerenti con il mondo complessivo, ma le loro forme esagonali e circolari le distinguono da qualsiasi cosa un giocatore potrebbe associare alle icone nel gioco.

Quando delinei icone semplici per il tuo gioco, considera quanto segue:

• Le icone semplici sono leggibili anche quando sono piccole. Per questo motivo, limita i dettagli sulle tue icone che diventerebbero irriconoscibili sugli schermi dei dispositivi mobili.
• Le icone sono potenti perché possono comunicare un messaggio indipendentemente dalla lingua del giocatore. Finché non influisce sulla comprensione del giocatore della tua UI, sostituisci il testo non necessario con icone per migliorare gli sforzi di localizzazione.
• Molti giochi dello stesso genere utilizzano icone che sono stilisticamente simili, come un'icona di spada che rappresenta forza, o un becher che rappresenta magia. Abbraccia il simbolismo all'interno del genere del tuo gioco in modo che i giocatori possano comprendere le tue icone senza ulteriore guida.

Se non sai quali tipi di icone sono comuni all'interno del genere del tuo gioco, dai un'occhiata al Game UI Database. Questo strumento gratuito per i designer UI include screenshot di centinaia di giochi di diversi generi che puoi consultare durante il tuo processo di design.

Stabilire un ordine di interazione

Un ordine di interazione è la sequenza di interazioni che i giocatori possono avere con la tua UI. Poiché ci sono spesso più elementi UI interattivi sullo schermo, è importante stabilire un ordine di interazione intuitivo per assistere i giocatori nel prendere decisioni mentre navigano in vari flussi di lavoro.

Ci sono tipicamente tre tipi di interazioni in un flusso di lavoro:

• Interazione primaria – L'azione che un giocatore è più propenso a eseguire.
• Interazione secondaria – L'azione che un giocatore è probabile che esegua come alternativa all'azione primaria.
• Interazione terziaria – L'azione che un giocatore è meno propenso a eseguire.

Ogni tipo di interazione deve avere un diverso livello di enfasi visiva a seconda della probabilità che un giocatore esegua l'azione. Per illustrare questo concetto, esamina l'immagine seguente dell'ordine di interazione per il flusso di lavoro per selezionare un blaster nel gioco di laser tag campione, in cui A rappresenta l'interazione primaria, B rappresenta l'interazione secondaria e C rappresenta l'interazione terziaria.

In questo flusso di lavoro, l'azione che un giocatore è più propenso a eseguire è selezionare tra i due diversi tipi di blaster, quindi i pulsanti del blaster sono molto più grandi di qualsiasi altro elemento interattivo nel design. Questo livello di enfasi visiva attira l'attenzione del giocatore e guida il suo sguardo verso il centro dell'elemento UI complessivo. Dopo che il giocatore ha preso la sua decisione, il passo logico successivo nel flusso di lavoro è confermare la propria selezione e avviare il round. Per questo motivo, il pulsante SELEZIONA è direttamente sotto l'interazione primaria.

Sebbene sia improbabile, il giocatore potrebbe non sapere di poter selezionare uno dei pulsanti del blaster per comunicare quale blaster desidera utilizzare. Per assistere in questa situazione, ci sono due pulsanti terziari a forma di freccia che il giocatore può utilizzare per scorrere tra le proprie scelte. Questi pulsanti sono sottili e molto più piccoli degli elementi delle interazioni primarie e secondarie, ma sono anche percepibili dal giocatore che ha bisogno di indicazioni su quali azioni può eseguire.

Se dovessi posizionare queste interazioni primarie, secondarie e terziarie in un ordine di interazione diverso, come scambiare il pulsante SELEZIONA con il pulsante della freccia sinistra, i giocatori non avrebbero una chiara direzione sulla sequenza di scelte che devono fare. Per questo motivo, oltre all'enfasi visiva di un ordine di pulsanti, flussi di lavoro efficaci seguono una gerarchia visiva che guida i giocatori attraverso il tuo ordine ideale di decisioni in base alla direzione in cui è probabile che scansionino le informazioni, come dall'alto verso il basso e da sinistra a destra.

Quando stabilisci un ordine di interazione per i flussi di lavoro nel tuo gioco, considera quanto segue:

• I giocatori devono avere una chiara comprensione di quando possono interagire con la tua UI per eseguire azioni. Per questo motivo, è consigliabile fornire almeno una forma di feedback visivo per gli elementi UI interattivi, come visualizzare un contorno o cambiare la dimensione, il colore o l'animazione di un pulsante quando è in focus.
• Se le etichette sugli elementi UI interattivi sono vaghe o simili tra loro nello stesso flusso di lavoro, i giocatori possono fraintendere come completare un'azione o un processo. Per evitare un'esperienza negativa per il giocatore, crea etichette che siano chiare, concise e distinte l'una dall'altra.
• Se gli elementi UI interattivi sono troppo grandi, possono distrarre da altre informazioni importanti sullo schermo. Al contrario, se sono troppo piccoli, possono essere difficili da leggere o difficili da selezionare, specialmente se sono in prossimità su dispositivi mobili. Per questo motivo, è essenziale rivedere la dimensione dei tuoi elementi UI interattivi su varie dimensioni dello schermo.

In Implementa in Studio, imparerai come utilizzare oggetti UIAspectRatioConstraint per garantire che gli elementi UI mantengano un rapporto d'aspetto specifico indipendentemente dal dispositivo che i giocatori utilizzano per accedere al tuo gioco. Oltre a semplificare il tuo processo di design, questa tecnica può anche aiutarti a soddisfare le raccomandazioni delle Linee Guida per l'Accessibilità dei Contenuti Web Dimensione e Spaziatura dei Target Touch per creare una zona di contatto per gli elementi UI interattivi di almeno 9x9 mm sui dispositivi mobili.

Determina un sistema di testo

Un sistema di testo è un insieme di regole sui caratteri e sullo stile per tutte le parole nella tua UI, come "intestazioni sempre in grassetto" o "usa un carattere verde quando fai riferimento a una statistica di salute." Determinare un sistema di testo all'inizio del tuo processo di design ti consente di avere una struttura che puoi applicare in modo coerente in tutto il tuo gioco in modo che i giocatori sappiano cosa aspettarsi mentre cercano le informazioni di cui hanno bisogno.

Sebbene i sistemi di testo possano variare a seconda del genere del gioco o dei requisiti del mondo 3D, la regola più importante che tutti i sistemi di testo devono seguire è assicurarsi che tutto il testo della tua UI sia chiaro e facile da leggere. Utilizzando questa regola come base per tutte le decisioni relative al tuo sistema di testo, puoi migliorare l'accessibilità e l'esperienza utente per i giocatori che leggono la tua UI considerando i diversi modi in cui i giocatori possono interagire con il tuo testo, come:

• Il dispositivo che i giocatori possono utilizzare per accedere al tuo gioco.
• La lingua in cui i giocatori possono leggere il tuo testo localizzato.
• Il possibile sfondo sottostante dietro il testo sullo schermo.

Ad esempio, il seguente design della risposta dello schermo di quando un giocatore viene taggato fuori scala a una dimensione del carattere più piccola o più grande a seconda del dispositivo di un giocatore, include abbastanza spazio su entrambi i lati del testo in inglese per lingue con traduzioni più lunghe e include uno sfondo contrastante in modo che i giocatori possano leggere il testo indipendentemente dal colore presente nel loro sfondo.

Quando determini un sistema di testo per il tuo gioco, considera quanto segue:

• Il testo è difficile da leggere quando si fonde con il rumore del suo sfondo. Per migliorare la leggibilità della tua UI, visualizza il testo sopra un colore contrastante o con un contorno.
• Se non scaldi il tuo testo per diversi dispositivi, il testo occuperà troppo spazio o diventerà piccolo e illeggibile sullo schermo del giocatore. Per rilevare discrepanze nel tuo testo, testa il tuo design su più dispositivi durante il processo di design.
• Le parole possono estendersi oltre il tuo design originale quando le localizzi in altre lingue. Per migliorare la composizione del tuo design, riferisciti allo spazio massimo che il tuo testo può occupare sullo schermo.
• Sebbene alcuni caratteri possano adattarsi all'estetica del tuo gioco, potrebbero essere difficili da leggere in grandi quantità. Per questo motivo, usa il testo stilizzato con parsimonia, come per titoli o testi di avviso.

Una volta che hai un piano per lo stile artistico della tua UI, puoi passare alla sezione successiva del tutorial per imparare come creare un wireframe del layout di ciascun elemento in vari flussi di lavoro dei giocatori.