Dela via

Riktlinjer för appdesign

Moderna kontroller

Moderna kontroller i Canvas-appar representerar ett betydande framsteg i utvecklingen och designen av användargränssnitt inom Microsofts ekosystem. Dessa kontroller är baserade i Microsofts Fluent Design System och är utformade för att ge en snabb, prestandaorienterad och tillgänglig användarupplevelse, samtidigt som sömlös integrering med temafunktioner säkerställs. Introduktionen av dessa kontroller, inklusive fliklistor, förloppsindikatorer, informationsknappar, spinnare med mera, understryker ett strategiskt skifte mot att skapa mer intuitiva, dynamiska och visuellt tilltalande program. Med hjälp av dessa moderna kontroller kan utvecklare enkelt implementera avancerade gränssnittselement som både är estetiskt tilltalande och funktionellt rika, vilket förbättrar det övergripande användarengagemanget och tillfredsställelsen.

Den inneboende utformningen av dessa kontroller, med hänsyn till teman, möjliggör ett enhetligt och konsekvent utseende och känsla över program, vilket avsevärt minskar den ansträngning som krävs för att anpassa och branda appar. Möjligheten att automatiskt uppdatera formatmallarna för alla kontroller baserat på det angivna temat förenklar designprocessen och säkerställer att programmen förblir visuellt sammanhängande hela vägen. Detta överensstämmer perfekt med behoven hos moderna företag som försöker upprätthålla varumärkeskonsekvens samtidigt som de erbjuder digitala upplevelser av hög kvalitet. De moderna kontrollerna betonar också tillgänglighet och prestanda, vilket säkerställer att program kan användas av en mängd olika målgrupper, inklusive personer med funktionshinder, i linje med inkluderande designprinciper. Därför är de moderna kontrollerna i appar för arbetsytor inte bara en uppsättning gränssnittskomponenter utan en transformerande verktygsuppsättning som gör det möjligt för utvecklare att skapa mer effektiva, underhållsbara, tillgängliga och sammanhängande program som uppfyller de växande behoven hos både företag och användare.

Viktigt!

** En delmängd av de moderna kontrollerna i canvas-appar har gjorts allmänt tillgänglig, men den bredare funktionsuppsättningen förblir i förhandsversion. Du uppmanas att utforska och ge feedback om dessa förhandsgranskningskontroller. Det är dock viktigt att komma ihåg att deras funktioner kan förfinas baserat på feedback och testning innan de når allmän tillgänglighet.

Formulärdesign och riktlinjer

Ordna formuläret

  • Dela upp formuläret i logiska avsnitt och gruppera relaterade fält tillsammans.
  • Sikta på att behålla formuläret på en enda skärm. Om den är lång kan du överväga att dela upp den i flera skärmar, steg eller flikar.
  • Använd ett tydligt och enkelt språk för fältetiketter och undvik obekanta termer eller jargong.
  • Implementera verifieringsregler för att säkerställa datanoggrannhet. För obligatoriska fält anger du tydligt att de är nödvändiga. Verifiera e-postadresser, telefonnummer och andra format efter behov.

Återanvänd formulär

  • Använd ett enda formulär för att skapa nya poster, redigera befintliga poster och visa poster i visningsläge.
  • Återanvändning av samma formulär minskar utvecklings- och underhållstiden samtidigt som konsistens säkerställs.

Formulärlägen

Ange formulärläget dynamiskt baserat på användaråtgärder. Till exempel:

  • När du skapar en ny post anger du formuläret som läget Nytt.
  • När du redigerar en befintlig post anger du formuläret som läget Redigera.
  • När du visar en post anger du formuläret som läget Visa.

Placering av kontroller

  • Placera olika kontroller (till exempel galleri, visningsformulär och redigeringsformulär) på separata skärmar för att göra dem särskiljbara.
  • Kombinera dessa kontroller med formler för att skapa en sammanhängande användarupplevelse.

Containers

När canvas-appen växer i storlek för att hantera fler affärsscenarier, fortsätter antalet kontroller att öka och det är nödvändigt att ordna kontrollerna baserat på den funktion de utför. Ett enkelt sätt att göra detta är att välja kontrollerna tillsammans och gruppera dem i en grupp. Grupperingskontroller rekommenderas dock inte alltid. Kontrollen för canvas-appen Container kan innehålla en uppsättning kontroller och har sina egna egenskaper.

Containrar fungerar som tomma utrymmen där du kan infoga och ordna kontroller i förhållande till containerns övre vänstra hörn. Du har flexibilitet att kapsla containrar, vilket gör det möjligt att skapa mer komplexa layouter och utforma olika designalternativ.

