Wireframe le tue layout

Wireframing your layouts è il processo di progettazione della struttura e del flusso dell'informazione che vuoi comunicare attraverso l'UI in varie workflows. Questo passo critico del tutorial ti consente di itere sull'arrangiamento dei tuoi elementi UI, scopri i punti di dolore e migliora l'esperienza del Giocatoreprima di investire tempo e risorse in un design problematico che non funziona per la tua esperienza.

Usando il file sample laser tag experience.rbxl come riferimento, questa sezione del curricolo UI mostra come strutturare i tuoi elementi UI sullo schermo, tra cui la guida su:

• Pianificare una gerarchia visiva per la tua interfaccia utente che intuitivamente porta i giocatori alle funzionalità e alle informazioni di cui hanno bisogno per avere successo nella tua esperienza.
• Blocco negli elementi UI con forme di base per rivedere la composizione dei tuoi elementi UI insieme ai ControlliUI e touch.
• Lo sviluppo di flussi utente per tenere conto delle azioni necessarie che i giocatori compiono per raggiungere i loro obiettivi.

Dopo aver completato questa sezione, imparerai a costruire e configurare la tua interfaccia utente in Studio che rispetta il tuo stile di arte e i wireframe.

Pianificare una gerarchia visiva

Una gerarchia visiva è una struttura di organizzazione che mette in evidenza gli elementi dell'interfaccia utente per il loro ordine di importanza. La progettazione di una gerarchia visiva per i diversi workflows nella tua esperienza è importante poiché imposta i giocatori per il successo nel raggiungere i loro obiettivi, il che è particolarmente necessario per il gameplay rapido delle esperienze di spara prima persona in cui i goal cambiano da momento a momento.

Le efficaci gerarchie visive guidano i giocatori attraverso le funzionalità e le informazioni di cui hanno bisogno per soddisfare i requisiti di gioco secondo il fatto che naturalmente guardano sulla schermata per completare i flussi di lavoro. Ad esempio, la gerarchia visiva della esperienza laser di esempio deve guidare i giocatori attraverso le seguenti categorie di elementi UI mentre navigano sulla mappa e contrassegnare i giocatori sul team nemico:

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

La posizione di ciascuna di queste categorie sullo schermo nella presentazione finale evidenzia il loro ordine di importanza:

• La prima categoria è vicino alla parte superiore perché contiene elementi UI che hanno la maggior rilevanza su come vincere il Gioco.
• La seconda categoria occupa la maggior parte dello spazio sullo schermo vicino al centro poiché agisce come punto focale per attirare l'attenzione dei giocatori sull'azione nello Spazio3D e ha il maggior significato per giocare al Gioco.
• La terza categoria è vicino alle pagine perché i giocatori possono leggere queste informazioni periferali senza distrarre la loro attenzione dal Partita.

Per alcuni generi di esperienza, devi visualizzare solo una categoria di informazioni alla volta poiché è il solo tipo di informazione importante per il giocatore durante questo flusso di lavoro. Tuttavia, per le esperienze first-person, i giocatori devono vedere gli elementi UI di più categorie contemporaneamente poiché forniscono tutte le informazioni di cui il giocatore ha bisogno per avere successo, come il punteggio della loro team, il periodo di recupero per il loro laser

Quando si progetta una gerarchia visiva per i flussi di lavoro nella tua esperienza, considera quanto Seguendo:

• Se metti gli elementi dell'interfaccia utente del gruppo insieme in tutta la schermata, i giocatori non sapranno dove cercare ciò di cui hanno bisogno. Per aiutare i giocatori a navigare nella tua esperienza, gruppo gli elementi dell'interfaccia utente del gruppo insieme .
• Se hai troppi categori sullo schermo contemporaneamente, i giocatori potrebbero non sapere quale informazione devono prestare attenzione. Per evitare di sovraccaricare i giocatori con la disattenzione, visualizza elementi UI in modo contextuale per diversi flussi di lavoro .
• Allo stesso modo, se ci sono troppi elementi UI per categoria, può distrarre i giocatori dal capire come completare un'azione o un processo. Per questo motivo, è importante usare il tuo stile di arte per fornire un'attenzione visiva per i tuoi ordini d'azione ideali .

Per una panoramica completa della gerarchia visiva per l'esperienza del laser tag di esempio, vedi la seguente tabella:

Blocca negli elementi UI

Ora che hai una gerarchia visiva in mente, puoi bloccare in singoli elementi UI usando forme di base per rivedere la composizione della tua layout UI personalizzata insieme alla UI di base di Roblox su più dispositivi. Questo processo ti consente di vedere dove devi modificare il tuo design in modo che sia efficace su tutte le dimensioni di schermo che i giocatori possono usare per accedere alla tua esperienza, come su mobile, tablet, laptop e schermi TV.

Prima di iniziare, devi capire quanto spazio di schermo è disponibile per i tuoi elementi UI personalizzati mentre fattori in base all'interfaccia utente principale di Roblox. Ad esempio, per impostazione predefinita, Roblox mostra 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 popup di emote del personaggio.

Puoi disabilitare qualsiasi di questi elementi che non soddisfano i requisiti di gioco della tua esperienza in order to save screen space for your custom UI. Ad esempio, l'esperienza di laser tag di campionamento non richiede un zaino perché i giocatori hanno solo la capacità di selezionare un singolo blaster. Tuttavia, se i giocatori potessero selezionare più blaster contempor

