Anbefalinger til optimering af layout
Gælder for denne anbefaling af kontrolliste til optimering af Power Platform-velstruktureret oplevelse:
| XO:06 | Bevar brugbare og visuelt tiltalende layout på tværs af skærmstørrelser og -løsninger. Brug tilpassede teknikker til dynamisk at gengive indhold på forskellige måder. |
|---|
I denne vejledning beskrives anbefalingerne til design af skærmlayout, der er nemme at navigere i og tilpasse på tværs af forskellige enheder. Denne fremgangsmåde sikrer, at brugerne får en ensartet og optimal visningsoplevelse, uanset hvilken enhed de bruger.
Definitioner
| Begreb | Definition |
|---|---|
| Billede | Synlig del af en digital brugergrænseflade, f.eks. en webbrowser eller mobilapp, hvor indhold vises. Billedintervaller knyttes ofte til enhedsklasser (mobil, tablet og stationære computere) baseret på skærmmålene og -opløsningerne. |
| Breakpoints | Specifikke pixelværdier, der definerer billedintervaller, som bruges til at bestemme tilpasningsfunktionsmåden. |
Vigtigste designstrategier
Dynamisk layout giver en fleksibel og effektiv brugeroplevelse i forskellige vinduesstørrelser. De tilpasser sig ved at skalere indhold, omarrangere elementer og selektivt vælge at vise tekst og billeder. Ansvarlige layout opfylder brugernes behov, uanset skærmstørrelse.
Finde en ensartet apprude
Programrammen består af et sæt kontrolelementer, der konsekvent er tilgængelige på alle skærme. Det består af tre primære underkomponenter: en overskrift, en navigation og et indholdsområde. Simple apps har fleksibilitet til at bruge sidehovedkomponenten, mens mere avancerede apps ofte bruger sidenavigation til at aktivere flere sider. Underkompensterne kan tilpasses. Du kan f.eks. inkorporere en global søgning i sidehovedet eller gruppeelementerne i sidenavigation, så de opfylder kravene i din app.
De tre vigtigste underkomponenter i apprammen er:
Overskriften er en kernekomponent, der er designet til at være del af alle interne applikationer. Den består af underkomponenter, der giver brugere adgang til systemfunktioner, hjælper dem med at orientere sig på brugergrænsefladen og sikrer ensartethed på tværs af oplevelser. Den vises øverst i appruden og bør blive ved med at være der på tværs af alle sider i appen. Den kan også være vært for globale kommandoer som f.eks. søgning, indstillinger, meddelelser, feedback, profil eller hjælp. Navnet på appen skal altid vises, og det skal helst også fungere som et link, der kan klikkes på, til startsiden eller landingssiden. Overskriften skal være dynamisk, hvor kommandoer flytter ind i overløbskontrolelementet i billeder, der er 600 pixel og mindre. Bredden på søgeinput svarer også til 1.023 pixel og derunder.
Navigation er et system med kontrolelementer, der kan arbejde sammen for at hjælpe brugerne med at finde oplysninger og udføre opgaver. Det hjælper brugere med at springe fra sektion til afsnit i et program. Hierarkisk er den ikke knyttet til en side eller sektion, men findes oven over alt andet indhold. Den er altid til stede og kan minimeres til en skjult tilstand (også kaldet en områdetilstand) for at frigøre yderligere plads til sideindhold. I mindre vinduesstørrelser kan den minimeres til en pop op-menu. De mest almindelige former for navigation omfatter topnavigation og sidenavigation. Brug ikke begge dele samtidigt.
Indholdsområdet indeholder skærmens fokus. Størrelsen på browservinduet påvirker indholdsruden og den tilgængelige plads i hovedindholdsområdet. Denne ramme tilpasses på baggrund af pausepunktet og den tilsvarende dynamiske funktion for hver enkelt komponent. Få mere at vide under Oprette en pausepunkt-matrix.
Indholdsområdet kan også indeholde flere underområder, der er tilgængelige for at sikre en ensartet elementplacering, f.eks. en sideoverskrift, indbyggede ruder eller ruder som ligger over indholdet.
Overholdelse af et ensartet designsprog med farveskemaer, typografi og layoutstruktur hjælper brugerne med hurtigt at identificere og interagere med forskellige elementer uden forvirring. Jo mere konsekvent et mønster for en appramme bruges på tværs af alle interne virksomhedsprogrammer, jo stærkere er brugerens genkaldelse eller mentale model. Tilpasningen til branchestandarder eller almindelige platformsmønstre forbedrer yderligere denne effekt.
Når apprammen er bestemt, er hver skærms layout placeret inden for indholdsområdet i apprammen.
Eftertænksom brug af indholdsområdet
Brugerne ønsker problemfrie oplevelser, hvor oplysninger er let tilgængelige, teksten er let at læse, og æstetikken forbedrer i stedet for at hindre anvendeligheden. Prioriter den første synlighed af vigtige oplysninger, sørg for, at de kan læses på tværs af kolonner, og harmoniser designelementer så de bliver æstetiske.
Sørg for, at vigtige oplysninger straks er synlige, når man åbner skærmen, uden at man skal rulle. Prioriter visningen af vigtige oplysninger, f.eks. navigationsindstillinger, vigtigt indhold og handlingsbare elementer nær toppen af skærmen. Balancere mellem at vise tilstrækkeligt mange elementer og give detaljerede oplysninger om hvert enkelt element er en udfordring. Selvom det kan være fristende at give alle mulige oplysninger i den første visning, er der risiko for, at for mange oplysninger overvælder brugerne og udvander betydningen af vigtige elementer. Overvej at anvende præcise oversigter eller eksempler, der giver et glimt af mere detaljeret indhold, så brugerne får lyst til at bore dybere. Dashboards er optimeret til dette formål med henblik på at visualisere store mængder data.
Indarbejde flere kolonner, sektioner eller grupperinger for at organisere indhold på en logisk måde og maksimere plads. Vær omhyggelig med kolonnebredden, og sørg for, at teksten forbliver læselig uden overdreven belastning. Undgå alt for smalle kolonner, der tvinger brugere til hele tiden at rulle vandret og forstyrre interaktionsstrømmen. Modsat kan overdrevne brede kolonner gøre det svært at læse dem, da brugerne skal følge linjer på tværs af store afstande. Stræb efter en balance, der gør det nemt at læse, samtidig med at den tilgængelige plads udnyttes effektivt.
Tilpas størrelse og placering af visuelle elementer for at skabe en visuel behagelig og balanceret brugergrænseflade. Tilpas billedtekster med tilsvarende visuelle elementer eller titler, bevare ensartede mellemrum mellem elementer og overholde et hierarki, der er baseret på brugernes behov. Fjern unødvendige udsmykninger, og tildel pixel veldisponeret i elementer, der betyder mest. Prioriter og fremhæv indhold og navigationselementer, især på navigationsintensive apps eller startsider, og undgå overflødig udsmykning, der forringer brugervenligheden.
Et underliggende gitter kan være praktisk, hvis du vil arrangere elementer konsekvent. Den valgte gitterfunktionsmåde skal være ensartet på tværs af alle skærmens indholdsområde i appen og kan også anvendes på komponentniveau, f.eks. kort eller sideruder. Den mest almindelige type gitterlayout, der bruges i webprogrammer, er kolonnegitteret. Flydende (eller strakte) gitre anbefales til implementering af dynamiske skærme.
Brug etablerede layout og grupperingsmønstre
Brug almindeligt anerkendte strukturer og arrangementer til organisering af indhold og elementer på en brugergrænseflade. Disse layout og mønstre har med tiden blevet forfinet og vist sig effektive, hvilket gør dem velkendte og intuitive for brugerne, samtidig med at det er nemt at implementere tilpassede mønstre. Når kernescenarier og elementer er identificeret, skal du knytte dem til et etableret layout, der giver den bedste interaktion. Prioriter indhold og funktioner, der er vigtige for at fuldføre opgaven. Beslut, hvilke elementer der altid skal være synlige og tilgængelige på skærmen, og hvilke elementer der kan skjules eller åbnes via andre menuer eller handlinger.
På følgende liste beskrives etablerede layout, der normalt bruges til virksomhedsprogrammer eller produktivitetsapplikationer, men den ikke er udtømmende. Alle kan placeres inden for hovedindholdsområdet.
Landings/startskærm
Landings- eller startskærmen fungerer som indgangspunkt til en applikation og giver brugerne et overblik over appens tilbud eller funktioner. Det har typisk til formål at fange de besøgendes opmærksomhed og tilskynder til at foretage en bestemt handling, såsom at udføre en førstegangsopgave eller udforske yderligere indhold. Den indeholder ofte heltebilleder og tydelige navigationsmuligheder.
Den er ideel til at byde brugere velkommen, tilbyde hurtig adgang til vigtige funktioner, navigationsmuligheder eller handlinger og angive tonen for appens oplevelse. Prioriter klarhed, enkelthed og intuitiv navigation for at guide brugerne effektivt.
Dashboard
Et dashboard er et centraliseret knudepunkt i en applikation, der giver brugerne et omfattende overblik over relevante data eller oplysninger. Den består ofte af widgets eller moduler, der kan tilpasses, så brugerne kan overvåge bestemte målepunkter eller udføre handlinger.
Dashboards er velegnede til applikationer med komplekse datasæt eller mangesidede funktioner, så brugerne kan spore status, analysere tendenser og hurtigt træffe velovervejede beslutninger. De er især nyttige i analyseplatforme, projektstyringsværktøjer og apps til økonomisk styring.
Form
En formular er et struktureret layout, der letter datainput fra brugere, typisk bestående af felter til indtastning af forskellige typer oplysninger, f.eks. tekst, tal, datoer og markeringer. Formularer er vigtige for indsamling af brugerinput, behandling af transaktioner og interaktioner i applikationer.
De anvendes typisk i forbindelse med tilmeldingsforløb, tjek-ud-processer, dataindtastningsopgaver og ethvert scenario, der kræver brugerinput eller feedback.
Objekt/profilvisning
Objekt- eller profilvisningen viser detaljerede oplysninger om et bestemt objekt, f.eks. en brugerprofil, en produktliste eller et indholdselement. Den indeholder typisk beskrivende tekst, multimedieelementer og relevante handlinger eller interaktioner.
De er velegnede til fremvisning af detaljerede oplysninger om elementer i en applikation. De giver brugerne omfattende indsigt, letter beslutningsprocessen og understøtter engagement i bestemte objekter, f.eks. brugerprofiler i apps til sociale netværk eller produktoversigter på e-handelsplatforme.
Listesiden
En liste eller tabel viser en samling af elementer eller enheder i et struktureret format, der ofte præsenteres i et lineært layout eller gitterlayout. Den indeholder typisk korte oversigter eller eksempler af hvert enkelt element sammen med navigationskontrolelementer til gennemsyn eller filtrering.
Listesider er effektive til at præsentere store sæt indhold eller data i et fordøjeligt format, så brugerne kan scanne, søge og navigere effektivt. Hvis handlinger på bestemte rækker er aktiveret, skal processen være klar. Listesider bruges som regel i indholdsstyringssystemer, katalogoversigter, søgeresultater og nyhedsopdateringer.
Minigennemgang (opdelt skærm)
En mini-vurdering og en opdelt skærm opdeler grænsefladen i to separate sektioner, hvor der vises en liste i venstre side og en elementvisning i højre side. Listen indeholder typisk en samling elementer, mens elementvisningen indeholder detaljerede oplysninger om det valgte element på listen.
Dette layout er især effektivt i scenarier, hvor brugere hurtigt skal gennemse en liste over elementer og få vist detaljerede oplysninger om de enkelte elementer, f.eks. når de udfører massehandlinger. Produktkataloger, dokumentstyringssystemer, mail- eller kommunikationsklienter og opgavestyringsværktøjer (f.eks. Azure Dev Ops-forespørgselsfremvisning) er scenarier, der typisk passer til dette mønster.
Guide
En guide guider brugere gennem en række trin eller opgaver, som typisk udføres lineært, for at fuldføre en kompleks proces eller opnå et bestemt mål. Den indeholder ofte statusindikatorer, prompter og valideringskontrol. Guider er gode til at forenkle komplekse processer, reducere den kognitive overbelastning og vejlede brugerne gennem ikke-kendte opgaver eller arbejdsprocesser. De bruges ofte i onboardingforløb, installationsprocesser, formularer med flere trin og opgavebaserede interaktioner, f.eks. konfiguration af komplekse indstillinger eller transaktioner.
Tilpas og byg videre på standardlayoutet, så det passer til specifikke krav. Denne proces kan omfatte tilføjelse eller fjernelse af elementer, justering af elementers størrelse og placering og anvendelse af elementer, så de svarer til retningslinjerne for brandidentitet eller visuelle design. Eksperimenter med forskellige konfigurationer og variationer af standardlayoutet for at finde den mest effektive løsning til indhold og en overordnet brugeroplevelse.
Designlayout til alle enheder
Layout er kulminationen af definerede regler og tilsigtet organisering af indhold. Det er vigtigt at bringe dit indhold op i gennemtænkte strukturer, men det kræver skaleringslogik, hvis det hele skal flyde sammen med et klart hierarki på tværs af platforme og skærmstørrelser. Individuelt, tilpasningsparat og responsivt design kan hver især håndtere denne udfordring. I visse tilfælde er en blanding af tilpasningsdygtigt og dynamisk design det rette valg.
Dynamisk design bruger kun ét layout, hvor indholdet er flydende og kan tilpasses til at ændre formatstørrelsen. I denne designteknik bruges medieforespørgsler til at inspicere en bestemt enheds egenskaber og gengive indhold efter dette. Dynamisk design giver dig mulighed for at oprette en funktion én gang, så den fungerer effektivt på tværs af alle skærmstørrelser.
Et tilpasningsbaseret layout ændres fuldstændigt, afhængigt af det format det vises i. Tilpasningsdygtigt design har flere faste layoutstørrelser og udløser browseren til at indlæse et bestemt layout baseret på den tilgængelige plads. Websteder, der er udviklet med tilpasningsdygtigt design, bruger medieforespørgsler til at registrere pausepunkter, der ligner et dynamisk design. De bruger også yderligere markeringer baseret på enhedens funktioner. Denne proces kaldes "progressiv forbedring".
Omplacering
Ændre placeringen af sideelementer.
Hold dit indhold organiseret, læsbart og afbalanceret ved at optimere kompositionen, efterhånden som vinduets størrelse øges. Lodret stablede elementer i en mobilvisning kan f.eks. flyttes vandret i større visninger. Denne ændring følger en naturlig læserækkefølge fra venstre mod højre, skaber balance i designet og bevarer visuel fokus på nøgleelementer på siden.
Tilpas størrelse
Justere størrelsen på og marginen af sideelementer.
Tilpas sideelementer for at optimere til en omfattende brugeroplevelse ved at vise mere indhold øverst i vinduet og reducere behovet for lodret rulning. Juster sidemarginer for at tilføje mellemrum og balance i layoutet, så indholdet kan tilpasses og forbedrer designets visuelle tiltrækningskraft. En heltekomponent kan f.eks. strække sig til vinduets fulde bredde for at vise mere af baggrundsbilledet. Indholdet under billedet kan udvides, men brug forskellige margener for at tilføje variation i layoutet og hjælpe med at definere visuelt hierarki.
Dynamisk tilpasning
Optimer flowet af sideelementer.
Juster sideelementer for at sikre, at de vises fuldt ud under hensyn til vinduets størrelse og retning ved at omarrangere indholdet. En enkelt kolonne med indhold i et mindre vindue kan f.eks. ombrydes i et større vindue, så der vises to kolonner tekst. Denne teknik gør det muligt at få vist mere indhold "oven over folden".
Vis/skjul
Optimer indholdet i vinduets størrelse og retning.
Vis eller skjul sideelementer for at optimere indholdet i forhold til vinduets størrelse og retning. Denne dynamiske teknik tilpasser mængden af oplysninger til visningssammenhængen. Kategorier, der vises på en lille skærm, kan f.eks. vise begrænsede metadata, f.eks. et billede, en titel og et link, så andre oplysninger bliver synlige for at hjælpe brugeren med at fokusere. På en større skærm kan kategorier vise ekstra metadata som en person, en dato og en kort beskrivelse, mens de stadig er inden for visningen.
Omdefiner
Forgren eller skjul sideelementer og indhold for at bevare fokus på vigtige oplysninger og handlinger.
Denne fremgangsmåde svarer til følgende praksis med "progressiv videregivelse" i dit design, men i forskellige vinduesstørrelser og -retninger. Hvis du f.eks. udvider vinduet, kan du få vist en liste over elementer ud for detaljerne. Dette visuelle link mellem indholdet gør det nemt for brugerne at vælge et andet element. På et mindre skærmbillede forbliver fokus på visning af nøgleoplysninger.
Oprette en pausepunkt-matrix
En pausepunkt-matrix fungerer som en grafisk illustration af en applikations dynamiske eller tilpassede funktionsmåde i forskellige skærmstørrelser og -retning. Den indeholder typisk et struktureret gitter eller layout med detaljer om designets respons ved forskellige pausepunkter. Hvert segment svarer til en særskilt skærmbredde, der giver indblik i designets struktur, layout og funktionalitet. En pausepunkt-matrix omfatter overvejelser om skærmbredde, visningens retning, designelementer, layoutstruktur, indholdspræsentation, navigation, medier og interaktive komponenter for at illustrere, hvordan et websteds eller en apps design reagerer på tværs af forskellige skærmstørrelser og retning. Denne fremgangsmåde hjælper ikke kun med at færdiggøre designet af de enkelte skærmbilleder, men gør det også nemmere at implementere, når ændringer af vigtige komponenters egenskaber eksplicit spores og kommunikeres korrekt.
Power Platform-processtyring
Layout af modelbaserede appformularer konfigureres ved hjælp af Power Apps Studio. Formulardesigner gør det muligt for udviklerne at føje elementer til en gitterstruktur, som gør det muligt at reagere på formularsider i sig selv. Integrerede brugerdefinerede komponenter som brugerdefinerede sider, integrerede lærredskomponenter og Power Apps Component Framework (PCF) kodekomponenter skal indarbejde dynamiske funktioner i deres respektive implementeringer. Brugerdefinerede sider skal f.eks. implementere dynamisk funktionsmåde på samme måde som en ren lærredapp for at fungere korrekt.
Lærredapps kræver eksplicit konfiguration for hver komponent for at implementere dynamiske funktionsmåder, så du bedre kan styre oplevelsen. Skærmstørrelser bestemmes i appdefinitionen, som der kan refereres til for at bestemme position, adfærd, synlighed og andre relevante egenskaber.