Responsieve ontwerptechnieken

Responsief ontwerp maakt gebruik van slechts één indeling waarin de inhoud vloeiend is en kan worden aangepast aan veranderende venstergrootten. Met responsief ontwerp kunt u een functie één keer bouwen en verwachten dat deze in alle schermgrootten werkt. Adaptief ontwerp is vergelijkbaar, maar vervangt de ene indeling door een andere indeling.

XAML-apps gebruiken effectieve pixels om ervoor te zorgen dat uw gebruikersinterface leesbaar en bruikbaar is op alle Windows-apparaten. Waarom zou u de gebruikersinterface van uw app voor een specifiek apparaat of schermformaat ooit willen aanpassen?

• Om het meest effectieve gebruik van ruimte te maken en de noodzaak om te navigeren te verminderen

  Als u een app ontwerpt om er goed uit te zien op een apparaat met een klein scherm, zoals een tablet, is de app bruikbaar op een pc met een veel groter scherm, maar er is waarschijnlijk wat verspilde ruimte. U kunt de app aanpassen om meer inhoud weer te geven wanneer het scherm hoger is dan een bepaalde grootte. Een winkel-app kan bijvoorbeeld één merchandisecategorie tegelijk weergeven op een tablet, maar meerdere categorieën en producten tegelijk weergeven op een pc of laptop.

  Door meer inhoud op het scherm te plaatsen, vermindert u de hoeveelheid navigatie die de gebruiker moet uitvoeren.

• Om te profiteren van de mogelijkheden van apparaten

  Bepaalde apparaten hebben meer kans om apparaatspecifieke mogelijkheden te hebben. Laptops hebben bijvoorbeeld waarschijnlijk een locatiesensor en een camera, terwijl een tv dat ook niet heeft. Uw app kan detecteren welke mogelijkheden beschikbaar zijn en functies inschakelen die deze gebruiken.

• Optimaliseren voor invoer

  De universele besturingselementbibliotheek werkt met alle invoertypen (touch, pen, toetsenbord, muis), maar u kunt nog steeds optimaliseren voor bepaalde invoertypen door uw UI-elementen opnieuw te rangschikken.

Wanneer u de gebruikersinterface van uw app optimaliseert voor specifieke schermbreedten, zeggen we dat u een responsief ontwerp maakt. Hier volgen enkele responsieve ontwerptechnieken die u kunt gebruiken om de gebruikersinterface van uw app aan te passen.

Verplaatsen

U kunt de locatie en positie van UI-elementen wijzigen om optimaal gebruik te maken van de venstergrootte. In dit voorbeeld stapelt het kleinere venster elementen verticaal. Wanneer de app wordt omgezet in een groter venster, kunnen elementen profiteren van de bredere breedte van het venster.

In dit voorbeeldontwerp voor een foto-app verplaatst de foto-app de inhoud ervan op grotere schermen.

Formaat wijzigen

U kunt de grootte van het venster optimaliseren door de marges en grootte van ui-elementen aan te passen. Dit kan bijvoorbeeld de leeservaring op een groter scherm verbeteren door het inhoudskader te vergroten.

Herindelen

Door de volgorde van UI-elementen te wijzigen op basis van apparaat en oriëntatie, kan uw app inhoud optimaal weergeven. Wanneer u bijvoorbeeld naar een groter scherm gaat, kan het zinvol zijn om kolommen toe te voegen, grotere containers te gebruiken of lijstitems op een andere manier te genereren.

In dit voorbeeld ziet u hoe één kolom met verticaal schuivende inhoud op een kleiner scherm dat op een groter scherm kan worden aangepast om twee kolommen met tekst weer te geven.

Weergeven/verbergen

U kunt UI-elementen weergeven of verbergen op basis van schermvastgoed, of wanneer het apparaat ondersteuning biedt voor extra functionaliteit, specifieke situaties of voorkeursschermstanden.

Mediaspelerbedieningen verminderen de knopset bijvoorbeeld op kleinere schermen en breiden zich uit op grotere schermen. De mediaspeler in een groter venster kan veel meer functionaliteit op het scherm verwerken dan in een kleiner venster.

Een deel van de techniek voor onthullen of verbergen omvat het kiezen wanneer u meer metagegevens wilt weergeven. Met kleinere vensters kunt u het beste een minimale hoeveelheid metagegevens weergeven. Met grotere vensters kan een aanzienlijke hoeveelheid metagegevens worden weergegeven. Enkele voorbeelden van het weergeven of verbergen van metagegevens zijn:

• In een e-mailapp kunt u de avatar van de gebruiker weergeven.
• In een muziek-app kunt u meer informatie over een album of artiest weergeven.
• In een video-app kunt u meer informatie over een film of een show weergeven, zoals het weergeven van cast- en bemanningsgegevens.
• In elke app kunt u kolommen opsplitsen en meer details weergeven.
• In elke app kunt u iets nemen dat verticaal is gestapeld en horizontaal opmaken. Wanneer u van een klein venster naar een groter venster gaat, kunnen gestapelde lijstitems worden gewijzigd om rijen met lijstitems en kolommen met metagegevens weer te geven.

Herontwerpen

U kunt de architectuur van uw app samenvouwen of splitsen om zich beter te richten op specifieke apparaten. In dit voorbeeld toont het uitvouwen van het venster het volledige patroon lijst/details.

Adaptieve indeling

Een adaptieve indeling is vergelijkbaar met responsieve indeling, maar vervangt de gebruikersinterface volledig op basis van de indeling waarin deze wordt weergegeven. Adaptief ontwerp heeft meerdere vaste indelingsgrootten en activeert de pagina om een bepaalde indeling te laden op basis van de beschikbare ruimte.

Met deze techniek kunt u de gebruikersinterface voor een specifieke onderbrekingspunt wijzigen. In dit voorbeeld werken het navigatievenster en de compacte, tijdelijke gebruikersinterface goed voor een kleiner scherm, maar op een groter scherm zijn tabbladen mogelijk een betere keuze.

Het navigatieweergavebesturingselement ondersteunt deze techniek door gebruikers de positie van het deelvenster in te stellen op boven of links.

Verwante onderwerpen

• Fluent Design - Indeling
• Schermgrootten en onderbrekingspunten
• Responsieve indelingen met XAML
• XAML-besturingselementen