Dela via


Kommandoknappar i Windows 7

Not

Den här designguiden skapades för Windows 7 och har inte uppdaterats för nyare versioner av Windows. Mycket av vägledningen gäller fortfarande i princip, men presentationen och exemplen återspeglar inte vår nuvarande designvägledning.

Med kommandoknappar i Windows 7 initierar användarna omedelbara åtgärder.

skärmbild av ok kommandoknapp

En typisk kommandoknapp.

Standardkommandoknappen anropas när användare trycker på Retur-tangenten. Den tilldelas av utvecklaren, men alla kommandoknappar blir standard när användarna tar en flik till den.

Not

Riktlinjer som rör layout visas i en separat artikel.

Är det här rätt kontroll?

Du kan ta ställning till följande frågor:

  • Används kommandoknappen för att initiera en omedelbar åtgärd? Om inte använder du en annan kontroll.
  • Skulle en länk vara ett bättre val? Använd en länk om:
    • Åtgärden är att navigera till en annan sida, ett annat fönster eller hjälpavsnitt. Undantag: Kommandoknapparna Bakåt och Nästa används i navigeringsguiden.
    • Kommandot är inbäddat i en texttext.
    • Kommandot är sekundärt till sin natur. Det innebär att den inte är relaterad till det primära syftet med fönstret. I det här fallet är antingen en enkel kommandoknapp eller länk lämplig.
    • Kommandot är en del av en meny eller grupp med relaterade länkar.
    • Etiketten är lång och består av fem eller fler ord, vilket ger en kommandoknapp ett besvärligt utseende.
  • Skulle en kombination av alternativknappar och allmänna kommandoknappar vara ett bättre val? Ofta används alternativknappar tillsammans med allmänna kommandoknappar (OK, Avbryt) i stället för en uppsättning specifika kommandoknappar när något av följande är sant:
    • Det finns fem eller fler möjliga åtgärder.

    • Användarna måste visa ytterligare information innan de fattar ett beslut.

    • Användarna måste interagera med valen (kanske för att se ytterligare information) innan de fattar ett beslut.

    • Användarna ser alternativen som alternativ i stället för olika kommandon.

      Rätt:skärmbild av dialogruta, alternativknappar och text

      I det här exemplet kombineras alternativknappar med OK- och Avbryt-knappar för att ge ytterligare information om alternativen.

      Felaktig:skärmbild av meddelandet med kommandoknappar

      I det här exemplet gör enbart kommandoknappar det svårt för användarna att fatta ett välgrundat beslut.

Designbegrepp

Använda ellipser

Kommandoknappar används för omedelbara åtgärder, men mer information kan behövas för att utföra åtgärden. Ange ett kommando som behöver ytterligare information (inklusive bekräftelse) genom att lägga till en ellips i slutet av knappetiketten.

skärmbild av utskriftskommandoknappen med ellipser

I det här exemplet skriver du ut... kommandot visar en utskriftsdialogruta för att samla in mer information.

skärmbild av knappen skriv ut kommando, inga ellipser

I det här exemplet skriver kommandot Print däremot ut en enda kopia av ett dokument till standardskrivaren utan ytterligare användarinteraktion.

Korrekt användning av ellipser är viktigt för att indikera att användarna kan göra ytterligare val innan de utför åtgärden, eller till och med avbryta åtgärden helt. Det visuella tipset som erbjuds av en ellips gör det möjligt för användare att utforska din programvara utan rädsla.

Det betyder inte att du ska använda en ellips när en åtgärd visar ett annat fönster. Använd endast en ellips när ytterligare information krävs för att utföra åtgärden. Därför alla kommandoknappar vars implicita verb är att "visa ett annat fönster" inte tar en ellips, till exempel med kommandona Om, Avancerat, Hjälp (eller något annat kommando som länkar till ett hjälpavsnitt), Alternativ, Egenskaper eller Inställningar.

I allmänhet används ellipser i användargränssnitt för att indikera ofullständighet. Kommandon som visar andra fönster är inte ofullständiga. De måste visa ett annat fönster och ytterligare information behövs inte för att utföra åtgärden. Den här metoden eliminerar skärmtrassel i situationer där ellipser har lite värde.

Obs! När du avgör om en kommandoknapp behöver en ellips ska du inte använda behovet av att höja behörigheter som en faktor. Utökade privilegier är inte information som behövs för att utföra ett kommando (i stället är det för behörighet) och behovet av att höja anges med säkerhetsskölden.

Om du bara gör en sak... Använd en koncis, specifik, självförklarande etikett som tydligt beskriver den åtgärd som kommandoknappen utför och använder en ellips när det är lämpligt.

