Creazione dell'interfaccia utente

Per progettare un'interfaccia strutturata e usabile, AppMaster Web Designer fornisce una vasta gamma di componenti atomici dell'interfaccia utente. Questi componenti possono essere combinati e raggruppati in vari modi per allinearli ai tuoi obiettivi e traguardi.

AppMaster offre i seguenti componenti dell'interfaccia utente:

• Contenitori: Elementi fondamentali per strutturare e raggruppare logicamente altri componenti.
• Modali e cassetti: componenti interattivi per visualizzare informazioni o azioni aggiuntive senza uscire dalla schermata corrente.
• Componenti di output del valore dinamico: include elenchi , griglie e tabelle per la presentazione dinamica dei dati.
• Elementi dell'interfaccia utente di base: come pulsanti , testo e icone , essenziali per le interazioni di base dell'interfaccia.
• Componenti di navigazione: inclusi menu verticali e orizzontali, schede e strumenti di navigazione simili.
• Elementi del modulo: vari input e controlli per l'interazione dell'utente e la raccolta dei dati.

Aggiornamenti regolari alla libreria dei componenti migliorano la tua capacità di sviluppare applicazioni web in modo più efficiente.

Costruiamo un'interfaccia utente per la nostra semplice applicazione calcolatrice per dimostrare le possibilità di un costruttore di siti Web drag-and-drop AppMaster. Questa app visualizzerà il risultato di varie operazioni matematiche in base ai valori di input.

Contenitore flessibile

Con Flex Container puoi gestire facilmente l'allineamento e la gestione dell'impilamento per tutti gli elementi secondari all'interno di un contenitore.

Flex Container è un componente di base per costruire la struttura della tua pagina web. Flex Container nel designer di app Web AppMaster consente agli utenti di organizzare gli elementi secondari (widget o contenitori) in modo flessibile. Supporta sia l'allineamento orizzontale che quello verticale, consentendo agli sviluppatori di creare layout complessi che si adattano a diverse dimensioni dello schermo.

Aggiunta di contenitori

Utilizzeremo due contenitori principali: uno per l'immissione dei dati e l'altro per la visualizzazione dei risultati dei calcoli racchiusi in un contenitore comune.

Innanzitutto, aggiungi Flex Container alla tela per ospitare tutti gli altri elementi.

Nel pannello Aspetto puoi esplorare una serie di impostazioni:

• ID elemento: un identificatore univoco per fare riferimento al contenitore nei processi aziendali.
• Gruppo comune: impostazioni per definire lo stato predefinito del componente, come visibilità e stile del cursore.
• Gruppo figlio flessibile: determina il modo in cui si comporta l'elemento all'interno di un componente genitore flessibile.
• Layout: impostazioni per la disposizione degli elementi secondari all'interno del contenitore.
• Dimensioni: Per specificare le dimensioni degli elementi.
• Spaziatura : regola lo spazio all'interno e attorno all'elemento.
• Sfondo: opzioni per i colori e i livelli di sfondo.
• Raggio angolo, bordi, ombra: personalizzazione dei bordi, dei bordi e degli effetti ombra degli elementi.
• Descrizione comando: aggiunge una descrizione comando per le azioni al passaggio del mouse o di messa a fuoco.

Personalizza il tuo contenitore principale. Ad esempio, impostiamo la Direzione su orizzontale e regoliamo il Gap , il Padding , il Raggio dell'angolo e i Bordi .

Successivamente, aggiungi un altro contenitore Flex all'interno di quello principale affinché il modulo possa inserire valori. Impostalo su larghezza intera per riempire lo spazio disponibile nel contenitore principale.

Duplica questo contenitore (usando CTRL/⌘+D ) per creare un blocco separato per visualizzare i risultati. Imposta la proprietà Larghezza al 30%.

Aggiunta di elementi dell'interfaccia utente

Per continuare a creare la tua applicazione, è il momento di aggiungere gli elementi dell'interfaccia utente necessari.

Aggiungi modulo

Il nostro processo aziendale richiede all'utente di inserire due numeri, entrambi di tipo Float. Per renderlo possibile, aggiungi due Float Inputs e un pulsante per avviare il processo di calcolo.

Cambia la direzione del contenitore flessibile sul lato sinistro in verticale e aggiungi uno spazio vuoto affinché gli elementi nidificati abbiano un piccolo spazio tra loro. Aggiungi all'interno di questo contenitore Flex un Input Float per il primo valore, che etichetteremo come "X":

• Trascina e rilascia l'elemento Input Float nel contenitore sul lato sinistro.
• Nel pannello Aspetto , personalizza il campo aggiungendo un'etichetta e un segnaposto .
• Perfeziona l'aspetto del campo per adattarlo al design della tua applicazione.

Seleziona il campo aggiunto sull'area di disegno e duplicalo utilizzando CTRL/⌘+D . Modifica l' etichetta e il segnaposto del campo duplicato per rappresentare il secondo valore, "Y".

Ora trascina e rilascia un elemento Pulsante sotto i campi aggiunti. Nel pannello Aspetto , regola il pulsante in modo che si estenda su tutta la larghezza. Ciò può essere ottenuto impostando la proprietà Align nel gruppo Flex Child su Stretch .

Inserisci un'etichetta per il pulsante e, facoltativamente, aggiungi un'icona per migliorarne l'impatto visivo.

Dopo aver aggiunto questi elementi, è buona norma rinominarli per chiarezza e facilità di identificazione. Ciò semplifica il riferimento ad essi nei processi aziendali, migliorando la comprensibilità e accelerando il processo di sviluppo.

Aggiungi blocco risultati

Sul lato destro del contenitore principale, configureremo uno spazio per visualizzare i risultati dopo aver eseguito il nostro processo aziendale. Innanzitutto, imposta la proprietà Direction di questo contenitore su Vertical e aggiungi un piccolo Gap per mantenere gli elementi distanziati in modo ordinato. Cambia la sua larghezza al 30%.

All'interno di questo contenitore di destra, inserisci un nuovo contenitore Flex orizzontale e aggiungi al suo interno un elemento Icona che rappresenta l'operazione, un Blocco di testo con un simbolo Uguale e un Blocco di testo in cui verrà visualizzato il risultato dell'operazione. Duplica questo contenitore quattro volte, aggiornandolo ciascuno per le nostre operazioni matematiche definite.

Personalizza ogni elemento come desideri con il pannello Aspetto .

Aggiungi blocco suggerimento

Per migliorare l'usabilità dell'interfaccia, creiamo un segnaposto che verrà visualizzato fino all'ottenimento dei risultati. A tale scopo, aggiungi un ulteriore Contenitore flessibile , rispecchiando la larghezza del contenitore destro (30%) e posiziona un Blocco di testo all'interno con un suggerimento descrittivo.

Una caratteristica fondamentale del contenitore con i risultati è il suo stato di visibilità iniziale. Per impostazione predefinita, imposta l'opzione Visibile su disattivato, rendendolo inizialmente invisibile.

Nascondi elemento

Renderemo visibile questo contenitore e aggiorneremo i dati solo dopo l'esecuzione del processo aziendale e l'ottenimento del risultato. È importante assegnare nomi ai blocchi di testo, garantendo una facile identificazione durante la creazione dei processi aziendali e la scrittura dei risultati da visualizzare.

🎉 Buon lavoro! Abbiamo creato l'interfaccia utente perfetta per la nostra applicazione e siamo pronti ad aggiungere interattività ai nostri elementi.