Indledning til Proportion

Proportion har en lang tradition for at definere skønhed i kunst og design. De gamle egyptere brugte et gittesystem til deres vægkunst, hvilket hjalp med at etablere skala, proportioner og illustrerer hierarki. De gamle grækere var fascineret af proportioner i den menneskelige krop. Det gyldne snit blev brugt til at skabe de “perfekte” proportioner til Gutenberg-bibelen. Der er ingen mangel på eksempler på, at proportioner er blevet nøje overvejet.

I dag lever proportioner videre som et stærkt designprincip, der er med til at skabe konsistens, hierarki, rytme og generel skønhed i design. I denne lektion vil vi diskutere, hvordan man kan bruge proportioner i UI-design.

Størrelse vs Skala vs Proportion

For at kunne drage fordel af proportioner i UI-design skal vi først forstå forskellene mellem størrelse, skala og proportioner. Alle tre begreber hænger sammen, men der er nogle klare sondringer at tage hensyn til.

Størrelse er de faktiske dimensioner af et element, ofte målt i px, pt, em, rem osv.

For eksempel er størrelsen på dette logo 75px højt og 275px bredt.

Skalering er de relative dimensioner af et element, ofte målt i procenter eller multipla.

Et element kan f.eks. skaleres, så det bliver større eller mindre end dets oprindelige størrelse.

Proportion er det harmoniske forhold mellem to eller flere elementer i samme skala.

For eksempel, hvis et element øges i størrelse, bør de resterende elementer også øges i samme takt for at forblive proportionale.

Proportion i UI Design

Sammenligning af et proportionalt og et uproportionalt logo er én ting, men du spekulerer sikkert på “Hvordan virker det i UI Design?”. Når alt kommer til alt, med forskellige skærmstørrelser og enheder, er det ikke muligt at holde en proportioneret UI, ikke sandt? Svaret på det spørgsmål er “Ja og nej.”

UI’er indeholder typisk en kombination af statiske og flydende elementer.

  • Statiske elementer forbliver i samme størrelse, uanset hvor stor eller lille skærmen er.
  • Flydende elementer skaleres til en bestemt procentdel af dens container.

Par definition ville en sammenligning af statiske elementer med flydende elementer aldrig resultere i et proportioneret design, fordi de ikke skalerer med samme hastighed. Brugerne skifter dog typisk ikke mellem enheder, mens de oplever din brugergrænseflade.

Med dette in mente er det muligt at bruge proportioner i UI-design. Men det er måske bare ikke på den måde, du ville forvente.

Måleenheder i UI-design

Du har sikkert hørt udtrykket “pixel”, der oftest bruges som måleenhed for digitale produkter. Dette var generelt acceptabelt indtil 2010, da Apple introducerede Retina-skærmen.

Retina-skærmen ændrede den måde, vi tænkte på “størrelse” på, ved at pakke dobbelt så mange pixels pr. kvadrattomme af skærmen. Selv om størrelsen af et element på en Retina-skærm og en ikke-Retina-skærm ser ud til at være den samme, er det samlede antal pixels, der udgør dette element, meget forskelligt. For eksempel vil en knap, der er 48px høj på en almindelig skærm, nu være 96px høj på en Retina-skærm på grund af pixeltætheden.

Siden da er der blevet mange forskellige HPD-skærme (High Pixel Density) tilgængelige på tværs af mange forskellige mærker og enheder. Heldigvis er HPD-skærme typisk defineret ved, hvor mange flere pixels der passer pr. kvadrattomme end standardskærmen med 1X pixeltæthed.

De fleste skærme kan f.eks. beskrives som havende en 1X, 2X eller 3X pixeltæthed.

Begrebet “pixel” er stadig almindeligt accepteret til at beskrive størrelsen af et element. For at undgå forvirring foretrækker mange designere dog at bruge udtrykket “point” eller “pt”, som beskriver størrelsen, uanset skærmens pixeltæthed.

I resten af denne lektion vil vi bruge udtrykkene “pt” og “px” i flæng som måleenhed til at beskrive forholdet mellem elementerne i vores design.

Det 8pt gitter system

