Scegli uno stile d'arte

Scegliere uno stile di arte è il processo di progettazione di una direzione artistica per i tuoi elementi UI. È importante iniziare il tuo processo di progettazione con uno stile di arte in modo che gli stili di arte forniscono regole di fondo visive che puoi riferirti per assicurarti che la tua interfaccia utente fornisca in modo intuitivo le informazioni su ciò che possono fare nella tua esperienza.

Usando il file sample laser tag experience.rbxl come riferimento, questa sezione del catalogo UI mostra come prendere decisioni significative su come progettare i tuoi elementi UI in base al genere della tua esperienza, tra cui la guida 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 rafforza 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 di schermo.
• Stabilire un ordine dei pulsanti che corrisponda alla probabilità di diversi flussi di lavoro del giocatore.
• Determinazione di un sistema di testo che garantisce la leggibilità sui 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 nella tua esperienza.

Identificare i tuoi elementi UI

Il primo passo per scegliere uno stile d'arte per la tua interfaccia utente è 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, poiché ti consente di categorizzare gli elementi UI in base al loro scopo funzionale, prendere decisioni semantiche in base all'ubicazione e alla posizione in cui i giocatori interagiscono con

Ci sono molti modi diversi per brainstorm quale elementi UI sono necessari per i requisiti di gioco del tuo gameplay, ma è raccomandato di iniziare con l'immaginazione di ciò di cui un giocatore ha bisogno di sapere non appena si unisce alla tua esperienza. Ad esempio, quando un giocatore apre l'esperienza laser di campionamento, potrebbe chiedersi le seguenti domande:

• Qual è il obiettivo dell'esperienza?
• Come posso 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 laser viene sparato dal blaster?
• Se sono su un Dispositivomobile, come faccio a sparare al mio blaster?
• Dopo aver sparato un laser, quando posso sparare di nuovo?
• Come posso sapere quando sto iniziando la partita?
• Come posso sapere quando taggo con successo qualcuno con il mio blaster?
• Come faccio a sapere quando il team nemico mi contrassegna con successo?

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

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

Classificare l'esperienza UI delle tue esigenze in categorie è utile, perché puoi formulare il tuo stile di arte intorno a ciascun gruppoing per rafforzare quale informazioni ogni categoria deve insegnare ai giocatori. Ad esempio, se vuoi che la tua UI dica ai giocatori quali azioni possono fare riguardo alla loro salute di Stato, potresti scegliere uno stile di arte con elementi UI che priorizzano il colore verde e / o i plus icon in modo che i gioc

Dopo aver sortito le esigenze dell'interfaccia utente in base alle categorie, puoi creare una lista di elementi UI necessari per soddisfare i requisiti di ciascuna categoria. Per dimostrare, l'esempio di laser tag di esperienza utilizza il seguente tabella di elementi UI per affrontare la lista precedente di potenziali domande del giocatore. Mentre lavori attraverso questo Tutoriale, il curricolo UI continuerà a fare riferimento a questa lista e sottolineare le decisioni di design principali che si riferiscon

Ora che hai una lista di elementi UI per la tua esperienza, è ora di iniziare a fare scelte stilistiche e semantiche per ciascun gruppo di elementi UI, iniziando con un tema di colore.

Seleziona un Tema di Colore

Un tema del colore , o palette dei colori, è una selezione di colori che ciascuno comunica un messaggio attraverso un'applicazione coerente nella tua esperienza, come utilizzare un colore brillante per indicare quando qualcosa è selezionabile. L'applicazione di un tema del colore alla tua elementi UI è importante, specialmente quando si basa su le convenzioni del colore all'interno del genere della tua esperienza, perché consente ai giocatori di capire rapidamente la tua UI con un

Nel curricolo d'arte ambientale, ogni metà del laser tag environment è color-coded da una vista top-down per differenziare quale area della mappa è vicino alla rispawne area del team rispawne a sinistra: mint per il team che

L'esperienza del laser tag di esempio utilizza lo stesso tema di colore nella sua interfaccia utente per sottolineare le informazioni che riguardano ciascuna squadra, come il team point tracker che sovrappone lo schermo. Questa coerenza aiuta i giocatori a capire rapidamente l'obiettivo dell'esperienza durante la frenetica giocabilità di un'esperienza di sparatore in prima persona, specialmente mentre i giocatori devono prendere rapidamente decisioni mentre

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

