Progettare i tuoi layout

Progettare i tuoi layout è il processo di progettazione della struttura e del flusso delle informazioni che desideri comunicare attraverso l'interfaccia utente in vari flussi di lavoro. Questo passaggio critico del tutorial ti consente di iterare sull'arrangiamento dei tuoi elementi UI, scoprire punti critici e migliorare l'esperienza del giocatore prima di investire tempo e risorse in un design problematico che non funziona per il tuo gioco.

Utilizzando il gioco di laser tag di esempio .rbxl come riferimento, questa sezione del curriculum dell'interfaccia utente ti mostra come strutturare i tuoi elementi UI sullo schermo, inclusa la guida su:

• Pianificare una gerarchia visiva per la tua UI che guidi intuitivamente i giocatori verso le funzionalità e le informazioni di cui hanno bisogno per avere successo nel tuo gioco.
• Bloccare gli elementi UI con forme di base per rivedere la composizione dei tuoi elementi UI insieme all'interfaccia utente e ai controlli touch di base di Roblox.
• Sviluppare flussi utente per tenere conto delle azioni necessarie che i giocatori devono compiere per raggiungere i loro obiettivi.

Dopo aver completato questa sezione, imparerai come costruire e configurare la tua UI in Studio in modo che rispetti il tuo stile artistico e i tuoi wireframe.

Pianifica una gerarchia visiva

Una gerarchia visiva è una struttura organizzativa che evidenzia gli elementi UI in base al loro ordine di importanza. Pianificare una gerarchia visiva per i diversi flussi di lavoro nel tuo gioco è importante perché prepara i giocatori al successo nel raggiungimento dei loro obiettivi, il che è particolarmente necessario per il gameplay rapido dei giochi sparatutto in prima persona in cui gli obiettivi cambiano di momento in momento.

Gerarchie visive efficaci guidano i giocatori attraverso le funzionalità e le informazioni di cui hanno bisogno per soddisfare i requisiti del tuo gameplay in base a dove guardano naturalmente sullo schermo per completare i flussi di lavoro. Ad esempio, la gerarchia visiva del gioco di laser tag di esempio deve guidare i giocatori attraverso le seguenti categorie di elementi UI mentre navigano nella mappa e taggano i giocatori della squadra avversaria:

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

La posizione di ciascuna di queste categorie sullo schermo nel design finale evidenzia il loro ordine di importanza:

• La prima categoria è vicino alla parte superiore perché contiene elementi UI che hanno la maggiore importanza su come vincere il gioco.
• La seconda categoria occupa la maggior parte dello spazio dello schermo vicino al centro perché funge da punto focale per attirare l'attenzione dei giocatori sull'azione nello spazio 3D, ed è la più significativa per giocare.
• La terza categoria è vicino ai lati perché i giocatori possono leggere queste informazioni periferiche senza deviare la loro attenzione dal gameplay.

Per alcuni generi di gioco, è necessario visualizzare solo una categoria di informazioni alla volta perché è l'unico tipo di informazione importante per il giocatore durante quel flusso di lavoro. Tuttavia, per i giochi sparatutto in prima persona, i giocatori devono vedere elementi UI di più categorie contemporaneamente perché forniscono tutte informazioni necessarie per avere successo, come il punteggio della loro squadra, il periodo di recupero per il loro blaster e se sono stati taggati fuori da un round.

Quando pianifichi una gerarchia visiva per i flussi di lavoro nel tuo gioco, considera quanto segue:

• Se raggruppi elementi UI di diverse categorie insieme su tutto lo schermo, i giocatori non sapranno dove guardare per ciò di cui hanno bisogno. Per aiutare i giocatori a navigare nel tuo gioco, raggruppa insieme gli elementi UI della stessa categoria.
• Se hai troppe categorie sullo schermo contemporaneamente, i giocatori potrebbero non sapere a quali informazioni prestare attenzione. Per evitare di sopraffare i giocatori con il disordine, visualizza gli elementi UI contestualmente per diversi flussi di lavoro.
• Allo stesso modo, se ci sono troppi elementi UI per categoria, possono distrarre i giocatori dalla comprensione di come completare un'azione o un processo. Per questo motivo, è importante utilizzare il tuo stile artistico per fornire un'enfasi visiva per i tuoi ordini di interazione ideali.

