Dynamiska designtekniker

Dynamisk design använder bara en layout där innehållet är flytande och kan anpassas till att ändra fönsterstorlekar. Med dynamisk design kan du skapa en funktion en gång och förvänta dig att den fungerar i alla skärmstorlekar. Adaptiv design är liknande, men ersätter en layout med en annan layout.

XAML-appar använder effektiva pixlar för att garantera att användargränssnittet blir läsbart och användbart på alla Windows enheter. Så varför skulle du någonsin vilja anpassa appens användargränssnitt för en viss enhets- eller skärmstorlek?

• För att göra den mest effektiva användningen av utrymme och minska behovet av att navigera

  Om du utformar en app så att den ser bra ut på en enhet som har en liten skärm, till exempel en surfplatta, kan appen användas på en dator med en mycket större skärm, men det kommer förmodligen att finnas lite bortkastat utrymme. Du kan anpassa appen så att den visar mer innehåll när skärmen är över en viss storlek. En shoppingapp kan till exempel visa en varukategori i taget på en surfplatta, men visa flera kategorier och produkter samtidigt på en dator eller bärbar dator.

  Genom att placera mer innehåll på skärmen minskar du mängden navigering som användaren behöver utföra.

• Dra nytta av enheternas funktioner

  Vissa enheter är mer benägna att ha vissa enhetsfunktioner. Till exempel kommer bärbara datorer sannolikt att ha en platssensor och en kamera, medan en TV kanske inte heller har det. Din app kan identifiera vilka funktioner som är tillgängliga och aktivera funktioner som använder dem.

• Optimera för indata

  Det universella kontrollbiblioteket fungerar med alla indatatyper (touch, penna, tangentbord, mus), men du kan fortfarande optimera för vissa indatatyper genom att ordna om gränssnittselementen.

När du optimerar appens användargränssnitt för specifika skärmbredder säger vi att du skapar en dynamisk design. Här följer några dynamiska designtekniker som du kan använda för att anpassa appens användargränssnitt.

Omarangera

Du kan ändra plats och position för gränssnittselement för att få ut mesta möjliga av fönsterstorleken. I det här exemplet staplar det mindre fönstret element lodrätt. När appen översätts till ett större fönster kan element dra nytta av den bredare fönsterbredden.

I den här exempeldesignen för en fotoapp flyttar fotoappen sitt innehåll på större skärmar.

Ändra storlek

Du kan optimera för fönsterstorleken genom att justera marginalerna och storleken på gränssnittselementen. Detta kan till exempel öka läsupplevelsen på en större skärm genom att bara utöka innehållsramen.

Omforma flöde

Genom att ändra flödet av gränssnittselement baserat på enhet och orientering kan din app erbjuda en optimal visning av innehåll. När du till exempel går till en större skärm kan det vara klokt att lägga till kolumner, använda större containrar eller generera listobjekt på ett annat sätt.

Det här exemplet visar hur en enskild kolumn med lodrätt rullande innehåll på en mindre skärm som kan flödas om på en större skärm för att visa två kolumner med text.

Visa/dölj

Du kan visa eller dölja gränssnittselement baserat på skärmfastigheter, eller när enheten stöder ytterligare funktioner, specifika situationer eller önskade skärmorienteringar.

Media Player-kontroller minskar till exempel knappuppsättningen på mindre skärmar och expanderar på större skärmar. Mediespelaren i ett större fönster kan hantera mycket fler funktioner på skärmen än i ett mindre fönster.

En del av tekniken reveal-or-hide inkluderar att välja när du vill visa fler metadata. Med mindre fönster är det bäst att visa en minimal mängd metadata. Med större fönster kan en betydande mängd metadata visas. Några exempel på när metadata ska visas eller döljas är:

• I en e-postapp kan du visa användarens avatar.
• I en musikapp kan du visa mer information om ett album eller en artist.
• I en videoapp kan du visa mer information om en film eller en show, till exempel att visa rollbesättnings- och besättningsinformation.
• I alla appar kan du dela upp kolumner och visa mer information.
• I alla appar kan du ta något som är lodrätt staplat och lägga ut det vågrätt. När du går från ett litet fönster till ett större fönster kan staplade listobjekt ändras för att visa rader med listobjekt och kolumner med metadata.

Skapa om

Du kan komprimera eller förgrena arkitekturen för din app för att bättre rikta in dig på specifika enheter. Om du expanderar fönstret i det här exemplet visas hela list-/informationsmönstret.

Anpassningsbar layout

En anpassningsbar layout liknar dynamisk layout, men ersätter användargränssnittet helt baserat på det format som det visas i. Anpassningsbar design har flera fasta layoutstorlekar och utlöser sidan för att läsa in en viss layout baserat på det tillgängliga utrymmet.

Med den här tekniken kan du växla användargränssnittet för en specifik brytpunkt. I det här exemplet fungerar navigeringsfönstret och dess kompakta, tillfälliga användargränssnitt bra för en mindre skärm, men på en större skärm kan flikar vara ett bättre val.

NavigationView-kontrollen stöder den här tekniken genom att låta användarna ange fönsterpositionen längst upp eller till vänster.

Relaterade ämnen

• Fluent Design – layout
• Skärmstorlekar och brytpunkter
• Responsiva layouter med XAML
• XAML-kontroller