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 progettazione con uno stile artistico perché gli stili artistici forniscono regole visive che puoi consultare per garantire che la tua interfaccia utente fornisca in modo intuitivo alle giocatori informazioni su ciò che possono fare nella tua esperienza.

Usando il file esempio di esperienza di tag laser.rbxl come riferimento, questa sezione dell'interfaccia utente mostra come prendere decisioni significative su come progettare i tuoi elementi UI in base al genere della tua esperienza, incluse indicazioni su:

• Identificare gli elementi UI necessari in base a ciò che vuoi comunicare ai giocatori durante la tua esperienza.
• Selezione di un tema di colore che rafforzi le convenzioni di colore specifiche del genere che sono intuitive per il tuo pubblico.
• Delineare icone semplici che sono facili da decifrare su qualsiasi dimensione dello schermo.
• Definire un ordine dei pulsanti che corrisponde alla probabilità di flussi di lavoro diversi dei giocatori.
• Determinazione di un sistema di testo che garantisca leggibilità su dispositivi target.

Dopo aver completato questa sezione, imparerai a progettare la struttura e il flusso delle informazioni che vuoi comunicare ai giocatori attraverso l'interfaccia utente all'interno della tua esperienza.

Identifica i tuoi elementi UI

Il primo passo per scegliere uno stile artistico per la tua interfaccia utente è quello di identificare quali elementi UI hai bisogno per i diversi tipi di informazioni che vuoi comunicare al tuo pubblico.Fare questo lavoro all'inizio del tuo processo di progettazione è cruciale perché ti consente di categorizzare gli elementi dell'interfaccia utente per il loro scopo funzionale, prendere decisioni semantiche in base a dove e quando i giocatori interagiranno con ciascun elemento dell'interfaccia utente e pianificare dove puoi riutilizzare gli elementi dell'interfaccia utente attraverso la tua esperienza.

Esistono molti modi diversi per brainstormare quali elementi dell'interfaccia utente sono necessari per i requisiti del tuo gameplay, ma è consigliato iniziare con l'immaginazione di ciò che un giocatore deve sapere non appena si unisce alla tua esperienza.Ad esempio, quando un giocatore apre l'esperienza di tag laser di esempio, potrebbe chiedersi le seguenti domande:

• Qual è l'obiettivo dell'esperienza?
• Come faccio a sapere chi è nella mia team?
• Come faccio a tenere traccia dei punti del mio team?
• Come faccio a selezionare un blaster?
• Come faccio a sapere dove il blaster spara un laser?
• Se sono su un Dispositivomobile, come faccio a sparare al mio blaster?
• Dopo aver sparato un laser, quando posso sparare di nuovo?
• Come faccio a sapere quando sto iniziando il round?
• Come faccio a sapere quando contrassegno con successo qualcuno con il mio blaster?
• Come faccio a sapere quando la squadra nemica mi contrassegna con successo?

Usando queste domande per capire quali informazioni sono imperative per i giocatori per avere successo, puoi classificare le esigenze dell'interfaccia utente del campione di esperienza di tag laser in tre categorie:

1. Informazioni sull'obiettivo dell'esperienza.
2. Informazioni sul blaster.
3. Informazioni sullo stato del Giocatore.

Ordinare le esigenze dell'interfaccia utente della tua esperienza in categorie è utile perché puoi formulare lo stile artistico intorno a ogni gruppo per rafforzare le informazioni di cui ogni categoria ha bisogno per insegnare ai giocatori.Ad esempio, se vuoi che la tua interfaccia utente dica ai giocatori quali azioni possono intraprendere per quanto riguarda lo Statodella salute del loro personaggio, potresti scegliere uno stile artistico con elementi dell'interfaccia utente che prioritizzino il colore verde e/o le icone plus in modo che i giocatori possano riconoscere rapidamente la loro funzione.

Dopo aver categorizzato i requisiti dell'interfaccia utente della tua esperienza in categorie, puoi creare un elenco degli elementi dell'interfaccia utente necessari per soddisfare i requisiti di ciascuna categoria.Per dimostrare, l'esperienza di tag laser di esempio utilizza la seguente tabella di elementi UI per affrontare la precedente lista di domande potenziali del giocatore.Mentre lavori attraverso questo Tutoriale, il curricolo UI continuerà a fare riferimento a questa lista e a evidenziare le principali decisioni di progettazione che si riferiscono a ciascuna categoria di elementi di interfaccia utente.