Oltre all'interfaccia utente principale di Roblox, è necessario anche considerare lo spazio di schermo necessario per i Controllitouch predefiniti di Roblox. Ad esempio, quando i giocatori accedono alla tua esperienza utilizzando un Dispositivomobile, viene visualizzato un pollice virtuale nell'angolo in basso a sinistra dello schermo e viene visualizzato un pulsante di salto nell'angolo in basso a destra dello schermo. Ciò garantisce che i giocatori s

Tendo conto sia degli elementi chiave dell'interfaccia utente Roblox necessari per il gameplay della tua esperienza, sia dei possibili Controllitouch, puoi bloccare i tuoi elementi UI personalizzati in un design che si adatta ai dispositivi. Questo è importante poiché significa che non è necessario mantenere separate le versioni della tua UI mentre aggiorni la tua esperienza.

Per dimostrare questo metodo, fai clic sulle seguenti due immagini di come l'esperienza di tag laser di esempio blocca negli elementi UI personalizzati per entrambi i dispositivi mobile e PC. Entrambe le immagini includono:

• Forme di base per rappresentare l'interfaccia utente personalizzata poiché consente al design di passare facilmente attraverso più itérations prima di raggiungere il design finale.
• Colorazione in grigio che consente all'occhio di seguire le informazioni senza la distrazione di un Ambientedi sottofondo colorato
• Lo stato aperto della finestra di chat e la lista di giocatori attivi e finestra di chat per vedere quanto spazio occupano sullo schermo.
• Spazio per i controlli del mobile anche se non sono necessari per i dispositivi PC.

Quando progetti le tue layout in questo modo mentre pensi a quante parti dell'interfaccia utente possono essere sullo schermo contemporaneamente, stai futuristicamente proteggendo tutte le potenziali layout in base ai dispositivi e workflows dei giocatori.

Quando blocchi gli elementi nell'interfaccia utente per i tuoi layout, considera il Seguendo:

• Dove e come blocchi nella tua UI può influenzare la composizione dei tuoi layout. Aim for balance and symmetry nella quantità e dimensioni dei tuoi elementi UI personalizzati insieme all'interfaccia utente principale di Roblox.
• Interagire con UI che sono lontani dagli angoli inferiori di alcuni dispositivi mobili e tablet è sia comodo che impossibile. Inserisci elementi interattabili nelle aree facilmente raggiungibili vicino alla posizione di riposo naturale per le dita. * Mentre i giocatori navigano attraverso il tuo Ambiente, lo spazio 3D può diventare distruttivo dalla tua interfaccia utente sullo schermo. Prova le tue layout contro una varietà di possibili sfondi per assicurarti che i tuoi elementi sullo schermo rimangano chiari e leggibili.

For more information on what to consider as you design and block in your UI elements for multiple devices, see Posizionamento e dimensionamento - Fattori cross-platform .

Sviluppa flussi utente

Un flusso utente è una collezione di percorsi che i giocatori possono intraprendere in un'esperienza per completare un compito, come scegliere un'arma, acquistare un Articoloo guarire un personaggio. I flussi utente di solito iniziano dove si aspetta che i giocatori inizino il compito e finiscano con l'azione finale o l'obiettivo che i giocatori raggiungono alla fine del compito. Inoltre, i flussi utente efficaci contano anche

La seguente tabella di flusso mostra il flusso di utenti di un giocatore che entra e gioca la esperienza di laser tag di esempio. Quando un giocatore apre l'esperienza, si unisce a una lobby. Se la condizione della Gioconon è ancora in corso, come l'

È importante sviluppare flussi utente per tutto ciò che i giocatori possono fare nella tua esperienza, poiché ti consente di valutare dove e come vuoi che completino le attività e anticipare dove puoi alleviare i punti di dolore per chiunque segui la propria strada. Ad esempio, se sviluppassi ulteriori flussi utente per l'esperienza laser tag, cosa succede quando i giocatori:

• Abbandonare un round prima che la condizione di fine round sia soddisfatta?
• Lasciare il gioco mentre si unisce a una team?
• Ricevere una chiamata in pieno round?
• Perdere la loro connessione alla partita per meno di 15 secondi?

Visualizzando tutte le potenziali azioni che i giocatori possono fare o gli scenari che possono accadere ai giocatori mentre completano le attività, puoi determinare meglio come la distribuzione dei tuoi elementi UI influisce negativamente sulla loro esperienza, quindi apportare modifiche prima di implementare i tuoi design in Studio. Se le attività sembrano intuitive, non invadenti e convenienti, i giocatori sono più probabili a passare del tempo nella tua esperienza e tornare in un secondo momento.

Durante lo sviluppo dei flussi utente per la tua esperienza, considera quanto Seguendo:

• Ciò che vuoi che i giocatori facciano nella tua esperienza e ciò che vogliono fare potrebbe essere completamente diverso. È meglio mettere alla prova le tue layout con più tipi di giocatori per avere un'idea dei percorsi che vogliono intraprendere per raggiungere i loro obiettivi.
• I flussi di lavoro 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 flussi di lavoro a un solo compito principale in un'unica volta .
• I modelli di interazione variano a seconda se i giocatori stanno usando Controllitouch, gamepad o mouse del computer 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 di dolore e semplificare i flussi di lavoro.

Dopo aver finalizzato il design dei tuoi wireframe, è ora di passare a Studio e rendere la tua interfaccia utente vita.