Tietoa suhteellisuudesta

Suhteellisuudella on pitkä historia kauneuden määrittelyssä taiteessa ja muotoilussa. Muinaiset egyptiläiset käyttivät seinätaiteessaan ruudukkojärjestelmää, joka auttoi luomaan mittakaavan, mittasuhteet ja havainnollistamaan hierarkiaa. Muinaisia kreikkalaisia kiehtoivat ihmiskehon mittasuhteet. Kultaisen leikkauksen avulla luotiin ”täydelliset” mittasuhteet Gutenbergin Raamattua varten. Esimerkkejä siitä, että mittasuhteet on otettu tarkkaan huomioon, riittää.

Tänä päivänä mittasuhteet elävät voimakkaana suunnitteluperiaatteena, joka auttaa muodostamaan johdonmukaisuutta, hierarkiaa, rytmiä ja yleistä kauneutta suunnittelussa. Tällä oppitunnilla keskustelemme siitä, miten suhteellisuutta käytetään käyttöliittymäsuunnittelussa.

Koko vs. mittakaava vs. suhteellisuus

Voidaksemme hyödyntää suhteellisuutta käyttöliittymäsuunnittelussa, meidän on ensin ymmärrettävä koon, mittakaavan ja suhteellisuuden väliset erot. Kaikki kolme termiä liittyvät toisiinsa, mutta on olemassa joitakin selkeitä eroja, jotka on syytä ottaa huomioon.

Koko on elementin todelliset mitat, jotka usein mitataan px, pt, em, rem jne. muodossa.

Esimerkiksi tämän logon koko on 75 px korkea ja 275 px leveä.

Mittakaava on elementin suhteelliset mitat, jotka usein mitataan prosentteina tai kertoimina.

Elementti voidaan esimerkiksi skaalata suuremmaksi tai pienemmäksi kuin sen alkuperäinen koko.

Suhteellisuus on harmoninen suhde kahden tai useamman mittakaavaisen elementin välillä.

Jos esimerkiksi yksi elementti kasvaa kooltaan, myös muiden elementtien tulisi kasvaa samaa tahtia, jotta ne pysyisivät oikeasuhtaisina.

Suhteellisuus käyttöliittymäsuunnittelussa

Suhteellisen ja epäsuhtaisen logon vertailu on yksi asia, mutta ihmettelet luultavasti: ”Miten tämä toimii käyttöliittymäsuunnittelussa?”. Loppujen lopuksi, eri näytön koot ja laitteet, se ei ole mahdollista pitää oikeasuhtainen UI, eikö? Vastaus tähän kysymykseen on ”Kyllä ja Ei.”

UI:t sisältävät tyypillisesti staattisten ja nestemäisten elementtien yhdistelmän.

  • Staattiset elementit pysyvät samankokoisina riippumatta siitä, kuinka suuri tai pieni näyttö on.
  • Nestemäiset elementit skaalautuvat tiettyyn prosenttiosuuteen säiliöstään.

Määritelmällisesti staattisten elementtien ja nestemäisten elementtien vertailu ei koskaan johtaisi oikeasuhtaiseen ulkoasuun, koska ne eivät skaalautuisi samassa suhteessa. Käyttäjät eivät kuitenkaan tyypillisesti vaihda laitetta käyttäessään käyttöliittymääsi.

Tämä mielessä pitäen on mahdollista käyttää suhteellisuutta käyttöliittymäsuunnittelussa. Se ei kuitenkaan välttämättä ole niin kuin odottaisit.

Mittayksiköt käyttöliittymäsuunnittelussa

Olet todennäköisesti kuullut termiä ”pikseli” käytettävän useimmiten digitaalisten tuotteiden mittayksikkönä. Tämä oli yleisesti hyväksyttävää vuoteen 2010 asti, jolloin Apple esitteli Retina-näytön.