Användningsmönster

Kommandoknappar har flera användningsmönster:

Användning Exempel
Standard-kommandoknappar Du kan använda standardkommandoknappar för att initiera en omedelbar åtgärd.
skärmbild av standardkommandoknappen (grå)
En standardkommandoknapp.
Standardkommandoknappar Standardkommandoknappen i ett fönster anger kommandoknappen som aktiveras när användarna trycker på Retur.
skärmbild av standardkommandoknappen (blå)
En standardkommandoknapp.
Alla kommandoknappar blir standard när användarna tar en flik till den. Om indatafokus ligger på en kontroll som inte är en kommandoknapp blir kommandoknappen med standardknappattributet standard. Endast en kommandoknapp i ett fönster kan vara standard.
Lightweight-kommandoknappar En enkel kommandoknapp liknar en standardkommandoknapp, förutom att knappramen endast visas vid muspekaren.
skärmbild av en av två utskriftsknappar som valts
I det här exemplet har kommandot ett mycket enkelt utseende (liknar en länk) tills användaren hovrar över kommandot, då det ritas med en knappram.
Du kan använda lätta kommandoknappar i situationer där du använder en standardkommandoknapp, men du vill undvika att alltid visa knappramen. Lätta kommandoknappar är idealiska för kommandon som du vill underbefasa och det vore inte lämpligt att använda en länk.
menyknappar Använd en menyknapp när du behöver en meny för en liten uppsättning relaterade kommandon.
skärmbild av formatmenyknappen och dess kommandon
En menyknapp med en liten uppsättning relaterade kommandon.
Använd en menyknapp när en menyrad inte är önskvärd, till exempel i en dialogruta, ett verktygsfält eller ett annat fönster som inte har någon menyrad. En enda nedåtriktad triangel anger att om du klickar på knappen visas en meny.
Dela upp knappar Använd en delningsknapp för att konsolidera en uppsättning varianter av ett kommando, särskilt när ett av kommandona används för det mesta.
skärmbild av knappen Öppen delning utan kommandon
en komprimerad delningsknapp.
som en menyknapp anger en enda nedåtriktad triangel att om du klickar på den högra delen av knappen kommer en meny att visas.
skärmbild av knappen Öppen delning med kommandon
en nedrullningsad delningsknapp.
I det här exemplet används en delningsknapp för att konsolidera sex varianter av det öppna kommandot. Det vanliga öppna kommandot används för det mesta, så användarna behöver normalt inte se de andra kommandona. Om du använder en delad knapp sparas en betydande mängd skärmutrymme, samtidigt som du får kraftfulla val.
till skillnad från en menyknapp utför du åtgärden direkt på etiketten genom att klicka på den vänstra delen av knappen. delningsknappar är effektiva i situationer där nästa åtgärd med ett specifikt verktyg sannolikt kommer att vara densamma som den senaste åtgärden. I det här fallet ändras etiketten till den senaste åtgärden, som med en färgväljare:
skärmbild av knappen för fyllningsdelning utan kommandon
I det här exemplet ändras etiketten till den senaste åtgärden.
Bläddra knappar Använd en bläddra-knapp för att visa en dialogruta som hjälper användarna att välja ett giltigt värde.
dialogrutor som startas med en bläddra-knapp hjälper användare att välja filer, mappar, datorer, användare, färger och så vidare. De kombineras vanligtvis med en obehindrat kontroll, till exempel en textruta. De är vanligtvis märkta bläddra, andra eller fler, och har alltid en ellips för att indikera att mer information krävs.
skärmbild av textrutan med bläddra-knappen
en textruta med en bläddra-knapp.
för windows som har många bläddra knappar, kan du använda en kort version:
skärmdump av kort bläddra knapp med ellipser
En kort knapp för att bläddra.
Progressiva upplysningsknappar Använd en progressiv avslöjandeknapp för att visa eller dölja alternativ som används sällan.
döljer sällan använda alternativ tills de behövs kallas progressivt avslöjande. dubbla sparrar används för att indikera progressivt avslöjande, och de pekar i den riktning i vilken avslöjandet eller döljandet kommer att äga rum:
skärmbild av knappen med
När knappen har klickats ändras etiketten så att nästa klick får motsatt effekt:
skärmbild av knappen med
Mer information och exempel finns i Progressive Disclosure Controls.
Riktningsknappar Använd en riktningsknapp för att ange i vilken riktning en åtgärd ska utföras.
I det här fallet används en enda vinkelparentes i stället för en dubbel sparr:
skärmbild av höger- och vänsterpilknappar
En riktningsknapp anger åtgärdsriktningen.

