Rekommendationer för att optimera layout
Gäller dennma checklisterekommendation för välstrukturerad upplevelseoptimering för Power Platform:
| XO:06 | Upprätthåll användbara och visuellt tillåtna layouter över skärmstorlekar och upplösningar. Använd adaptiv teknik för att återge innehåll dynamiskt på olika sätt. |
|---|
Den här guiden beskriver rekommendationer för att utforma skärmlayouter som är enkla att navigera i och anpassa på olika enheter. Den här metoden säkerställer att användarna får en enhetlig och optimal visning oavsett vilken enhet de använder.
Definitioner
| Begrepp | Definition |
|---|---|
| Visningsområde | Synlig del av ett digitalt gränssnitt, till exempel en webbläsare eller mobilapp, där innehåll visas. Visningsområdesintervaller associeras ofta med enhetsklasser (mobil, surfplatta och stationär dator) baserat på skärmmått och lösningar. |
| Brytpunkter | Specifika pixelvärden som definierar visningsområdesintervaller som används för att fastställa layoutens funktion. |
Viktiga designstrategier
Dynamiska layouter ger en flexibel och effektiv användarupplevelse över olika fönsterstorlekar. De anpassar sig genom att skala innehåll, ordna om element och välja ut text och bilder. Dynamiska layouter uppfyller användarnas behov oavsett skärmstorlek.
Fastställ en enhetlig appram
Programramen består av en uppsättning kontroller som är konsekvent tillgängliga på alla skärmar. Den innehåller tre huvudsakliga underkomponenter: ett huvud, navigering och ett innehållsområde. Enkla appar har flexibilitet att använda huvudkomponenten, medan mer sofistikerade appar ofta använder sidnavigering för att aktivera flera sidor. Delkomponenter kan anpassas. Du kan till exempel infoga en global sökning i huvudet eller gruppobjekten i sidnavigeringen så att den passar appens behov.
De tre huvudsakliga underkomponenterna för apprutan är:
Huvudet är en kärnkomponent utformad att vara en del av alla interna program. Den består av underkomponenter som ger användare åtkomst till systemtäckande funktioner, hjälper till att orientera dem mot användargränssnittet och ger enhetlighet i olika erfarenheter. Den visas högst upp på appramen och måste finnas kvar på appens alla sidor. Den kan även vara värd för globala kommandon såsom sökning, inställningar, meddelanden, feedback, profil eller hjälp. Namnet på appen måste alltid visas, och bör även bör fungera som en klickbar länk till startsidan eller landningssidan. Huvudet måste vara dynamiskt med kommandon som flyttas till spillkontrollen i visningsområden som är 600 pixlar och mindre. Sökindatabredden är även dynamisk vid 1023 pixlar och mindre.
Navigering är ett system med kontroller som fungerar tillsammans för att hjälpa användare att hitta information och slutföra uppgifter. Den hjälper användare att hoppa från avsnitt till avsnitt i ett program. Hierarkiskt är den inte bifogad till någon sida eller avsnitt, men den finns över allt annat innehåll. Den är alltid närvarande och kan minimeras till komprimerat läge (kallas även för räcke) för att frigöra ytterligare utrymme till sidinnehåll. Med mindre fönsterstorlekar kan du minimera det till en utfällbar meny. De vanligaste formerna av navigering är toppnavigering och sidonavigering. Använd inte båda samtidigt.
Innehållsområdet innehåller skärmens fokus. Webbläsarens fönsterstorlek påverkar innehållsramen och det tillgängliga utrymmet i huvudinnehållets område. Den här ramen anpassar sig efter brytpunkten och motsvarande funktionssätt för varje komponent. Läs mer i Skapa en brytpunktsmatris.
Innehållsområdet kan eventuellt innehålla flera underområden som är tillgängliga för konsekvent elementplacering, till exempel ett Rubrik, infogade sidofönster eller paneler som ligger över innehållet.
Genom att hålla sig till ett enhetligt designspråk med färgscheman, typografi och layoutstruktur kan användarna snabbt identifiera och interagera med olika element utan förvirring. Ju mer enhetligt ett apprammönster som används för alla interna affärsprogram är, desto starkare blir användarens minne eller mentala modell. Anpassning till branschstandarder eller vanliga plattformsmönster ökar den här effekten ytterligare.
När appramen har fastställts placeras layouten för varje skärm inom appramens innehållsområde.
Använd innehållsområdet noggrant
Användarna vill ha smidiga upplevelser där informationen är lätt att nå, texten lätt att läsa och estetiken snarare ökar än minskar användbarheten. Prioritera inledande synlighet för viktig information, säkerställ läsbarhet över kolumner och harmonisera designelement estetiskt.
Se till att viktig information visas direkt när du öppnar skärmen utan att du behöver rulla. Prioritera visning av viktig information, t.ex. navigeringsalternativ, viktigt innehåll och användbara objekt högst upp på skärmen. Att hitta en balans mellan att visa tillräckligt många objekt och att ge detaljerad information för varje objekt är en konstant utmaning. Omvänt kan det vara frestande att ge all möjlig information i den ursprungliga vyn, men för mycket information riskerar att överväldiga användarna och försvaga de viktiga elementens betydelse. Överväg att använda sammanfattningar eller förhandsgranskningar med mer detaljerad information som lockar användarna att titta djupare. Instrumentpaneler är optimerade för att visualisera stora mängder data.
Infoga flera kolumner, avsnitt eller grupperingar för att ordna innehållet på ett logiskt sätt och maximera utrymmet. Var noggrann med kolumnbredden så att texten förblir läsbar utan alltför stor belastning. Undvik för smala kolumner som tvingar användarna att ständigt rulla vågrätt och störa interaktionsflödet. Omvänt kan för breda kolumner försvåra läsbarheten och kräver att användarna följer rader över längre avstånd. Sträva efter en balans som ger smidig läsning samtidigt som du använder det tillgängliga utrymmet på ett effektivt sätt.
Anpassa de visuella elementens storlek och placering för att skapa ett visuellt tilltalande och balanserat gränssnitt. Anpassa bildtexter till motsvarande visuella element eller rubriker, upprätthåll konsekvent mellanrum mellan element och följ en hierarki som bygger på användarnas behov. Ta bort onödiga utsmyckningar och allokera pixlar klokt till de viktigaste elementen. Prioritera och framhäv innehåll och navigeringselement, särskilt i navigeringsintensiva appar eller startsidor, och undvik överflödig utsmyckning som försämrar användbarheten.
Ett underliggande rutnät är praktiskt om du vill ordna element på ett konsekvent sätt. Det valda rutnätet måste vara enhetligt i innehållsområden på alla appens skärmar, och kan även användas på komponentnivå som kort eller sidofönster. Den vanligaste typen av rutnätslayout som används i webbprogram är kolumnrutnätet. Vi rekommenderar flytande (eller skalbart) rutnät för att implementera dynamiska skärmar.
Använd etablerade layouter och grupperingsmönster
Använd vanligt förekommande strukturer och arrangemang för att ordna innehåll och element i ett användargränssnitt. Dessa layouter och mönster har förfinats och visat sig vara effektiva, vilket gör dem välkända och intuitiva för användarna, samtidigt som de gör det enkelt att implementera dynamiska mönster. När huvudscenarier och element är identifierade kan du mappa alla objekt till en väletablerad layout som ger den bästa interaktionen. Prioritera innehåll och funktioner som är viktiga för uppgiftens slutförande. Bestäm vilka element som alltid är synliga och tillgängliga på skärmen och vilka som döljs eller nås genom andra menyer eller åtgärder.
I följande lista, som inte är fullständig, beskriver etablerade layouter som används i affärs- eller produktivitetsprogram. Allt kan placerasm i det huvudsakliga innehållsområdet.
Landnings-/startskärm
Landnings- eller startskärmen utgör startpunkten för ett program, och ger användarna en översikt över appens utbud och funktioner. Den vill vanligen fånga besökarnas uppmärksamhet och uppmuntrar till en viss åtgärd, till exempel att slutföra en uppgift för första gången eller utforska ytterligare innehåll. Den innehåller ofta fokusbilder och rena navigeringsalternativ.
Den är idealisk för att välkomna användare med snabb åtkomst till viktiga funktioner, navigeringsalternativ eller åtgärder och slår an tonen för appfunktionerna. Prioritera tydlighet, enkelhet och intuitiv navigering för att vägleda användarna effektivt.
Instrumentpanel
En instrumentpanel är ett centraliserat nav i ett program som ger användarna en heltäckande översikt över relevant data eller information. Den består ofta av anpassningsbara widgets eller moduler, så att användarna kan övervaka specifika mått eller vidta åtgärder.
Instrumentpaneler är lämpliga för program med komplexa datauppsättningar eller mångsidiga funktioner, vilket gör det möjligt för användarna att snabbt följa förlopp, analysera trender och fatta väl underbyggda beslut. De är särskilt användbara på analysplattformar, i projekthanteringsverktyg och appar för ekonomihantering.
Formulär
Ett formulär är en strukturerad layout som underlättar datainmatning från användare, och består vanligen av fält för att ange olika typer av information, till exempel text, siffror, datum och val. Formulär är nödvändiga för att samla in indata från användare, bearbeta transaktioner och underlätta interaktioner i programmen.
De används ofta i registreringsflöden, utcheckningsprocesser, datainmatningsuppgifter och alla scenarier som kräver användarindata eller feedback.
Enhets-/profilvy
Entitets- eller profilvyn innehåller detaljerad information om en viss entitet, till exempel en användarprofil, produktlista eller ett innehållsobjekt. Den innehåller typiskt beskrivande text, multimedieelement samt relevanta åtgärder eller interaktioner.
De passar bra till att visa detaljerad information om objekt i program. De ger användare ingående insikter, underlättar beslutsfattande och stöder interaktion med specifika enheter, till exempel användarprofiler i appar för sociala nätverk eller produktlistor på e-handelsplattformar.
Listasida
En lista eller tabell som visar en samling objekt eller entiteter i ett strukturerat format, som ofta visas i en linjär layout eller rutnätslayout. Den innehåller vanligen korta sammanfattningar eller förhandsgranskningar av varje objekt, tillsammans med navigeringskontroller för surfning eller filtrering.
Listsidor är effektiva om du vill presentera stora uppsättningar innehåll eller data i ett lättsmält format och ger användarna möjlighet att läsa in, söka och navigera effektivt. Om åtgärder på specifika rader aktiveras måste processen vara tydlig. Listsidor används ofta i innehållshanteringssystem, kataloglistor, sökresultat och nyhetsflöden.
Minigranskning (delad skärm)
En minigranskning eller delar skärm delar upp gränssnittet i två olika avsnitt, med en lista till vänster och en objektvy till höger. Listan innehåller vanligen en samling objekt, medan objektvyn innehåller detaljerad information om det valda objektet i listan.
Den här layouten är särskilt effektiv i scenarier där användarna snabbt bläddrar igenom en lista med objekt och samtidigt visa detaljerad information om varje objekt, till exempel när de utför massåtgärder. Produktkataloger, dokumenthanteringssystem, e-post- eller kommunikationsklienter samt uppgiftshanteringsverktyg (till exempel Azure Dev Ops frågevisare) är scenarier som normalt passar det här mönstret.
Guide
En guide vägleder användare genom en serie steg eller uppgifter, vanligen linjärt, för att slutföra en komplicerad process eller för att uppnå ett visst mål. Den innehåller ofta förloppsindikatorer, frågor och valideringskontroller. Guiderna förenklar komplexa processer, minskar kognitiv belastning och leder användare genom obekanta uppgifter eller arbetsflöden. De används ofta i registreringsflöden, installationsprocesser, formulär i flera steg och uppgiftsbaserade interaktioner, t.ex. för konfigurering av komplicerade inställningar eller transaktioner.
Anpassa och bygg vidare på standardlayouten så att den uppfyller specifika krav. Den här processen lägger till exempel till eller tar bort element, justerar elementens storlek och placering samt formatering som överensstämmer med riktlinjerna för varumärkesidentitet eller visuell design. Experimentera med olika konfigurationer och variationer av standardlayouten och hitta det effektivaste arrangemanget för innehåll och användarupplevelse.
Utforma layouter för alla enheter
Layouter används för att skapa tydliga regler och avsiktlig innehållsordning. Att föra in innehåll i genomtänkta strukturer är viktigt, men att få det att fungera tillsammans med en tydlig hierarki på olika plattformar och skärmstorlekar kräver skalningslogik. Varje enskild anpassad och dynamisk löser det här problemet. I vissa fall är en blandning av anpassad och dynamisk design rätt alternativ.
Dynamisk design använder endast en (1) layout där innehållet är flytande och kanb anpassas till förändrad formatstorlek. Den här designtekniken använder mediefrågor för att kontrollera en viss enhets egenskaper och renderar innehållet därefter. Dynamisk design gör det möjligt att skapa en funktion en gång och få den att fungera effektivt på alla skärmstorlekar.
En anpassad layout ändras helt efter formatet där den presenteras. Anpassad design har flera fasta layoutstorlekar och gör att webbläsaren läser in en viss layout enligt det tillgängliga utrymmet. Webbplatser skapade med anpassad design använder mediefrågor för att identifiera brytpunkter, i likhet med dynamisk design. De använder även ytterligare kod baserat på enhetens funktioner. Den här processen kallas progressiv förbättring.
Flyttning
Ändra sidelementens position.
Se till att innehållet är ordnat, läsbart och balanserat genom att optimera sammansättningen när fönsterstorleken ökar. Stående staplade element i ett mobilt visningsområde kan till exempel flyttas vågrätt i större visningsområden. Den här förändringen följer en naturlig läsordning från vänster till höger, skapar balans i designen och upprätthåller visuell fokus på sidans huvudelement.
Ändra storlek
Justera sidelementens storlek och marginaler.
Ändra storlek på sidelement så att de optimeras för en större användarupplevelse genom att visa mer innehåll högst upp i fönstret, vilket minskar behovet av vertikal rullning. Justera sidmarginalerna för att lägga till tomt utrymme och balans i layouten, vilket får att innehållet andas och gör designen mer visuellt tilltalande. En fokuskomponent kan t.ex. sträckas ut till fönstrets fullständiga bredd om du vill visa mer av bakgrundsbilden. Innehåll under bilden går att utöka men använder olika marginaler i syfte att variera layouten och bidra till att definiera visuell hierarki.
Omforma flöde
Optimera sidelementens flöde.
Justera sidelementen så att dessa visas helt, och ta hänsyn till fönsterstorlek och riktning genom att ordna om innehållet. Det går till exempel att omforma flödet i en kolumn med innehåll i ett mindre fönster till ett större fönster för att visa två kolumner text. Den här tekniken visar mer innehåll på den övre halvan.
Visa/dölj
Optimera innehållet efter fönsterstorleken och dess riktning.
Visa eller dölj sidelement för att optimera innehållet efter fönsterstorleken och dess riktning. Den här dynamiska tekniken anpassar informationsmängden efter visningssammanhanget. Kategorier som visas på en liten skärm kan exempelvis visa begränsade metadata, till exempel bild, rubrik och länk, så att annan information visas för att hjälpa användaren att fokusera. På en större skärm kan kategorier visa ytterligare metadata såsom profil, datum och kort beskrivning, men ryms fortfarande i visningsfönstret.
Omstrukturera
Förgrena eller dölj sidelement och innehåll för att behålla fokus på viktig information och viktiga åtgärder.
Den här metoden följer ungefär samma metod som progressiv information i designen men med olika fönsterstorlekar och riktningar. Att till exempel expandera fönstret gör det möjligt att visa en lista med objekt intill detaljerna. Den här visuella länken mellan innehållet möjliggör för användarna att enkelt välja ett annat objekt. På en mindre skärm stannar fokus på att visa viktig information.
Skapa en brytpunktsmatris
En brytpunktsmatris fungerar som en grafisk framställning för dynamiskt eller anpassat beteende i en programdesign i beaktande av olika skärmstorlekar och riktningar. Oftast visas ett strukturerat rutnät eller en layout med information om designens svar vid olika brytpunkter. Varje segment motsvarar en distinkt skärmbredd och ger insikter om designens struktur, layout och funktioner. En brytpunktsmatris omfattar hänsyn till skärmbredd, visningsområdets orientering, designelement, layoutstruktur, innehållspresentation, navigering, media och interaktiva komponenter, för att visa hur en webbplats- eller appdesign svarar i olika skärmstorlekar och riktlinjer. Den här metoden underlättar inte bara utformning av varje enskild skärm, utan underlättar även implementering när viktiga ändringar i komponentegenskaper tydligt spåras och kommuniceras.
Underlätta Power Platform
Modellbaserade appars formulärlayouter konfigureras med Power Apps Studio. Formulärdesignern tillåter att utvecklare lägger till element i en rutnätsstruktur som gör att formulärsidorna i sig är dynamiska. Inbäddade anpassade komponenter såsom anpassade sidor, inbäddade arbetsytekomponenter och Power Apps Component Framework-kodkomponenter måste införliva dynamiskt beteende i sina respektive implementeringar. Anpassade sidor måste till exempel implementera dynamisk beteende på samma sätt som en arbetsyteapp för att fungera korrekt.
Arbetsyteappar kräver tydlig konfigurering för varje komponent för att implementera dynamiskt beteende för bättre kontroll över upplevelsen. Skärmstorlekar bestäms i appdefinitionen, som går att referera till i syfte att bestämma position, beteende, synlighet och andra relevanta egenskaper.