Containrar är faktiska kontroller med egna egenskaper som Width och BorderColor. Containrar påverkar applayouten och hjälper skärmläsaren att förstå appens struktur.

Du kan lägga till kontroller i en grupp, men du bör bara lägga till logiskt relaterade kontroller i en container.

Genom att organisera element i Power Apps med hjälp av grupper kan användare använda delade egenskaper för flera element. Att göra enskilda egenskapsändringar inom en grupp kan dock kräva manuella justeringar. Dessutom har grupper inte någon närvaro i den logiska strukturen för en app av hjälpmedelsskäl, eftersom skärmläsare inte kan identifiera dem. Dessutom gör oförmågan att kapsla grupper det mer svårt att skapa mer komplexa layouter.

Undvik att ändra egenskapen Items för ett galleri i underordnade kontrollers händelser såsom OnChange eller OnSelect. Detta kan leda till oväntat beteende, särskilt när du hanterar vissa kontroller som utlöser händelser när deras värden ändras.

Var försiktig med OnChange-utlösta kontroller

Var försiktig när du använder kontroller som Kombinationsruta, Datumväljare, Skjutreglage eller Växla i gallerier. Dessa kontroller kan utlösa händelsen OnChange oväntat, vilket leder till potentiella problem som oändliga loopar.

Prestandapåverkan på korrigering

Tänk på prestandapåverkan vid korrigering eller uppdatering av objekt i ett galleri, särskilt när du hanterar ett stort antal objekt. Patchning kan vara långsam och galleriet kan läsa in alla objekt igen, vilket påverkar prestandan negativt.

Hantera oändliga loopar med försiktighet**

Om ändringar av galleridata utlöser händelser som leder till oändliga loopar bör du överväga att använda moderna kontroller eller kontroller som inte utlöser händelser OnChange vid dataändring för att bryta looparna.

Undvik kapslade gallerier

Kapslade gallerier kan leda till prestandaproblem och komplex databindning.

Om det är möjligt bör du undvika att kapsla in gallerier. Försök i stället att utforma din datastruktur och använda funktioner på ett optimerat sätt.

Använda gallerier med flexibel höjd

Gallerier med fast höjd kan leda till begränsad innehållssynlighet, särskilt när du hanterar dynamiska data.

Använd gallerier med flexibel höjd genom att ange Height egenskapen till Parent.Height eller ett dynamiskt värde baserat på dina data. Detta säkerställer att galleriet justerar sin höjd för att hantera olika mängder data.

Skärmbild av Power Apps Studio med tomt galleri med flexibel höjd markerat

Optimera datainläsning

När du optimerar datainläsning i Power Apps kanske du bara vill hämta och visa de kolumner som behövs i ett galleri i stället för att hämta hela datamängden.

Här är ett exempel på hur du kan uppnå detta: Förutsatt att du har en samling EmployeeData med flera kolumner, och du bara vill visa kolumnerna "Namn" och "Avdelning" i ett galleri.

// Collection named ProductSales with sample sales data

ClearCollect(ProductSales, 
    Table(
        { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
        { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
        { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
    )
)

// Bind the gallery to display only the "ProductName" and "QuantitySold" columns

Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)

Få mer information om metodtips för gallerier.

Skapa återanvändbara komponenter

När du ska skapa anpassade kodkomponenter med Hjälp av Power Apps Component Framework (PCF)

Med Power Platform kan du skapa återanvändbara komponenter via Power Apps Component Framework (PCF). Mer information finns här.

Här är scenarier där du kan överväga att skapa PCF-komponenter i Power Apps:

Komplexa gränssnittselement

När du behöver skapa komplexa användargränssnittselement eller kontroller som inte är lättillgängliga i power apps-standardkontrollerna.

Anpassade kontroller för specifika krav

När din app har specifika krav som inte uppfylls av de färdiga kontrollerna och du behöver skapa anpassade kontroller som är skräddarsydda för dina behov.

Konsekvent användarupplevelse mellan appar

När du vill upprätthålla en konsekvent användarupplevelse i flera Power Apps eller miljöer genom att kapsla in specifika funktioner i en PCF-komponent.

Återanvändning mellan appar

När du förväntar dig att du behöver återanvända en specifik funktion eller ett användargränssnittselement i flera appar kan du skapa en PCF-komponent en gång och återanvända den.

Implementera avancerad logik

När du behöver implementera avancerad affärslogik eller beräkningar som ligger utanför funktionerna i standardformler eller funktioner i Power Apps.

Förbättrad användarupplevelse

När du vill förbättra den övergripande användarupplevelsen genom att skapa visuellt tilltalande och interaktiva komponenter som inte kan uppnås med standardkontrollerna.

Nästa steg

Riktlinjer för dynamisk design

  • Last updated on