Ora che hai un elenco di elementi UI per la tua esperienza, è il momento di iniziare a fare scelte stilistiche e semantiche per ogni gruppo di elementi UI, a partire da un tema di colore.

Seleziona un tema di colore

Un tema di colore o tavolozza di colori è una selezione di colori che ciascuno comunica un messaggio attraverso un'applicazione coerente all'interno della tua esperienza, come l'utilizzo di un colore luminoso per indicare quando qualcosa è selezionabile.Applicare un tema di colore ai tuoi elementi UI è importante, soprattutto quando ti affidi alle convenzioni di colore all'interno del genere della tua esperienza, perché consente ai giocatori di comprendere rapidamente la tua UI con il minimo sforzo.

Nel Curriculum di arte ambientale, ogni metà dell'ambiente del tag laser è colorata da una vista dall'alto per differenziare quale area della mappa è vicina alla zona di spawn rispettiva di ciascuna team: menta per la squadra che si assembla sul lato sinistro della mappa, e carnazione rosa per la squadra che si assembla sul lato destro della mappa.Questi colori specifici sono utili perché sono complementari , intendendo che contrastano bene l'un l'altro e consentono ai giocatori di scansionare facilmente i loro dintorni e orientarsi indipendentemente dalla direzione a cui sono rivolti nell'Costruire.

>

>

L'esperienza di tag laser di esempio utilizza lo stesso tema di colore nella sua interfaccia utente per evidenziare le informazioni che appartengono a ciascuna team, come l'indicatore della squadra di ciascun Giocatoreall'interno dello Spazio3D o il tracker del punto della squadra che sovrappone lo schermo.Questa coerenza aiuta i giocatori a essere in grado di comprendere rapidamente le informazioni sull'obiettivo dell'esperienza durante il gameplay rapido di un'esperienza di sparatore in prima persona, soprattutto poiché i giocatori devono prendere decisioni rapide mentre attraversano l'Ambiente.

Quando selezioni un tema di colore per la tua esperienza, considera quanto Seguendo:

• La forza di un tema di colore dipende dal aiutare i giocatori a fare rapide associazioni mentali tra ogni colore e la loro funzione.Per questo motivo, limita il tuo tema di colore a evidenziare solo le informazioni chiave che vuoi che i giocatori associno ai tuoi elementi UI.
• Per garantire che i giocatori con dislessia colore possano comprendere il messaggio del tuo tema di colore, non affidarti sempre al colore da solo per distinguere tra elementi dell'interfaccia utente.Invece, combina i colori con icone, forme e/o animazioni per garantire che la tua interfaccia comunichi efficacemente con ogni Giocatore.
• È più importante che la tua interfaccia utente sia leggibile piuttosto che piacevole esteticamente.Per questo motivo, priorizza l'interfaccia utente semplice con il colore che rimane leggibile su entrambi gli elementi leggeri e scuri nel Mondo3D.

Per evidenziare la guida nell'ultimo punto, l'esperienza di tag laser di esempio utilizza i colori neutrali di nero e bianco per quasi ogni altro elemento UI che sovrappone lo schermo 2D.Il contrasto nero e bianco si completa a vicenda e sono facili da leggere poiché il resto dello schermo visualizza un Ambiente3D di colore diverso.

Outline semplici icone

Un' icona è un simbolo che rappresenta un'azione, un oggetto o un concetto in un'esperienza.Delineare le icone che sono semplici e intuitive è importante perché il risultato finale consente ai giocatori di riconoscere facilmente ciò che sono in grado di fare e ciò che vuoi dire loro attraverso la tua interfaccia utente senza usare il testo, che può ingombrare lo schermo e distrarre l'attenzione dai contenuti che contano.Questo processo è ancora più importante se il tuo pubblico accede alla tua esperienza utilizzando uno schermo piccolo su dispositivi mobili.

Le icone semplici hanno idealmente uno stile distinto dai tuoi elementi 3D mentre ancora complimento al mondo generale della tua esperienza.Ad esempio, nell'ambiente finale del Curriculum di arte ambientale , sia le risorse modulari che prop 3D hanno uno stile d'arte pulito e ad alta tecnologia che utilizza forme rettangolari con angoli morbidi e arrotondati.Dai pannelli levigati lungo il pavimento alle finestre quasi circolari sul soffitto, nulla include un bordo affilato.