Per una revisione completa della gerarchia visiva per il gioco di laser tag di esempio, vedere la seguente tabella:

Bloccare gli elementi UI

Ora che hai in mente una gerarchia visiva, puoi bloccare singoli elementi UI utilizzando forme di base per rivedere la composizione del tuo layout UI personalizzato insieme all'interfaccia utente di base di Roblox su più dispositivi. Questo processo ti consente di vedere dove devi modificare il tuo design affinché sia efficace su tutte le dimensioni dello schermo che i giocatori possono utilizzare per accedere al tuo gioco, come su dispositivi mobili, tablet, laptop e schermi TV.

Prima di iniziare, devi capire quanto spazio dello schermo è disponibile per i tuoi elementi UI personalizzati tenendo conto dell'interfaccia utente di base di Roblox. Ad esempio, per impostazione predefinita, Roblox visualizza i seguenti elementi UI in ogni gioco:

• Un elenco di giocatori all'interno del gioco.
• La barra della salute del personaggio.
• Lo zaino del personaggio.
• Una finestra di chat.
• Un pulsante di cattura.
• Un menu a comparsa di emote del personaggio.

Puoi disabilitare qualsiasi di questi elementi che non soddisfano i requisiti di gameplay del tuo gioco per risparmiare spazio sullo schermo per la tua UI personalizzata. Ad esempio, il gioco di laser tag di esempio non richiede uno zaino perché i giocatori possono solo selezionare un singolo blaster. Tuttavia, se i giocatori potessero selezionare più blaster contemporaneamente, il gioco potrebbe disabilitare questa UI di base per garantire che ci sia sempre spazio per il selettore del blaster quando i giocatori respawnano, quindi fornire un'altra posizione per selezionare dal proprio inventario.

Oltre all'interfaccia utente di base di Roblox, devi anche considerare lo spazio necessario per i controlli touch predefiniti di Roblox. Ad esempio, quando i giocatori accedono al tuo gioco utilizzando un dispositivo mobile, un joystick virtuale viene visualizzato nell'angolo in basso a sinistra dello schermo e un pulsante di salto viene visualizzato nell'angolo in basso a destra dello schermo. Questo assicura che i giocatori possano sempre navigare nel tuo gioco, anche quando non hanno accesso a una tastiera o a un controller.

Tenendo conto sia degli elementi UI di base di Roblox che sono necessari per il gameplay del tuo gioco, sia della possibilità di controlli touch, puoi bloccare i tuoi elementi UI personalizzati in un design che è adattabile su dispositivi. Questo è importante perché significa che non devi mantenere versioni separate della tua UI mentre aggiorni il tuo gioco.

Per dimostrare questo metodo, rivedi le seguenti due immagini di come il gioco di laser tag di esempio blocca gli elementi UI personalizzati sia per dispositivi mobili che per PC. Entrambe le immagini includono:

• Forme di base per rappresentare la UI personalizzata perché consente al design di passare facilmente attraverso diverse iterazioni prima di raggiungere il design finale.
• Colorazione in scala di grigi che consente all'occhio di seguire le informazioni senza la distrazione di un ambiente di sfondo colorato.
• Lo stato aperto della finestra di chat e l'elenco dei giocatori attivi e della finestra di chat per vedere quanto spazio occupano sullo schermo.
• Spazio per i controlli mobili anche se non sono necessari per i dispositivi PC.

Quando progetti i tuoi layout in questo modo, pensando a quanti elementi UI possono esistere sullo schermo contemporaneamente, stai preparando il futuro per tutti i potenziali layout in base ai dispositivi e ai flussi di lavoro dei giocatori.

Quando blocchi gli elementi UI per i tuoi layout, considera quanto segue:

