Panoramica della progettazione dell'interfaccia utente
Una spiegazione dettagliata dell'interfaccia di AppMaster UI Designer per la creazione di app Web.
Dopo aver creato con successo l'applicazione, verrai indirizzato alla scheda Progettazione UI.
L'UI Designer in AppMaster è progettato per essere facile da usare e ti consente di creare straordinarie pagine di app Web senza sforzo.
Attraverso la sua intuitiva interfaccia drag-and-drop, puoi progettare pagine web e popolarle con contenuti senza problemi, eliminando la necessità di competenze di codifica avanzate.
L'UI Designer è diviso in quattro sezioni principali con cui gli utenti possono interagire:
- Barra degli strumenti sinistra
- Pannello superiore
- Pannello inferiore
- Area della tela
- Pannello Proprietà
Barra degli strumenti sinistra
La barra degli strumenti sul lato sinistro offre strumenti per strutturare il tuo sito web. Cliccando sulle icone situate nella parte superiore di questa barra laterale, verranno rivelati i seguenti pannelli:
- Elenco degli elementi dell'interfaccia utente
- Albero degli elementi
- Albero delle pagine
- Albero dei layout
- Gestore del patrimonio
Elenco degli elementi dell'interfaccia utente (scorciatoia: 1 )
L' elenco degli elementi dell'interfaccia utente fornisce tutti gli elementi che possono essere aggiunti all'area di disegno trascinandoli dal pannello.
Gli elementi dell'interfaccia utente sono organizzati in categorie in base al loro scopo, semplificando la navigazione e la ricerca del widget appropriato per la tua app.
Per accedere rapidamente all'elemento, puoi utilizzare la barra di ricerca nella parte superiore del pannello.
Albero degli elementi (scorciatoia: 2 )
Dall'albero degli elementi puoi gestire e organizzare tutti i componenti posizionati nella pagina selezionata della tua app web.
Qui puoi interagire con questi elementi:
- spostare gli elementi tra gli alberi trascinandoli,
- rinominare i componenti,
- modificare lo stato di visibilità degli elementi sulla tela (nascondi/mostra).
Utilizza la barra di ricerca nella parte superiore del pannello per l'elemento di ricerca rapida nell'albero.
Albero delle pagine (scorciatoia: 3 )
L' albero delle pagine ti consente di organizzare e gestire le pagine del tuo sito. Puoi creare nuove pagine o cartelle qui.
In Albero delle pagine puoi duplicare o eliminare pagine o cartelle.
Utilizza la barra di ricerca nella parte superiore del pannello per la pagina o la cartella di ricerca rapida nell'albero.
Elenco layout (scorciatoia: 4 )
L' albero dei layout aiuta a gestire i layout di pagina. Come in Pages Tree puoi duplicare o eliminare layout.
Utilizza la barra di ricerca nella parte superiore del pannello per il layout di ricerca rapida nell'albero.
Gestore delle risorse (scorciatoia: 5 )
Il Gestore risorse facilita il caricamento e l'organizzazione delle risorse (come documenti, immagini e animazioni) per l'utilizzo nel tuo sito web.
Tutte le risorse caricate durante lo sviluppo verranno conservate in Asset Manager e potranno essere riutilizzate senza ricaricarle.
Puoi anche rimuovere qualsiasi risorsa che non ti serve più.
Barra superiore
La barra superiore fornisce un ulteriore set di impostazioni di visualizzazione. Partendo dal lato sinistro, accanto al pulsante del menu, e estendendosi verso destra, hai il seguente set di strumenti:
- Documento corrente: visualizza la pagina o il layout su cui stai attualmente lavorando.
- Punti di interruzione: le icone dei punti di interruzione ti consentono di passare da un punto di interruzione all'altro per visualizzare in anteprima e modificare il modo in cui il tuo sito appare su dispositivi di varie dimensioni.
- Annulla e Ripristina: i pulsanti Annulla e Ripristina ti consentono di annullare o riapplicare le azioni eseguite nel Designer, come applicare uno stile o rimuovere un elemento. Sono disponibili anche scorciatoie: per annullare l'azione -
CRTL/⌘+Ze per ripetere l'azione -CTRL/⌘+SHIFT+Z.
Barra inferiore
Il pannello inferiore consente di ingrandire o ridimensionare la visualizzazione della pagina.
Sul lato sinistro del pannello, puoi impostare la risoluzione della pagina personalizzata impostando l'altezza e la larghezza della tela.
Sul lato destro puoi controllare la scala:
- Ingrandisci o rimpicciolisci
- Imposta la scala in percentuale
- Imposta la dimensione effettiva
- Adatta la finestra corrente all'area visibile
Tela
La tela è il tuo spazio di lavoro interattivo. Qui è dove puoi interagire con i componenti della pagina. Puoi selezionare elementi, riposizionarli e modificare il contenuto direttamente sulla pagina.
Inoltre, puoi copiare ( CRTL/⌘+C ) e incollare ( CRTL/⌘+V ) elementi tra pagine e applicazioni o duplicare elementi all'interno della pagina corrente ( CRTL/⌘+D ).
Pannello Proprietà
Il pannello Proprietà sul lato destro del Designer consente di personalizzare l'aspetto visivo e il comportamento dell'elemento, del layout o della pagina selezionati.
Il pannello Proprietà è composto da 4 pannelli principali:
- Pannello Aspetto
- Pannello opzioni aggiuntive (opzionale)
- Pannello Media Queries
- Pannello della logica aziendale
Nell'intestazione del pannello, puoi rinominare l'elemento selezionato facendo clic sul nome dell'elemento, leggere la descrizione o eliminare l'elemento facendo clic sull'icona del cestino.
Pannello Aspetto
Il pannello Aspetto consente di accedere al contenuto statico e alle proprietà visualizzati dell'elemento selezionato. Puoi inserire o selezionare questi valori nei campi corrispondenti e gli stili verranno applicati immediatamente ai tuoi elementi sull'area di disegno.
Se non sono selezionati elementi nell'area di disegno, questo pannello mostrerà le impostazioni della pagina o del layout corrente.
Pannello Opzioni aggiuntive
Il pannello Opzioni aggiuntive è destinato agli elementi che richiedono dati o opzioni di impostazione aggiuntivi.
È possibile impostare l'origine dati o immettere manualmente le opzioni a seconda del componente selezionato.
Pannello Media Queries
Il pannello Media Queries consente di sovrascrivere le proprietà dell'elemento per ciascun punto di interruzione definito.
Pannello della logica aziendale
Il pannello della logica aziendale fornisce tutti i trigger per un elemento e consente di stabilire l'interazione dell'elemento quando viene attivato il trigger.