• La forza di un tema di colore si basa sull'aiutare i giocatori a fare rapide associazioni mentali tra ciascun colore e la loro funzione. Per questo motivo, limitare il tuo tema di colore a mostrare solo le informazioni chiave che i giocatori vogliono associare con i tuoi elementi UI.
• Per assicurarti che i giocatori con cecità dei colori possano capire il messaggio del tuo tema dei colori, non farti mai completamente affidare ai colori per distinguere tra gli elementi UI. Invece, combina i colori con le icone, le forme e/o le animazioni per assicurarti che il tuo UI comunichi efficacement con ogni Giocatore.
• È più importante per la tua interfaccia utente essere leggibile che esteticamente piacevole. Per questo motivo, priorizza l'interfaccia utente semplice con colore che rimane leggibile sia su elementi leggeri che su elementi scuri nel Mondo3D .

Per sottolineare la guida nell'ultimo punto, l'esperienza di tag laser di esempio utilizza i colori neutrali del nero e bianco per quasi ogni altro elemento UI che sovrappone la schermata 2D. Il contrasto nero e bianco si svolge bene l'un l'altro e sono facili da leggere come il resto della schermata mostra un Ambiente3D 2D.

Contorno di icone semplici

Un icona è un simbolo che rappresenta un'azione, un oggetto o un concetto in un'esperienza. Outlining le icone che sono semplici e intuitive è importante poiché il risultato finale consente ai giocatori di facilmente riconoscere ciò che sono in grado di fare e ciò che vuoi dire attraverso la tua UI senza usare il testo, che può ingombrare lo schermo e attirare l'attenzione dal contenuto

I semplici icone idealimente hanno uno stile distinto dai tuoi 3D elementi mentre si complementa ancora il mondo generale della tua esperienza. Ad esempio, nell'ambiente finale del Environment Art Curriculum, sia le risorse modulari che i prop 3D hanno uno stile d'arte pulito e ad alta tecnologia che utilizza le forme rettangolari con angoli arrotondati. Dalle pannelli arrotondate sul pavimento alla vicino finestra circolare nel

Per complementare questo stile artistico mentre si rimane ancora unico, tutti gli elementi UI che imparerai a creare in seguito in questo tutorial includono un'estetica futuristica e angoli rotondi senza corrispondere alla lingua di forma delle risorse 3D nell'Ambiente. Ciò mantiene il significato di ciascun'Iconaseparato da altre informazioni nell'Spazio2D e 3D.

Per dimostrare questo concetto, vedi le seguenti due immagini dall'esperienza di tag laser di esempio del crosshair che dice ai giocatori dove il loro blaster si trova sullo schermo, e il pulsante che consente ai giocatori di sparare il loro blaster sui dispositivi mobili. Entrambi gli icon si includono angoli morbidi per essere coerenti con il Mondocomplessivo, ma le loro forme esagonali e circolari li fanno separare da qualsiasi cosa un giocatore potrebbe associare agli

Quando si tratta di semplificare le icone per la tua esperienza, considera le Seguendo:

• Le icone semplici sono leggibili anche quando sono piccole. Per questo motivo, limita i dettagli delle tue icone che diventerebbero non riconoscibili sullo schermo del dispositivo mobile.
• Gli icon sono potenti perché possono comunicare un messaggio, indipendentemente dalla lingua del Giocatore. Finché non influisce sulla comprensione del giocatore della tua interfaccia utente, sostituisci il testo non necessario con gli icon per migliorare gli sforzi di localizzazione.
• Molte esperienze dello stesso genere utilizzano icone che sono stilisticamente simili, come un'icona di spada che rappresenta la forza, o una tazza che rappresenta la magia. Accogli il simbolismo all'interno del genere della tua esperienza in modo che i giocatori possano capire i tuoi pulsanti senza una guida aggiuntiva.

Se non sai quali sono i tipi di icone comuni nel Genere, Sessodella tua esperienza, visita il database delle interfacce utente del gioco . Questo strumento gratuito per i designer UI include gli screenshot da centinaia di giochi di diversi generi che puoi fare riferimento durante il tuo processo di progettazione.

Stabilisci un ordine di interazione

Un ordine d'interazione è la sequenza di interazioni che i giocatori possono avere con la tua interfaccia utente. Poiché ci sono spesso più elementi interattabili UI sulla schermata, è importante stabilire un ordine d'interazione intuitivo per aiutare i giocatori a prendere decisioni mentre navigano in varie workflows.

Ci sono tipicamente 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 eseguire come alternativa all'azione principale.
• Interazione terziaria – L'azione che un giocatore è meno probabile di eseguire.

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

In questo flusso di lavoro, l'azione che un giocatore è più probabile di eseguire è selezionare tra i due diversi tipi di blaster, in modo che i pulsanti del blaster siano molto più grandi di qualsiasi altro elemento interattabile nella progettazione. Questo livello di enfasi visiva cattura l'attenzione del Giocatoree attira il loro occhio sul centro dell'elemento UI generale. Dopo che il giocatore ha fatto la sua

