Dela via


Snurra kontroller

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 en rotationskontroll kan användarna klicka på pilknapparna för att stegvis ändra värdet i den associerade numeriska textrutan. Termen spin box refererar till kombinationen av en textruta och dess tillhörande spinnkontroll.

skärmbild av spinnkontroll och textruta

En typisk spinnlåda.

Användarna föredrar ofta spinnkontroller eftersom de kan göra ändringar utan att flytta händerna från musen. När spinnkontrollen paras ihop med en textruta kan användarna skriva eller klistra in indata direkt i textrutan, så det är valfritt att använda spinnkontrollen.

Även om spinnkontroller används för numeriska indata behöver indata inte vara ett rent heltal. Indata kan vara decimaltal och kan ha negativa tecken, avgränsare (till exempel kolon eller bindestreck) och enhetsmodifierare.

Not

Riktlinjer som rör textrutor och layout visas i separata artiklar.

 

Är det här rätt kontroll?

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

  • Används kontrollen för numeriska indata? Om inte använder du en annan kontroll, till exempel en listruta eller skjutreglaget, för att välja från en fast uppsättning värden. Använd rullningslister för rullning.

  • Ser användarna värdet som en relativ kvantitet, inte ett numeriskt värde? I så fall använder du ett skjutreglage i stället. Använd endast spinnrutor för exakta, kända numeriska värden. Användarna tänker till exempel på att ställa in sin ljudvolym på låg eller medelhög – inte på att ange värdet till 2 eller 5.

  • Är kontrollen kopplad till en textruta? Om inte, använd inte. Spin-kontroller bör inte användas ensamt eller med andra typer av kontroller förutom en textruta.

    felaktig:

    skärmdump av spinnkontroll, grafik, ingen textruta

    I det här exemplet används en rotationskontroll för att styra en dynamisk grafik.

  • Är sammanhängande värdeintervall giltiga? Annars använder du en listruta med giltiga värden i stället.

    skärmbild av listrutan

    I det här exemplet är inte alla diskenhetsnummer giltiga, så en listruta är ett bättre alternativ.

  • Är det praktiskt att använda spinnkontrollen? Det är praktiskt att använda en spinnkontroll för:

    • Ange ett litet tal, vanligtvis under 100.
    • Göra små ändringar i ett befintligt eller standardvärde.

    Även om spinnkontroller kan användas för numeriska indata är de ineffektiva i andra situationer än dessa.

  • Är spinnkontrollen användbar? Används kontrollen i en kontext där användarna sannolikt använder musen? Om inte bör du överväga en rotationskontroll som är valfri.

  • Är listrutorna för syskonkontroller? Om det finns andra listrutor bör du överväga att använda en listruta för konsekvens.

    skärmbild av dialogrutan med listrutor

    I det här exemplet kan en rotationsruta användas, men en listruta används för konsekvens.

  • Är touch- eller pennanvändare ett primärt mål? I så fall bör du överväga att använda en listruta i stället. Pilknapparna i en rotationskontroll är för små för att kunna användas effektivt med pekpenna eller pennan.

Om det är möjligt med ett skjutreglage eller en spinnbox använder du en spin box om:

  • Skärmutrymmet är trångt.
  • En användare föredrar troligen att använda tangentbordet.

Använd ett skjutreglage om:

  • Användarna kommer att dra nytta av omedelbar feedback.

Riktlinjer

Allmänt

  • Använd spinnkontroller när de är praktiska och användbara. Se Är det här rätt kontroll?

    • Undantag: Om du vill vara konsekvent med andra textrutor i samma användargränssnitt använder du spinnkontroller även om de inte alltid är praktiska.

    rätt:

    skärmdump av spinnkontroller för månad, dag, år

    I det här exemplet används en spinnkontroll med årskontrollen för konsekvens, även om det inte alltid är praktiskt.

    felaktig:

    skärmbild av ip-adressspinnkontroll

    I det här exemplet är spinnkontrollen oanvändbar.

  • Gör alltid en rotationskontroll till "kompis" i textrutan. När du gör det placeras rotationskontrollen i textrutan.

    rätt:

    skärmbild av spinnkontroll placerad i textrutan

    felaktig:

    skärmbild av spinnkontroll placerad utanför textrutan

    I rätt exempel placeras spinnkontrollen i den associerade textrutan.

  • Inaktivera en rotationskontroll när dess associerade textruta är inaktiverad. Rotationskontrollen är en kompletterande indatametod – aldrig den enda indatametoden.

Värden

  • Definiera den översta knappen för att öka värdet med en enhet och den nedre knappen för att minska med en enhet. Vanligtvis är enheten en, men den bör vara den minsta gemensamma värdeändringen. Helst bör rotationskontrollen täcka alla giltiga värden, och det bör vara bekvämare än att skriva i texten.

    skärmbild av

    Om du klickar på en rotationskontroll i det här exemplet ändras värdena med .1, vilket är den minsta vanliga värdeändringen. Att använda en mindre enhet skulle täcka intervallet med giltiga värden, men göra spinnkontrollerna oanvändbara.

  • Använd rotationskontrollen för att begränsa indata till giltiga värden. Om du använder en rotationskontroll får det aldrig resultera i ett felaktigt värde.

  • Starta om intervallet i slutet av ett intervall med giltiga värden. Spin control-metaforen är att användaren snurrar ett värdehjul, därav detta hjulliknande beteende.

    • Undantag: Starta inte om intervallet om det resulterande värdet säkert är felaktigt.

      skärmdump av spin-kontrollen

      I det här exemplet startar du inte om intervallet genom att klicka på nedåtpilen (genom att gå till det maximala värdet) eftersom det värdet säkert är felaktigt.

  • Använd text i stället för särskilda numeriska värden. Tillåt användare att snurra till dessa specialvärden i stället för att behöva känna till dem och skriva in dem.

    skärmdump av

    I det här exemplet är Aldrig ett speciellt värde, men användarna kan snurra till det.

  • Om värdet har avgränsare bör den associerade textrutan ha flera indatafokuspunkter. Det gör att de numeriska segmenten kan manipuleras individuellt.

    skärmbild av tidsspinnkontroll, valda minuter

    I det här exemplet påverkar spinnkontrollen värdena för timmar, minuter, sekunder och A.M./P.M.– beroende på vilket som har fokus.

  • Om värdet har enheter använder du även rotationskontrollen för att ändra dessa enheter.

    skärmdump av tidsspinnkontroll,

    I det här exemplet kan rotationskontrollen användas för att ändra enheter.

Etiketter

  • Använd textrutans etikettering riktlinjer för att märka den associerade textrutan. Spinnkontroller märks aldrig direkt.

Dokumentation

När du refererar till spinnkontroller:

  • Se inte spin-kontroller i användardokumentationen. Referera i stället till etiketten för den associerade textrutan.
  • Se endast spin-kontroller och spinnrutor i programmering och annan teknisk dokumentation.

Exempel: I rutan Datum skriver eller väljer du den del av datumet som du vill ändra.

ordlista