Listvyer
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 listvy kan användare visa och interagera med en samling dataobjekt med hjälp av antingen enstaka markering eller flera val.
En typisk listvy.
Listvyer har mer flexibilitet och funktioner än listrutor. Till skillnad från listrutor har de stöd för att ändra vyer, gruppering, flera kolumner med rubriker, sortera efter kolumner, ändra kolumnbredder och ordning, vara en dragkälla eller ett släppmål och kopiera data till och från Urklipp.
Är det här rätt kontroll?
En listvy är mer än bara en mer flexibel och funktionell listruta: dess extra funktioner resulterar i olika användning. I följande tabell visas jämförelsen.
Användning | Listrutor | Listvyer |
---|---|---|
Datatyp |
Både data- och programalternativ. |
Endast data. |
innehåll |
Endast etiketter. |
Etiketter och extra data, eventuellt i flera kolumner. |
Interaktion |
Används för att göra val. |
Kan användas för att göra val, men används ofta för att visa och interagera med data. Kan vara en dragkälla eller ett släppmål. |
Presentation |
Fast. |
Användare kan ändra vyer, gruppera, sortera efter kolumner och ändra kolumnbredd och ordning. |
Du kan avgöra om det här är rätt kontroll genom att tänka på följande frågor:
- Innehåller listan data i stället för programalternativ? Om inte kan du överväga att använda en listruta i stället.
- Behöver användarna ändra vyer, gruppera, sortera efter kolumner eller ändra kolumnbredd och ordning? Om inte använder du en listruta i stället.
- Måste kontrollen vara en dragkälla eller ett släppmål? I så fall använder du en listvy.
- Behöver listobjekten kopieras till eller klistras in från Urklipp? I så fall använder du en listvy.
Markera listvyer
- Används kontrollen för att välja noll eller fler objekt från en lista med data? Om du vill välja ett objekt använder du enkel markering i stället.
- Är flera val viktiga för uppgiften eller används ofta? I så fall använder du en kryssruta för att göra flera val uppenbara, särskilt om dina målanvändare inte är avancerade. Annars använder du en standardvy med flera markeringslistor om kryssrutorna skulle dra för stor uppmärksamhet åt flera markeringar eller leda till för mycket skärmtrassel.
- Är stabiliteten för flera markeringar viktig? I så fall använder du en kryssruta, listbyggare eller lägg till/ta bort lista eftersom du klickar på ändringar endast ett objekt i taget. Med en standardlista med flera val är det mycket enkelt att rensa alla val även av misstag.
Not
Ibland implementeras en kontroll som ser ut som en listvy med hjälp av en listruta och vice versa. I sådana fall tillämpar du riktlinjerna baserat på användningen, inte på implementeringen.
Användningsmönster
Alla vyer stöder enkel markering, där användare bara kan välja ett objekt i taget och flera val, där användare kan välja valfritt antal objekt, inklusive inget. Listvyer stöder utökat markeringsläge, där markeringen kan utökas genom att dra eller med Skift+klicka eller Ctrl+klicka för att välja grupper med sammanhängande eller icke-intilliggande värden. Till skillnad från listrutor stöder de inte flera markeringslägen, där om du klickar på valfritt objekt växlar dess markeringsstatus oavsett skift- och Ctrl-tangenterna.
Standardlistvy
Listvisningskontrollen stöder fem standardvyer:
Användning | Exempel |
---|---|
panel varje objekt visas som en medelstor ikon, med en etikett och valfri information till höger. |
![]() Panelvyn visar medelstora ikoner med etiketter och valfri information till höger. |
stor ikon varje objekt visas som en extra stor, stor eller medelstor ikon med en etikett under. |
![]() Vyn Stor ikon visar varje objekt som en stor ikon med en etikett under. |
Liten ikon varje objekt visas som en liten ikon med en etikett till höger. |
![]() Vyn Liten ikon visar varje objekt som en liten ikon med etiketten till höger. |
Lista varje objekt visas som en liten ikon med en etikett till höger. |
i listläge beställer den här vyn objekt i kolumner och använder en vågrät rullningslist. Ikonvyn beställer däremot objekt i rader och använder en lodrät rullningslist. ![]() Listläget visar varje objekt som en liten ikon med etiketten till höger. |
information varje objekt visas som en rad i tabellformat. kolumnen längst till vänster innehåller både objektets valfria ikon och etikett, och de efterföljande kolumnerna innehåller ytterligare information, till exempel objektegenskaper. |
Dessutom kan kolumner läggas till eller tas bort och ordnas om och ändras. raderna kan grupperas, sorterade efter kolumn. ![]() Informationsvyn visar varje objekt som en rad i tabellformat. |
Variationer i listvyn
Etikett | Värde |
---|---|
Kolumnväljare Listvyer har ibland så många kolumner att det inte är praktiskt att visa alla. I det här fallet är den bästa metoden att visa de mest användbara kolumnerna som standard och tillåta användare att lägga till eller ta bort kolumner efter behov. |
![]() När du högerklickar på kolumnrubriken visas en snabbmeny som gör att användarna kan lägga till eller ta bort kolumner. ![]() Om du klickar på Mer i snabbmenyn för kolumnrubriken visas dialogrutan Välj kolumner, som gör att användarna kan lägga till eller ta bort kolumner samt ordna om dem. |
Kryssruta listvy Tillåt användare att välja flera objekt. |
Vyer med flera markeringslistor har exakt samma utseende som listvyer med en enda markering, så det finns ingen visuell ledtråd om att de stöder flera val. En markeringslista kan användas för att tydligt ange att flera val är möjliga. Därför bör det här mönstret användas för uppgifter där flera val är viktiga eller ofta används.![]() I det här exemplet använder en liten ikon-vy kryssrutor eftersom flera markeringar är viktiga för uppgiften. |
Listvyer med grupper Organisera data i grupper. |
Även om informationsvyer ofta stöder sortering av data efter någon av kolumnerna, tillåter listvyer ytterligare användare att organisera objekten i grupper. Några fördelar med gruppering är:
![]() I det här exemplet visar Windows Välkomstcenter grupperade objekt i en listvy. |
Riktlinjer
Presentation
Sortera listobjekt i logisk ordning. Sortera namn i alfabetisk ordning, tal i numerisk ordning och datum i kronologisk ordning.
Om det är lämpligt kan användarna ändra sorteringsordningen. Användarsortering är viktigt om listan innehåller många objekt eller om det finns scenarier där objekt hittas mer effektivt med en annan sorteringsordning än standard.
Använd attributet Visa alltid markering så att användarna enkelt kan fastställa det markerade objektet, även om kontrollen inte har fokus.
Undvik att visa tomma listvyer. Om användarna skapar en lista initierar du listan med instruktioner eller exempelobjekt som användarna kan behöva.
I det här exemplet visar söklistevyn initialt instruktioner.
Om användarna kan ändra vyer, gruppera, sortera efter kolumner eller ändra kolumner och deras bredd och ordning, gör du så att inställningarna fortsätter att gälla nästa gång listvyn visas. Gör så att de bevaras per lista, per användare.
Interaktion
Använd enkelklicka för att välja listobjektet som användaren pekar på. Undantag: För kommandolänklistans mönster väljer enkelklicka objektet och stänger antingen fönstret eller navigerar till nästa sida.
Överväg att ange dubbelklicksbeteende. Dubbelklicka bör ha samma effekt som att välja ett objekt och utföra standardkommandot.
Gör dubbelklicksbeteendet redundant. Det bör alltid finnas en kommandoknapp eller ett snabbmenykommando som har samma effekt.
Om ett listobjekt kräver ytterligare förklaring ange förklaringen i eninfotip-. Använd fullständiga meningar och avslutande skiljetecken.
I det här exemplet används en infotip för att ge ytterligare information.
Ange snabbmenyer med relevanta kommandon. Sådana kommandon är Klipp ut, Kopiera, Klistra in, Ta bort eller Ta bort, Byt namn och Egenskaper.
Om användarna kan ändra sorteringsordningen och gruppering anger du snabbmenyerna Sortera efter och Gruppera efter. Det första klicket på ett kolumnnamn sorterar eller grupperar listan i stigande ordning för den kolumnen. Det andra klicket sorterar eller grupperar i fallande ordning. Använd föregående ordning (från en annan kolumn) som sekundärnyckel.
I det här exemplet ändrar snabbmenyn Sortera efter sorteringsordningen. Klicka på Namn en gång sorterar efter namn i stigande ordning. Klicka på Namn igen sorterar efter namn i fallande ordning.
Gör kolumnrubriken för listvyn tillgänglig med hjälp av tangentbordet.
- Utvecklare: Du kan göra det genom att ange fokus på kolumnrubrikkontrollen. Den här funktionen är ny för Windows Vista.
Inaktivera även eventuella associerade etiketter och kommandoknappar när du inaktiverar en listvy.
Undvik vågrät rullning. Listläget använder vågrät rullning. Det här läget är vanligtvis det mest kompakta, men vågrät rullning är vanligtvis svårare att använda än lodrät rullning. Överväg att använda vyn Liten ikon i stället om kompakthet inte är viktigt. Listläget är dock ett bra val när det finns många alfabetiskt sorterade objekt och tillräckligt med skärmutrymme för en bred kontroll.
acceptabelt:
I det här exemplet används listläget eftersom det finns många objekt och gott om tillgängligt skärmutrymme för en bred kontroll.
Listor med flera val
Överväg att visa antalet markerade objekt under listan, särskilt om användarna sannolikt kommer att välja flera objekt. Den här informationen ger inte bara användbar feedback, utan visar också tydligt att listvyn stöder flera val.
I det här exemplet visas antalet markerade objekt under listan.
I stället för antalet markerade objekt kan du också ge andra urvalsmått som kan vara mer meningsfulla, till exempel de resurser som krävs för valen.
I det här exemplet är diskutrymmet som krävs för att installera komponenterna mer meningsfullt än det antal komponenter som valts.
För kryssrutelistvyer, om det finns potentiellt många objekt och om det är troligt att alla markeras eller rensas, lägger du till Välj alla och Rensa alla kommandoknappar.
Använd kryssrutor för blandat tillstånd för att visa partiell markering av objekten i en container. Det blandade tillståndet används inte som ett tredje tillstånd för ett enskilt objekt.
Ändra vyer
Om användare kan ändra vyer:
Välj den mest praktiska vyn som standard. Alla ändringar som användare gör bör göras beständiga per lista, per användare.
Ändra vyn med en delad knapp, menyknapp eller listruta. När det är praktiskt använder du en delningsknapp i verktygsfältet och ändrar knappetiketten så att den återspeglar den aktuella vyn.
I det här exemplet används en delningsknapp i verktygsfältet för att ändra vyer.
Ange en snabbmeny för visa.
I det här exemplet används snabbmenyn Visa för att ändra vyer.
Informationsvyer
Överväg att använda panelvyn för att förbättra läsbarheten.
acceptabelt:
I det här exemplet finns det för mycket data och fönstret, listan och kolumnerna är för små, vilket gör listobjekten svåra att läsa.
Bättre:
I det här exemplet visar panelvyn data utan trunkering.
Välj standardkolumnbredder som är lämpliga för de längsta data. Listvyer trunkerar automatiskt långa data med ellipser, så kolumnbredderna är lämpliga om några ellipser visas som standard. Användarna kan ändra storlek på kolumner, men föredrar andra lösningar:
- Ändra kolumnbredden så att den passar dess data.
- Ändra kontrollbredden så att den passar dess kolumner plus eventuella sannolika rullningslister.
- Använd vid behov vågrät rullning.
- Ha trunkerade data endast för objekt med udda storlek eller som en sista utväg.
Om normalstora data måste trunkeras som standard gör du fönstret och listvyn större. Inkludera ytterligare 30 procent (upp till 200 procent för kortare text) för all text (men inte siffror) som ska lokaliseras.
felaktig:
I det här exemplet trunkeras de flesta data. De många ellipserna visar tydligt att kontroll- och kolumnbredderna är för små för data.
felaktig:
I det här exemplet trunkeras data utan anledning.
Välj en lämplig standardkolumnordning. I allmänhet beställer du kolumnerna enligt följande:
- Först objektets namn eller identifiera data.
- Därefter är andra data användbara för att skilja listobjekten åt.
- Därefter de mest användbara (helst kort eller fast längd) data.
- Därefter mindre användbara (helst kort eller fast längd) data.
- Senaste, långa, variabellängdsdata.
Långa, variabellängdsdata placeras i de sista kolumnerna för att minska behovet av vågrät rullning. Inom dessa kategorier placerar du relaterad information tillsammans i en logisk sekvens.
När det är lämpligt kan användarna lägga till och ta bort kolumner samt ändra ordningen. Visa de mest användbara kolumnerna som standard. Detta uppnås med attributet Dra från sidhuvud.
Välj en justering som är lämplig för data. Använd följande regler:
- Högerjustera tal, valutor och tider.
- Vänsterjusterad text, ID:n (även om de är numeriska) och datum.
För sorterbara kolumnrubriker det första klicket på en rubrik sorterar listan i stigande ordning för kolumnen, så sorteras det andra klicket i fallande ordning. Använd den tidigare sorteringsordningen (från en annan kolumn) som sekundär sorteringsnyckel.
I det här exemplet klickades kolumnen Namn först och sedan på kolumnen Typ. Därför är Typ i stigande ordning den primära sorteringsnyckeln och Namn i stigande ordning är den sekundära.
Använd attributet Fullständig radmarkering så att användarna enkelt kan fastställa de markerade objekten i alla kolumner.
Använd inte en sorterbar kolumnrubrik om inte data kan sorteras.
Använd inte en kolumnrubrik om det bara finns en kolumn och det inte finns något behov av omvänd sortering. Använd en etikett i stället för att identifiera data.
felaktig:
rätt:
I rätt exempel används en etikett i stället för en kolumnrubrik.
Rekommenderad storlek och avstånd
Rekommenderad storlek och avstånd för listvyer.
- Välj en listvyhöjd som visar ett heltal med objekt. Undvik att trunkera objekt lodrätt.
- Välj en listvystorlek som eliminerar onödig lodrät och vågrät rullning i alla vyer som stöds. Listvyer ska visa mellan 3 och 20 objekt. Överväg att göra en listvy något större om du gör det eliminerar en rullningslist. Listor med potentiellt många objekt bör visa minst fem objekt för att underlätta rullning genom att visa fler objekt i taget och göra rullningslisten enklare att placera.
- Om användarna har nytta av att göra listvyn större kan du ändra storlek på listvyn och dess överordnade fönster. På så sätt kan användarna justera listvisningsstorleken efter behov. Storleksbara listvyer bör dock visa inte mindre än tre objekt.
Etiketter
Kontrolletiketter
Alla listvyer behöver etiketter. Skriv etiketten som ett ord eller en fras, inte som en mening, som slutar med ett kolon med statisk text.
Tilldela en unik åtkomstnyckel för varje etikett. Riktlinjer finns i Tangentbord.
Använd versalisering i meningsformat.
Placera etiketten ovanför kontrollen och justera etiketten mot kontrollens vänstra kant.
För listvyer med flera val skriver du etiketten som tydligt anger att flera val är möjliga. Kryssrutelistvisningsetiketter kan vara mindre explicita.
rätt:
I det här exemplet anger etiketten tydligt att flera val är möjliga.
felaktig:
I det här exemplet innehåller etiketten ingen information om flera val.
acceptabelt:
I det här exemplet visar kryssrutorna tydligt att flera val är möjliga, så etiketten behöver inte vara explicit.
Du kan ange enheter (sekunder, anslutningar och så vidare) inom parenteser efter etiketten.
Rubriketiketter
- Håll rubriketiketterna korta (tre ord eller färre).
- Använd ett enda substantiv eller substantivfras utan avslutande skiljetecken.
- Använd versalisering i meningsformat.
- Justera rubriken på samma sätt som data.
Gruppetiketter
- Använd följande gruppetiketter för högnivåsamlingar:
- Namn: Använd förnamns- eller bokstavsintervall.
- Storlekar: Ospecificerad, 0 KB, 0–10 KB, 10–100 KB, 100 KB – 1 MB, 1–16 MB, 16–128 MB
- Datum: Idag, Igår, Förra veckan, Tidigare i år, och för länge sedan.
- I annat fall använder gruppetiketter den exakta texten för de data som grupperas, inklusive versaler och skiljetecken.
Datatext
- Använd versalisering i meningsformat.
Instruktionstext
- Om du behöver lägga till instruktionstext om en listvy lägger du till den ovanför etiketten. Använd fullständiga meningar med avslutande skiljetecken.
- Använd versalisering i meningsformat.
- Ytterligare information som är användbar men inte nödvändig bör hållas kort. Placera den här informationen antingen inom parenteser mellan etiketten och kolonet eller utan parenteser under kontrollen.
Dokumentation
När du refererar till listvyer:
- Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket eller kolonet för åtkomstnyckeln och inkludera ordlistan. Referera inte till en listruta som en listruta, listvy eller fält.
- För listdata använder du den exakta datatexten, inklusive dess versaler.
- Se listvyer som endast listvyer i programmering och annan teknisk dokumentation. Överallt annars använder listan.
- Om du vill beskriva användarinteraktion använder du välj för data och klickar på rubrikerna.
- Formatera etikett- och listalternativen med fet text när det är möjligt. Annars placerar du endast etiketten och alternativen inom citattecken om det behövs för att förhindra förvirring.
Exempel: I listan Program och tjänster väljer du Fil- och skrivardelning.
När du refererar till kryssrutor i en listvy:
- Använd den exakta etiketttexten, inklusive dess versaler, och inkludera kryssrutan ordet . Ta inte med understrecket för åtkomstnyckeln.
- Om du vill beskriva användarinteraktion använder du välj och avmarkera.
- 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: Markera kryssrutan Understrykning.