Mentre è improbabile, il giocatore potrebbe non sapere che sono in grado di selezionare uno dei pulsanti del laser per comunicare quale laser vuole usare. Per aiutare in questa situazione, ci sono due pulsanti di freccia terziari che il giocatore può utilizzare per passare da un'opzione all'altra. Questi pulsanti sono sottili e molto più piccoli degli elementi delle interazioni principali e secondarie, ma sono anche percepibili dal giocatore che ha bisogno di direzione su quali azioni è

Se si posizionassero queste interazioni primarie, secondarie e terziarie in un ordine di interazione diverso, come scambiare il pulsante SELECT con il pulsante sinistro del mouse, i giocatori non avrebbero una chiara direzione sulla sequenza delle scelte che hanno bisogno di fare. Per questo motivo, oltre all'aspetto visivo di un ordine di pulsanti, i flussi di lavoro efficaci segu

Quando si crea un ordine di interazione per i flussi di lavoro nella tua esperienza, considera quanto Seguendo:

• I giocatori devono avere una chiara comprensione di quando possono interagire con la tua interfaccia utente per eseguire azioni. Per questo motivo, è consigliato fornire almeno una forma di feedback visivo per gli elementi dell'interfaccia utente interattabili, come mostrare un'outline o cambiare la dimensione, la forma o l'animazione di un pulsante quando è in focus.
• Se le etichettature sugli elementi dell'interfaccia utente interattabili sono voci vuote o simili tra loro nell'ambito stesso del flusso di lavoro, i giocatori possono confondere come completare un'azione o un processo. Per evitare un'esperienza negativa del giocatore, crea etichette Eliminare/Pulire, concise e distinte tra loro .
• Se gli elementi dell'interfaccia utente interattiva sono troppo grandi, possono distrarre dall'altra informazione importante sullo schermo. Invece, se sono troppo piccoli, possono essere difficili da leggere o difficili da Selezionare, specialmente se sono in prossimità vicina su dispositivi mobili. Per questo motivo, è essenziale rivedere la dimensione dei tuoi elementi dell'interfaccia utente interattiva su diverse dimensioni dello schermo .

In implementa in Studio , imparerai a utilizzare gli oggetti UIAspectRatioConstraint per assicurarti che gli elementi UI mantengano un rapporto di aspetto specifico indipendentemente dal dispositivo con cui i giocatori accedono alla tua esperienza. Oltre a rendere il tuo processo di progettazione più facile, questa tecnica può anche ai

Determina un sistema di testo

Un sistema di testo è un insieme di regole sui caratteri e lo stile per tutte le parole nella tua UI, come "utilizzare caratteri in grassetto sempre" o "utilizzare caratteri verdi quando si fa riferimento a una statistica di salute". Determinare un sistema di testo in anticipo nel tuo processo di progettazione ti consente di avere una struttura che puoi applicare in modo coerente in tutta la tua esperienza in modo che i giocatori sappiano cosa aspett

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 è assicurarsi che tutto il tuo testo 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

• I dispositivi player possono usare per accedere alla tua esperienza.
• La lingua in cui i giocatori possono leggere il tuo testo localizzato.
• Il possibile sfondo sottostante dietro il testo sullo schermo.

Ad esempio, la seguente progettazione della risposta dello schermo quando un giocatore viene etichettato fuori scala in una dimensione di carattere più piccola o più grande in base al Dispositivodel Giocatore, include abbastanza spazio su entrambi i lati del testo per le lingue con traduzioni più lunghe e include un sfondo di sfondo in modo che i giocatori possano leggere il testo indipendentemente dal colore che è nel loro sfondo.

Quando si determinano un sistema di testo per la propria esperienza, considera le Seguendo:

• Il testo è difficile da leggere quando si mescola con il rumore del suo sfondo. Per migliorare la leggibilità della tua interfaccia utente, mostra il testo sopra un colore contrastante o con un tratto .
• Se non metti il tuo testo su diversi dispositivi, il testo occupa troppo spazio o diventa troppo piccolo e indecifrabile sullo schermo del Giocatore. Per catturare le discrepanze nel tuo testo, testa il tuo design su più dispositivi durante il processo di progettazione.
• Le parole possono estendere oltre il tuo design originale quando le localizzi in altre lingue. Per migliorare la composizione del tuo design, iferisci il maggior spazio che il tuo testo può occupare sullo schermo .
• Mentre alcuni caratteri possono adattarsi alle linee guida della tua esperienza, potrebbero essere difficili da leggere in grandi quantità. Per questo motivo, usa il testo stilizzato con parcimonia , come per i titoli o il testo di avviso.

Una volta che hai un piano per lo stile dell'arte della tua interfaccia utente, puoi passare alla prossima sezione del tutorial per imparare a wireframe il layout di ciascun elemento in varie workflows del giocatore.