• Dove e come blocchi la tua UI può influenzare la composizione dei tuoi layout. Punta a un equilibrio e una simmetria nella quantità e nelle dimensioni dei tuoi elementi UI personalizzati insieme all'interfaccia utente di base di Roblox.
• Interagire con UI che sono lontane dagli angoli inferiori di alcuni dispositivi mobili e tablet è scomodo o impossibile. Posiziona gli elementi interattivi in zone facili da raggiungere vicino alla posizione naturale di riposo per i pollici.
• Quando i giocatori navigano nel tuo ambiente, lo spazio 3D può diventare distraente rispetto alla tua UI sullo schermo. Testa i tuoi layout contro una varietà di possibili sfondi per garantire che i tuoi elementi UI sullo schermo rimangano chiari e leggibili.

Sviluppa flussi utente

Un flusso utente è una raccolta di percorsi che i giocatori possono seguire in un gioco per completare un compito, come scegliere un'arma, acquistare un oggetto o curare un personaggio. I flussi utente di solito iniziano dove ti aspetti che i giocatori inizino il compito e finiscono con l'azione finale o il risultato che i giocatori raggiungono alla fine del compito. Inoltre, flussi utente efficaci tengono anche conto di percorsi insoliti che i giocatori potrebbero voler seguire da soli per raggiungere lo stesso obiettivo.

Il seguente diagramma di flusso mostra il flusso utente di un giocatore che entra e gioca al gioco di laser tag di esempio. Quando un giocatore apre il gioco, si unisce a un lobby. Se il round non è ancora in corso, aspetta fino all'inizio del ciclo del round, altrimenti si unisce a una squadra che sta attualmente giocando. Se la condizione finale non è stata soddisfatta, come colpire un limite di tempo o taggare 10 giocatori per squadra, i giocatori selezionano il loro blaster e vivono il gameplay principale di taggare o essere taggati dalla squadra nemica, equipaggiando un nuovo blaster all'interno dell'arena, o respawnando dopo essere stati taggati fuori. Una volta che i giocatori soddisfano la condizione finale, terminano il round e si uniscono di nuovo al lobby.

È importante sviluppare flussi utente per tutto ciò che i giocatori possono fare nel tuo gioco perché ti consente di valutare dove e come vuoi che completino i compiti e anticipare dove puoi alleviare i punti critici per chiunque segua il proprio percorso. Ad esempio, se dovessi sviluppare flussi utente aggiuntivi per il gioco di laser tag di esempio, cosa succede quando i giocatori:

• Abbandonano un round prima che la condizione finale sia soddisfatta?
• Lasciamo il gioco mentre si uniscono a una squadra?
• Ricevono una telefonata nel mezzo di un round?
• Perdono la connessione al round per meno di 15 secondi?

Visualizzando tutte le azioni potenziali che i giocatori possono intraprendere o gli scenari che possono accadere ai giocatori mentre completano i compiti, puoi determinare meglio come il layout dei tuoi elementi UI influisce negativamente sulla loro esperienza, quindi apportare modifiche prima di implementare i tuoi design in Studio. Se i compiti sembrano intuitivi, non invadenti e convenienti, i giocatori sono più propensi a trascorrere tempo nel tuo gioco e a tornare in un secondo momento.

Quando sviluppi flussi utente per il tuo gioco, considera quanto segue:

• Ciò che vuoi che i giocatori facciano nel tuo gioco e ciò che vogliono fare potrebbe essere completamente diverso. È meglio testare i tuoi layout con più tipi di giocatori per comprendere i percorsi che vogliono seguire per raggiungere i loro obiettivi.
• I diagrammi di flusso possono diventare difficili da leggere e inefficaci se cercano di catturare più scenari contemporaneamente all'interno del diagramma. Per concentrare la tua attenzione su ciascun compito, limita i diagrammi di flusso a un compito primario alla volta.
• I modelli di interazione variano a seconda che i giocatori stiano utilizzando controlli touch, gamepad o mouse per interagire con il tuo gioco. Se stai progettando per più dispositivi, sviluppa flussi utente unici per ciascun dispositivo in modo da poter identificare i punti critici e semplificare i flussi di lavoro.

Dopo aver finalizzato il design dei tuoi wireframe, è tempo di passare a Studio e dare vita alla tua UI.