Progettare i tuoi layout

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

Utilizzando il file di esempio dell'esperienza laser tag .rbxl come riferimento, questa sezione del curriculum interfaccia utente ti mostra come strutturare i tuoi elementi UI sullo schermo, incluse indicazioni 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 nella tua esperienza.
• Bloccare gli elementi UI con forme di base per rivedere la composizione degli elementi UI insieme all'interfaccia principale e ai controlli touch di Roblox.
• Sviluppare flussi utente per considerare le azioni necessarie che i giocatori devono compiere per raggiungere i loro obiettivi.

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

Pianifica una gerarchia visiva

Una gerarchia visiva è una struttura di organizzazione che evidenzia gli elementi UI in base al loro ordine di importanza. Pianificare una gerarchia visiva per i diversi flussi di lavoro nella tua esperienza è importante perché prepara i giocatori al successo nel raggiungere i loro obiettivi, il che è particolarmente necessario per il gameplay rapido delle esperienze di sparatutto in prima persona in cui gli obiettivi cambiano di momento in momento.

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

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

La posizione che ciascuna di queste categorie ha 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 significanza su come vincere il gioco.
• La seconda categoria occupa la maggior parte dello spazio sullo schermo vicino al centro perché funge da punto focale per attirare l'attenzione dei giocatori sull'azione nello spazio 3D, e ha la maggiore significanza per giocare.
• La terza categoria è vicino ai lati perché i giocatori possono leggere queste informazioni accessorie senza distogliere la loro attenzione dal gameplay.

Per alcuni generi di esperienza, potrebbe essere necessario visualizzare solo una categoria di informazioni alla volta perché è l'unico tipo di informazione importante per il giocatore in quel flusso di lavoro. Tuttavia, per le esperienze di sparatutto in prima persona, i giocatori devono vedere elementi UI di più categorie contemporaneamente poiché forniscono tutte informazioni di cui il giocatore ha bisogno per avere successo, come il punteggio della loro squadra, il tempo di attesa per il blaster e se sono stati taggati fuori da un round.

Quando pianifichi una gerarchia visiva per i flussi di lavoro nella tua esperienza, considera quanto segue:

• Se raggruppi elementi UI di diverse categorie insieme in tutto lo schermo, i giocatori non sapranno dove cercare ciò di cui hanno bisogno. Per aiutare i giocatori a navigare nella tua esperienza, raggruppa gli elementi UI della stessa categoria insieme.
• 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 l'esperienza laser tag di esempio, vedere la seguente tabella:

Blocca gli elementi UI

Ora che hai in mente una gerarchia visiva, puoi bloccare i singoli elementi UI usando forme di base per rivedere la composizione del tuo layout UI personalizzato insieme all'interfaccia principale 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 alla tua esperienza, come su mobile, tablet, laptop e schermi TV.

Prima di iniziare, devi scoprire quanto spazio sullo schermo è disponibile per i tuoi elementi UI personalizzati tenendo conto dell'interfaccia principale di Roblox. Ad esempio, per impostazione predefinita, Roblox visualizza i seguenti elementi UI in ogni esperienza:

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

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

In aggiunta all'interfaccia principale di Roblox, devi anche considerare lo spazio necessario per i controlli touch predefiniti di Roblox. Ad esempio, quando i giocatori accedono alla tua esperienza utilizzando un dispositivo mobile, un joystick virtuale viene visualizzato nell'angolo in basso a sinistra dello schermo e un pulsante di salto appare nell'angolo in basso a destra dello schermo. Questo garantisce che i giocatori siano sempre in grado di navigare nella tua esperienza, anche quando non hanno accesso a una tastiera o a un controller.

Tenendo conto sia degli elementi UI principali di Roblox necessari per il gameplay della tua esperienza, 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 la tua esperienza.

Per dimostrare questo metodo, rivedi le seguenti due immagini di come l'esperienza 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 l'UI personalizzata poiché 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 dell'elenco dei giocatori attivi 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 rendendo il design futuro-proof 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 i tuoi elementi UI possono influenzare la composizione dei tuoi layout. Punta a un equilibrio e a una simmetria nella quantità e nelle dimensioni dei tuoi elementi UI personalizzati accanto all'interfaccia principale di Roblox.
• Interagire con UI che si trovano lontano dagli angoli inferiori di alcuni dispositivi mobili e tablet è scomodo o addirittura impossibile. Posiziona gli elementi interattivi nelle zone facilmente raggiungibili vicino alla posizione naturale di riposo per i pollici.
• Quando i giocatori navigano nel tuo ambiente, lo spazio 3D può diventare distrattivo rispetto alla tua UI sullo schermo. Testa i tuoi layout contro una varietà di possibili sfondi per garantire che i tuoi elementi UI siano chiari e leggibili.

Sviluppa flussi utente

Un flusso utente è una raccolta di percorsi che i giocatori possono seguire in un'esperienza per completare un compito, come scegliere un'arma, acquistare un oggetto o curare un personaggio. I flussi utente iniziano tipicamente 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 dei percorsi inusuali che i giocatori potrebbero voler intraprendere autonomamente per raggiungere lo stesso obiettivo.

Il seguente diagramma di flusso mostra il flusso utente di un giocatore che entra e gioca nell'esperienza laser tag di esempio. Quando un giocatore apre l'esperienza, si unisce a un lobby. Se il round non è ancora in corso, aspettano fino a quando il ciclo del round inizia, altrimenti si uniscono 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 scelgono il loro blaster e vivono il gameplay principale di taggare o essere taggati dalla squadra nemica, equipaggiando un nuovo blaster nell'arena, o respawnando dopo essere stati taggati fuori. Una volta che i giocatori soddisfano la condizione finale, completano il round e tornano di nuovo nella lobby.

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

• Abbandonano un round prima che la condizione finale sia soddisfatta?
• Lascia l'esperienza mentre si unisce a una squadra?
• Ricevono una chiamata telefonica nel mezzo di un round?
• Perdono la connessione al round per meno di 15 secondi?

Visualizzando tutte le potenziali azioni che i giocatori possono intraprendere o gli scenari che possono capitare durante il completamento dei compiti, puoi determinare meglio come il layout dei tuoi elementi UI impatti negativamente sulla loro esperienza, quindi apportare modifiche prima di implementare i tuoi design in Studio. Se i compiti sembrano intuitivi, discreti e convenienti, è più probabile che i giocatori trascorrano tempo nella tua esperienza e tornino in un secondo momento.

Quando sviluppi flussi utente per la tua esperienza, considera quanto segue:

• Ciò che vuoi che i giocatori facciano nella tua esperienza e ciò che vogliono fare può essere completamente diverso. È meglio testare i tuoi layout con più tipi di giocatori per avere un'idea dei percorsi che vogliono intraprendere 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 concentrarti su ciascun compito, limita i diagrammi di flusso a un compito principale alla volta.
• I modelli di interazione variano a seconda che i giocatori stiano usando controlli touch, gamepad o mouse per interagire con la tua esperienza. Se stai progettando per più dispositivi, sviluppa flussi utente unici per ciascun dispositivo in modo da poter identificare i punti dolenti 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.