Retina-näyttö muutti tapaa, jolla ajattelemme ”kokoa”, sillä se sisälsi kaksi kertaa enemmän pikseleitä näytön neliötuumaa kohti. Vaikka elementin koko Retina-näytön ja muun kuin Retina-näytön välillä näyttää samalta, elementin muodostavien pikselien kokonaismäärä on hyvin erilainen. Esimerkiksi painike, joka on 48 pikseliä pitkä tavallisessa näytössä, olisi nyt 96 pikseliä pitkä Retina-näytössä pikselitiheyden vuoksi.

Sen jälkeen on tullut saataville monia erilaisia High Pixel Density (HPD) -näyttöjä moniin eri merkkeihin ja laitteisiin. Onneksi HPD-näytöt määritellään yleensä sen mukaan, kuinka paljon enemmän pikseleitä mahtuu neliötuumaan kuin tavalliseen 1X-pikselitiheyden näyttöön.

Esimerkiksi useimpia näyttöjä voidaan kuvata 1X, 2X tai 3X pikselitiheydellä.

Termi ”pikseli” on edelleen yleisesti hyväksytty kuvaamaan elementin kokoa. Sekaannusten välttämiseksi monet suunnittelijat käyttävät kuitenkin mieluummin termiä ”piste” tai ”pt”, joka kuvaa kokoa näytön pikselitiheydestä riippumatta.

Tämän oppitunnin loppupuolella käytämme termejä ”pt” ja ”px” vaihdellen mittayksikkönä kuvaamaan elementtien välisiä suhteita suunnittelussamme.

8pt-ristikkojärjestelmä

Työskennellessämme suunnitteluohjelmistolla, kuten Illustratorilla, Photoshopilla, Sketchillä, XD:llä, Figmalla jne. on hyvin tavallista, että muotoilijat käyttävät suunnittelussaan apuna ristikkoja tai sarakkeita. Monet tällä kurssilla käsitellyistä suunnittelun periaatteista voidaan saavuttaa ristikoiden tai sarakkeiden avulla, joten ei ole yllättävää, että ne ovat suosittu työkalu suunnittelijan työkalupakissa.

On kuitenkin yksi tietty strategia, joka toimii poikkeuksellisen hyvin mittasuhteiden kannalta. Tämä strategia tunnetaan nimellä 8pt Grid System.

8pt Grid System otettiin ensimmäisen kerran käyttöön Googlen Material Design -määrittelyssä. Onneksi se on melko helppo ymmärtää. Pohjimmiltaan haluat käyttää ruudukkoa, joka koostuu 8 x 8 pt:n ruuduista. Kun suunnittelet tämän ruudukon päälle, haluat varmistaa, että kaikki elementit kiinnittyvät ruudukkoon.

Tämän tuloksena syntyy elementtejä, joiden mitat ovat aina jaollisia 8:lla. Suunnittelemalla tällä tavalla on helppo pitää elementit oikeasuhtaisina ja luoda samalla pystysuuntainen rytmi koko suunnitteluun.

Miksi 8 pistettä?

8pt-järjestelmä on yleisimmin käytetty kahdesta ensisijaisesta syystä:

  • Yleisimmät näytön mitat ovat jaettavissa 8:lla, jolloin suunnittelustasi tulee erittäin terävä ja selkeä suurimmalla osalla laitteista (ei jaettuja pikseleitä).
  • Suositeltu perusfonttikoko webissä on 16px. Tämän ansiosta kehittäjät voivat skaalata verkkosivun elementtejä REM-yksiköissä ja pysyä samalla uskollisena ruudukkojärjestelmälle.

Kaiken kaikkiaan 8 pisteen käyttämisestä ruudukkoon on enemmän hyötyä kuin minkä tahansa muun luvun käyttämisestä. Voit kuitenkin käyttää numeroa, kuten 10pt tai 12pt, jos se sopii sinulle paremmin.

Miksi ei 4 pistettä?

Googlen Material Design -spekseissä TODELLA suositellaan 4pt:n käyttämistä ”pienemmille komponenteille, kuten ikonografialle ja typografialle”. Suurin osa UI-elementeistä voidaan kuitenkin edelleen käsitellä 8pt-järjestelmällä, joten se on suositumpi aluksi.

