4 asioita Jokaisen suunnittelijan tulisi tietää välilyönnistä
Välilyönti (tai "negatiivinen tila") on tyhjää tilaa sivun esineiden välillä ja sen ympärillä. Välilyönnin elementit graafisissa käyttöliittymissä ovat:
- Marginaalit, paddings ja umpinaiset
- Kuva- ja graafisten kohteiden ympärillä oleva tila
- Rivien välinen etäisyys ja kirjainten välinen etäisyys tekstisisältöön
Vaikka jotkut ihmiset saattavat harkita välilyöntejä arvokkaiden näyttösumujen tuhlausta, se on olennainen osa suunnittelua. Itse asiassa välilyönti on yhtä tärkeä kuin sisällön. Kuten Jan Tschichold sanoi:
Välilyöntiä on pidettävä aktiivisena elementtinä, ei passiivisena taustana
Kaikki hyvät käyttöliittymät sisältävät oikeat välilyöntiarvot kaikkiin sivun elementteihin ylhäältä alas. Sivun tyhjätila voi olla yhtä tärkeä kuin käyttöliittymän elementtien käytössä oleva tila, koska teksti, painikkeet, logot ja muut kohteet tarvitsevat tilaa hengittää.
Tässä artikkelissa näet, kuinka käytät tyhjää tilaa mallissasi, jotta se olisi puhdas, selkeä tunne:
1. Parantaa tekstin luettavuutta
Välilyönti pystyy lukemaan paljon helpommin vähentämällä tekstin kävijöiden määrää kerralla. Välilyönnin puuttuminen (jumiutunut sivu) ei anna käyttäjille mahdollisuutta lukea sisältöä. Toisaalta oikein käytetyssä välilyönnissä on osoitettu lisäävän tekstin ymmärtämistä jopa 20 prosenttiin, kuten huomautti Dmitry Fadeyev .
Kaksi tärkeää asiaa pitää mielessä, kun tekstisisältösi optimoidaan kappalemarginaalit ja riviväli (tekstin jokaisen rivin välinen tila). Jälkimmäinen voi parantaa huomattavasti tekstiryhmän luettavuutta. Yleisesti ottaen, mitä suurempi etäisyys, sitä paremmin käyttäjä saa sen lukemisen aikana (vaikkakin liikaa riviä voi tehdä linjat irti).
2. Suhteiden selvittäminen
Koko ulkoasu syntyy sen osien summasta ja sisällölliset suhteet määritellään ympäröivän välilyönnin avulla. Läheisyyden lain mukaan esineitä lähellä toisiaan näyttävät samanlaisilta. Välilyönti toimii tässä tapauksessa visuaalisena vihjeenä. Katso alla oleva kuva:
Gestaltin säädökset sanovat, että lähellä olevat kohteet näkyvät yhtenä "yksikkönä"; valkoinen tila toimii visuaalisena vihjeenä.
Lähes kaikki, jotka näkevät tämän kuvan, huomaavat kaksi ympyräryhmää pikemminkin kuin vain 12 ympyrää. Piirit ovat kaikki samanlaisia ja ainoa ero niiden välillä on niiden välilyöntien määrä, joka erottaa ne.
Ryhmien ryhmittely on mahdollista pienentämällä niiden välistä tilaa ja lisäämällä niiden välistä tilaa ja muita sivun elementtejä.
Käyttöliittymissä tämä tarkoittaa, että lähellä olevat kohteet näkyvät yhtenä "yksikkönä". Esimerkiksi web-lomakkeiden yhteydessä on hyvä sijoittaa tarrat läheisten asiaan liittyvien kenttien ympärille objektin luomiseksi. Kun tarrat sijoitetaan lähemmäs kenttiä, niiden välinen suhde on paljon selkeää käyttäjille.
Tiedot välitetään paljon selkeämmin, kun tarroja sijoitetaan lähempänä niille aloille, joihin ne liittyvät.
3. Houkutteleminen
Suunnittelijat voivat käyttää välilyöntejä viestimään yhdellä silmäyksellä tärkeimpiä. Etäisyyden ja huomion välinen suhde on; suurempi etäisyys kiinnittää huomiota. Muiden elementtien puuttuminen vain lisää nykyisiä elementtejä enemmän. On mahdollista käyttää välilyöntiä eduksi - tehdä vaeltelevia silmiä tietyille sivuelementeille. Lisäpyyhkiytyminen tietyn sisällön ympärillä saattaa käyttäjien huomion tähän alueeseen yksinkertaisesti, koska näytöllä ei ole mitään muuta huomiota. Niinpä mitä enemmän esineitä ympäröivä välilyönti, sitä enemmän silmä on kiinnitetty siihen.
4. Luo visuaalinen hierarkia
Kun välilyöntiä käytetään asianmukaisesti, sivun avulla voidaan luoda yleinen virtaus ja tasapaino, mikä puolestaan auttaa ilmoittamaan suunnittelun tarkoituksen. Välilyönti voi tukea yleistä hierarkiaa. Se tuottaa joko symmetriaa tai epäsymmetriaa.
Symmetria luo muistia ja harmoniaa:
Mailchimp, kuten näette, on suuri avustaja valkoiselle tilalle heidän suunnitelmissaan. Kun kävijät skannaavat kotisivua, "Rekisteröidy ilmainen" -painike kiinnittää huomionsa lähes välittömästi. Symmetrian avulla on mahdollista luoda tasapainoinen ulkoasu yhtä tärkeällä oikealla ja vasemmalla osalla.
Vaikka asymmetria kiinnittää huomiota:
Epäsymmetria on hieno tapa tuoda huomiota tietyn sivun alueelle.
Kun elementti käyttää epäsymmetristä tilaa, se erotu toisista ympäröivistä elementeistä.
johtopäätös
Välilyönti ei ole hukkatilaa, se on tehokas työkalu. Se voi olla yhtä tärkeä kuin kuvatiedon, tekstin tai muiden käyttöliittymien kohteena oleva tila, koska jopa tyhjä tila palvelee tarkoitusta ja tukee ulkoasun visuaalista eheyttä.
Vaikka näyttää siltä, että on yksinkertainen aihe, tyhjätilaa voi olla vaikea hallita, koska välilyönnin soveltaminen on sekä taidetta että tieteen osaa. Todellinen ymmärrys siitä, kuinka paljon tyhjää tilaa on käytettävä hyvän layoutin luomiseen vaatii käytäntöä.