Design til foldbare: Stillinger, vinduesstørrelser og bevægelser
Sådan designer du apps til foldbare telefoner: foldede og udfoldede layouts, bordplade- og bogstillinger, vinduesstørrelsesklasser, kontinuitet og bevægelser nær folden.
Core Takeaway
Design foldbare layouts efter tilgængelig vinduesstørrelse, ikke enhedsmodel: Android's vinduesstørrelsesklasser behandler bredder under 600 dp som kompakte, 600 til 840 dp som medium og 840 til 1200 dp som udvidede. Understøt foldede, åbne og halvåbne (bordplade) stillinger, hold brugerens plads, når enheden foldes eller foldes ud, og hold nøgleindhold og berøringsmål væk fra folden.
Stillinger
Android's udviklerdokumentation beskriver foldbare i flere stillinger: foldet, åben flad, åben flad roteret til liggende og halvåbnet, kendt som bordplade. Folden deler skærmen i to dele, enten som et fleksibelt område på én skærm eller som et hængsel mellem to skærme, og det kan skjule en del af skærmen.
Design efter vinduesstørrelsesklasser
I stedet for at målrette mod specifikke enheder grupperer Android tilgængelig plads i vinduesstørrelsesklasser. Kompakt bredde (under 600 dp) dækker næsten alle telefoner i portræt; medium bredde (600 til 840 dp) dækker de fleste tablets i portræt og mange store udfoldede indvendige skærme i portræt; udvidet bredde (840 til 1200 dp) dækker de fleste tablets og store udfoldede skærme i landskab. Store og ekstra store klasser dækker større tablets og desktops.
Layouts, der bruger folden
Fælles mønstre:
- Foldet: det normale telefonlayout.
- Åben flad: liste-detalje eller to-rude layout, med hver rude på den ene side af folden.
- Bordplade: indhold såsom video i den øverste halvdel, kontroller i den nederste halvdel.
- Placer aldrig en knap, tekstlinje eller ansigt henover folden.
Kontinuitet
Når nogen folder en enhed ud midt i opgaven, skal appen fortsætte, hvor de var: samme rulleposition, samme udkast, samme afspilning. Behandl fold og udfold som en layoutændring, ikke en genstart, og animer overgangen, så folk kan følge med i, hvor indholdet flyttede sig.
Gestik og rækkevidde
Større udfoldede skærme ændrer tommelfingerrækkevidde: Anbring hyppige kontroller nær de kanter, hvor hænderne hviler, og undgå kantstryg, der er i konflikt med systembevægelser. Fysik-baseret bevægelse hjælper også her: Ruder, der glider og sætter sig med fjedre, får skiftet mellem arbejdsstillingerne til at føles naturligt frem for at ryste.
Tast Principles for at huske
- Design efter vinduesstørrelsesklasse, ikke enhedsmodel
- Kompakt < 600 dp, medium 600–840 dp, udvidet 840–1200 dp
- Støt foldede, åbne og bordpladestillinger
- Hold indhold og kontroller væk fra skillelinjen
- Bevar tilstand og animer holdningsændringer
Ofte stillede spørgsmål
Kilder
- Learn about foldables — Android Udviklere
- Use window size classes — Android Udviklere