Modalità reattiva nell’authoring WYSIWYG
Questa funzione è disponibile tramite il programma per i primi utilizzatori. Per richiedere l'accesso, invia un'e-mail con il nome dell'organizzazione GitHub e il nome dell'archivio dall'indirizzo ufficiale a aem-forms-ea@adobe.com . Ad esempio, se l’URL dell’archivio è https://github.com/adobe/abc, il nome dell’organizzazione è adobe e il nome dell’archivio è abc.
Introduzione a Responsive Forms
Nel mondo odierno del multi-dispositivo, i moduli devono avere un aspetto elegante e funzionare bene su schermi di tutte le dimensioni, dai monitor desktop agli smartphone. La modalità reattiva in Universal Editor consente di ottenere questo risultato, consentendo di visualizzare in anteprima e testare i moduli su dispositivi di dimensioni diverse durante il processo di authoring.
Universal Editor consente di creare moduli che si adattano automaticamente a diverse dimensioni dello schermo, offrendo un'esperienza utente ottimale indipendentemente dal dispositivo utilizzato.
Visualizzare in anteprima i moduli in modalità reattiva per dispositivi diversi
Nell’editor universale, un’icona Emulatore situata nell’angolo in alto a destra della schermata consente di visualizzare in anteprima le pagine su dispositivi di dimensioni diverse e di testare il comportamento della progettazione reattiva per una migliore esperienza utente.
Per visualizzare l’anteprima di un modulo in modalità reattiva:
-
Apri un modulo nell’editor universale per la modifica.
-
Fai clic sull'icona dell'
-
Seleziona un formato di dispositivo:
- Desktop (predefinito)
- Tablet
- Dispositivi mobili
- Personalizzato (specifica larghezza e altezza)
È inoltre possibile utilizzare l'icona Rotatore schermo per passare da orientamento verticale a orientamento orizzontale durante l'anteprima su dispositivi mobili o tablet.
L’editor universale fornisce emulatori diversi per l’anteprima dei moduli su vari dispositivi. La tabella seguente elenca i tipi di emulatore disponibili e le relative rappresentazioni dei dispositivi:
Funzionalità di layout
L’editor universale consente di creare moduli di facile utilizzo che offrono esperienze dinamiche agli utenti finali. Il layout del modulo controlla la modalità di visualizzazione degli elementi o dei componenti in un modulo.
L’editor universale supporta i seguenti tipi di layout per i moduli:
Layout pannello
Il layout pannello è utile per organizzare i campi correlati in modo da semplificare la navigazione e la ricerca del contenuto corrispondente. Il layout del pannello dispone i componenti del modulo all’interno di sezioni o pannelli distinti nei moduli.
Esempio: Un modulo di candidatura per un processo può utilizzare pannelli per separare "Informazioni personali", "Istruzione", "Esperienza di lavoro" e "Riferimenti" in sezioni distinte.
Comportamento reattivo: Negli schermi più piccoli, i pannelli si sovrappongono in genere verticalmente, mantenendo i raggruppamenti distinti e regolando la larghezza su un valore più basso.
È possibile utilizzare il componente pannello per aggiungere il layout pannello in un modulo. Per istruzioni dettagliate su come configurare varie proprietà del componente pannello, consulta l’articolo Componente pannello.
Layout procedura guidata
Il layout della procedura guidata semplifica un modulo complesso suddividendolo in passaggi distinti. Ogni passaggio rappresenta una parte diversa del processo e gli utenti si spostano attraverso di essi in sequenza, spesso con i pulsanti Successivo e Indietro. È possibile utilizzare il layout procedura guidata per creare un modulo che comprende più sezioni o passaggi.
Esempio: un modulo di richiesta di risarcimento potrebbe utilizzare una procedura guidata per guidare gli utenti fornendo dettagli sull'incidente, caricando le prove, immettendo informazioni personali e rivedendo l'invio.
Comportamento reattivo: Nei dispositivi mobili, la procedura guidata mantiene il proprio approccio graduale ma regola il contenuto all'interno di ogni passaggio per adattarlo allo schermo più stretto, spesso impilando elementi che apparirebbero affiancati su schermi più grandi.
È possibile utilizzare il componente procedura guidata per aggiungere il layout procedura guidata in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente procedura guidata, consulta l’articolo Componente procedura guidata.
Layout pannello a soffietto
Il layout pannello a soffietto mostra il contenuto in sezioni o pannelli comprimibili in un modulo adattivo. Quando una sezione viene espansa, viene mostrato il contenuto all’interno, mentre le altre sezioni rimangono compresse. Questo layout è ideale per visualizzare grandi quantità di informazioni in un formato compatto.
Esempio: un modulo di configurazione del prodotto potrebbe utilizzare sezioni del Pannello a soffietto per "Opzioni di base", "Funzioni avanzate", "Accessori" e "Piani di pagamento", consentendo agli utenti di concentrarsi su un aspetto alla volta.
Comportamento reattivo: Le fisarmoniche funzionano particolarmente bene sui dispositivi mobili in quanto conservano naturalmente lo spazio verticale mostrando solo la sezione di contenuto espansa, rendendole ideali per gli schermi più piccoli.
È possibile utilizzare il componente pannello a soffietto per aggiungere il layout pannello a soffietto in un modulo. Per istruzioni dettagliate su come configurare le varie proprietà del componente pannello a soffietto, consulta l’articolo Componente pannello a soffietto.
Come scegliere il layout giusto?
È importante selezionare il layout giusto per ottimizzare l’esperienza utente e la funzionalità dei moduli. La tabella consente di comprendere le diverse opzioni di layout disponibili e ti aiuta nella selezione del layout più adatto in base alle tue esigenze e ai tuoi casi d’uso specifici:
- Indietro: pulsante "Indietro"
- Passaggi facoltativi ignorati
Best practice per Forms reattivo
Per garantire che i moduli forniscano la migliore esperienza su tutti i dispositivi, segui queste best practice:
-
Progetta prima per dispositivi mobili: Inizia progettando il modulo per dispositivi mobili, quindi migliora per schermi più grandi. Questo approccio garantisce che le funzionalità di base funzionino sugli schermi più piccoli.
-
Utilizza i tipi di campo appropriati: Scegli i tipi di campo che funzionano correttamente sui dispositivi touch:
- Utilizza i menu a discesa invece dei pulsanti di scelta quando sono presenti molte opzioni
- Utilizza selettori data progettati per l’input tocco
- Assicurarsi che i pulsanti e le destinazioni touch siano almeno 44px x 44px
-
Semplifica per schermi più piccoli:
- Visualizza un numero inferiore di campi per riga sui dispositivi mobili
- Considera di nascondere i campi opzionali dietro un’opzione "Mostra altro"
- Suddividi i moduli complessi in più passaggi su dispositivi mobili
-
Verifica approfondita: verifica sempre i moduli su dispositivi effettivi o utilizzando la modalità emulatore in Universal Editor per assicurarne il corretto funzionamento su schermi di dimensioni diverse.
-
Valuta i tempi di caricamento: Ottimizza le dimensioni delle immagini e riduci al minimo le risorse necessarie, in particolare per gli utenti mobili che potrebbero avere connessioni più lente.