Riktlinjer

Allmänt

  • Visa en upptagen pekare om resultatet av att klicka på en kommandoknapp inte är omedelbart. Utan feedback kan användarna anta att klicket inte skedde och klicka igen.
  • Om samma kommandoknapp visas i fler än ett fönster försöka använda samma etiketttext och åtkomstnyckel och leta upp den på ungefär samma plats i varje fönster när det är praktiskt möjligt.
  • För kommandoknappar med textetiketter använder du en minsta knappbredd och standardkommandoknappens höjd. Mer information finns i Rekommenderad storleksändring och avstånd.
  • För varje fönster göra kommandoknapparna till samma bredd. Om det är opraktiskt begränsar du antalet olika bredder för kommandoknappar med textetiketter till två.
  • När en annan kontroll interoperates med en kommandoknapp, till exempel en textruta med knappen Bläddra, ange relationen genom att placera kommandoknappen på någon av tre platser:
    • Till höger om och överst i linje med den andra kontrollen.
    • Nedan och vänsterjusterad med den andra kontrollen.
    • Lodrätt centrerad mellan kontroller som samverkar (till exempel lägg till och ta bort knappar mellan två samverkande listrutor).
  • Om flera kommandoknappar samverkar med samma kontroll, lodrätt stapla dem till höger om och uppåtjusterade med den andra kontrollen, eller vågrätt placera dem vänsterjusterade under kontrollen.
  • När kommandoknapparna är underordnade andra kontroller använda placeringen ovan och inaktivera den underordnade kommandoknappen tills den överordnade kontrollen har valts.
  • Använd inte smala, korta eller höga kommandoknappar med textetiketter eftersom de tenderar att se oprofessionella ut. Försök att arbeta med standardbredderna och höjderna.

Rätt:skärmbild av ok-knappen i standardstorlek

I det här exemplet är knappstorleken standard och ser professionell ut.

Felaktig:skärmbild av kort ok knapp

I det här exemplet är knappen för liten.

Felaktig:skärmdump av stor, kvadratisk ok knapp

I det här exemplet har knappen för mycket utrymme runt etiketten.

  • Undvik att kombinera textetiketter och grafik på kommandoknappar. Att kombinera text och grafik ger vanligtvis onödig visuell oreda och förbättrar inte användarens förståelse. Överväg att endast kombinera text och grafik när grafiken underlättar förståelsen, till exempel när det är en standardsymbol för kommandot eller om det hjälper användarna att visualisera resultatet av kommandot. Annars föredrar du text, men använder antingen text eller grafik.

Rätt:skärmbild av rotationskommandot med böjd pil

I det här exemplet hjälper pilgrafiken användarna att visualisera resultatet av kommandot.

Rätt:skärmbild av adressfältet med ikoner och text

I det här exemplet kombineras standardsymboler med text för att underlätta förståelsen

Felaktig:skärmbild av knappen med x-ikonen och avbryt

I det här exemplet lägger avbryt-grafiken ingenting till texten.

  • Använd inte kommandoknappar för att ange tillstånd. Använd alternativknappar eller kryssrutor i stället. Kommandoknappar är bara till för att initiera åtgärder.

Dela upp knappar

  • Gör det mest sannolika kommandot till standardbeteendet. Om det finns fler än ett troligt kommando väljer du ett kommando som inte kräver ytterligare information.
  • Om det mest sannolika kommandot är det senaste användarvalet ändrar du knappetiketten till det senaste valet.
  • Visa standardkommandot med fet text på menyn. Om du gör det blir det enklare för användarna att hitta standardkommandot, särskilt när standardkommandot är dynamiskt eller om delningsknappen använder en bild i stället för en textetikett.

Standardvärden

  • Inkludera en standardkommandoknapp i varje dialogruta. Välj det säkraste (för att förhindra förlust av data eller systemåtkomst) och det säkraste kommandot som standard. Om säkerhet och säkerhet inte är faktorer väljer du det mest sannolika eller praktiska kommandot.
  • Gör inte en destruktiv åtgärd till standardkommandoknappen om det inte finns ett enkelt sätt att ångra kommandot.

diagram över knappdimensioner i bildpunkter och dlus-

Rekommenderad storlek och avstånd för kommandoknappar.