Per completare questo stile artistico mentre rimane ancora unico, tutti gli elementi dell'interfaccia utente che imparerai a creare in seguito in questo tutorial includono un'estetica futuristica e angoli rotondi senza corrispondere alla forma linguistica delle risorse 3D nell'Ambiente.Questo mantiene il significato di ogni Iconadistinto da altre informazioni sia nello Spazio2D che 3D.

Per dimostrare questo concetto, vedi le seguenti due immagini dall'esperienza di tag laser di esempio della crosshair che dice ai giocatori dove il loro blaster spara sullo schermo e il pulsante che consente ai giocatori di sparare il loro blaster su dispositivi mobili.Entrambi gli icon includono angoli morbidi per essere coesi con il Mondocomplessivo, ma le loro forme esagonali e circolari li distinguono da qualsiasi cosa un giocatore potrebbe associare alle icone nell'esperienza.

Quando delinei icone semplici per la tua esperienza, considera quanto Seguendo:

• Le icone semplici sono leggibili anche quando sono piccole.Per questo motivo, limita i dettagli sulle tue icone che diventerebbero incomprensibili sugli schermi dei dispositivi mobili.
• Le icone sono potenti perché possono comunicare un messaggio indipendentemente dalla lingua del Giocatore.Fintanto che non ha un impatto sulla comprensione del giocatore della tua interfaccia utente, sostituisci il testo non necessario con icone per migliorare gli sforzi di localizzazione.
• Molte esperienze dello stesso genere utilizzano icone simili stilisticamente, come un'icona di spada che rappresenta la forza o un bicchiere che rappresenta la magia. Abbraccia il simbolismo all'interno del genere della tua esperienza in modo che i giocatori possano comprendere le tue icone senza ulteriori indicazioni.

Se non sai quali tipi di icone sono comuni nel Genere, Sessodella tua esperienza, consulta il Database di interfaccia utente di gioco.Questo strumento gratuito di risorse per i progettisti di interfaccia utente include screenshot da centinaia di giochi di diversi generi che puoi consultare durante il tuo processo di progettazione.

Stabilisci un ordine di interazione

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

Normalmente ci sono tre tipi di interazioni in un flusso di lavoro:

• Interazione primaria – L'azione che un giocatore è più probabile eseguire.
• Interazione secondaria – L'azione che un giocatore è probabile che esegua come alternativa all'azione principale.
• Interazione terziaria – L'azione che un giocatore è meno probabile 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 nell'esperienza di tag laser di 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ù probabile eseguire è selezionare tra i due diversi tipi di blaster, quindi i pulsanti blaster sono molto più grandi di qualsiasi altro elemento interattivo nel design.Questo livello di enfasi visiva cattura l'attenzione del Giocatoree richiama il suo occhio al centro dell'elemento UI generale.Dopo che il giocatore ha preso la sua decisione, il prossimo passo logico nel flusso di lavoro è confermare la loro selezione e avviare il round.Per questo motivo, il pulsante SELECT è direttamente sotto l'interazione primaria.

Sebbene improbabile, il giocatore potrebbe non sapere di essere in grado di selezionare uno dei pulsanti blaster per comunicare quale blaster vuole utilizzare.Per assistere in questa situazione, ci sono due pulsanti a freccia terziari che il giocatore può utilizzare per passare da una scelta all'altra.Questi pulsanti sono sottili e molto più piccoli degli elementi delle interazioni primarie e secondarie, ma sono anche percepibili al giocatore che ha bisogno di direzione su quali azioni è in grado di eseguire.

Se posizionassi queste interazioni primarie, secondarie e terziarie in un ordine di interazione diverso, come scambiare il pulsante SELECT con il pulsante freccia sinistra, i giocatori non avrebbero una direzione chiara sulla sequenza di scelte che devono fare.Per questo motivo, oltre all'accento visivo di un ordine di pulsanti, i flussi di lavoro efficaci seguono una gerarchia visiva che guida i giocatori attraverso il loro ordine ideale di decisioni in base alla direzione in cui è probabile che scansionino le informazioni, come da top a bottom e da sinistra a destra.

Quando si stabilisce un ordine di interazione per i flussi di lavoro nella propria esperienza, si consideri quanto Seguendo:

• I giocatori devono avere una chiara comprensione di quando possono interagire con la tua interfaccia utente per eseguire azioni.Per questo motivo, si consiglia di fornire almeno una forma di feedback visivo per gli elementi di interazione dell'interfaccia, come la visualizzazione di un contorno o il cambio della dimensione, del colore o dell'animazione di un pulsante quando è in primo piano.
• Se le etichette su elementi interattivi dell'interfaccia utente sono vaghe o simili l'uno all'altro nello stesso flusso di lavoro, i giocatori possono fraintendere come completare un'azione o un processo.Per evitare un'esperienza negativa del giocatore, crea etichette Eliminare/Pulire, concise e distinte l'una dall'altra .
• Se gli elementi dell'interfaccia utente interattiva sono troppo grandi, possono distrarre da altre informazioni importanti sullo schermo.Al contrario, se sono troppo piccoli, possono essere difficili da leggere o Selezionare, soprattutto se sono in prossimità ravvicinata su dispositivi mobili.Per questo motivo, è essenziale rivedere la dimensione dei tuoi elementi interattivi dell'interfaccia utente su varie dimensioni dello schermo .

In Implementazione in Studio , imparerai a utilizzare gli oggetti UIAspectRatioConstraint per garantire che gli elementi dell'interfaccia utente mantengano una proporzione specifica non importa quale dispositivo utilizzino i giocatori per accedere alla tua esperienza.Oltre a rendere più semplice il tuo processo di progettazione, questa tecnica può anche aiutarti a soddisfare la raccomandazione Tamanho e distanza del bersaglio touch delle Linee guida sull'accessibilità dei contenuti Web per creare una zona di tocco per gli elementi di interfaccia utente interattivi che è almeno 9x9 mm sui dispositivi mobili.

Determina un sistema di testo

Un sistema di testo è un insieme di regole su caratteri e stile per tutte le parole nella tua interfaccia utente, come "always bold headers" o "use green font when referencing a health stat" . Determinare un sistema di testo all'inizio del tuo processo di progettazione ti consente di avere una struttura che puoi applicare in modo coerente durante la tua esperienza in modo che i giocatori sappiano cosa aspettarsi quando cercano le informazioni di cui hanno bisogno

Mentre i sistemi di testo possono variare a seconda del genere dell'esperienza o dei requisiti del mondo 3D, la regola più importante che tutti i sistemi di testo devono seguire è garantire che tutto il testo dell'interfaccia utente sia chiaro e facile da leggere .Usando 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 interfaccia utente considerando i diversi modi in cui i giocatori possono interagire con il tuo testo, come:

• I dispositivi che i giocatori possono utilizzare per accedere alla tua esperienza.
• La lingua in cui i giocatori possono leggere il tuo testo localizzato.
• Il possibile background sottostante dietro al testo sullo schermo.

Ad esempio, il seguente design della risposta dello schermo quando un giocatore viene contrassegnato scala a una dimensione del carattere più piccola o più grande in base alla dimensione del Dispositivodel Giocatore, include abbastanza spazio su entrambi i lati del testo inglese per le lingue con traduzioni più lunghe e include un sfondo contrastante in modo che i giocatori possano leggere il testo indipendentemente dal colore del loro sfondo.

Quando determinare un sistema di testo per la tua esperienza, considera quanto Seguendo:

• Il testo è difficile da leggere quando si mescola con il rumore del suo background.Per migliorare la leggibilità della tua UI, mostra il testo su un colore contrastante o con uno stroke .
• Se non ridimensioni il tuo testo per diversi dispositivi, il testo occupa troppo spazio o diventa piccolo e indecifrabile sullo schermo del Giocatore.Per catturare discrepanze nel tuo testo, prova il tuo design su più dispositivi durante l'intero processo di progettazione.
• Le parole possono estendersi al di là del tuo design originale quando le localizzi in altre lingue.Per migliorare la composizione del tuo design, fa riferimento alla maggior parte dello spazio che il tuo testo può occupare sullo schermo .
• Mentre alcuni caratteri possono adattarsi all'estetica della tua esperienza, possono essere difficili da leggere in grandi quantità.Per questo motivo, utilizza testo stilizzato in modo sporadico , come per titoli o testo di avviso.

Una volta che hai un piano per lo stile artistico della tua interfaccia utente, puoi passare alla sezione successiva del tutorial per imparare a wireframeare la disposizione di ciascun elemento in diversi flussi di lavoro del giocatore.