Anbefalinger for optimalisering av oppsett
Gjelder denne Power Platform Well-Architected Experience Optimization-sjekklisteanbefalingen:
| XO:06 | Vedlikehold brukbare og visuelt tiltalende oppsett på tvers av skjermstørrelser og -løsninger. Bruk tilpassede teknikker til å gjengi innhold dynamisk på forskjellige måter. |
|---|
Denne veiledningen beskriver anbefalingene for utforming av skjermoppsett som er enkle å navigere i og tilpasse på tvers av ulike enheter. Denne metoden sikrer at brukerne får en ensartet og optimal visningsopplevelse uavhengig av hvilken enhet de bruker.
Definisjoner
| Term | Definisjon |
|---|---|
| Visningsport | Synlig del av et digitalt grensesnitt, for eksempel en nettleser eller mobilapp, der innhold vises. Visningsport knyttes ofte til enhetsklasser (mobil, nettbrett og stasjonære datamaskiner) basert på skjermdimensjoner og -oppløsninger. |
| Stoppunkt | Spesifikke pikselverdier som definerer visningsportområder som brukes til å fastsette virkemåte for tilpasset oppsett. |
Viktige utformingsstrategier
Responsive oppsett gir en fleksibel og effektiv brukeropplevelse på tvers av ulike vindusstørrelser. De tilpasses ved å skalere innhold, ordne elementer på nytt og selektivt vise tekst og bilder. Ansvarlige oppsett tilfredsstiller brukernes behov uavhengig av skjermstørrelsen.
Fastslå en ensartet appramme
Apprammen består av et sett med kontroller som konsekvent er tilgjengelige på alle skjermer. Den består av tre hovedunderkomponenter: et hode, navigasjon og et innholdsområde. Enkle apper har fleksibiliteten til å bruke hodekomponenten, mens mer avanserte apper ofte bruker sidenavigering for å muliggjøre flere sider. Delkomponenter kan tilpasses. Du kan for eksempel inkludere et globalt søk i hodet eller gruppere elementer i sidenavigasjonen, slik at de passer til kravene i appen.
De tre hovedunderkomponentene i apprammen er beskrevet på følgende måte:
Hodet er en kjernekomponent som er utformet for å være en del av hvert internt program. Det består av delkomponenter som gir brukere tilgang til funksjoner i hele systemet, hjelper dem med å orientere seg i grensesnittet og gir ensartet opplevelse på tvers av ulike opplevelser. Det vises øverst i apprammen, og skal vedvare på alle sidene i appen. Det kan eventuelt være vert for globale kommandoer, for eksempel søk, innstillinger, varslinger, tilbakemelding, profil eller hjelp. Navnet på appen skal alltid vises, noe som ideelt sett også skal fungere som en klikkbar kobling til start- eller landingssiden. Hodet skal være responsivt, og kommandoene flyttes inn i overflytkontrollen i visningsporter som er 600 piksler eller lavere. Søkeinndatabredden er også responsiv på 1023 piksler og lavere.
Navigasjon er et system med kontroller som fungerer sammen for å hjelpe brukere med å finne informasjon og fullføre oppgaver. Det hjelper brukere med å hoppe fra del til del i et program. Hierarkisk sett er det ikke knyttet til noen side eller del, men finnes over alt annet innhold. Det er alltid til stede, og kan minimeres til en skjult tilstand (også kalt en skinnetilstand) for å frigjøre mer plass for sideinnhold. I mindre vindusstørrelser kan det minimeres til en undermeny. De vanligste typene navigasjon inkluderer toppnavigasjon og sidenavigasjon (begge bør ikke brukes samtidig).
Innholdsområdet inneholder fokus for skjermen. Størrelsen på nettleservinduet har innflytelse på innholdsrammen og ledig plass i hovedinnholdsområdet. Denne rammen tilpasses basert på stoppunktet og den tilsvarende responsive virkemåten for hver komponent. Hvis du vil ha mer informasjon, kan du se Opprett en stoppunktsmatrise.
Innholdsområdet kan eventuelt inneholde flere underområder som er tilgjengelige for ensartet elementplassering, for eksempel en sideoverskrift, innebygde sideruter eller paneler som overlapper innholdet.
Hvis du overholder et konsekvent utformingsspråk (fargeplaner, typografi og oppsettsstruktur), blir det enklere for brukerne å identifisere og samhandle med ulike elementer uten forvirring. Jo mer konsekvent et apprammemønster brukes i alle interne forretningsprogrammer, jo sterkere blir brukerens gjenkjennelse eller mentale modell. Hvis du justerer dem etter bransjestandarder eller vanlige plattformmønstre, forbedrer dette effekten ytterligere.
Når apprammen er bestemt, befinner oppsettet for hvert skjermbilde seg innenfor innholdsområdet for apprammen.
Gjennomtenkt bruk av innholdsområdet
Brukere ønsker sømløse opplevelser der informasjon er lett tilgjengelig, tekst er lett å lese, og forkortelser forbedrer i stedet for å hindre brukervennlighet. Prioriter innledende synlighet for viktig informasjon, sørg for lesbarhet på tvers av kolonner, og harmoniser utformingselementer for attraktivitet.
Sørg for at viktig informasjon vises umiddelbart når du åpner skjermen uten at du trenger å rulle. Prioriter visning av viktig informasjon, for eksempel navigasjonsalternativer, viktig innhold og handlingsbare elementer nær toppen av skjermen. Det er en konstant utfordring å finne balansen mellom å vise tilstrekkelige elementer og å gi detaljert informasjon om hvert element. Selv om det kan være fristende å oppgi all mulig informasjon i den første visningen, kan for mye informasjon føre til at brukere blir overveldet, og det kan fortynne signifikansen for nøkkelelementer. Vurder å bruke kortfattede sammendrag eller forhåndsvisninger som gir et innblikk i mer detaljert innhold, og som oppmuntrer brukerne til å grave dypere. Instrumentbord er optimalisert for å betjene dette formålet med å visualisere store mengder data.
Innlem flere kolonner, deler eller grupperinger for å organisere innhold logisk og maksimere plass. Vær spesielt nøye med kolonnebredden. Sørg for at teksten forblir leselig uten for mye kav. Unngå svært smale kolonner som tvinger brukere til å bla vannrett, som forstyrrer samhandlingsflyten. Overdrevent brede kolonner kan derimot forringe lesbarheten ved at brukere må spore linjer på tvers av store avstander. Streb etter en balanse som gir komfortabel lesing, samtidig som du bruker den tilgjengelige plassen på en effektiv måte.
Angi størrelse på og posisjoner visuelle elementer på riktig måte for å skape et visuelt innbydende og balansert grensesnitt. Juster bildetekster med tilsvarende visuelle effekter eller titler, oppretthold konsekvent avstand mellom elementer, og overhold et hierarki basert på brukernes behov. Klipp bort unødvendige forskjønnelser og tildel piksler med omhu til elementer som er mest viktige. Prioritere og vektlegg innholds- og navigasjonselementer, spesielt i navigasjonsintensive apper eller startsider, og unngå overflødig ornamentering som tar oppmerksomheten bort fra brukervennlighet.
Et underliggende rutenett kan være nyttig for å ordne elementer konsekvent. Den valgte rutenettfunksjonaliteten må være konsekvent i innholdsområdet for hver skjerm i appen, og den kan også brukes på komponentnivå (for eksempel kort eller sideruter). Den vanligste typen rutenettoppsett som brukes i webprogrammer, er kolonnerutenettet. Flytende (eller utvidet) rutenettvirkemåte anbefales for implementering av responsive skjermer.
Bruke etablerte oppsett og grupperingsmønstre
Bruk strukturer og ordninger som vanligvis gjenkjennes, til å ordne innhold og elementer i et brukergrensesnitt. Disse oppsettene og mønstrene har blitt finjustert og vist seg å være effektive over tid, noe som gjør dem kjente og intuitive for brukerne, samtidig som de gjør det enkelt å implementere tilpassede mønstre. Når kjernescenarioer og -elementer er identifisert, tilordner du hvert av dem til et etablert oppsett som gir best samhandling. Prioriter innhold og funksjoner som er viktige for fullføring av oppgaver. Avgjør hvilke elementer som alltid skal være synlige og tilgjengelige på skjermen, og hvilke som kan skjules eller fås tilgang til via andre menyer eller handlinger.
Listen nedenfor, selv om den ikke er fullstendig, beskriver etablerte oppsett som vanligvis brukes i forretnings- eller produktivitetsprogrammer. Alle kan finne sted innenfor hovedinnholdsområdet.
Landings-/startskjerm
Fungerer som startpunkt for et program, slik at brukerne får en oversikt over appens tilbud eller funksjoner. Har som mål vanligvis å fange oppmerksomheten til besøkende og oppmuntrer dem til å utføre en bestemt handling, for eksempel fullføre en førstegangsoppgave eller utforske mer innhold. Den inneholder ofte hovedbannerbilder og rene navigasjonsalternativer.
Den er ideell for å ønske brukere velkommen og gir hurtig tilgang til nøkkelfunksjonalitet, navigasjonsalternativer eller handlingsoppfordringer, og setter tonen for appens opplevelse. Prioriter klarhet, enkelhet og intuitiv navigasjon for å veilede brukerne effektivt.
instrumentbord
En sentralisert hub i et program som gir brukere en omfattende oversikt over relevante data eller informasjon. Det består ofte av kontrollprogrammer eller moduler som kan tilpasses, slik at brukerne kan overvåke bestemte måleverdier eller utføre handlinger.
Instrumentbord er egnet for programmer med komplekse datasett eller multifasetterte funksjoner, slik at brukerne kan spore fremdrift, analysere trender og ta informerte avgjørelser med et raskt blikk. De er spesielt nyttige i analyseplattformer, prosjektstyringsverktøy og økonomistyringsapper.
Skjema
Et strukturert oppsett som forenkler datainntasting fra brukere, og som vanligvis består av felter for å skrive inn ulike typer informasjon, for eksempel tekst, tall, datoer og valg. Skjemaer er essensielle for å samle inn brukerinndata, behandle transaksjoner og tilrettelegge for samhandlinger i programmer.
De brukes vanligvis i registreringsflyter, betalingsprosesser, dataregistreringsoppgaver og ethvert scenario som krever inndata eller tilbakemelding fra brukere.
Enhets-/profilvisning
Presenterer detaljert informasjon om en bestemt enhet, for eksempel en brukerprofil, en produktoppføring eller et innholdselement. Den inneholder vanligvis beskrivende tekst, multimedieelementer og relevante handlinger eller samhandlinger.
De passer godt til å vise detaljert informasjon om elementer i et program. De gir brukere grundig innsikt, legger til rette for beslutningstaking og støtter engasjement med bestemte enheter, for eksempel brukerprofiler i apper for sosiale nettverk eller produktoppføringer på e-handelsplattformer.
Listeside
Viser en samling elementer eller enheter i et strukturert format, som ofte presenteres i et lineært oppsett eller rutenettoppsett. Den inneholder vanligvis korte sammendrag eller forhåndsvisninger av hvert element, sammen med navigasjonskontroller for nettlesing eller filtrering.
Listesider er effektive for å presentere store sett med innhold eller data i et lett tilgjengelig format, slik at brukere kan skanne, søke og navigere effektivt. Hvis for eksempel handlinger på bestemte rader er aktivert, må prosessen være tydelig. Listesider brukes vanligvis i innholdsstyringssystemer, kataloglister, søkeresultater og nyhetsfeeder.
Minigjennomgang (delt skjerm)
Deler grensesnittet i to distinkte deler, med en liste vist på venstre side og en elementvisning på høyre side. Listen inneholder vanligvis en samling elementer, mens elementvisningen inneholder detaljert informasjon om det valgte elementet fra listen.
Dette oppsettet er spesielt effektivt i scenarioer der brukere raskt må bla gjennom en liste over elementer og vise detaljert informasjon om hvert element samtidig, for eksempel når de utfører masseoperasjoner. Produktkataloger, dokumentbehandlingssystemer, e-post- eller kommunikasjonsklienter og verktøy for oppgavebehandling (for eksempel spørringsviseren Azure Dev Ops) er scenarioer som vanligvis passer til dette mønsteret.
Veiviser
Veileder brukere gjennom en rekke sekvensielle trinn eller oppgaver, vanligvis på en lineær måte, for å fullføre en kompleks prosess eller oppnå et bestemt mål. Den inneholder ofte fremdriftsindikatorer, spørsmål og valideringskontroller. Veivisere er fordelaktige for å forenkle komplekse prosesser, redusere kognitiv overbelastning og veilede brukere gjennom ukjente oppgaver eller arbeidsflyter. De brukes vanligvis i innføringsflyter, oppsettsprosesser, flertrinnsskjemaer og oppgavebaserte samhandlinger, for eksempel konfigurasjon av komplekse innstillinger eller transaksjoner.
Fortsett for å tilpasse og bygge på standardoppsettet, slik at det passer med bestemte krav. Denne prosessen kan for eksempel omfatte tilføying eller fjerning av elementer, justering av størrelsen og plasseringen av elementer og bruk av stiler for å samsvare med retningslinjene for merkeidentitet eller visuell utforming. Eksperimenter med ulike konfigurasjoner og variasjoner av standardoppsettet for å finne det mest effektive arrangementet for innhold og generell brukeropplevelse.
Utformingsoppsett for alle enheter
Oppsett er en kulminasjon av definerte regler og forsettlig organisering av innhold. Det er viktig å få innholdet inn i gjennomtenkte strukturer, men å få det til å flyte sammen med et tydelig hierarki på tvers av plattformer og skjermstørrelser krever skaleringslogikk. Hver for seg kan tilpasset og responsiv design løse denne utfordringen. I noen tilfeller er en blanding av tilpasset og responsiv design det riktige valget.
Responsiv design bruker bare ett oppsett der innholdet er flytende og kan tilpasses formatstørrelsen. Denne utformingsteknikken bruker mediespørringer til å kontrollere egenskapene til en gitt enhet og gjengir innhold i henhold til dette. Responsiv design gjør det mulig å bygge en funksjon én gang og få den til å fungere effektivt i alle skjermstørrelser.
Et tilpasset oppsett endres fullstendig, basert på formatet det presenteres i. Tilpasset design har flere faste oppsettstørrelser og utløser nettleseren til å laste inn et bestemt oppsett basert på den tilgjengelige plassen. Nettsteder som er bygd med tilpasset design, bruker mediespørringer til å registrere stoppunkter, på samme måte som responsiv design. De bruker også ekstra markup-kode basert på enhetens funksjoner. Denne prosessen kalles "progressiv forbedring".
Reposisjonering
Endre plasseringen av sideelementer.
Hold innholdet organisert, lesbart og balansert ved å optimalisere komposisjonen etter hvert som vindusstørrelsen økes. Loddrett stablede elementer i en mobil visningsport kan for eksempel reposisjoneres vannrett på større visningsporter. Denne endringen følger en naturlig leserekkefølge fra venstre mot høyre, oppretter balanse i utformingen og opprettholder visuelt fokus på nøkkelelementer på siden.
Endre størrelse
Juster størrelsen og margene for sideelementer.
Endre størrelsen på sideelementer for å optimalisere for en rik brukeropplevelse ved å vise mer innhold øverst i vinduet, noe som reduserer behovet for loddrett rulling. Juster sidemarger for å legge til blanktegn og balanse i oppsettet, slik at innholdet kan puste, og det gjør også utformingen mer visuelt attraktiv. En hovedkomponent kan for eksempel strekke seg til full bredde i vinduet for å vise mer av bakgrunnsbildet. Innhold under bildet kan utvides, men bruk ulike marger for å legge til variasjon i oppsettet, som bidrar til å definere visuelt hierarki.
Dynamisk tilpassing
Optimaliser flyten av sideelementer.
Den nye flyten justerer sideelementer for å sikre at de vises fullstendig, og tar hensyn til vindusstørrelsen og retningen ved å ordne innholdet på nytt. En enkelt kolonne med innhold i et mindre vindu kan for eksempel flytes på nytt i et større vindu for å vise to kolonner med tekst. Denne teknikken tillater at mer innhold vises "over bretten".
Vis/skjul
Optimaliser innholdet for vindusstørrelsen og retningen.
Vis eller skjul sideelementer for å optimalisere innholdet for vindusstørrelsen og retningen. Denne responsive teknikken skreddersyr mengden informasjon etter visningskonteksten. Kategorier som vises på en liten skjerm, kan for eksempel vise begrensede metadata, for eksempel et bilde, en tittel og en kobling, slik at annen informasjon blir synlig, for å hjelpe brukeren med å fokusere. På en større skjerm kan kategorier vise flere metadata, for eksempel en rolle, en dato og en kort beskrivelse, mens dette fortsatt får plass i visningsporten.
Endre arkitektur
Skjul sideelementer og innhold for å beholde fokus på viktig informasjon og viktige handlinger.
Denne metoden ligner på å følge praksisen med "progressiv offentliggjøring" i utformingen, men for ulike vindusstørrelser og retninger. Hvis du utvider vinduet, kan du for eksempel vise en liste over elementer ved siden av detaljene. Denne visuelle koblingen mellom innholdet gjør det enkelt for brukerne å velge et annet element. På en mindre skjerm forblir fokus på å vise nøkkelinformasjon.
Opprett en stoppunktsmatrise
En stoppunktsmatrise fungerer som en grafisk fremstilling som illustrerer den responsive eller adaptive virkemåten til et programs utforming i forskjellige skjermstørrelser og -retninger. Den presenterer vanligvis et strukturert rutenett eller oppsett med detaljer om utformingens respons på ulike stoppunkt. Hvert segment tilsvarer en distinkt skjermbredde, og gir innsikt i utformingens struktur, oppsett og funksjonalitet. En stoppunktmatrise omfatter vurderinger av skjermbredde, visningsportretning, utformingselementer, oppsettstruktur, innholdspresentasjon, navigasjon, medier og interaktive komponenter, for å illustrere hvordan utformingen av et nettsted eller en app responderer på tvers av ulike skjermstørrelser og -retninger. Denne metoden bidrar ikke bare til å fullføre utformingen av hvert skjermbilde, men gjør også implementeringen enklere når endringer av nøkkelkomponentegenskapene eksplisitt spores og formidles bra.
Tilrettelegging for Power Platform
Skjemaoppsett i modelldrevne apper konfigureres med Power Apps Studio. Med skjemautforming kan opprettere legge til elementer i en rutenettstruktur, noe som gjør at skjemasider blir responsive i seg selv. Innebygde egendefinerte komponenter, for eksempel egendefinerte sider, innebygde lerretskomponenter og Power Apps Component Framework-kodekomponenter (PCF), må innlemme responsiv virkemåte i de respektive implementeringene. Egendefinerte sider må for eksempel implementere responsiv virkemåte på samme måte som en ren lerretsapp for å fungere riktig.
Lerretsapper krever eksplisitt konfigurasjon for hver komponent for å implementere responsiv virkemåte, noe som gir mer kontroll over opplevelsen. Skjermstørrelser bestemmes av appdefinisjonen, som det kan refereres til for å avgjøre posisjon, virkemåte, synlighet og andre relevante egenskaper.
Se også
Sjekkliste for opplevelsesoptimalisering
Se det fullstendige settet med anbefalinger.