Kultainen leikkaus

8pt-ruutujärjestelmällä on selkeät etunsa UI-suunnittelussa, mutta jos teet nopean Google-haun hakusanalla ”Proportion in UI Design”, saat etusivun täyteen tuloksia, jotka koskevat kultaista leikkausta.

Kultasuhde on 1:1,618 ja sen uskotaan olevan matematiikan ja esteettisen kauneuden leikkauspiste. Monet suunnittelijat jättävät ruudukkojärjestelmät kokonaan huomiotta ja suosivat sen sijaan mittasuhteiden luomista kultaisen leikkauksen avulla.

Esimerkkejä siitä, miten kultaista leikkausta on käytetty kaikkeen Gutenbergin Raamatusta nykypäivän logosuunnitteluun ja luonnossa esiintyviin ilmiöihin, on runsaasti. On kuitenkin muitakin, jotka uskovat, että kultaisen leikkauksen kauneus on pelkkää myyttiä.

Sitä huolimatta on kiistatonta, että monet ovat ihastuneet kultaiseen leikkaukseen, joten se on varmasti mainitsemisen arvoinen asia tällä oppitunnilla.

Kultaisen leikkauksen käyttäminen käyttöliittymäsuunnittelussa

Kurssin oppitunnilla 4 puhuimme siitä, että ulkoasun suunnittelussa ei saisi olla enempää kuin 3-4 tasoa hierarkkista tasoa käyttöliittymän tietyssä osassa. Tätä ajatellen voit soveltaa kultaista leikkausta suunnittelussasi noudattamalla seuraavia yksinkertaisia ohjeita:

Määritä suorakulmion korkeus ja kerro tämä luku 1,618:lla leveyden löytämiseksi. Näin syntyy ”kultainen suorakulmio.”

Yllä olevassa esimerkissä lähtölukumme on 350pt, mutta voit käyttää mitä tahansa haluamaasi lukua.

Jaa kultainen suorakulmio täydellisiin neliöihin. Jokaisesta täydellisestä neliöstä syntyy uusi, pienempi Kultainen suorakulmio.

Jatka Kultaisen suorakulmion jakamista, kunnes sinulla on 3-4 erikokoista täydellistä neliötä.

Käytä kunkin neliön kokoa ”paikkamerkkinä”, joka auttaa rikkomaan asettelua ja viestimään suunnittelun hierarkiasta.

Kokonaisuutena tuloksena on esteettinen ja sopusuhtainen suunnittelu. Katso tätä esimerkkiä Prototypr.io-sivustolta.

Starting With Constraints

Nyt kun olemme käsitelleet joitakin menetelmiä mittasuhteiden määrittämiseksi käyttöliittymäsuunnittelussa, keskustellaanpa muutamista hyvistä lähtökohdista. Kun aloitat ensin rajoitteista, on helpompi rakentaa käyttöliittymäsi näiden rajoitteiden ympärille.

Mobile First Design

Lausekkeen ”Mobile First” keksi Luke Wroblewski samannimisessä kirjassaan. Termi saavutti suosiota suunnittelijoiden keskuudessa keinona torjua halua tunkea enemmän tavaraa käyttöliittymään vain siksi, että siihen on runsaasti tilaa.

Keskittymällä ensin mobiilisuunnitteluun suunnittelijat joutuvat kiertämään mobiililaitteiden rajoitteet ja keskittymään siihen, mikä on todella tärkeää. Tämän seurauksena käyttäjäkokemus pysyy johdonmukaisena eri laitteiden välillä, koska käyttöliittymän päätarkoitus pysyy huomion keskipisteenä.

fonttikoko

Kuten aiemmin mainittiin, runkotekstin oletusarvoinen fonttikoko webissä on 16 px useimmissa yleisimmissä selaimissa. Tätä pienempi voi aiheuttaa odottamatonta zoomauskäyttäytymistä Applen mobiililaitteissa. Tämän vuoksi on yleisesti suositeltavaa jättää 16px perusfonttikooksi ja määritellä loput fonttikoot (otsikot, pieni teksti, kuvatekstit, tarrat jne.) sen mukaisesti.