Etiketter

  • Märk varje kommandoknapp.

  • Om knappen bara har en grafisk etikett tilldelar du dess namnegenskap till en lämplig textetikett. Detta gör det möjligt för hjälpmedelsteknikprodukter som skärmläsare att ge användarna alternativ information om grafiken.

    skärmbild av upp-, ned- och kopieringsknappar

    Det här exemplet visar grafiska knappar. internt är dessa knappar märkta Föregående, Nästa och Kopiera.

  • För korta b bläddra-knappar (märkta "..." ska den interna etiketten vara Bläddra.

  • Tilldela en unik åtkomstnyckel. Riktlinjer finns i Tangentbord.

    undantag:

    • Tilldela inte åtkomstnycklar till OK- och Avbryt-knappar eftersom Retur är åtkomstnyckeln för standardknappen (som vanligtvis är OK-knappen) och Esc är åtkomstnyckeln för Avbryt. Det gör de andra åtkomstnycklarna enklare att tilldela.
    • Tilldela inte åtkomstnycklar till korta blydningsknappar (märkta "..."), eftersom de inte kan tilldelas unikt.
  • Föredrar specifika etiketter framför generiska etiketter. Helst bör användarna inte behöva läsa något annat för att förstå etiketten. Användare är mycket mer benägna att läsa kommandoknappsetiketter än statisk text.

    • Undantag: Byt inte namn på knappen Avbryt om innebörden av avbryt är entydig. Användarna ska inte behöva läsa alla knappar för att avgöra vilken knapp som avbryter en åtgärd. Byt dock namn på Avbryt om det är oklart vilken åtgärd som avbryts, till exempel när det finns flera väntande åtgärder.

    acceptabelt:

    Skärmbild som visar knapparna OK och Avbryt.

    I det här exemplet är OK och Avbryt godtagbara men ospecificerade etiketter.

    Bättre:

    skärmdump av bränn cd och avbryt knappar

    I det här exemplet är Burn CD mer specifik än OK.

    felaktig:

    skärmbild av bränn cd och bränn inte cd-knappar

    I det här exemplet ska Avbryt användas i stället för Bränn inte CD.

  • Starta etiketter med ett imperativt verb och beskriv tydligt den åtgärd som knappen utför. Använd inte avslutande skiljetecken.

    • Undantag: Följande standardetiketter är acceptabla utan verb: Avancerat, Bakåt, Information, Framåt, Mindre, Mer, Ny, Nästa, Nej, OK, Alternativ, Föregående, Egenskaper, Inställningar och Ja.
  • Även om du föredrar korta etiketter kan du använda tillräckligt med text för att förklara kommandot tillräckligt. Använd ett direkt objekt (ett substantiv efter verbet) när objektet inte framgår av kontexten. Helst bör användarna inte behöva läsa något annat för att förstå etiketten.

    acceptabelt:

    skärmbild av knappen med lägg till etikett

    I det här exemplet är en kort etikett acceptabel om dess betydelse i sitt sammanhang är uppenbar.

    Bättre: (om Lägg till inte är klart)

    skärmbild av knappen med lägg till objektetikett

    I det här exemplet underlättar det användarnas förståelse genom att lägga till ett substantiv i verbet.

    Bäst: (om Lägg till eller Lägg till objekt inte är tydliga)

    skärmbild av knappen med lägg till markerade objekt

    I det här exemplet är etiketten självförklarande.

  • Använd versalisering i meningsformat. Det är lämpligare för Windows-tonenWindows-tonen och användningen av korta fraser för kommandoknappar.

  • Använd inte nu i kommandoknappetiketter eftersom kommandots omedelbarhet kan tas för givet.

    • Undantag: När det behövs kan du använda nu för att skilja kommandon som startar en uppgift från kommandon som utför en uppgift omedelbart.

    skärmbild av knappen med nedladdningsetiketten

    I det här exemplet går du till ett fönster eller en sida där användarna kan ladda ned genom att klicka på kommandoknappen.

    skärmbild av knappen med nedladdning nu etikett

    I det här exemplet utför nedladdningen genom att klicka på kommandoknappen.

    Endast ett kommando i ett aktivitetsflöde ska märkas med nu. Till exempel bör ett Hämta nu kommando aldrig följas av ett annat Hämta nu kommando.

  • Använd inte senare i kommandoknappetiketter om det innebär en åtgärd som inte inträffar. Använd till exempel inte Installera senare (till skillnad från Installera nu) om inte kommandot installeras vid ett senare tillfälle. Använd i stället antingen Installera inte eller Avbryt.

    felaktig:

    skärmdump av omstart nu och starta om senare

    I det här exemplet innebär Omstart senare felaktigt att kommandot startas om automatiskt vid ett senare tillfälle.

  • Använd bara knappen Avancerat för alternativ som är relevanta för avancerade användare eller som kräver avancerad användarkunskap. Använd inte knappen Avancerat för funktioner som anses vara tekniskt avancerade. Till exempel är en skrivares häftningsfunktion inte ett avancerat alternativ, men dess färghanteringssystem är det.

    Felaktig: (om alternativen verkligen inte är avancerade)

    skärmbild av knappen med avancerad etikett

    I det här exemplet är Avancerat vilseledande.

    rätt:

    skärmbild av knappen med fler alternativetiketter

    I det här exemplet är etiketten mer specifik och korrekt.

  • För kommandoknappar som öppnar andra fönster väljer du en etikett som använder en del av eller hela det sekundära fönstrets rubrikfälttext. En kommandoknapp med etiketten Bläddra kan till exempel öppna en dialogruta med namnet Bläddra efter mapp. Att använda samma terminologi under hela uppgiften hjälper till att hålla användarna orienterade.

  • När du ställer en fråga använder du etiketter som matchar frågan. Använd inte OK/Avbryt för att svara på ja/nej-frågor.

    rätt:

    skärmbild av ja och inga knappar

    I det här exemplet svarar knapparna på frågan.

    felaktig:

    skärmdump av ok och avbryt knappar

    I det här exemplet svarar inte knapparna på frågan.

  • Avsluta etiketten med en ellips om kommandot kräver ytterligare information för att köra.

    • Undantag: Grafiska etiketter tar inte en ellips.

    Rätt: (om dialogrutan Utskriftsalternativ visas)

    skärmbild av utskriftsknappen med ellipser

    I det här exemplet visas dialogrutan Utskriftsalternativ när knappen har klickats och kräver mer information från användaren.

  • Använd inte en ellips när åtgärden har slutförts helt enkelt för att visa ett annat fönster. Följande kommandon tar aldrig en ellips: Om, Avancerat, Alternativ, Egenskaper, Hjälp.

    felaktig:

    skärmbild av alternativknappen med ellipser

    I det här exemplet visas dialogrutan Alternativ när knappen har klickats, men mer information från användaren krävs inte.

  • Vid tvetydighet (till exempel om kommandoetiketten saknar ett verb) bestämmer du baserat på den mest sannolika användaråtgärden. Om du bara visar fönstret är en vanlig åtgärd ska du inte använda en ellips.

    rätt:

    Fler färger...

    Versionsinformation

    I det första exemplet kommer användarna troligen att välja en färg, så att använda en ellips är korrekt. I det andra exemplet kommer användarna troligen att visa versionsinformationen, vilket gör ellipser onödiga.

  • För b bläddra-knappar använder du korta b bläddra-knappar (märkta "...") när det finns fler än två bingningsknappar i ett fönster. Använd alltid den korta versionen när du vill visa en bläddra-knapp i ett rutnät.

  • För riktningsknappar använder du en enda vinkelparentes och får den att peka i den riktning där åtgärden äger rum.

I följande tabell visas några vanliga kommandoknappsetiketter och deras användning.

Knappetikett Betydelse Åtkomstnyckel
Tillbaka
Gå till föregående sida i guider och aktivitetsflöden.
"B"
Bläddra...
Visa en dialogruta för att söka efter en fil eller ett objekt.
"B" eller "r"
alternativ
Visa de alternativ som är tillgängliga för användare för att anpassa ett program.
"O"
pausa
Pausa aktiviteten under pågående dialogrutor.
"P"
Anpassa
Anpassa en grundläggande upplevelse som är avgörande för användarens personliga identifiering med ett program.
"P"
Inställningar
Använd inte. Använd Alternativ i stället.
Inte tillämpligt.
Egenskaper
Visa attribut och inställningar för ett objekt.
"P" eller första "r"
Spara
Spara en grupp med inställningar eller spara en fil eller ett objekt med dess aktuella namn.
'S'
Spara som...
Spara en fil eller ett objekt med ett angivet namn.
Andra "a"
Inställningar
Använd inte. Använd Alternativ i stället.
Inte tillämpligt.
Felsöka
Använd inte. Använd en specifik hjälplänk i stället.
Inte tillämpligt.

Riktlinjer för incheckningsknappetiketter (OK, Avbryt, Ja/Nej, Stäng, Stoppa, Tillämpa, Nästa, Slutför, Klar) finns i användargränssnittstext.

Dokumentation

När du refererar till kommandoknappar:

  • Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket för åtkomstnyckeln eller ellipsen. Ta inte med ordknappen.
  • Om du vill beskriva användarinteraktion använder du klicka.
  • Formatera etiketten med fet text när det är möjligt. Annars placerar du etiketten endast inom citattecken om det behövs för att förhindra förvirring.

Exempel: Klicka på Skriv ut för att skriva ut dokumentet.