Introduktion till Proportion

Proportion har en lång historia av att definiera skönhet i konst och design. De gamla egyptierna använde ett rutnätssystem för sin väggkonst, vilket bidrog till att fastställa skala, proportioner och illustrera hierarki. De gamla grekerna var fascinerade av människokroppens proportioner. Det gyllene snittet användes för att skapa ”perfekta” proportioner för Gutenbergbibeln. Det råder ingen brist på exempel på att proportioner har beaktats noggrant.

I dag lever proportioner vidare som en kraftfull designprincip som hjälper till att skapa konsekvens, hierarki, rytm och övergripande skönhet i designen. I den här lektionen diskuterar vi hur man använder proportioner i UI-design.

Storlek vs Skala vs Proportion

För att kunna dra nytta av proportioner i UI-design måste vi först förstå skillnaderna mellan storlek, skala och proportion. Alla tre begreppen är relaterade, men det finns några tydliga skillnader att ta hänsyn till.

Storlek är de faktiska måtten på ett element, ofta mätt i px, pt, em, rem etc.

Till exempel är storleken på den här logotypen 75px hög och 275px bred.

Skalering är ett elements relativa dimensioner, ofta mätt i procent eller multiplar.

Till exempel kan ett element skalas så att det blir större eller mindre än sin ursprungliga storlek.

Proportion är det harmoniska förhållandet mellan två eller flera element i samma skala.

Till exempel, om ett element ökar i storlek bör de återstående elementen också öka i samma takt för att förbli proportionerliga.

Proportion i UI-design

Att jämföra en proportionerlig och en oproportionerlig logotyp är en sak, men du undrar antagligen ”Hur fungerar det här för UI-design?”. Med olika skärmstorlekar och enheter är det trots allt inte möjligt att hålla ett proportionerligt användargränssnitt, eller hur? Svaret på den frågan är ”Ja och nej.”

UI:n innehåller vanligtvis en kombination av statiska och flytande element.

  • Statiska element förblir lika stora, oavsett hur stor eller liten skärmen är.
  • Flödiga element skalas till en angiven procentsats av dess behållare.

En jämförelse mellan statiska element och flytande element skulle definitionsmässigt aldrig resultera i en proportionerlig utformning eftersom de inte skalas med samma hastighet. Användarna byter dock vanligtvis inte enhet när de upplever ditt användargränssnitt.

Med detta i åtanke är det möjligt att använda proportioner i användargränssnittsdesign. Men det kanske bara inte är på det sätt du förväntar dig.

Måtenheter i UI-design

Du har troligen hört termen ”pixel” användas oftast som måttenhet för digitala produkter. Detta var i allmänhet acceptabelt fram till 2010 när Apple introducerade Retina-skärmen.

Retina-skärmen förändrade vårt sätt att tänka på ”storlek” genom att den innehöll dubbelt så många pixlar per kvadratcentimeter av skärmen. Även om storleken på ett element mellan en Retina-skärm och en icke-Retina-skärm verkar vara densamma, är det totala antalet pixlar som ingår i elementet helt annorlunda. Till exempel skulle en knapp som är 48px hög på en vanlig skärm nu vara 96px hög på en Retina-skärm på grund av pixeltätheten.

Sedan dess har många olika HPD-skärmar (High Pixel Density) blivit tillgängliga för många olika märken och enheter. Lyckligtvis definieras HPD-skärmar vanligtvis av hur många fler pixlar som ryms per kvadrattum än standardskärmen med 1X pixeltäthet.

De flesta skärmar kan till exempel beskrivas som att de har en 1X, 2X eller 3X pixeltäthet.

Termen ”pixel” är fortfarande allmänt accepterad för att beskriva storleken på ett element. För att undvika förvirring föredrar dock många designers att använda termen ”point” eller ”pt”, som beskriver storleken, oavsett skärmens pixeltäthet.

För resten av den här lektionen kommer vi att använda termerna ”pt” och ”px” omväxlande som måttenhet för att beskriva förhållandet mellan elementen i vår design.

The 8pt Grid System

