Ontwerpen voor opvouwbare voorwerpen: houdingen, raamgroottes en gebaren
Hoe apps voor opvouwbare telefoons te ontwerpen: gevouwen en uitgevouwen lay-outs, tafelblad- en boekhoudingen, venstergrootteklassen, continuïteit en gebaren nabij de vouw.
Kern afhaalmaaltijd
Ontwerp opvouwbare lay-outs op basis van de beschikbare venstergrootte, niet op het apparaatmodel: de venstergrootteklassen van Android beschouwen breedtes onder 600 dp als compact, 600 tot 840 dp als medium en 840 tot 1200 dp als uitgebreid. Ondersteun gevouwen, open en halfopen (tafelblad) houdingen, houd de plaats van de gebruiker vast wanneer het apparaat in- of uitklapt, en houd belangrijke inhoud en aanraakdoelen uit de buurt van de vouw.
Houdingen
De ontwikkelaarsdocumentatie van Android beschrijft opvouwbare producten in verschillende houdingen: gevouwen, plat open, plat open gedraaid naar liggend en half geopend, ook wel tafelblad genoemd. De vouw verdeelt het scherm in twee delen, hetzij als een flexibel gebied van één scherm, hetzij als een scharnier tussen twee beeldschermen, en kan een deel van het beeldscherm verbergen.
Ontwerp op basis van venstergrootteklassen
In plaats van zich op specifieke apparaten te richten, groepeert Android de beschikbare ruimte in venstergrootteklassen. De compacte breedte (minder dan 600 dp) dekt bijna alle telefoons in portretmodus; gemiddelde breedte (600 tot 840 dp) dekt de meeste tablets in portretvorm en veel grote uitgevouwen binnendisplays in portretstand; uitgebreide breedte (840 tot 1200 dp) dekt de meeste tablets en grote uitgevouwen displays in landschapsvorm. Grote en extra grote klassen omvatten grotere tablets en desktops.
Lay-outs waarbij de vouw wordt gebruikt
Veel voorkomende patronen:
- Opgevouwen: de normale telefoonindeling.
- Open plat: lay-outs met lijstdetail of twee vensters, waarbij elk venster zich aan één kant van de vouw bevindt.
- Tabletop: inhoud zoals video in de bovenste helft, bedieningselementen in de onderste helft.
- Plaats nooit een knop, tekstregel of gezicht over de vouw.
Continuïteit
Wanneer iemand tijdens een taak een apparaat uitvouwt, moet de app doorgaan waar hij was: dezelfde scrollpositie, hetzelfde concept, hetzelfde afspelen. Beschouw vouwen en ontvouwen als een lay-outwijziging, niet als een herstart, en animeer de overgang zodat mensen kunnen volgen waar de inhoud naartoe beweegt.
Gebaren en bereik
Grotere, uitgeklapte schermen veranderen het bereik van de duim: plaats frequente bedieningselementen aan de randen waar de handen rusten, en vermijd edge-swipes die in strijd zijn met systeemgebaren. Op fysica gebaseerde bewegingen helpen hier ook: door veren glijdende ruiten die ervoor zorgen dat de verandering tussen houdingen natuurlijk aanvoelt in plaats van schokkend.
Toets Principles in om te onthouden
- Ontwerp op basis van venstergrootteklasse, niet op apparaatmodel
- Compact < 600 dp, gemiddeld 600–840 dp, uitgebreid 840–1200 dp
- Ondersteun gevouwen, open en tafelbladhoudingen
- Houd inhoud en bedieningselementen buiten de deur
- Behoud de staat en animeer houdingsveranderingen
Veelgestelde vragen
Bronnen
- Learn about foldables — Android-ontwikkelaars
- Use window size classes — Android-ontwikkelaars