Når vi arbejder med design software, såsom Illustrator, Photoshop, Sketch, XD, Figma osv. er det meget almindeligt for designere at bruge gitre eller kolonner til at hjælpe med deres designarbejde. Mange af de designprincipper, der diskuteres i dette kursus, kan opnås ved hjælp af gitre eller kolonner, så det er ikke overraskende, at de er et populært værktøj i designerens værktøjskasse.

Der er dog én bestemt strategi, der fungerer ekstraordinært godt for proportioner. Denne strategi er kendt som 8pt Grid System.

Det 8pt Grid System blev først introduceret af Googles Material Design-specifikation. Heldigvis er det ret nemt at forstå. I bund og grund ønsker du at bruge et gitter, der er sammensat af 8 x 8 pt firkanter. Når du designer oven på dette gitter, skal du sørge for, at alle elementer klikker sig fast på gitteret.

Det resulterer i elementer med dimensioner, der altid er delelige med 8. Ved at designe på denne måde er det nemt at holde elementerne proportionelle, samtidig med at der skabes en følelse af vertikal rytme i hele designet.

Hvorfor 8 punkter?

Det 8-punkts system er det mest udbredte af to primære årsager:

  • De mest almindelige skærmdimensioner er delbare med 8, hvilket gør dine designs meget skarpe og klare på de fleste enheder (ingen splittede pixels).
  • Den anbefalede basisskriftstørrelse på nettet er 16px. Dette giver udviklere mulighed for at skalere elementer på en webside i REM-enheder, samtidig med at de forbliver tro mod gitorsystemet.

Overordnet set er der flere fordele ved at bruge 8 point i modsætning til ethvert andet tal til gitteret. Du kan dog bruge et tal som 10pt eller 12pt, hvis det passer bedre til dig.

Hvorfor ikke 4 point?

Google Material Design-specifikationen anbefaler dog at bruge 4pt til “Mindre komponenter, såsom ikonografi og typografi.” Størstedelen af UI-elementer kan dog stadig håndteres af 8pt-systemet, så det er mere populært at starte med.

Det gyldne snit

Det 8pt-gridsystem har sine klare fordele i UI-design, men hvis du laver en hurtig Google-søgning efter “Proportion i UI-design”, vil du blive mødt med en forside fuld af resultater vedrørende det gyldne snit.

Det gyldne snit er 1:1,618 og menes at være skæringspunktet mellem matematik og æstetisk skønhed. Mange designere ignorerer gitter-systemer helt og holdent til fordel for at skabe proportioner med det gyldne snit i stedet.

Der er masser af eksempler på, hvordan det gyldne snit er blevet brugt til alt fra Gutenberg-bibelen til moderne logodesign og forekomster i naturen. Der er dog andre, der mener, at skønheden i det gyldne snit blot er en myte.

Uanset er der ingen tvivl om, at mange er betaget af det gyldne snit, så det er bestemt værd at nævne i denne lektion.

Anvendelse af det gyldne snit i UI-design

I lektion 4 i dette kursus diskuterede vi, at et design ikke bør have mere end 3-4 niveauer af hierarki i en bestemt sektion af UI’en. Med dette i tankerne kan du anvende det gyldne snit i dit design ved at følge disse enkle trin:

Festlæg højden af et rektangel, og multiplicer dette tal med 1,618 for at finde bredden. Dette skaber et “gyldent rektangel”.

I eksemplet ovenfor er vores starttal 350pt, men du kan bruge det tal, du ønsker.

Del dit gyldne rektangel op i perfekte firkanter. Hver perfekt firkant vil resultere i et nyt, mindre gyldent rektangel.

Fortsæt med at opdele det gyldne rektangel, indtil du har 3-4 forskellige perfekte firkanter af forskellig størrelse.

Brug størrelsen på hver firkant som en “pladsholder” til at bryde dit layout op og kommunikere hierarki i dit design.

Overordnet set er resultatet et æstetisk og proportioneret design. Tag et kig på dette eksempel fra Prototypr.io.

Start med begrænsninger

Nu har vi dækket nogle metoder til at etablere proportioner i UI-design, så lad os diskutere nogle gode udgangspunkter. Ved at starte med begrænsninger først, er det nemmere at bygge dit UI op omkring disse begrænsninger.