När man arbetar med designprogram som Illustrator, Photoshop, Sketch, XD, Figma etc. är det mycket vanligt att formgivare använder sig av rutnät eller kolumner för att hjälpa till med designarbetet. Många av de designprinciper som diskuteras i den här kursen kan uppnås med hjälp av rutnät eller kolumner, så det är ingen överraskning att de är ett populärt verktyg i designerns verktygslåda.

Det finns dock en särskild strategi, som fungerar exceptionellt bra för proportioner. Denna strategi är känd som 8pt Grid System.

8pt Grid System introducerades först i Googles Material Design-specifikation. Lyckligtvis är det ganska lätt att förstå. I huvudsak vill du använda ett rutnät som består av 8 x 8 pt rutor. När du designar på det här rutnätet vill du se till att alla element snäpper in i rutnätet.

Detta resulterar i element med dimensioner som alltid är delbara med 8. Genom att designa på detta sätt är det lätt att hålla elementen proportionerliga, samtidigt som man skapar en känsla av vertikal rytm i hela designen.

Varför 8 punkter?

8pt-systemet är det mest använda av två huvudsakliga skäl:

  • De vanligaste skärmdimensionerna är delbara med 8, vilket gör att din design blir mycket skarp och tydlig på de flesta enheter (inga delade pixlar).
  • Den rekommenderade basstorleken för teckensnitt på webben är 16px. Detta gör det möjligt för utvecklare att skala element på en webbsida i REM-enheter samtidigt som de är trogna mot rutnätssystemet.

Totalt sett finns det fler fördelar med att använda 8 punkter i motsats till något annat nummer för rutnätet. Du kan dock använda ett antal som 10pt eller 12pt om det passar dig bättre.

Varför inte 4 punkter?

Google Material Design-specifikationen rekommenderar dock att man använder 4pt för ”mindre komponenter, till exempel ikonografi och typografi”. Majoriteten av UI-element kan dock fortfarande hanteras av 8pt-systemet, så det är mer populärt att börja med.

Det gyllene snittet

8pt-gridsystemet har sina tydliga fördelar i UI-design, men om du gör en snabb Google-sökning på ”Proportion i UI-design” kommer du att mötas av en förstasida full av resultat som handlar om det gyllene snittet.

Det gyllene snittet är 1:1,618 och anses vara skärningspunkten mellan matematik och estetisk skönhet. Många designers ignorerar rutnätssystem helt och hållet till förmån för att istället skapa proportioner med det gyllene snittet.

Det finns gott om exempel på hur det gyllene snittet har använts för allt från Gutenbergbibeln till modern logotypdesign och förekomster i naturen. Det finns dock andra som anser att det gyllene snittets skönhet helt enkelt är en myt.

Oavsett detta går det inte att förneka att många är förtjusta i det gyllene snittet, så det är verkligen värt att nämna i den här lektionen.

Användning av det gyllene snittet i UI-design

I lektion 4 i den här kursen diskuterade vi att en design inte bör ha mer än 3-4 nivåer av hierarki i en viss sektion av användargränssnittet. Med detta i åtanke kan du tillämpa det gyllene snittet i din design genom att följa de här enkla stegen:

Detektera höjden på en rektangel och multiplicera den siffran med 1,618 för att hitta bredden. Detta skapar en ”gyllene rektangel”.

I exemplet ovan är vår startsiffra 350pt, men du kan använda vilken siffra som helst.

Dela upp din gyllene rektangel i perfekta kvadrater. Varje perfekt kvadrat kommer att resultera i en ny, mindre gyllene rektangel.

Fortsätt att dela upp den gyllene rektangeln tills du har 3-4 olika perfekta kvadrater i olika storlekar.

Använd storleken på varje kvadrat som en ”platshållare” för att bryta upp din layout och kommunicera hierarki i din design.

Sammantaget blir resultatet en estetisk och proportionerlig design. Ta en titt på det här exemplet från Prototypr.io.

Start med begränsningar

Nu när vi har behandlat några metoder för att fastställa proportioner i UI-design, låt oss diskutera några bra utgångspunkter. Genom att börja med begränsningar först är det lättare att bygga ditt UI runt dessa begränsningar.

