Responsieve modus in WYSIWYG Authoring
Deze functie is beschikbaar via het programma voor vroege toegang. Om toegang te verzoeken, verzend een e-mail met uw GitHub organisatienaam en bewaarplaatsnaam van uw officieel adres aan aem-forms-ea@adobe.com. Bijvoorbeeld, als de bewaarplaats URL https://github.com/adobe/abc is, is de organisatienaam adobe en de bewaarplaatsnaam abc.
Introductie tot responsieve Forms
In de wereld van vandaag met meerdere apparaten moeten uw formulieren er fantastisch uitzien en goed functioneren op schermen van elke grootte - van desktopmonitoren tot smartphones. Met de responsieve modus in de Universal Editor kunt u dit bereiken door tijdens het ontwerpproces een voorbeeld van uw formulieren te bekijken en uw formulieren te testen op verschillende apparaatgrootten.
De Universele Redacteurlaat u toe om vormen tot stand te brengen die automatisch aan verschillende het schermgrootte aanpassen, die een optimale gebruikerservaring ongeacht het apparaat verstrekken dat wordt gebruikt.
Forms voorvertonen in responsieve modus voor verschillende apparaten
De Universele Redacteur verstrekt een Emulator pictogram dat bij de hoger-juiste hoek van het scherm wordt gevestigd dat u toestaat om pagina's over verschillende apparatengrootte voor te vertonen en het gedrag van uw ontvankelijk ontwerp voor een betere gebruikerservaring te testen.
Een voorbeeld van een formulier weergeven in de responsieve modus:
-
Open het formulier in de Universal Editor om het te bewerken.
-
Klik het
-
Selecteer een apparaatindeling:
- Desktop (standaard)
- Tablet
- Mobiel
- Aangepast (breedte en hoogte opgeven)
U kunt het pictogram van de Omwenteling van het Scherm {ook gebruiken 0} om tussen staande en landschapsrichtingen van een knevel te voorzien wanneer het voorvertonen op tablet of mobiele apparaten.
De Universal Editor biedt verschillende emulators om formulieren voor te vertonen op verschillende apparaten. De onderstaande tabel bevat een overzicht van de beschikbare emulatortypen en de bijbehorende apparaatrepresentaties:
Indelingsmogelijkheden
Met de Universal Editor kunt u gebruiksvriendelijke formulieren maken die eindgebruikers een dynamische ervaring bieden. De formulierindeling bepaalt hoe items of componenten in een formulier worden weergegeven.
De Universal Editor ondersteunt de volgende typen indelingen voor formulieren:
Layout deelvenster
De indeling van deelvensters is handig om verwante velden zo te ordenen dat u gemakkelijker kunt navigeren en de bijbehorende inhoud kunt vinden. In de indeling van het deelvenster worden formuliercomponenten in afzonderlijke secties of deelvensters gerangschikt in formulieren.
Voorbeeld: de vorm van de baantoepassing zou panelen kunnen gebruiken om "Persoonlijke Informatie,"Onderwijs,""Ervaring van het Werk,"en "Verwijzingen"in verschillende secties te scheiden.
Reactiegedrag: op kleinere schermen, stapelen de panelen typisch verticaal, die hun verschillende groeperingen handhaven terwijl het aanpassen aan de lagere breedte.
U kunt de paneelcomponentgebruiken om de paneellay-out in een vorm toe te voegen. Voor gedetailleerde instructies op hoe te om diverse eigenschappen van de paneelcomponent te vormen, verwijs naar het artikel van de paneelcomponent.
Wizard Layout
De indeling van de wizard helpt een complex formulier te vereenvoudigen door het op te splitsen in afzonderlijke stappen. Elke stap vertegenwoordigt een verschillend deel van het proces, en de gebruikers navigeren opeenvolgend door de stappen, vaak met Volgende en Achter knopen. U kunt de indeling van de wizard gebruiken om een formulier te maken dat uit meerdere secties of stappen bestaat.
Voorbeeld: Een vorm van de verzekeringseis zou een tovenaar kunnen gebruiken om gebruikers door het verstrekken van inherente details te begeleiden, bewijsmateriaal te uploaden, persoonlijke informatie in te gaan, en de voorlegging te herzien.
Responsief gedrag: op mobiele apparaten, handhaaft de tovenaar zijn geleidelijke benadering maar past de inhoud binnen elke stap aan om het smallere scherm te passen, vaak stapelend elementen die zij aan zij op grotere schermen zouden verschijnen.
U kunt de tovenaar componentgebruiken om de tovenaarslay toe te voegen in een vorm. Voor gedetailleerde instructies op hoe te om de diverse eigenschappen van de tovenaarscomponent te vormen, verwijs naar het artikel van de tovenaarscomponent.
Accordeonlay-out
De accordeonindeling geeft de inhoud in inklapbare secties of deelvensters weer in een adaptief formulier. Wanneer een sectie wordt uitgevouwen, geeft deze de inhoud binnen weer, terwijl andere secties worden samengevouwen. Deze indeling is ideaal voor het weergeven van grote hoeveelheden gegevens in een compacte vorm.
Voorbeeld: de vorm van de productconfiguratie van A zou harmoniesecties voor "Basisopties,"Geavanceerde Eigenschappen,"Accessoires,"en "Betalingsplannen kunnen gebruiken,"toestaand gebruikers om zich op één aspect in een tijd te concentreren.
Responsief gedrag: het werk van Accordeons in het bijzonder goed op mobiele apparaten aangezien zij natuurlijk verticale ruimte door slechts de uitgebreide inhoudssectie te tonen besparen, die hen ideaal maken voor kleinere schermen.
U kunt de accordeoncomponentgebruiken om de accordeonlay-out in een vorm toe te voegen. Voor gedetailleerde instructies op hoe te om de diverse eigenschappen van de accordeoncomponent te vormen, verwijs naar het 🔗 artikel van de component 0} accordeon {.
Hoe te om de juiste lay-out te kiezen?
Het is belangrijk om de juiste indeling te selecteren voor een optimale gebruikerservaring en functionaliteit van formulieren. De tabel geeft u inzicht in de verschillende beschikbare lay-outopties en helpt u bij het selecteren van de meest geschikte lay-out op basis van uw specifieke behoeften en gebruikssituaties:
- Achteruit: "Achtergrond"knoop
- Facultatieve het overslaan stappen
Aanbevolen procedures voor responsieve Forms
Volg de onderstaande aanbevolen procedures om ervoor te zorgen dat uw formulieren op alle apparaten de beste ervaring bieden:
-
Ontwerp voor mobiel eerst: Begin door uw vorm voor mobiele apparaten te ontwerpen, dan verbetert voor grotere schermen. Deze benadering zorgt ervoor dat de kernfunctionaliteit op de kleinste schermen werkt.
-
Gebruik aangewezen gebiedstypes: kies gebiedstypes die goed op aanrakingsapparaten werken:
- Vervolgkeuzelijsten gebruiken in plaats van keuzerondjes als er veel opties zijn
- Datumkiezers gebruiken die zijn ontworpen voor aanraakinvoer
- Zorg ervoor dat de knoppen en aanraakdoelen ten minste 44px x 44px zijn
-
vereenvoudig voor kleinere schermen:
- Minder velden per rij weergeven op mobiele apparaten
- U kunt optionele velden verbergen achter de optie Meer weergeven
- Complexe formulieren onderbrengen in meer stappen op mobiele apparaten
-
Test grondig: test altijd uw vormen op daadwerkelijke apparaten of gebruikend de emulatorwijze in Universele Redacteur om ervoor te zorgen zij behoorlijk over schermgrootte functioneren.
-
overweeg ladingstijden: optimaliseer beeldgrootte en minimaliseer vereiste middelen, vooral voor mobiele gebruikers die langzamere verbindingen kunnen hebben.