Richtlijnen voor app-instellingen

App-instellingen zijn de door de gebruiker aanpasbare gedeelten van uw Windows-app, die toegankelijk zijn via een speciale instellingenpagina. Met een nieuwslezer-app kan de gebruiker bijvoorbeeld opgeven welke nieuwsbronnen moeten worden weergegeven of hoeveel kolommen op het scherm moeten worden weergegeven, terwijl een weer-app de gebruiker kan laten kiezen tussen Celsius en Fahrenheit. Dit artikel bevat aanbevelingen en aanbevolen procedures voor het maken en weergeven van app-instellingen in WinUI-apps.

Wanneer moet u een instellingenpagina opgeven

Hier volgen voorbeelden van app-opties die deel uitmaken van een pagina met app-instellingen:

  • Configuratieopties die van invloed zijn op het gedrag van de app en die niet regelmatig moeten worden aangepast, zoals het kiezen tussen Celsius of Fahrenheit als standaardeenheden voor temperatuur in een weer-app, het wijzigen van accountinstellingen voor een e-mail-app, instellingen voor meldingen of toegankelijkheidsopties.
  • Opties die afhankelijk zijn van de voorkeuren van de gebruiker, zoals muziek, geluidseffecten of kleurthema's.
  • App-informatie die niet vaak wordt geopend, zoals privacybeleid, help, app-versie of copyrightgegevens.

Opdrachten die deel uitmaken van de typische app-werkstroom (bijvoorbeeld het wijzigen van de grootte van de kwast in een kunst-app) mogen zich niet op een instellingenpagina bevinden. Zie De basisprincipes van opdrachtontwerp voor meer informatie over de plaatsing van opdrachten.

Algemene aanbevelingen

  • Houd instellingenpagina's eenvoudig en gebruik van binaire (aan/uit) besturingselementen. Een wisselknop is meestal het beste besturingselement voor een binaire instelling.
  • Gebruik radioknoppen voor instellingen waarmee gebruikers één item uit een set van maximaal 5 onderling uitsluitende gerelateerde opties kunnen kiezen.
  • Maak een toegangspunt voor alle app-instellingen op de pagina instellingen van uw app.
  • Houd uw instellingen eenvoudig. Definieer slimme standaardinstellingen en behoud het aantal instellingen tot een minimum.
  • Wanneer een gebruiker een instelling wijzigt, moet de app onmiddellijk de wijziging weerspiegelen.
  • Neem geen opdrachten op die deel uitmaken van de algemene app-werkstroom.

Ingangspunt

De manier waarop gebruikers naar uw pagina met app-instellingen gaan, moeten zijn gebaseerd op de indeling van uw app.

Navigatiedeelvenster

Voor een Navigatieweergave-indeling moeten app-instellingen het laatste item in de lijst met navigatieopties zijn en aan de onderkant worden vastgemaakt. NavigationView biedt een ingebouwd instellingenitem voor dit doel: stel de eigenschap IsSettingsVisible in op true om automatisch een Instellingenvermelding onder aan het navigatiedeelvenster weer te geven.

invoerpunt voor app-instellingen voor navigatiedeelvenster

Opdrachtbalk

Als u een opdrachtbalk of werkbalk gebruikt, plaatst u het invoerpunt voor instellingen als een van de laatste items in het overloopmenu Meer. Als grotere vindbaarheid van het toegangspunt voor instellingen belangrijk is voor uw app, zet u het toegangspunt rechtstreeks op de opdrachtbalk en niet in het uitvouwmenu.

Invoerpunt voor app-instellingen voor opdrachtbalk

Layout

De pagina met app-instellingen moet volledig scherm openen en het hele venster vullen. Gebruik een schuifbare indeling met een beperkte maximale breedte (ongeveer 1000-1100 px), zodat inhoud leesbaar blijft op brede schermen. Groepeer gerelateerde instellingen onder sectiekoppen met de tekststijl BodyStrong.

Gebruik de besturingselementen SettingsCard en SettingsExpander van de Windows Community Toolkit om uw instellingenpagina te maken. Deze besturingselementen bieden een consistente, toegankelijke indeling met een koptekst, beschrijving, pictogram en een actiebesturingselement dat aan de rechterkant van de kaart is uitgelijnd.

Zie de pagina WinUI Gallery-instellingenpagina en het Windows Community Toolkit SettingsControls-voorbeeld voor volledige implementatievoorbeelden.

indeling voor de pagina app-instellingen op het bureaublad

Instellingenkaart