Voidaan määritellä nämä fonttikoot suhteellisuus huomioiden noudattamalla Google Materialin muotoilun speksejä ja valitsemalla koot 4pt:n askelin, kuten Bootstrapin tyyliohjeet fonttikoolle.

Huomautus: fonttikokojen kasvattaminen kultaisen leikkauksen mukaan ei ole suositeltavaa, koska erot kunkin fonttikoon välillä olisivat aivan liian suuret. Esimerkiksi, jos aloittaisit perusfonttikoolla 16 ja kertoisit jokaisen otsikkotason 1,618:lla, tuloksena olisi H1-otsikko, jonka koko olisi 177,4 pts, mikä olisi erittäin hankalaa luettavuuden kannalta.

Nappulan koko

Toinen rajoittava tekijä, joka on otettava huomioon, on suunnittelussasi käytettävän syöttömenetelmän tarkkuus. Tässä nimenomaisessa tapauksessa tarkoitamme sormia, peukaloita, kursoreita ja stylus-kyniä.

Sormet ja peukalot ovat paljon leveämpiä ja epätarkempia kuin kursorit tai stylus-kynät. Tämän vuoksi on tärkeää varmistaa, että painikkeiden, syötteiden, kuvakkeiden tai muiden kosketuspisteiden koot valitaan huolellisesti näiden rajoitusten huomioon ottamiseksi.

GooglenMaterial Design suosittelee, että kosketuspisteiden korkeus mobiililaitteissa on vähintään 48pt ja leveys 48pt, ja niiden välissä on vähintään 8pt.

Sisällön leveys

Sisällön leveys

Sisällön leveys on juoksevaa tekstiä, mikä tarkoittaa sitä, että se täyttää vaaka- ja pystysuuntaisen ja vertikaalisen paikan, jos vain se pystyy siihen. Tästä ominaisuudesta huolimatta on hyvä käytäntö määritellä sisällölle minimi- ja maksimileveys.

Sisällön minimileveys voidaan määrittää näytön minimileveyden mukaan, jota suunnittelusi tukee. Pienin näytön resoluutio, jota useimmat suunnittelijat tukevat, on 320px (eli 1X) leveä. Minimileveys kannattaa kuitenkin valita todellisen käyttäjätiedon perusteella, jos se on mahdollista saada. Google Analytics on hyvä paikka tällaisten tietojen etsimiseen.

Vaikka sisällön leveys voi täyttää niin suuren ruudun kuin sille on annettu, ei yleensä suositella, että sisältösi ulottuu yli 52 merkin riville. Tämä viittaisi siihen, että sisällön enimmäisleveys voidaan määrittää käyttämällä todellista runkotekstiä sen normaalilla fonttikoolla ja etsimällä mukava sisällön leveys, joka sopii tälle alueelle.

Johtopäätös

Johtopäätöksenä voidaan todeta, että mittasuhteet ovat hyödyllinen suunnitteluperiaate. Huolimatta staattisten ja nestemäisten elementtien yhdistelmästä, sopusuhtainen käyttöliittymä voidaan silti saavuttaa käyttämällä 8pt-ruutujärjestelmää, kultaista leikkausta tai muuta menetelmää. Kun alat määritellä elementtien mittoja, on yleinen käytäntö aloittaa rajoituksista, kuten laitteesta, kirjasinkoosta, painikkeiden koosta ja sisällön leveydestä. Kun peruskoot on määritelty, elementtejä on paljon helpompi skaalata niiden mukaisesti.

Seuraava oppitunti
Suunnittelun periaatteet: Valkoinen tila

Edellinen oppitunti
Suunnittelun periaatteet: Painotus

Palaute

Miten tätä oppituntia voisi parantaa? Jätä palautteesi alla!