Mobile First Design

Frasen “Mobile First” blev opfundet af Luke Wroblewski i hans bog af samme titel. Udtrykket blev populært blandt designere som en måde at bekæmpe trangen til at proppe flere ting ind i en brugergrænseflade, blot fordi der var god plads til det.

Gennem at fokusere på mobilt design først skal designere arbejde uden om de begrænsninger, der er forbundet med mobile enheder, og fokusere på det, der virkelig betyder noget. Som følge heraf forbliver brugerens oplevelse ensartet mellem enhederne, da brugergrænsefladens hovedformål fortsat er i centrum for opmærksomheden.

Font Size

Som tidligere nævnt er standardskriftstørrelsen for brødtekst på nettet 16px for de fleste større browsere. Alt, der er mindre end dette, kan udløse en uventet zoomadfærd på Apple-mobilenheder. Derfor anbefales det generelt at lade 16px være din basisskriftstørrelse og angive dine resterende skriftstørrelser (overskrifter, lille tekst, billedtekster, etiketter osv.) i overensstemmelse hermed.

Vi kan definere disse skriftstørrelser med proportioner i tankerne ved at følge Google Material’s Design spec og vælge størrelser med intervaller på 4pt, såsom Bootstraps stilguide for skriftstørrelse.

Bemærk: Det anbefales ikke at øge skriftstørrelsen med det gyldne snit, da forskellene mellem de enkelte skriftstørrelser ville blive alt for store. Hvis du f.eks. starter med en basisskriftstørrelse på 16 og multiplicerer hvert overskriftsniveau med 1,618, ville det resultere i en H1-overskrift på 177,4 pts, hvilket ville være meget vanskeligt for læsbarheden.

Knapstørrelse

En anden begrænsende faktor, som du skal overveje, er præcisionen af den indtastningsmetode, der anvendes i dit design. I dette særlige tilfælde henviser vi til fingre, tommelfingre, markører og styluspenne.

Fingre og tommelfingre er meget bredere og mindre præcise end markører eller styluspenne. Med dette in mente er det vigtigt at sikre, at størrelserne på dine knapper, indtastninger, ikoner eller andre berøringspunkter er valgt med omhu for at tage højde for disse begrænsninger.

Google’sMaterial Design anbefaler, at berøringspunkter på mobiler ikke er mindre end 48pt højeog 48pt brede med mindst 8pt mellem dem.

Indholdsbredde

Indhold er flydende, hvilket betyder, at det fylder så meget vandret og lodret plads, som det er i stand til. På trods af denne egenskab er det god praksis at definere en minimums- og maksimumsbredde for dit indhold.

En minimumsbredde for indhold kan bestemmes af den minimumsbredde på skærmen, som dit design vil understøtte. Den mindste skærmopløsning, som de fleste designere understøtter, er 320px (det er ved 1X) bred. Du bør dog vælge din minimumsbredde baseret på reelle brugerdata, hvis du er i stand til at få dem. Google Analytics er et godt sted at lede efter denne type data.

Selv om indholdsbredden kan fylde så meget på skærmen, som den er givet, anbefales det generelt ikke at lade dit indhold spænde over mere end 52 tegn pr. linje. Dette tyder på, at den maksimale bredde af dit indhold kan bestemmes ved at bruge den faktiske brødtekst i dens normale skriftstørrelse og finde en behagelig indholdsbredde, der passer til dette område.

Konklusion

Sammenfattende er proportioner et nyttigt designprincip. På trods af at have en kombination af statiske og flydende elementer, kan der stadig opnås en proportioneret brugergrænseflade ved at bruge et 8pt gitternetssystem, det gyldne snit eller en anden metode. Når du begynder at definere dimensionerne for elementerne, er det almindelig praksis at starte med dine begrænsninger, såsom enhed, skriftstørrelse, knapstørrelse og indholdsbredde. Når dine grundstørrelser er defineret, er det meget nemmere at skalere elementerne i overensstemmelse hermed.

Næste lektion
Grundlag for design: White Space

Forrige lektion
Designprincipper:

Feedback

Hvordan kan denne lektion forbedres? Giv venligst din feedback nedenfor!