Gebruik een SettingsCard voor afzonderlijke instellingen. Elke kaart heeft een koptekst, een optionele beschrijving, een optionele HeaderIcon en een actiebesturing (zoals een ToggleSwitch, ComboBoxof Button) die als inhoud van de kaart wordt geplaatst. Het instellen van de IsClickEnabled eigenschap op true maakt de hele kaart klikbaar, wat handig is voor vermeldingen in navigatiestijl.

SettingsExpander

Gebruik een SettingsExpander wanneer een instelling subopties bevat die op aanvraag moeten worden weergegeven. In het uitklapmenu ziet u een primaire actiebediening in de kopregel en extra SettingsCard items in de Items verzameling. Hierdoor blijft de pagina compact terwijl er nog steeds geavanceerde opties beschikbaar zijn. Vermijd het nesten van uitbreidingen dieper dan één niveau.

App-thema-instellingen

Als uw app gebruikers toestaat de kleurmodus van de app te kiezen, kunt u deze opties presenteren met behulp van een keuzelijst met invoervak in een SettingsCard. De opties moeten als volgt worden gelezen:

  • Light
  • Dark
  • Systeeminstelling gebruiken

U kunt ook een hyperlink toevoegen aan de pagina Kleuren van Windows Instellingen waar gebruikers de huidige standaard-app-modus kunnen openen en wijzigen. Gebruik de tekenreeks 'Windows kleurinstellingen' voor de hyperlinktekst en ms-settings:colors voor de URI.

De sectie 'Een modus kiezen'

Over deze sectie

U wordt aangeraden een sectie Over onder aan uw instellingenpagina te plaatsen met behulp van een SettingsExpander. In de samengevouwen koprij moeten uw app-naam, pictogram en versienummer worden getoond. Het uitgebreide gebied kan het volgende omvatten:

  • Een koppeling naar de opslagplaats of website van uw app.
  • Een koppeling naar bestandsfouten of aanvraagfuncties.
  • Een lijst met afhankelijkheden en verwijzingen als HyperlinkButton-besturingselementen .
  • Juridische informatie, zoals een copyrightmelding, gebruiksvoorwaarden en koppelingen naar privacyverklaring.

Sectie over deze app met de knop Feedback geven

Wanneer u een lijst hebt met items die u wilt opnemen op de pagina met app-instellingen, kunt u de volgende richtlijnen overwegen:

  • Groepeer vergelijkbare of gerelateerde instellingen onder één sectiekoptekst.

  • Probeer het totale aantal instellingen maximaal vier of vijf te houden.

  • Dezelfde instellingen weergeven, ongeacht de app-context. Als bepaalde instellingen niet relevant zijn in een specifieke context, schakelt u SettingsCard uit door IsEnabled in te stellen op false.

  • Gebruik beschrijvende, één woordlabels voor instellingenheaders. Geef bijvoorbeeld de instelling 'Accounts' in plaats van 'Accountinstellingen' op voor accountgerelateerde instellingen.

  • Als een instelling rechtstreeks naar het web wordt gekoppeld, gebruikt u een klikbaar SettingsCard met IsClickEnabled="True" en een geschikt actiepictogram om externe navigatie aan te geven.

  • Combineer minder gebruikte instellingen in een SettingsExpander zodanig dat algemene instellingen elk hun eigen SettingsCardinstellingen kunnen hebben. Plaats inhoud of koppelingen die alleen informatie bevatten in een sectie Over.

  • Presenteer inhoud van boven naar beneden in één kolom, schuifbaar indien nodig.

  • Gebruik de volgende besturingselementen voor app-instellingen:

    • Schakelopties in- of uitschakelen: hiermee kunnen gebruikers waarden in- of uitschakelen.
    • Keuzerondjes: Gebruikers kunnen één item kiezen uit een set van maximaal 5 wederzijds exclusieve, gerelateerde opties.
    • Vervolgkeuzelijsten: om gebruikers te laten kiezen uit een set opties in een compacte vervolgkeuzelijst.
    • Tekstinvoervakken: gebruikers tekst laten invoeren. Gebruik het type tekstinvoervak dat overeenkomt met het type tekst dat u van de gebruiker krijgt, zoals een e-mailadres of wachtwoord.
    • Hyperlinks: de gebruiker naar een andere pagina in de app of naar een externe website brengen.
    • Knoppen: gebruikers een onmiddellijke actie laten initiëren.
  • Voeg een beschrijvend bericht toe als een van de besturingselementen is uitgeschakeld. Gebruik de eigenschap Description van SettingsCard om uit te leggen waarom de instelling niet beschikbaar is.

  • Wanneer een gebruiker een instelling wijzigt, moet de app onmiddellijk de wijziging weerspiegelen. Hiervoor is geen bevestigingsknop vereist.