Mobile First Design

Frasen ”Mobile First” myntades av Luke Wroblewski i hans bok med samma titel. Uttrycket blev populärt bland designers som ett sätt att motverka trånget att klämma in mer saker i ett användargränssnitt bara för att det finns gott om utrymme för det.

Om att fokusera på mobil design först måste designers arbeta runt begränsningarna för mobila enheter och fokusera på det som verkligen är viktigt. Som ett resultat av detta förblir användarens upplevelse konsekvent mellan olika enheter, eftersom användargränssnittets huvudsyfte förblir i centrum för uppmärksamheten.

Typsnittsstorlek

Som tidigare nämnts är standardtypsnittsstorleken för brödtext på webben 16px för de flesta större webbläsare. Allt som är mindre än detta kan utlösa ett oväntat zoombeteende på Apples mobila enheter. Därför rekommenderas det i allmänhet att låta 16px vara grundstorlek för teckensnittet och ange övriga teckensnittsstorlekar (rubriker, liten text, bildtexter, etiketter etc.) i enlighet med detta.

Vi kan definiera dessa teckensnittsstorlekar med proportioner i åtanke genom att följa Google Material’s Design spec och välja storlekar i steg om 4pt, t.ex. Bootstrap’s stilguide för teckensnittsstorlek.

Notera: Att öka teckensnittsstorleken med det gyllene snittet rekommenderas inte eftersom skillnaderna mellan varje teckensnittsstorlek skulle bli alldeles för stora. Om du till exempel börjar med en grundtypsstorlek på 16 och multiplicerar varje rubriknivå med 1,618 skulle det resultera i en H1-rubrik på 177,4 pts, vilket skulle vara mycket svårt att läsa.

Knappstorlek

En annan begränsande faktor som du bör ta hänsyn till är precisionen hos den inmatningsmetod som används i din design. I det här fallet handlar det om fingrar, tummar, markörer och styluspennor.

Fingrar och tummar är mycket bredare och mindre precisa än markörer och styluspennor. Med detta i åtanke är det viktigt att se till att storleken på dina knappar, inmatningar, ikoner eller andra beröringspunkter väljs noggrant för att ta hänsyn till dessa begränsningar.

Google’sMaterial Design rekommenderar att beröringspunkter på mobiler inte är mindre än 48pt högaoch 48pt breda med minst 8pt mellan dem.

Innehållsbredd

Innehållet är flytande, vilket innebär att det fyller upp så mycket horisontellt och vertikalt utrymme som det kan. Trots denna egenskap är det bra att definiera en minsta och största bredd för ditt innehåll.

En minsta innehållsbredd kan bestämmas av den minsta skärmbredd som din design kommer att stödja. Den minsta skärmupplösningen som de flesta formgivare stöder är 320px (det är vid 1X) bredd. Du bör dock välja din minsta bredd utifrån verkliga användardata om du har möjlighet att få fram dem. Google Analytics är ett bra ställe att leta efter den här typen av data.

Men även om innehållsbredden kan fylla upp så mycket skärm som den ges är det generellt sett inte rekommenderat att låta ditt innehåll sträcka sig över mer än 52 tecken per rad. Detta tyder på att den maximala bredden på ditt innehåll kan bestämmas genom att använda verklig brödtext i normal teckenstorlek och hitta en bekväm innehållsbredd som passar detta intervall.

Slutsats

Slutsats: Proportioner är en användbar designprincip. Trots att man har en kombination av statiska och flytande element kan man fortfarande uppnå ett proportionerligt användargränssnitt genom att använda ett 8pt-gridsystem, det gyllene snittet eller en annan metod. När du börjar definiera dimensionerna för elementen är det vanligt att börja med dina begränsningar, till exempel enhet, teckensnittsstorlek, knappstorlek och innehållsbredd. När du har definierat dina basstorlekar är det mycket lättare att skala elementen i enlighet med detta.

Nästa lektion
Designprinciper: White Space

Förre lektion
Designprinciper: Vitrymd

Förre lektion
Designprinciper: Vitrymd:

Feedback

Hur kan den här lektionen förbättras? Lämna din feedback nedan!