Allan Day
aday@gnome.org
Calum Benson
Adam Elman
Seth Nickell
Colin Robertson
Att arrangera element inom ett användargränssnitt.
Anders Jonsson
anders.jonsson@norsjovallen.se 2015, 2018
Sebastian Rasmussen
sebras@gmail.com 2017, 2018

# Visuell layout

Den visuella layouten av komponenter, information och innehåll påverkar hur lätt det är att förstå ditt program. Som en del av detta är det viktigt att inse att den visuella designen har en stor påverkan på hur mycket arbete som krävs för att arbeta med programmet — dålig layout resulterar i att användare måste anstränga sig mer medan bra layout kräver mindre ansträngning.

En bra visuell layout gör förstås även program vackrare och mer behagliga att se på.

Om du följer dessa riktlinjer kommer de att hjälpa dig att producera ett program som är vackert, lätt att förstå och effektivt att använda.

# Allmänna riktlinjer

En justeringspunkt är en fiktiv vertikal eller horisontell linje genom ditt fönster som rör vid kanten på en eller flera etiketter eller komponenter i fönstret. Minimera detta antal — ju färre sådana det finns, desto renare och enklare kommer din layout att uppfattas och desto lättare kommer den att vara för personer att förstå.

Justera innehåll och komponenter noggrant i din layout. Ögat är väldigt känsligt för justerade och ojusterade objekt. Om visuella element inte bildar en rät linje kommer det att vara svårare för någon att ögna igenom dem. Element som inte följer den räta linjen kommer att uppfattas som distraherande.

Var konsekvent. Använd samma mellanrum överallt.

Organisera relaterade komponenter och information i grupper, och använd mellanrum för att särskilja dem. Detta gör ett gränssnitt väsentligt enklare att läsa och förstå.

Som en tumregel, lämna mellanrum mellan element i steg om 6 bildpunkter, med större avstånd allt eftersom kopplingen mellan relaterade element blir mindre viktig.

Mellan etiketter och associerade komponenter, lämna 12 horisontella bildpunkter.

För vertikalt mellanrum mellan grupper av komponenter är 18 bildpunkter lämpligt.

En generell marginal på 18 bildpunkter rekommenderas mellan innehållet i en dialogruta och fönsterkanterna.

Indentera element 12 bildpunkter för att betona hierarki och relation.

Undvik att använda ramar med synliga kanter för att separera grupper av komponenter — använd mellanrum och rubriker istället.

Felaktigt mellanrum och justering:

Korrekt mellanrum och justering:

Korrekt mellanrum, med enheter (pixlar):

# Etikettsjustering

Om möjligt, högerjustera etiketter (se diagrammet nedan). Detta kommer att undvika stora gap mellan etiketter och komponenterna de associeras med. Denna typ av högerjustering är inte möjlig om du har indenterade komponenter: i detta fallet används vänsterjustering istället.

# Visuell hierarki

Organisera visuella element från toppen till botten och från vänster till höger. Detta är riktningen som personer från västerländska lokaler har en tendens till att läsa ett gränssnitt, så att objekten längst upp till vänster kommer att anträffas först. Denna ordning ger gränssnitt en hierarki: de komponenter som ses först uppfattas som om de har högre prioritet än de som kommer senare. Av denna anledning bör du placera dominerande komponenter längst upp och till vänster om de komponenter och det innehåll som de påverkar. Rubrikrader är ett nyckelmönster för design i detta avseende.